Fix when not working for non-ref source when immediate

Author: MetRonnie

src/components/cylc/Drawer.vue

@@ -87,7 +87,7 @@ import Header from '@/components/cylc/Header.vue'
 import Workflows from '@/views/Workflows.vue'
 import { mdiHome, mdiInformationOutline } from '@mdi/js'
 import pkg from '@/../package.json'
-import { when } from '@/utils'
+import { when } from '@/utils/reactivity'
 import { useDrawer } from '@/utils/toolbar'
 
 export const initialWidth = 260

src/components/cylc/log/Log.vue

@@ -42,7 +42,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { useTemplateRef, watch, onBeforeUnmount, nextTick } from 'vue'
 import { useScroll, useVModel, whenever } from '@vueuse/core'
-import { when } from '@/utils'
+import { when } from '@/utils/reactivity'
 import {
   mdiMouseMoveUp
 } from '@mdi/js'

src/components/cylc/tree/TreeItem.vue

@@ -176,7 +176,7 @@ import {
   isFlowNone,
 } from '@/utils/tasks'
 import { getIndent, getNodeChildren } from '@/components/cylc/tree/util'
-import { once } from '@/utils'
+import { once } from '@/utils/reactivity'
 import { useToggle } from '@vueuse/core'
 import FlowNumsChip from '@/components/cylc/common/FlowNumsChip.vue'
 

src/components/cylc/workspace/Toolbar.vue

@@ -210,7 +210,7 @@ import {
   mdiAccount
 } from '@mdi/js'
 import { startCase } from 'lodash'
-import { until } from '@/utils'
+import { until } from '@/utils/reactivity'
 import { useDrawer, useNavBtn, toolbarHeight } from '@/utils/toolbar'
 import WorkflowState from '@/model/WorkflowState.model'
 import graphql from '@/mixins/graphql'

src/utils/index.js renamed to src/utils/reactivity.js

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ref, watch } from 'vue'
+import { ref, toValue, watch } from 'vue'
 
 /**
  * Watch source until it is truthy, then call the callback (and stop watching).
@@ -27,7 +27,8 @@ import { ref, watch } from 'vue'
  * @param {import('vue').WatchOptions?} options
  */
 export function when (source, callback, options = {}) {
-  if (source.value) {
+  const { immediate = true } = options
+  if (immediate && toValue(source)) {
     callback()
     return
   }
@@ -39,7 +40,7 @@ export function when (source, callback, options = {}) {
         callback()
       }
     },
-    options
+    { ...options, immediate: false }
   )
 }
 

tests/unit/utils/index.spec.js renamed to tests/unit/utils/reactivity.spec.js

@@ -15,8 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { nextTick, ref } from 'vue'
-import { once, when, until } from '@/utils/index'
+import { nextTick, ref, computed } from 'vue'
+import { once, when, until } from '@/utils/reactivity'
+
+const truthySources = () => [
+  ref(true),
+  computed(() => true),
+  () => true,
+]
 
 describe.each([
   { func: when, description: 'watches source until true and then stops watching' },
@@ -44,16 +50,15 @@ describe.each([
 })
 
 describe('when()', () => {
-  it('works for a source that is already truthy', () => {
-    const source = ref(true)
+  it.for(truthySources())('works for already-truthy source %s', (source) => {
     let counter = 0
     when(source, () => counter++)
     expect(counter).toEqual(1)
   })
 })
 
 describe('once()', () => {
-  it('returns a ref that permanently toggles to true when the source bevomes truthy', async () => {
+  it('returns a ref that permanently toggles to true when the source becomes truthy', async () => {
     const source = ref(false)
     const myRef = once(source)
     expect(myRef.value).toEqual(false)
@@ -65,8 +70,7 @@ describe('once()', () => {
     expect(myRef.value).toEqual(true)
   })
 
-  it('works for a source that is already truthy', () => {
-    const source = ref(true)
+  it.for(truthySources())('works for already-truthy source %s', (source) => {
     const myRef = once(source)
     expect(myRef.value).toEqual(true)
   })