From d90ae85ba7b7063737f6089ab3ac449a5bde1450 Mon Sep 17 00:00:00 2001 From: Martin Sikora Date: Mon, 24 Feb 2020 09:48:30 +0100 Subject: [PATCH 1/6] desktop-gui: add toggle buttons to expand/collapse all sub folders. #6282 --- .../cypress/integration/specs_list_spec.js | 55 +++++++++++++++++++ packages/desktop-gui/src/specs/specs-list.jsx | 20 ++++++- packages/desktop-gui/src/specs/specs-store.js | 21 ++++++- packages/desktop-gui/src/specs/specs.scss | 5 ++ 4 files changed, 98 insertions(+), 3 deletions(-) diff --git a/packages/desktop-gui/cypress/integration/specs_list_spec.js b/packages/desktop-gui/cypress/integration/specs_list_spec.js index 24a4c1e9e7cb..79ca64f4b336 100644 --- 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 index 98a654708618..a763589c4973 100644 --- 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 {
- {nestingLevel === 0 ? `${spec.displayName} tests` : spec.displayName} + { + nestingLevel === 0 ? + <> + {spec.displayName} tests + + collapse all{' | '} + expand all + + : + spec.displayName + }
{ isExpanded ? diff --git a/packages/desktop-gui/src/specs/specs-store.js b/packages/desktop-gui/src/specs/specs-store.js index e83b887db38c..b9bf8121ce34 100644 --- 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 index ffdc871bd793..b02ccb24189f 100644 --- 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; + } } } } From 8b3d9977390599acaf11f2665984fe7134320196 Mon Sep 17 00:00:00 2001 From: Martin Sikora Date: Mon, 24 Feb 2020 10:10:22 +0100 Subject: [PATCH 2/6] lint code changes --- packages/desktop-gui/cypress/integration/specs_list_spec.js | 2 +- packages/desktop-gui/src/specs/specs-list.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/desktop-gui/cypress/integration/specs_list_spec.js b/packages/desktop-gui/cypress/integration/specs_list_spec.js index 79ca64f4b336..a4a9ea884ad7 100644 --- a/packages/desktop-gui/cypress/integration/specs_list_spec.js +++ b/packages/desktop-gui/cypress/integration/specs_list_spec.js @@ -322,7 +322,7 @@ describe('Specs List', function () { 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) diff --git a/packages/desktop-gui/src/specs/specs-list.jsx b/packages/desktop-gui/src/specs/specs-list.jsx index a763589c4973..7576f322531d 100644 --- a/packages/desktop-gui/src/specs/specs-list.jsx +++ b/packages/desktop-gui/src/specs/specs-list.jsx @@ -149,7 +149,7 @@ class SpecsList extends Component { expand all : - spec.displayName + spec.displayName } { From 7971b045bfba6c57e455af3e17429e74505a038a Mon Sep 17 00:00:00 2001 From: Martin Sikora Date: Tue, 25 Feb 2020 15:48:38 +0100 Subject: [PATCH 3/6] hide collapse/expand buttons when root spec has no folders --- .../cypress/integration/specs_list_spec.js | 98 ++++++++++++------- packages/desktop-gui/src/specs/specs-list.jsx | 11 ++- packages/desktop-gui/src/specs/specs-store.js | 8 ++ 3 files changed, 77 insertions(+), 40 deletions(-) diff --git a/packages/desktop-gui/cypress/integration/specs_list_spec.js b/packages/desktop-gui/cypress/integration/specs_list_spec.js index a4a9ea884ad7..65c3c72d57d5 100644 --- a/packages/desktop-gui/cypress/integration/specs_list_spec.js +++ b/packages/desktop-gui/cypress/integration/specs_list_spec.js @@ -280,57 +280,83 @@ describe('Specs List', function () { }) context('expand/collapse root specs', function () { - beforeEach(function () { - this.ipc.getSpecs.yields(null, this.specs) + describe('with folders', function () { + beforeEach(function () { + this.ipc.getSpecs.yields(null, this.specs) - this.openProject.resolve(this.config) - }) + 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('collapsing root spec will keep root itself expanded', function () { + 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 }) + it('collapses all children folders', function () { + cy.get('.level-0 .folder-name').find('a:first').click({ multiple: true }) - const lastCollapsedFolderSelector = '.folder-collapsed:last .folder-name' - const rootSpecCollapsedFoldersSelector = '.folder-collapsed' + 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', 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', 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', 1) - cy.get(lastCollapsedFolderSelector).click() - cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 0) + cy.get(lastCollapsedFolderSelector).click() + cy.get(rootSpecCollapsedFoldersSelector).should('have.length', 0) + }) + + it('expand all expands all sub folders', function () { + 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) + }) }) - 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) + describe('without folders', function () { + beforeEach(function () { + this.ipc.getSpecs.yields(null, { + integration: [ + { + name: 'app_spec.coffee', + relative: 'app_spec.coffee', + }, + { + name: 'account_new_spec.coffee', + relative: 'account_new_spec.coffee', + }, + ], + unit: [], + }) + + this.openProject.resolve(this.config) + }) - 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) + it('hides expand/collapse buttons when there are no folders', function () { + cy.get('.level-0 .folder-name a').should('not.exist') + }) }) }) diff --git a/packages/desktop-gui/src/specs/specs-list.jsx b/packages/desktop-gui/src/specs/specs-list.jsx index 7576f322531d..bdcddf7a1fa1 100644 --- a/packages/desktop-gui/src/specs/specs-list.jsx +++ b/packages/desktop-gui/src/specs/specs-list.jsx @@ -144,10 +144,13 @@ class SpecsList extends Component { nestingLevel === 0 ? <> {spec.displayName} tests - - collapse all{' | '} - expand all - + {specsStore.specHasFolders(spec) ? + + collapse all{' | '} + expand all + : + null + } : spec.displayName } diff --git a/packages/desktop-gui/src/specs/specs-store.js b/packages/desktop-gui/src/specs/specs-store.js index b9bf8121ce34..7c66c31f1300 100644 --- a/packages/desktop-gui/src/specs/specs-store.js +++ b/packages/desktop-gui/src/specs/specs-store.js @@ -94,6 +94,14 @@ export class SpecsStore { return `specsFilter-${id}-${shortenedPath}` } + specHasFolders (spec) { + if (spec instanceof Spec) { + return false + } + + return spec.children.some((s) => s instanceof Folder) + } + _tree (files) { if (this.filter) { files = _.filter(files, (spec) => { From 6ad158fd495978e40c34f4fd1e77d09ca4db10cd Mon Sep 17 00:00:00 2001 From: Martin Sikora Date: Wed, 26 Feb 2020 09:07:13 +0100 Subject: [PATCH 4/6] fix indentation --- packages/desktop-gui/src/specs/specs-list.jsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/desktop-gui/src/specs/specs-list.jsx b/packages/desktop-gui/src/specs/specs-list.jsx index bdcddf7a1fa1..d03175973b2a 100644 --- a/packages/desktop-gui/src/specs/specs-list.jsx +++ b/packages/desktop-gui/src/specs/specs-list.jsx @@ -142,16 +142,16 @@ class SpecsList extends Component { { nestingLevel === 0 ? - <> - {spec.displayName} tests - {specsStore.specHasFolders(spec) ? - - collapse all{' | '} - expand all - : - null - } - : + <> + {spec.displayName} tests + {specsStore.specHasFolders(spec) ? + + collapse all{' | '} + expand all + : + null + } + : spec.displayName } From 79a58f3f4f92ac1491d997bfd914c29571c24b84 Mon Sep 17 00:00:00 2001 From: Chris Breiding Date: Wed, 26 Feb 2020 16:34:13 -0500 Subject: [PATCH 5/6] fix lint issue and refactor a bit --- .../desktop-gui/src/specs/folder-model.js | 4 +++- packages/desktop-gui/src/specs/specs-list.jsx | 2 +- packages/desktop-gui/src/specs/specs-store.js | 24 +++++++++++-------- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/desktop-gui/src/specs/folder-model.js b/packages/desktop-gui/src/specs/folder-model.js index ddeb48d6486c..9fd27c7497c1 100644 --- a/packages/desktop-gui/src/specs/folder-model.js +++ b/packages/desktop-gui/src/specs/folder-model.js @@ -1,11 +1,13 @@ import { action, computed, observable } from 'mobx' -export default class Directory { +export default class Folder { @observable path @observable displayName @observable isExpanded = true @observable children = [] + isFolder = true + constructor ({ path, displayName }) { this.path = path this.displayName = displayName diff --git a/packages/desktop-gui/src/specs/specs-list.jsx b/packages/desktop-gui/src/specs/specs-list.jsx index d03175973b2a..c30eb5f58243 100644 --- a/packages/desktop-gui/src/specs/specs-list.jsx +++ b/packages/desktop-gui/src/specs/specs-list.jsx @@ -128,7 +128,7 @@ class SpecsList extends Component { _selectSpecFolder (specFolderPath, e) { e.preventDefault() - specsStore.setExpandSpecFolder(specFolderPath) + specsStore.toggleExpandSpecFolder(specFolderPath) } _folderContent (spec, nestingLevel) { diff --git a/packages/desktop-gui/src/specs/specs-store.js b/packages/desktop-gui/src/specs/specs-store.js index 7c66c31f1300..4e1f1ae44b63 100644 --- a/packages/desktop-gui/src/specs/specs-store.js +++ b/packages/desktop-gui/src/specs/specs-store.js @@ -59,13 +59,17 @@ export class SpecsStore { } @action setExpandSpecFolder (spec, isExpanded) { - spec.setExpanded(isExpanded === undefined ? !spec.isExpanded : isExpanded) + spec.setExpanded(isExpanded) + } + + @action toggleExpandSpecFolder (spec) { + spec.setExpanded(!spec.isExpanded) } @action setExpandSpecChildren (spec, isExpanded) { - this._depthFirstIterateSpecs(spec, (fileOfFolder) => { - if (fileOfFolder instanceof Folder) { - fileOfFolder.setExpanded(isExpanded) + this._depthFirstIterateSpecs(spec, (specOrFolder) => { + if (specOrFolder.isFolder) { + specOrFolder.setExpanded(isExpanded) } }) } @@ -94,12 +98,12 @@ export class SpecsStore { return `specsFilter-${id}-${shortenedPath}` } - specHasFolders (spec) { - if (spec instanceof Spec) { + specHasFolders (specOrFolder) { + if (!specOrFolder.isFolder) { return false } - return spec.children.some((s) => s instanceof Folder) + return specOrFolder.children.some((child) => child.isFolder) } _tree (files) { @@ -143,12 +147,12 @@ export class SpecsStore { } _depthFirstIterateSpecs (root, func) { - for (const child of root.children) { + _.each(root.children, (child) => { func(child) - if (child instanceof Folder) { + if (child.isFolder) { this._depthFirstIterateSpecs(child, func) } - } + }) } } From ceb8034c9b25fe67f26a604529470dc6e47f9d4e Mon Sep 17 00:00:00 2001 From: Jennifer Shehane Date: Fri, 28 Feb 2020 10:47:58 +0630 Subject: [PATCH 6/6] Move collapse/expand links to right side of folder header --- packages/desktop-gui/src/specs/specs.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/desktop-gui/src/specs/specs.scss b/packages/desktop-gui/src/specs/specs.scss index b02ccb24189f..e74c616ec499 100644 --- a/packages/desktop-gui/src/specs/specs.scss +++ b/packages/desktop-gui/src/specs/specs.scss @@ -144,7 +144,7 @@ $max-nesting-level: 14; &.level-0 { >div>.folder-name { - padding: 5px 20px; + padding: 5px 10px 5px 20px; background-color: #F9F9F9; font-weight: normal; text-transform: uppercase; @@ -153,6 +153,9 @@ $max-nesting-level: 14; color: #777; line-height: 18px; font-family: $font-sans; + display: flex; + flex-direction: row; + justify-content: space-between; i { display: none;