Simplify TreeItem and fix tests

Author: MetRonnie

cypress/component/treeItem.cy.js

@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import TreeItem from '@/components/cylc/tree/TreeItem.vue'
+import {
+  simpleCyclepointNode,
+} from '$tests/unit/components/cylc/tree/tree.data'
+
+// Get lists of: a) all tree item nodes; b) only visible ones.
+Cypress.Commands.add('getNodeTypes', () => {
+  cy.get('.c-treeitem')
+    .then(($els) => {
+      const all = Array.from($els, ({ dataset }) => dataset.nodeType)
+      const visible = all.filter((val, i) => $els[i].checkVisibility())
+      return { all, visible }
+    })
+})
+
+// Expand/collapse the first node of this type.
+Cypress.Commands.add('toggleNode', (nodeType) => {
+  cy.get(`[data-node-type=${nodeType}] .node-expand-collapse-button:first`).click()
+})
+
+describe('TreeItem component', () => {
+  it('expands/collapses children', () => {
+    cy.vmount(TreeItem, {
+      props: {
+        node: simpleCyclepointNode,
+        filteredOutNodesCache: new WeakMap(),
+      },
+    })
+    cy.addVuetifyStyles(cy)
+
+    cy.getNodeTypes()
+      .should('deep.equal', {
+        // Auto expand everything down to task nodes by default
+        all: ['cycle', 'task'],
+        visible: ['cycle', 'task']
+      })
+
+    cy.toggleNode('task')
+    cy.getNodeTypes()
+      .should('deep.equal', {
+        all: ['cycle', 'task', 'job'],
+        visible: ['cycle', 'task', 'job']
+      })
+
+    cy.toggleNode('cycle')
+    cy.getNodeTypes()
+      .should('deep.equal', {
+        // All previously expanded nodes under cycle should be hidden but remain rendered
+        all: ['cycle', 'task', 'job'],
+        visible: ['cycle']
+      })
+
+    cy.toggleNode('cycle')
+    cy.toggleNode('job')
+    cy.getNodeTypes()
+      .should('deep.equal', {
+        // Job node does not use a child TreeItem
+        all: ['cycle', 'task', 'job'],
+        visible: ['cycle', 'task', 'job']
+      })
+  })
+})

src/components/cylc/tree/TreeItem.vue

@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     v-show="!filteredOutNodesCache.get(node)"
     class="c-treeitem"
+    :data-node-type="node.type"
   >
     <div
       class="node d-flex align-center"
@@ -30,7 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="renderExpandCollapseBtn"
         aria-label="Expand/collapse"
         class="node-expand-collapse-button flex-shrink-0"
-        @click="toggleExpandCollapse"
+        @click="toggleExpandCollapse()"
         :style="expandCollapseBtnStyle"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
@@ -134,7 +135,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="ml-2 bg-grey text-white"
                 size="small"
                 link
-                @click="toggleExpandCollapse"
+                @click="toggleExpandCollapse()"
               >
                 +{{ jobMessageOutputs.length - 5 }}
               </v-chip>
@@ -184,6 +185,8 @@ import {
   jobMessageOutputs
 } from '@/utils/tasks'
 import { getIndent, getNodeChildren } from '@/components/cylc/tree/util'
+import { once } from '@/utils'
+import { useToggle } from '@vueuse/core'
 
 export default {
   name: 'TreeItem',
@@ -240,27 +243,22 @@ export default {
     },
   },
 
