DSEGOG-16 fix failing e2e tests & add date picker fix to cypress

- tests were failing as we weren't waiting for requests to finish after columns got added (which is new in this branch due to the projections work) - also, the date picker fix means date picker tests work locally in headed mode for me
ral-facilities · Sep 7, 2023 · fe85659 · fe85659
1 parent e8aaec0
commit fe85659
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 97 deletions.
diff --git a/cypress/integration/table/search.spec.ts b/cypress/integration/table/search.spec.ts
@@ -39,7 +39,23 @@ describe('Search', () => {
         });
       }).as('getSettings');
 
-      cy.visit('/').wait(['@getSettings']);
+      cy.visit('/', {
+        // need these to ensure Date picker media queries pass
+        // ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
+        onBeforeLoad: (win) => {
+          cy.stub(win, 'matchMedia')
+            .withArgs('(pointer: fine)')
+            .returns({
+              matches: true,
+              addListener: () => {
+                // no-op
+              },
+              removeListener: () => {
+                // no-op
+              },
+            });
+        },
+      }).wait(['@getSettings']);
 
       cy.findByRole('progressbar').should('be.visible');
       cy.findByRole('progressbar').should('not.exist');
@@ -1093,7 +1109,23 @@ describe('Search', () => {
         });
       }).as('getSettings');
 
-      cy.visit('/').wait(['@getSettings']);
+      cy.visit('/', {
+        // need these to ensure Date picker media queries pass
+        // ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
+        onBeforeLoad: (win) => {
+          cy.stub(win, 'matchMedia')
+            .withArgs('(pointer: fine)')
+            .returns({
+              matches: true,
+              addListener: () => {
+                // no-op
+              },
+              removeListener: () => {
+                // no-op
+              },
+            });
+        },
+      }).wait(['@getSettings']);
     });
 
     it('displays appropriate tooltips', () => {

diff --git a/cypress/integration/table/table.spec.ts b/cypress/integration/table/table.spec.ts
@@ -11,25 +11,34 @@ const verifyColumnOrder = (columns: string[]): void => {
 
 describe('Table Component', () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visit('/', {
+      // need these to ensure Date picker media queries pass
+      // ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
+      onBeforeLoad: (win) => {
+        cy.stub(win, 'matchMedia')
+          .withArgs('(pointer: fine)')
+          .returns({
+            matches: true,
+            addListener: () => {
+              // no-op
+            },
+            removeListener: () => {
+              // no-op
+            },
+          });
+      },
+    });
   });
 
-  it('initialises with a time column', () => {
+  it('adds columns in the order they are selected', () => {
     cy.get('[aria-describedby="table-loading-indicator"]').should(
       'have.attr',
       'aria-busy',
       'false'
     );
 
+    // check initialised with time column
     verifyColumnOrder(['Time']);
-  });
-
-  it('adds columns in the order they are selected', () => {
-    cy.get('[aria-describedby="table-loading-indicator"]').should(
-      'have.attr',
-      'aria-busy',
-      'false'
-    );
 
     addInitialSystemChannels(['Shot Number']);
 
@@ -45,14 +54,14 @@ describe('Table Component', () => {
   });
 
   it('moves a column left', () => {
+    addInitialSystemChannels(['Shot Number', 'Active Area']);
+
     cy.get('[aria-describedby="table-loading-indicator"]').should(
       'have.attr',
       'aria-busy',
       'false'
     );
 
-    addInitialSystemChannels(['Shot Number', 'Active Area']);
-
     cy.get(getHandleSelector())
       .first()
       .as('secondColumn')
@@ -71,14 +80,14 @@ describe('Table Component', () => {
   });
 
   it('moves a column right', () => {
+    addInitialSystemChannels(['Shot Number', 'Active Area']);
+
     cy.get('[aria-describedby="table-loading-indicator"]').should(
       'have.attr',
       'aria-busy',
       'false'
     );
 
-    addInitialSystemChannels(['Shot Number', 'Active Area']);
-
     cy.get(getHandleSelector())
       .first()
       .as('secondColumn')
@@ -176,12 +185,6 @@ describe('Table Component', () => {
   });
 
   it('column headers overflow when word wrap is enabled', () => {
-    cy.get('[aria-describedby="table-loading-indicator"]').should(
-      'have.attr',
-      'aria-busy',
-      'false'
-    );
-
     cy.contains('Data Channels').click();
     const channelName = 'CHANNEL_ABCDE';
 
@@ -193,6 +196,12 @@ describe('Table Component', () => {
 
     cy.contains('Add Channels').click();
 
+    cy.get('[aria-describedby="table-loading-indicator"]').should(
+      'have.attr',
+      'aria-busy',
+      'false'
+    );
+
     cy.get('[data-testid^="sort timestamp"] p')
       .invoke('css', 'height')
       .then((height) => {
@@ -217,81 +226,6 @@ describe('Table Component', () => {
       });
   });
 
-  describe.skip('should be able to sort by', () => {
-    it('ascending order', () => {
-      cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
-      // eslint-disable-next-line cypress/no-unnecessary-waiting
-      cy.wait(200);
-      cy.get('[aria-sort="ascending"]').should('exist');
-      cy.get('.MuiTableSortLabel-iconDirectionAsc').should('be.visible');
-      cy.get('tbody').within(() => {
-        cy.get('tr')
-          .first()
-          .within(() => {
-            cy.get('td').first().contains('2022-01-01 00:00:00');
-          });
-      });
-    });
-
-    it('descending order', () => {
-      cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
-      cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
-      cy.get('[aria-sort="descending"]').should('exist');
-      cy.get('.MuiTableSortLabel-iconDirectionDesc').should('be.visible');
-      cy.get('tbody').within(() => {
-        cy.get('tr')
-          .first()
-          .within(() => {
-            cy.get('td').first().contains('2022-01-01 00:00:00');
-          });
-      });
-    });
-
-    it('no order', () => {
-      cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
-      // eslint-disable-next-line cypress/no-unnecessary-waiting
-      cy.wait(200);
-      cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
-      // eslint-disable-next-line cypress/no-unnecessary-waiting
-      cy.wait(200);
-      cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
-      // eslint-disable-next-line cypress/no-unnecessary-waiting
-      cy.wait(200);
-      cy.get('[aria-sort="ascending"]').should('not.exist');
-      cy.get('[aria-sort="descending"]').should('not.exist');
-      cy.get('.MuiTableSortLabel-iconDirectionAsc').should(
-        'have.css',
-        'opacity',
-        '0'
-      );
-      cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist');
-      cy.get('tbody').within(() => {
-        cy.get('tr')
-          .first()
-          .within(() => {
-            cy.get('td').first().contains('2022-01-01 00:00:00');
-          });
-      });
-    });
-
-    it('multiple columns', () => {
-      addInitialSystemChannels(['Shot Number']);
-      cy.get('[data-testid="sort timestamp"]').click().wait('@getRecords');
-      // eslint-disable-next-line cypress/no-unnecessary-waiting
-      cy.wait(200);
-      cy.get('[data-testid="sort shotnum"]').click().wait('@getRecords');
-
-      cy.get('tbody').within(() => {
-        cy.get('tr')
-          .first()
-          .within(() => {
-            cy.get('td').eq(0).contains('2022-01-01 00:00:00');
-            cy.get('td').eq(1).contains('1');
-          });
-      });
-    });
-  });
-
   describe('should be able to search by', () => {
     it('date from', () => {
       cy.get('input[id="from date-time"]').type('2022-01-01 00:00:00');