diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts index a84af33308..d2ebe0edd2 100644 --- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts +++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts @@ -384,6 +384,24 @@ describe('dataset pages', () => { expect(/\S/.test(isFileDownloaded)).to.be.true }) }) + it('displays the full list after clicking two times on one filter', () => { + cy.get('gn-ui-data-downloads') + .find('gn-ui-button') + .children('button') + .eq(1) + .as('filterFormat') + cy.get('@filterFormat').click() + cy.get('[data-cy="download-format"]') + .filter(':visible') + .its('length') + .then((l1) => { + cy.get('@filterFormat').click() + cy.get('[data-cy="download-format"]') + .filter(':visible') + .its('length') + .then((l2) => expect(l2).to.not.equal(l1)) + }) + }) }) }) }) diff --git a/libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts b/libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts index 3c56e86809..de6a46d76e 100644 --- a/libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts +++ b/libs/ui/elements/src/lib/downloads-list/downloads-list.component.spec.ts @@ -54,7 +54,7 @@ describe('DownloadsListComponent', () => { expect(component).toBeTruthy() }) - describe('when a list of downloads', () => { + describe('with a non-empty list of downloads', () => { let items: DebugElement[] beforeEach(() => { @@ -71,7 +71,7 @@ describe('DownloadsListComponent', () => { }) }) - describe('when a list of downloads is empty', () => { + describe('with an empty list of downloads', () => { let item: DebugElement beforeEach(() => { @@ -96,7 +96,7 @@ describe('DownloadsListComponent', () => { expect(items.length).toBe(1) }) }) - describe('derivates color and format from link', () => { + describe('derives color and format from link', () => { let items: DebugElement[] beforeEach(() => { @@ -165,6 +165,40 @@ describe('DownloadsListComponent', () => { expect(component.filteredLinks).toEqual([]) }) }) + + describe('toggling formats', () => { + it('removes already enabled formats', () => { + component.activeFilterFormats = ['excel', 'csv', 'shp'] + component.toggleFilterFormat('excel') + expect(component.activeFilterFormats).toEqual(['csv', 'shp']) + }) + it('adds disabled formats', () => { + component.activeFilterFormats = ['excel', 'csv', 'shp'] + component.toggleFilterFormat('json') + expect(component.activeFilterFormats).toEqual([ + 'excel', + 'csv', + 'shp', + 'json', + ]) + }) + it('sets filter to all if disabling the last format', () => { + component.activeFilterFormats = ['excel', 'csv'] + component.toggleFilterFormat('excel') + component.toggleFilterFormat('csv') + expect(component.activeFilterFormats).toEqual(['all']) + }) + it('toggling all disables other formats if disabled', () => { + component.activeFilterFormats = ['excel', 'csv'] + component.toggleFilterFormat('all') + expect(component.activeFilterFormats).toEqual(['all']) + }) + it('toggling all does nothing if already enabled', () => { + component.activeFilterFormats = ['all'] + component.toggleFilterFormat('all') + expect(component.activeFilterFormats).toEqual(['all']) + }) + }) }) describe('filter buttons visibility', () => { diff --git a/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts b/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts index d4e8a0839a..861bfd2737 100644 --- a/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts +++ b/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts @@ -40,10 +40,20 @@ export class DownloadsListComponent { toggleFilterFormat(format: FilterFormat): void { if (format === 'all') { this.activeFilterFormats = ['all'] + return + } + if (this.isFilterActive(format)) { + this.activeFilterFormats = this.activeFilterFormats.filter( + (f: string) => format !== f + ) } else { - this.activeFilterFormats = this.isFilterActive(format) - ? this.activeFilterFormats.filter((f: string) => format !== f) - : [...this.activeFilterFormats.filter((f) => f !== 'all'), format] + this.activeFilterFormats = [ + ...this.activeFilterFormats.filter((f) => f !== 'all'), + format, + ] + } + if (this.activeFilterFormats.length === 0) { + this.activeFilterFormats = ['all'] } }