desktop-gui: add toggle buttons to expand/collapse all sub folders. c…

…ypress-io#6282
martinsik · Feb 24, 2020 · d90ae85 · d90ae85
1 parent 14c8449
commit d90ae85
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 3 deletions.
diff --git a/packages/desktop-gui/cypress/integration/specs_list_spec.js b/packages/desktop-gui/cypress/integration/specs_list_spec.js
@@ -279,6 +279,61 @@ describe('Specs List', function () {
       })
     })
 
+    context('expand/collapse root specs', function () {
+      beforeEach(function () {
+        this.ipc.getSpecs.yields(null, this.specs)
+
+        this.openProject.resolve(this.config)
+      })
+
+      it('collapsing root spec will keep root itself expanded', () => {
+        cy.get('.level-0 .folder-name').find('a:first').click({ multiple: true })
+        cy.get('.folder.folder-collapsed').should('have.length', 3)
+        cy.get('.folder.folder-expanded').should('have.length', 2)
+      })
+
+      it('collapses all children folders', () => {
+        cy.get('.level-0 .folder-name').find('a:first').click({ multiple: true })
+
+        const lastCollapsedFolderSelector = '.folder-collapsed:last .folder-name'
+        const rootSpecCollapsedFoldersSelector = '.folder-collapsed'
+
+        cy.get(lastCollapsedFolderSelector).click()
+        cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 3)
+
+        cy.get(lastCollapsedFolderSelector).click()
+        cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 3)
+
+        cy.get(lastCollapsedFolderSelector).click()
+        cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 3)
+
+        cy.get(lastCollapsedFolderSelector).click()
+        cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 3)
+
+        cy.get(lastCollapsedFolderSelector).click()
+        cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 2)
+
+        cy.get(lastCollapsedFolderSelector).click()
+        cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 2)
+
+        cy.get(lastCollapsedFolderSelector).click()
+        cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 1)
+
+        cy.get(lastCollapsedFolderSelector).click()
+        cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 0)
+      })
+
+      it('expand all expands all sub folders', () => {
+        cy.get('.level-0 .folder-name').find('a:first').click({ multiple: true })
+        cy.get('.folder-expanded').should('have.length', 2)
+        cy.get('.folder-collapsed').should('have.length', 3)
+
+        cy.get('.level-0 .folder-name').find('a:last').click({ multiple: true })
+        cy.get('.folder-expanded').should('have.length', 10)
+        cy.get('.folder-collapsed').should('have.length', 0)
+      })
+    })
+
     context('filtering specs', function () {
       it('scrolls the specs and not the filter', function () {
         this.ipc.getSpecs.yields(null, this.specs)

diff --git a/packages/desktop-gui/src/specs/specs-list.jsx b/packages/desktop-gui/src/specs/specs-list.jsx
@@ -117,6 +117,14 @@ class SpecsList extends Component {
     return projectsApi.runSpec(project, spec, project.chosenBrowser)
   }
 
+  _setExpandRootFolder (specFolderPath, isExpanded, e) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    specsStore.setExpandSpecChildren(specFolderPath, isExpanded)
+    specsStore.setExpandSpecFolder(specFolderPath, true)
+  }
+
   _selectSpecFolder (specFolderPath, e) {
     e.preventDefault()
 
@@ -132,7 +140,17 @@ class SpecsList extends Component {
           <div className="folder-name" onClick={this._selectSpecFolder.bind(this, spec)}>
             <i className={`folder-collapse-icon fas fa-fw ${isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`}></i>
             <i className={`far fa-fw ${isExpanded ? 'fa-folder-open' : 'fa-folder'}`}></i>
-            {nestingLevel === 0 ? `${spec.displayName} tests` : spec.displayName}
+            {
+              nestingLevel === 0 ?
+              <>
+                {spec.displayName} tests
+                <span>
+                  <a onClick={this._setExpandRootFolder.bind(this, spec, false)}>collapse all</a>{' | '}
+                  <a onClick={this._setExpandRootFolder.bind(this, spec, true)}>expand all</a>
+                </span>
+              </> :
+              spec.displayName
+            }
           </div>
           {
             isExpanded ?

diff --git a/packages/desktop-gui/src/specs/specs-store.js b/packages/desktop-gui/src/specs/specs-store.js
@@ -58,8 +58,16 @@ export class SpecsStore {
     this.chosenSpecPath = relativePath
   }
 
-  @action setExpandSpecFolder (spec) {
-    spec.setExpanded(!spec.isExpanded)
+  @action setExpandSpecFolder (spec, isExpanded) {
+    spec.setExpanded(isExpanded === undefined ? !spec.isExpanded : isExpanded)
+  }
+
+  @action setExpandSpecChildren (spec, isExpanded) {
+    this._depthFirstIterateSpecs(spec, (fileOfFolder) => {
+      if (fileOfFolder instanceof Folder) {
+        fileOfFolder.setExpanded(isExpanded)
+      }
+    })
   }
 
   @action setFilter (project, filter = null) {
@@ -125,6 +133,15 @@ export class SpecsStore {
 
     return tree
   }
+
+  _depthFirstIterateSpecs (root, func) {
+    for (const child of root.children) {
+      func(child)
+      if (child instanceof Folder) {
+        this._depthFirstIterateSpecs(child, func)
+      }
+    }
+  }
 }
 
 export default new SpecsStore()
diff --git a/packages/desktop-gui/src/specs/specs.scss b/packages/desktop-gui/src/specs/specs.scss
@@ -158,6 +158,11 @@ $max-nesting-level: 14;
           display: none;
           margin-right: 5px;
         }
+
+        span {
+          font-size: 10px;
+          margin-left: 10px;
+        }
       }
     }
   }