diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts index 8c8229d317..9b5585d471 100644 --- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts +++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts @@ -1,4 +1,3 @@ -/* eslint-disable cypress/no-unnecessary-waiting */ import 'cypress-real-events' describe('dataset pages', () => { @@ -40,6 +39,13 @@ describe('dataset pages', () => { fixture: 'insee-rectangles_200m_menage_erbm.json', } ) + cy.intercept( + 'GET', + '/geoserver/insee/ows?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&OUTPUTFORMAT=csv', + { + fixture: 'population-millesimee-communes-francaises.csv', + } + ) cy.intercept( 'GET', '/explore/dataset/population-millesimee-communes-francaises/download?format=csv&timezone=Europe/Berlin&use_labels_for_header=false', @@ -211,34 +217,33 @@ describe('dataset pages', () => { cy.get('gn-ui-record-metadata') .find('[id="preview"]') .first() - .as('prevSection') + .as('previewSection') }) describe('display', () => { it('should display the tabs', () => { - cy.get('@prevSection') + cy.get('@previewSection') .find('.mat-mdc-tab-labels') .children('div') .should('have.length', 3) }) it('should display the dataset dropdown with at least 1 option', () => { - cy.get('@prevSection') + cy.get('@previewSection') .find('gn-ui-dropdown-selector') - .find('select') - .children('option') + .openDropdown() + .children('button') .should('have.length.gt', 1) }) it('should display the map', () => { - cy.get('@prevSection').find('gn-ui-map').should('be.visible') + cy.get('@previewSection').find('gn-ui-map').should('be.visible') }) it('should display the table', () => { - cy.get('@prevSection') + cy.get('@previewSection') .find('.mat-mdc-tab-labels') .children('div') .eq(1) .click() - cy.wait(1000) - cy.get('@prevSection').find('gn-ui-table').should('be.visible') - cy.get('@prevSection') + cy.get('@previewSection').find('gn-ui-table').should('be.visible') + cy.get('@previewSection') .find('gn-ui-table') .find('table') .find('tbody') @@ -246,64 +251,68 @@ describe('dataset pages', () => { .should('have.length.gt', 0) }) it('should display the chart & dropdowns', () => { - cy.get('@prevSection') + cy.get('@previewSection') .find('.mat-mdc-tab-labels') .children('div') .eq(2) .click() - cy.get('@prevSection').find('gn-ui-chart').should('not.match', ':empty') - cy.get('@prevSection') + cy.get('@previewSection') + .find('gn-ui-chart') + .should('not.match', ':empty') + cy.get('@previewSection') .find('gn-ui-chart-view') .find('gn-ui-dropdown-selector') .filter(':visible') .as('drop') cy.get('@drop').should('have.length', 4) cy.get('@drop').each((dropdown) => { - cy.wrap(dropdown).find('option').should('have.length.greaterThan', 0) + cy.wrap(dropdown) + .openDropdown() + .find('button') + .should('have.length.greaterThan', 0) }) }) }) describe('features', () => { it('MAP : should open a popup on layer click', () => { - cy.get('@prevSection').find('canvas').realClick() + cy.get('@previewSection').find('canvas').realClick() cy.request({ method: 'GET', url: ' https://www.geo2france.fr/geoserver/insee/ows?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=rectangles_200m_menage_erbm&LAYERS=rectangles_200m_menage_erbm&INFO_FORMAT=application%2Fjson&I=249&J=65&WIDTH=296&HEIGHT=296&CRS=EPSG%3A3857&STYLES=&BBOX=-24459.849051256402%2C6237261.508070382%2C337545.9169073383%2C6599267.274028977', failOnStatusCode: false, }) - cy.get('@prevSection').find('gn-ui-feature-detail') + cy.get('@previewSection').find('gn-ui-feature-detail') }) it('TABLE : should scroll', () => { - cy.get('@prevSection') + cy.get('@previewSection') .find('.mat-mdc-tab-labels') .children('div') .eq(1) .click() - cy.get('@prevSection').find('gn-ui-table').find('table').as('table') + cy.get('@previewSection').find('gn-ui-table').find('table').as('table') cy.get('@table').scrollTo('bottom', { ensureScrollable: false }) cy.get('@table').find('tr:last-child').should('be.visible') }) it('CHART : should change the chart on options change', () => { - cy.get('@prevSection') + cy.get('@previewSection') .find('.mat-mdc-tab-labels') .children('div') .eq(2) .click() - cy.get('@prevSection') + cy.get('@previewSection') .find('gn-ui-chart-view') .find('gn-ui-dropdown-selector') - .find('select') .filter(':visible') .as('drop') - cy.get('@drop').eq(0).select('pie chart') - cy.get('@drop').eq(2).select('men') - cy.get('@drop').eq(3).select('average') - cy.get('@prevSection') + cy.get('@drop').eq(0).selectDropdownOption('pie') + cy.get('@drop').eq(2).selectDropdownOption('men') + cy.get('@drop').eq(3).selectDropdownOption('average') + cy.get('@previewSection') .find('gn-ui-chart') .invoke('attr', 'ng-reflect-type') .should('include', 'pie') - cy.get('@prevSection') + cy.get('@previewSection') .find('gn-ui-chart') .invoke('attr', 'ng-reflect-value-property') .should('include', 'average(men)') @@ -368,7 +377,6 @@ describe('dataset pages', () => { .find('gn-ui-download-item') .first() .click() - cy.wait(4000) cy.exec('ls cypress/downloads').then((result) => { const fileList = result.stdout.split('\n') @@ -417,19 +425,14 @@ describe('dataset pages', () => { .find('button') .first() .click({ force: true }) - // eslint-disable-next-line cypress/unsafe-to-chain-command - cy.wait(500) - .get('body') - .focus() - .realClick() - .window() - .then((win) => { - win.navigator.clipboard.readText().then((text) => { - expect(text).to.eq( - 'https://www.geo2france.fr/geoserver/insee/ows' - ) - }) + // attempt to make the whole page focused + cy.get('body').focus() + cy.get('body').realClick() + cy.window().then((win) => { + win.navigator.clipboard.readText().then((text) => { + expect(text).to.eq('https://www.geo2france.fr/geoserver/insee/ows') }) + }) }) it('goes to dataset on click', () => { let targetLink @@ -458,8 +461,8 @@ describe('record with file distributions', () => { cy.get('gn-ui-record-metadata') .find('[id="preview"]') .first() - .as('prevSection') - cy.get('@prevSection') + .as('previewSection') + cy.get('@previewSection') .find('.mat-mdc-tab-labels') .children('div') .eq(1) @@ -467,12 +470,12 @@ describe('record with file distributions', () => { }) it('should display the distributions by priority', () => { - cy.get('@prevSection') + cy.get('@previewSection') .find('gn-ui-dropdown-selector') .last() - .find('select') - .children('option') - .then((options) => options.toArray().map((el) => el.text)) + .openDropdown() + .children('button') + .then((options) => options.toArray().map((el) => el.innerText.trim())) .should('deep.eq', ['csv (csv)', 'json (json)', 'geojson (geojson)']) }) }) diff --git a/apps/datahub-e2e/src/e2e/datasets.cy.ts b/apps/datahub-e2e/src/e2e/datasets.cy.ts index f22f9f0e15..747c81b584 100644 --- a/apps/datahub-e2e/src/e2e/datasets.cy.ts +++ b/apps/datahub-e2e/src/e2e/datasets.cy.ts @@ -4,7 +4,6 @@ describe('datasets', () => { beforeEach(() => { cy.clearCookies() cy.visit('/search') - cy.viewport(1700, 1200) // aliases cy.get('gn-ui-results-list-item').find('a').as('results') @@ -13,7 +12,7 @@ describe('datasets', () => { .then(($results) => $results.length) .as('resultsCount') cy.get('gn-ui-filter-dropdown').as('filters') - cy.get('gn-ui-sort-by').as('sortBy') + cy.get('gn-ui-sort-by').find('gn-ui-dropdown-selector').as('sortBy') cy.get('[data-cy="addMoreBtn"]').as('addMoreBtn') }) @@ -46,15 +45,15 @@ describe('datasets', () => { }) it('should sort by relevance initially', () => { cy.get('@sortBy') - .find('option:checked') - .invoke('val') + .getActiveDropdownOption() + .invoke('attr', 'data-cy-value') .should('equal', 'desc,_score') }) }) describe('display of dataset previews', () => { it('should display a logo for first and a placeholder for second result', () => { - cy.get('@sortBy').find('select').select('desc,createDate') // this makes the order reliable + cy.get('@sortBy').selectDropdownOption('desc,createDate') // this makes the order reliable cy.get('@firstResult') .find('gn-ui-thumbnail') .children('div') @@ -417,7 +416,7 @@ describe('datasets', () => { describe('sorting results', () => { describe('sort by popularity', () => { beforeEach(() => { - cy.get('@sortBy').find('select').select('desc,userSavedCount') + cy.get('@sortBy').selectDropdownOption('desc,userSavedCount') cy.get('@results') .find('gn-ui-favorite-star') .find('span') @@ -436,14 +435,14 @@ describe('datasets', () => { describe('sort by date', () => { beforeEach(() => { // first sort by popularity - cy.get('@sortBy').find('select').select('desc,userSavedCount') + cy.get('@sortBy').selectDropdownOption('desc,userSavedCount') cy.get('@results') .find('[data-cy="recordTitle"]') .then(($titles) => $titles.toArray().map((title) => title.innerText.trim()) ) .as('initialResultTitles') - cy.get('@sortBy').find('select').select('desc,createDate') + cy.get('@sortBy').selectDropdownOption('desc,createDate') }) it('changes the results order', () => { cy.get('@initialResultTitles').then((initialResultTitles) => { diff --git a/apps/datahub-e2e/src/e2e/header.cy.ts b/apps/datahub-e2e/src/e2e/header.cy.ts index 7370f4d2dd..9a282d372b 100644 --- a/apps/datahub-e2e/src/e2e/header.cy.ts +++ b/apps/datahub-e2e/src/e2e/header.cy.ts @@ -121,18 +121,18 @@ describe('header', () => { it('should sort results by latest date', () => { cy.get('gn-ui-fuzzy-search').next().find('button').first().click() cy.get('gn-ui-record-preview-row').should('not.eq', '@initialList') - cy.get('gn-ui-sort-by option:selected').should( - 'have.value', - 'desc,createDate' - ) + cy.get('gn-ui-sort-by gn-ui-dropdown-selector') + .getActiveDropdownOption() + .invoke('attr', 'data-cy-value') + .should('equal', 'desc,createDate') }) it('should filter results by popularity', () => { cy.get('gn-ui-fuzzy-search').next().find('button').eq(1).click() cy.get('gn-ui-record-preview-row').should('not.eq', '@initialList') - cy.get('gn-ui-sort-by option:selected').should( - 'have.value', - 'desc,userSavedCount' - ) + cy.get('gn-ui-sort-by gn-ui-dropdown-selector') + .getActiveDropdownOption() + .invoke('attr', 'data-cy-value') + .should('equal', 'desc,userSavedCount') }) }) }) diff --git a/apps/datahub-e2e/src/e2e/home.cy.ts b/apps/datahub-e2e/src/e2e/home.cy.ts index cb1dbec2a2..12952662a2 100644 --- a/apps/datahub-e2e/src/e2e/home.cy.ts +++ b/apps/datahub-e2e/src/e2e/home.cy.ts @@ -90,10 +90,13 @@ describe('header', () => { .find('[data-cy=recordTitle]') .invoke('text') .as('favoriteTitle') - cy.get('@favoriteItem').find('gn-ui-favorite-star').click() + cy.get('@favoriteItem').find('gn-ui-favorite-star button').click() + cy.wait(100) // show my favorites only - cy.get('datahub-header-badge-button[label$=favorites]').realClick() + cy.get('datahub-header-badge-button[label$=favorites] button').click({ + force: true, + }) }) it('only shows one record, same as the favorite one', () => { cy.get('gn-ui-results-list-item').should('have.length', 1) diff --git a/apps/datahub-e2e/src/e2e/organizations.cy.ts b/apps/datahub-e2e/src/e2e/organizations.cy.ts index 9ca828b647..9182f01df0 100644 --- a/apps/datahub-e2e/src/e2e/organizations.cy.ts +++ b/apps/datahub-e2e/src/e2e/organizations.cy.ts @@ -3,12 +3,10 @@ import 'cypress-real-events' describe('organizations', () => { beforeEach(() => { cy.visit('/home/organisations') - cy.viewport(1700, 1200) // aliases cy.get('gn-ui-organisations-sort') .find('gn-ui-dropdown-selector') - .find('select') .as('sort') cy.get('gn-ui-pagination').children('div').as('pagination') cy.get('gn-ui-organisations') @@ -35,7 +33,7 @@ describe('organizations', () => { }) it('should display the welcome panel', () => { cy.get('gn-ui-organisations-sort').should('be.visible') - cy.get('@sort').children('option').should('have.length', 4) + cy.get('@sort').openDropdown().children('button').should('have.length', 4) }) it('should display organizations with thumbnail, title and description', () => { cy.get('@organizations').find('gn-ui-thumbnail').should('be.visible') @@ -93,28 +91,28 @@ describe('organizations', () => { } it('should order the list alphabetically (asc)', () => { - cy.get('@sort').select('asc,name') + cy.get('@sort').selectDropdownOption('asc,name') cy.get('@organizationsName').then(($orgsName) => { const orderedNames = getInnerTexts($orgsName) expect(orderedNames).to.eql(orderBy(orderedNames, 1)) }) }) it('should order the list alphabetically (desc)', () => { - cy.get('@sort').select('desc,name') + cy.get('@sort').selectDropdownOption('desc,name') cy.get('@organizationsName').then(($orgsName) => { const orderedNames = getInnerTexts($orgsName) expect(orderedNames).to.eql(orderBy(orderedNames, -1)) }) }) it('should order the list by dataset count (asc)', () => { - cy.get('@sort').select('asc,recordCount') + cy.get('@sort').selectDropdownOption('asc,recordCount') cy.get('@organizationsRecordsCount').then(($orgsRecordsCount) => { const orderedCounts = getInnerTexts($orgsRecordsCount) expect(orderedCounts).to.eql(orderBy(orderedCounts, 1)) }) }) it('should order the list by dataset count (desc)', () => { - cy.get('@sort').select('desc,recordCount') + cy.get('@sort').selectDropdownOption('desc,recordCount') cy.get('@organizationsRecordsCount').then(($orgsRecordsCount) => { const orderedCounts = getInnerTexts($orgsRecordsCount) expect(orderedCounts).to.eql(orderBy(orderedCounts, -1)) diff --git a/apps/datahub-e2e/src/support/commands.ts b/apps/datahub-e2e/src/support/commands.ts index 8489226293..0f1151b769 100644 --- a/apps/datahub-e2e/src/support/commands.ts +++ b/apps/datahub-e2e/src/support/commands.ts @@ -14,6 +14,11 @@ declare namespace Cypress { interface Chainable { login(): void clearFavorites(): void + + // interaction with gn-ui-dropdown-selector + openDropdown(): Chainable> + selectDropdownOption(value: string): void + getActiveDropdownOption(): Chainable> } } @@ -24,7 +29,7 @@ Cypress.Commands.add('login', () => { if (err.message.includes('postMessage')) return false }) - cy.visit('/geonetwork/srv/eng/catalog.signin?debug') + cy.visit('/geonetwork/srv/eng/catalog.signin?debug&redirect=blargz') // this will point to a 404 cy.get('#inputUsername').type('admin', { force: true }) cy.get('#inputPassword').type('admin', { force: true }) cy.get('[name="gnSigninForm"]').submit() @@ -65,6 +70,38 @@ Cypress.Commands.add('clearFavorites', () => { }) }) +// previous value should be a component +Cypress.Commands.add( + 'openDropdown', + { prevSubject: true }, + (dropdownElement) => { + cy.get('body').click() // first click on the document to close other dropdowns + cy.wrap(dropdownElement).click('right') // click on the right size to avoid the label + return cy.get('.cdk-overlay-container').find('[role=listbox]') + } +) + +// previous value should be a component +Cypress.Commands.add( + 'selectDropdownOption', + { prevSubject: true }, + (dropdownElement, value: string) => { + cy.wrap(dropdownElement) + .openDropdown() + .find(`[data-cy-value="${value}"]`) + .click() + } +) + +// previous value should be a component +Cypress.Commands.add( + 'getActiveDropdownOption', + { prevSubject: true }, + (dropdownElement) => { + return cy.wrap(dropdownElement).openDropdown().find(`[data-cy-active]`) + } +) + // -- This is a parent command -- // Cypress.Commands.add('login', (email, password) => { ... }) // diff --git a/apps/datahub-e2e/src/support/e2e.ts b/apps/datahub-e2e/src/support/e2e.ts index 185d654ec6..d5bbe59f1b 100644 --- a/apps/datahub-e2e/src/support/e2e.ts +++ b/apps/datahub-e2e/src/support/e2e.ts @@ -15,3 +15,10 @@ // Import commands.js using ES2015 syntax: import './commands' + +beforeEach(() => { + cy.viewport(1900, 1400) + + // all tests should show english translations + window.localStorage.setItem('geonetwork-ui-language', 'en') +}) diff --git a/apps/datahub/src/app/home/home-header/home-header.component.html b/apps/datahub/src/app/home/home-header/home-header.component.html index a3c0dc80c5..ad5c13e1e8 100644 --- a/apps/datahub/src/app/home/home-header/home-header.component.html +++ b/apps/datahub/src/app/home/home-header/home-header.component.html @@ -4,6 +4,7 @@ >

record.metadata.updateFrequency

-

- {{ metadata.updateFrequency }} +

+ domain.record.updateFrequency.{{ metadata.updateFrequency }}

record.metadata.updateStatus

-

- {{ metadata.status }} +

+ domain.record.status.{{ metadata.status }}

diff --git a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html index 1b8cd32822..1ada7a17af 100644 --- a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html +++ b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html @@ -4,6 +4,7 @@ type="light" [disabled]="currentPage === 1" (buttonClick)="previousPage()" + extraClass="!px-[3px]" > chevron_left @@ -24,6 +25,7 @@ type="light" [disabled]="currentPage === totalPages" (buttonClick)="nextPage()" + extraClass="!px-[3px]" > chevron_right diff --git a/libs/ui/elements/src/lib/pagination/pagination.component.html b/libs/ui/elements/src/lib/pagination/pagination.component.html index 0fcca3c9c4..e437572f64 100644 --- a/libs/ui/elements/src/lib/pagination/pagination.component.html +++ b/libs/ui/elements/src/lib/pagination/pagination.component.html @@ -35,7 +35,7 @@ class="mr-2" [disabled]="currentPage === 1" [type]="'light'" - extraClass="!p-[3px]" + extraClass="!px-[3px]" data-cy="prev-page" > navigate_before @@ -45,7 +45,7 @@ id="navigate_next" [disabled]="currentPage === nPages" [type]="'light'" - extraClass="!p-[3px]" + extraClass="!px-[3px]" data-cy="next-page" > navigate_next diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css index 8c761459e8..a03749aa95 100644 --- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css +++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css @@ -1,10 +1,13 @@ +:host { + --input-height: 3.5em; +} .clear-btn { - width: 3.5em; + width: var(--input-height); + right: var(--input-height); height: 100%; - right: 3.5em; } .search-btn { - width: 3.5em; + width: var(--input-height); height: 100%; border-left-width: 0.1em; } @@ -15,9 +18,14 @@ mat-icon { font-size: 1.5em; } input { - height: 3.5em; + height: var(--input-height); padding: 1.05em; + padding-right: calc(2 * var(--input-height)); +} +input:placeholder-shown { + text-overflow: ellipsis; } + .mat-mdc-option.suggestion.mat-mdc-option-active { background-color: var(--color-primary-lightest); } diff --git a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html index 5841b35d5a..972dd747f9 100644 --- a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html +++ b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html @@ -64,6 +64,8 @@ " (click)="onSelectValue(choice)" (keydown)="selectIfEnter($event, choice)" + [attr.data-cy-value]="choice.value.toString()" + [attr.data-cy-active]="isSelected(choice) ? 'true' : undefined" > {{ choice.label | translate }} diff --git a/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html b/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html index c349307c74..ec31fa6d17 100644 --- a/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html +++ b/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html @@ -1,6 +1,7 @@