Fix bug when expanding/collapsing tree view while filters are active

cylc · Dec 19, 2022 · d359fee · d359fee
1 parent 6263298
commit d359fee
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 19 deletions.
diff --git a/src/components/cylc/tree/Tree.vue b/src/components/cylc/tree/Tree.vue
@@ -45,6 +45,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-on="on"
                 @click="expandAll((treeitem) => !['task', 'job', 'job-details'].includes(treeitem.node.type))"
                 icon
+                data-cy="expand-all"
               >
                 <v-icon>{{ svgPaths.expandIcon }}</v-icon>
               </v-btn>
@@ -57,6 +58,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-on="on"
                 @click="collapseAll()"
                 icon
+                data-cy="collapse-all"
               >
                 <v-icon>{{ svgPaths.collapseIcon }}</v-icon>
               </v-btn>
@@ -251,10 +253,9 @@ export default {
       } else if (node.type === 'task') {
         filtered = matchNode(node.node, this.tasksFilter.name, this.tasksFilter.states)
       }
-      if (!this.treeItemCache[node.id]) {
-        this.treeItemCache[node.id] = {}
+      if (this.treeItemCache[node.id]) {
+        this.treeItemCache[node.id].filtered = filtered
       }
-      this.treeItemCache[node.id].filtered = filtered
       return filtered
     },
     removeAllFilters () {

diff --git a/tests/e2e/specs/tree.cy.js b/tests/e2e/specs/tree.cy.js
@@ -250,25 +250,60 @@ describe('Tree view', () => {
         .should('have.length', 1)
         .contains('retrying')
     })
+  })
 
-    it('should show a summary of tasks if the number of selected items is greater than the maximum limit', () => {
+  describe('Expand/collapse all buttons', () => {
+    it('Collapses and expands as expected', () => {
       cy.visit('/#/tree/one')
-      cy
-        .get('[data-cy=filter-task-states]')
-        .click({ force: true })
-      // eslint-disable-next-line no-lone-blocks
-      TaskState.enumValues.forEach(state => {
-        cy.get('.v-list-item')
-          .contains(state.name)
-          .click({ force: true })
-      })
-      // Click outside to close dropdown
-      cy.get('noscript')
+      cy.get('.node-data-task')
+        .contains('sleepy')
+        .as('sleepyTask')
+        .should('be.visible')
+      cy.get('[data-cy=collapse-all]')
+        .click()
+        .get('@sleepyTask')
+        .should('not.be.visible')
+        .get('[data-cy=expand-all]')
+        .click()
+        .get('@sleepyTask')
+        .should('be.visible')
+    })
+    it.only('Works when tasks are being filtered', () => {
+      cy.visit('/#/tree/one')
+      cy.get('.node-data-task')
+        .contains('sleepy')
+        .as('sleepyTask')
+        .should('be.visible')
+      cy.get('[data-cy=filter-task-name]')
+        .type('sleep')
+      cy.get('[data-cy=collapse-all]')
+        .click()
+        .get('@sleepyTask')
+        .should('not.be.visible')
+        .get('[data-cy=expand-all]')
+        .click()
+        .get('@sleepyTask')
+        .should('be.visible')
+    })
+  })
+
+  it('should show a summary of tasks if the number of selected items is greater than the maximum limit', () => {
+    cy.visit('/#/tree/one')
+    cy
+      .get('[data-cy=filter-task-states]')
+      .click({ force: true })
+    // eslint-disable-next-line no-lone-blocks
+    TaskState.enumValues.forEach(state => {
+      cy.get('.v-list-item')
+        .contains(state.name)
         .click({ force: true })
-      cy.get('.v-select__slot')
-        .should($select => {
-          expect($select).to.contain('(+')
-        })
     })
+    // Click outside to close dropdown
+    cy.get('noscript')
+      .click({ force: true })
+    cy.get('.v-select__slot')
+      .should($select => {
+        expect($select).to.contain('(+')
+      })
   })
 })