Merge pull request #645 from geonetwork/fixes-datahub-e2e

Fixes and improvements to e2e tests
geonetwork · Oct 6, 2023 · b4cddfc · b4cddfc
2 parents e5584f9 + 81356bf
commit b4cddfc
Show file tree

Hide file tree

Showing 19 changed files with 135 additions and 75 deletions.
diff --git 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,99 +217,102 @@ 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')
           .children('tr')
           .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,21 +461,21 @@ 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)
       .click()
   })
 
   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
@@ -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
@@ -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
@@ -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
@@ -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))