Skip to content

Commit

Permalink
desktop-gui: add toggle buttons to expand/collapse all sub folders. c…
Browse files Browse the repository at this point in the history
Martin Sikora committed Feb 24, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 14c8449 commit d90ae85
Showing 4 changed files with 98 additions and 3 deletions.
55 changes: 55 additions & 0 deletions packages/desktop-gui/cypress/integration/specs_list_spec.js
Original file line number Diff line number Diff line change
@@ -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)
20 changes: 19 additions & 1 deletion packages/desktop-gui/src/specs/specs-list.jsx
Original file line number Diff line number Diff line change
@@ -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 ?
21 changes: 19 additions & 2 deletions packages/desktop-gui/src/specs/specs-store.js
Original file line number Diff line number Diff line change
@@ -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()
5 changes: 5 additions & 0 deletions packages/desktop-gui/src/specs/specs.scss
Original file line number Diff line number Diff line change
@@ -158,6 +158,11 @@ $max-nesting-level: 14;
display: none;
margin-right: 5px;
}

span {
font-size: 10px;
margin-left: 10px;
}
}
}
}

0 comments on commit d90ae85

Please sign in to comment.