-  data () {
+  setup (props) {
+    const [isExpanded, toggleExpandCollapse] = useToggle(
+      props.autoExpandTypes.includes(props.node.type)
+    )
+    // Toggles to true when this.isExpanded first becomes true and doesn't get recomputed afterwards
+    const renderChildren = once(isExpanded)
+
     return {
-      manuallyExpanded: null,
+      isExpanded,
+      latestJob,
+      renderChildren,
+      toggleExpandCollapse,
     }
   },
 
   computed: {
-    isExpanded: {
-      get () {
-        return this.manuallyExpanded ?? this.autoExpandTypes.includes(this.node.type)
-      },
-      set (value) {
-        this.manuallyExpanded = value
-      }
-    },
-
-    renderChildren () {
-      // Toggles to true when this.isExpanded first becomes true and doesn't get recomputed afterwards
-      return this.renderChildren || this.isExpanded
-    },
-
     hasChildren () {
       return (
         // "job" nodes have auto-generated "job-detail" nodes
@@ -310,13 +308,6 @@ export default {
     }
   },
 
-  methods: {
-    toggleExpandCollapse () {
-      this.isExpanded = !this.isExpanded
-    },
-    latestJob
-  },
-
   icons: {
     mdiChevronRight,
   },

src/utils/index.js

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 
 /**
  * Watch source until it is truthy, then call the callback (and stop watching).
@@ -27,6 +27,10 @@ import { watch } from 'vue'
  * @param {import('vue').WatchOptions?} options
  */
 export function when (source, callback, options = {}) {
+  if (source.value) {
+    callback()
+    return
+  }
   const unwatch = watch(
     source,
     (ready) => {
@@ -35,7 +39,7 @@ export function when (source, callback, options = {}) {
         callback()
       }
     },
-    { immediate: true, ...options }
+    options
   )
 }
 
@@ -53,3 +57,20 @@ export function until (source, options = {}) {
     when(source, resolve, options)
   })
 }
+
+/**
+ * Return a ref that is permanently set to true when the source becomes truthy.
+ *
+ * @param {import('vue').WatchSource} source
+ * @param {import('vue').WatchOptions?} options
+ * @returns {import('vue').Ref<boolean>}
+ */
+export function once (source, options = {}) {
+  const _ref = ref(false)
+  when(
+    source,
+    () => { _ref.value = true },
+    options
+  )
+  return _ref
+}

tests/unit/components/cylc/tree/tree.data.js

@@ -237,7 +237,7 @@ const simpleWorkflowTree4Nodes = [
           __typename: 'CyclePoint',
           state: 'failed'
         },
-        children: [],
+        children: ['stub'],
         familyTree: [
           {
             id: '~user/workflow1//20100101T0000Z/root',

tests/unit/components/cylc/tree/treeitem.vue.spec.js

@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -116,18 +116,17 @@ describe('TreeItem component', () => {
 
   describe('children', () => {
     it.each([
-      { manuallyExpanded: null, expected: ['CyclePoint', 'TaskProxy'] },
-      { manuallyExpanded: true, expected: ['CyclePoint', 'TaskProxy', 'Job'] },
-      { manuallyExpanded: false, expected: [] },
-    ])('recursively mounts child TreeItems if expanded ($manuallyExpanded)', ({ manuallyExpanded, expected }) => {
+      { autoExpandTypes: undefined, expected: ['CyclePoint', 'TaskProxy'] },
+      { autoExpandTypes: ['workflow', 'cycle', 'family', 'task'], expected: ['CyclePoint', 'TaskProxy', 'Job'] },
+      { autoExpandTypes: ['workflow'], expected: ['CyclePoint'] },
+      { autoExpandTypes: [], expected: [] },
+    ])('recursively mounts child TreeItems ($autoExpandTypes)', ({ autoExpandTypes, expected }) => {
       const wrapper = mountFunction({
         props: {
           node: simpleWorkflowNode,
           filteredOutNodesCache: new WeakMap(),
+          autoExpandTypes,
         },
-        data: () => ({
-          manuallyExpanded,
-        }),
       })
       expect(
         wrapper.findAllComponents({ name: 'TreeItem' })

tests/unit/utils/index.spec.js

@@ -16,7 +16,7 @@
  */
 
 import { nextTick, ref } from 'vue'
-import { when, until } from '@/utils/index'
+import { once, when, until } from '@/utils/index'
 
 describe.each([
   { func: when, description: 'watches source until true and then stops watching' },
@@ -42,3 +42,32 @@ describe.each([
     expect(counter).toEqual(1)
   })
 })
+
+describe('when()', () => {
+  it('works for a source that is already truthy', () => {
+    const source = ref(true)
+    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 () => {
+    const source = ref(false)
+    const myRef = once(source)
+    expect(myRef.value).toEqual(false)
+    source.value = true
+    await nextTick()
+    expect(myRef.value).toEqual(true)
+    source.value = false
+    await nextTick()
+    expect(myRef.value).toEqual(true)
+  })
+
+  it('works for a source that is already truthy', () => {
+    const source = ref(true)
+    const myRef = once(source)
+    expect(myRef.value).toEqual(true)
+  })
+})