From d359fee515403b521db46ecfedcb6998de9ce005 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Fri, 16 Dec 2022 16:58:18 +0000
Subject: [PATCH] Fix bug when expanding/collapsing tree view while filters are
 active

---
 src/components/cylc/tree/Tree.vue |  7 ++--
 tests/e2e/specs/tree.cy.js        | 67 +++++++++++++++++++++++--------
 2 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/src/components/cylc/tree/Tree.vue b/src/components/cylc/tree/Tree.vue
index 871df4852c..92dd3633fa 100644
--- 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
index 6d48abd468..dc3de3e869 100644
--- 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('(+')
+      })
   })
 })