Datahub: Add pagination for table component

apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts

@@ -19,16 +19,31 @@ beforeEach(() => {
   )
   cy.intercept(
     'GET',
-    '/geoserver/insee/ows?REQUEST=GetMap&SERVICE=WMS&VERSION=1.3.0&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=true&LAYERS=rectangles_200m_menage_erbm*',
+    '/geoserver/insee/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&OUTPUTFORMAT=application%2Fjson&PROPERTYNAME=oid%2Cidk%2Cmen%2Cmen_occ5%2Cpt_men_occ5&COUNT=10&SRSNAME=EPSG%3A4326',
     {
-      fixture: 'insee-rectangles_200m_menage_erbm.png',
+      fixture: 'insee-wfs-table-data.json',
     }
   )
+  //Note: The real WFS of this example responds with an error to this request due to a missing primary key in the table
   cy.intercept(
     'GET',
-    '/geoserver/insee/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&OUTPUTFORMAT=application%2Fjson*',
+    'geoserver/insee/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&OUTPUTFORMAT=application%2Fjson&PROPERTYNAME=oid%2Cidk%2Cmen%2Cmen_occ5%2Cpt_men_occ5&COUNT=10&SRSNAME=EPSG%3A4326&STARTINDEX=10',
     {
-      fixture: 'insee-rectangles_200m_menage_erbm.json',
+      fixture: 'insee-wfs-table-data-page2.json',
+    }
+  )
+  cy.intercept(
+    'GET',
+    'geoserver/insee/wfs?SERVICE=WFS&REQUEST=GetFeature&VERSION=2.0.0&TYPENAMES=insee%3Arectangles_200m_menage_erbm&OUTPUTFORMAT=application%2Fjson&PROPERTYNAME=oid%2Cidk%2Cmen%2Cmen_occ5%2Cpt_men_occ5&COUNT=10&SRSNAME=EPSG%3A4326&SORTBY=idk+D',
+    {
+      fixture: 'insee-wfs-table-data-sort-idk.json',
+    }
+  )
+  cy.intercept(
+    'GET',
+    '/geoserver/insee/ows?REQUEST=GetMap&SERVICE=WMS&VERSION=1.3.0&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=true&LAYERS=rectangles_200m_menage_erbm*',
+    {
+      fixture: 'insee-rectangles_200m_menage_erbm.png',
     }
   )
   cy.intercept(
@@ -389,19 +404,19 @@ describe('dataset pages', () => {
 
         cy.get('@previewSection').find('gn-ui-map-legend').should('be.visible')
       })
-      it('should display the table', () => {
+      it('should display the table with 10 rows', () => {
         cy.get('@previewSection')
           .find('.mat-mdc-tab-labels')
           .children('div')
           .eq(1)
           .click()
-        cy.get('@previewSection').find('gn-ui-table').should('be.visible')
+        cy.get('@previewSection').find('gn-ui-data-table').should('be.visible')
         cy.get('@previewSection')
-          .find('gn-ui-table')
+          .find('gn-ui-data-table')
           .find('table')
           .find('tbody')
           .children('tr')
-          .should('have.length.gt', 0)
+          .should('have.length', 10)
         cy.screenshot({ capture: 'fullPage' })
       })
       it('should display the chart & dropdowns', () => {
@@ -441,16 +456,53 @@ describe('dataset pages', () => {
         })
         cy.get('@previewSection').find('gn-ui-feature-detail')
       })
-      it('TABLE : should scroll', () => {
-        cy.get('@previewSection')
-          .find('.mat-mdc-tab-labels')
-          .children('div')
-          .eq(1)
-          .click()
-        cy.get('@previewSection').find('gn-ui-table').find('table').as('table')
-        cy.get('@table').scrollTo('bottom', { ensureScrollable: false })
+      describe('TABLE', () => {
+        beforeEach(() => {
+          cy.get('@previewSection')
+            .find('.mat-mdc-tab-labels')
+            .children('div')
+            .eq(1)
+            .click()
+          cy.get('@previewSection')
+            .find('gn-ui-data-table')
+            .find('table')
+            .as('table')
+        })
 
-        cy.get('@table').find('tr:last-child').should('be.visible')
+        it('TABLE sort: should sort the table on column click', () => {
+          cy.get('@table').find('th').eq(1).click()
+          cy.get('@table')
+            .find('td')
+            .eq(1)
+            .invoke('text')
+            .then((firstValue) => {
+              cy.get('@table').find('th').eq(1).click()
+              cy.get('@table')
+                .find('td')
+                .eq(1)
+                .invoke('text')
+                .should('not.eq', firstValue)
+            })
+        })
+        it('TABLE pagination: should display 10 rows with different data when clicking next page', () => {
+          cy.get('@previewSection').find('mat-paginator').as('pagination')
+          cy.get('@table')
+            .find('td')
+            .eq(1)
+            .invoke('text')
+            .then((firstValue) => {
+              cy.get('@pagination').find('button').eq(2).click()
+              cy.get('@table')
+                .find('td')
+                .eq(1)
+                .invoke('text')
+                .should('not.eq', firstValue)
+              cy.get('@table')
+                .find('tbody')
+                .children('tr')
+                .should('have.length', 10)
+            })
+        })
       })
       it('CHART : should change the chart on options change', () => {
         cy.get('@previewSection')