Update default layout cypress snapshots.

.github/workflows/test.yml

@@ -98,6 +98,7 @@ jobs:
         with:
             component: true
             install-command: npm i
+            browser: chrome
   # build job
   build:
     needs: [install]

.gitignore

@@ -31,6 +31,7 @@ yalc.lock
 cypress/**/*.diff.png
 cypress/videos
 cypress/screenshots
+cypress/downloads
 
 # cache
 .cache

cypress.config.ts

@@ -10,17 +10,32 @@ export default defineConfig({
       addMatchImageSnapshotPlugin(on, config);
       on('before:browser:launch', (browser, launchOptions) => {
         if (browser.name === 'chrome' && browser.isHeadless) {
-          launchOptions.args.push('--window-size=1280,720');
+          launchOptions.args = launchOptions.args.map((arg) => {
+            if (arg === '--headless=new') {
+              return '--headless';
+            }
 
+            return arg;
+          });
+          // Needs the extra 139 because of the cypress toolbar, this is the size of the window! not size of the viewport
+          launchOptions.args.push(`--window-size=1280,${720 + 139}`);
           // force screen to be non-retina
           launchOptions.args.push('--force-device-scale-factor=1');
+          // force screen to be retina (2800x2400 size)
+          // launchOptions.args.push('--force-device-scale-factor=2')
         }
 
         if (browser.name === 'electron' && browser.isHeadless) {
-          // fullPage screenshot size is 1280x720
           launchOptions.preferences.width = 1280;
           launchOptions.preferences.height = 720;
         }
+
+        if (browser.name === 'firefox' && browser.isHeadless) {
+          launchOptions.args.push('--width=1280');
+          launchOptions.args.push('--height=720');
+        }
+
+        return launchOptions;
       });
       require('@cypress/code-coverage/task')(on, config);
       return config;

cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx

@@ -23,6 +23,8 @@ describe('NonEntitledModal', () => {
       if (image) {
         cy.get(`[src="${image}"]`).should('be.visible');
       }
+      // make sure the scrollbar is hidden to ensure valid snapshot
+      cy.get('.pf-v5-c-modal-box__body').invoke('attr', 'style', 'overflow: hidden');
       elem.matchImageSnapshot();
     });
   });

cypress/run-test.js

@@ -9,7 +9,7 @@ const defaultOptions = {
   updateSnapshots: false,
 };
 
-const defaultCommand = 'npm run cypress run -- --component --browser electron';
+const defaultCommand = 'npm run cypress run -- --component --browser chrome';
 
 if (argv.u || argv.update) {
   defaultOptions.updateSnapshots = true;

cypress/support/component.ts

@@ -54,6 +54,5 @@ declare global {
 }
 
 Cypress.Commands.add('mount', mount)
-
 // Example use:
 // cy.mount(<MyComponent />)