running-tools

commit 7c6a17cfefa0e454a2e4880ba57bae0e1514ecfc
parent fad8587abbbcedaec3ee1a63284cd8913710a3f8
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Sun, 26 May 2024 19:38:55 -0700

Fix issue with TargetSetSelector select updates

Introduced with upgrade to Vue >= 3.4.15, solved by using nextTick()

Diffstat:
M
src/components/TargetSetSelector.vue
 | 
15
++++++++-------
M
tests/unit/components/TargetSetSelector.spec.js
 | 
4
++++

2 files changed, 12 insertions(+), 7 deletions(-)
diff --git a/src/components/TargetSetSelector.vue b/src/components/TargetSetSelector.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { onActivated, ref, watch } from 'vue';
+import { nextTick, onActivated, ref, watch } from 'vue';
 
 import VueFeather from 'vue-feather';
 
@@ -38,7 +38,7 @@ const model = defineModel({
   default: '_new',
 });
 
-const props = defineProps({
+defineProps({
   /**
    * The unit system to use when creating distance targets
    */
@@ -78,7 +78,7 @@ watch(model, (newValue) => {
 /**
  * Update the component vvalue when the internal value changes and create a new set if necessary
  */
-watch(internalValue, (newValue) => {
+watch(internalValue, async (newValue) => {
   if (newValue == '_new') {
     reloadTargetSets();
     let key = Date.now().toString();
@@ -86,7 +86,8 @@ watch(internalValue, (newValue) => {
       name: 'New target set',
       targets: [],
     };
-    internalValue.value = key;
+    await nextTick(); // <select> won't update if value changed immediately
+    model.value = key;
   } else {
     model.value = newValue;
   }
@@ -115,7 +116,7 @@ function revertTargetSet() {
     internalValue.value = [...Object.keys(targetSets.value), '_new'][0];
     if (dialogElement.value.close) dialogElement.value.close();
   }
-};
+}
 
 /**
  * Sort the current target set
@@ -123,14 +124,14 @@ function revertTargetSet() {
 function sortTargetSet() {
   targetSets.value[internalValue.value].targets =
     targetUtils.sort(targetSets.value[internalValue.value].targets);
-};
+}
 
 /**
  * Reload the target sets
  */
 function reloadTargetSets() {
   targetSets.value = storage.get('target-sets', targetUtils.defaultTargetSets);
-};
+}
 
 onActivated(() => {
   reloadTargetSets();
diff --git a/tests/unit/components/TargetSetSelector.spec.js b/tests/unit/components/TargetSetSelector.spec.js
@@ -81,6 +81,10 @@ test('Create New Target Set option should correctly add target set', async () =>
   // Add target set
   await wrapper.find('select').setValue('_new');
 
+  // Assert new target set selected (key is unix timestamp in milliseconds)
+  const key = wrapper.find('select').element.value
+  expect(parseInt(key)).to.be.closeTo(parseInt(Date.now().toString()), 1000);
+
   // Assert target set options were correctly updated
   const options = wrapper.findAll('option');
   expect(options[0].element.text).to.equal('1st target set');