diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 6f0160803..e919dd1fb 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -98,6 +98,7 @@ jobs: with: component: true install-command: npm i + browser: chrome # build job build: needs: [install] diff --git a/.gitignore b/.gitignore index 3e2e12f3f..7bdc64848 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,7 @@ yalc.lock cypress/**/*.diff.png cypress/videos cypress/screenshots +cypress/downloads # cache .cache diff --git a/cypress.config.ts b/cypress.config.ts index f90523287..38464d49b 100644 --- a/cypress.config.ts +++ b/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; diff --git a/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx b/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx index 41ba90ac7..b8948c2c7 100644 --- a/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx +++ b/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(); }); }); diff --git a/cypress/run-test.js b/cypress/run-test.js index 6e9c56e7b..a62f63b37 100644 --- a/cypress/run-test.js +++ b/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; diff --git a/cypress/snapshots/cypress/component/Banner.cy.tsx/Banner/ -- mounts.snap.png b/cypress/snapshots/cypress/component/Banner.cy.tsx/Banner/ -- mounts.snap.png index e771b9f29..35995f13d 100644 Binary files a/cypress/snapshots/cypress/component/Banner.cy.tsx/Banner/ -- mounts.snap.png and b/cypress/snapshots/cypress/component/Banner.cy.tsx/Banner/ -- mounts.snap.png differ diff --git a/cypress/snapshots/cypress/component/ContextSwitcher/ContextSwitcher.cy.js/ContextSwithcer/ -- should fire cross account request for internal user and render component.snap.png b/cypress/snapshots/cypress/component/ContextSwitcher/ContextSwitcher.cy.js/ContextSwithcer/ -- should fire cross account request for internal user and render component.snap.png index 51d9c14d4..afc38c732 100644 Binary files a/cypress/snapshots/cypress/component/ContextSwitcher/ContextSwitcher.cy.js/ContextSwithcer/ -- should fire cross account request for internal user and render component.snap.png and b/cypress/snapshots/cypress/component/ContextSwitcher/ContextSwitcher.cy.js/ContextSwithcer/ -- should fire cross account request for internal user and render component.snap.png differ diff --git a/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render correctly with few nav items.snap.png b/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render correctly with few nav items.snap.png index aec4d232d..6fca330f2 100644 Binary files a/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render correctly with few nav items.snap.png and b/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render correctly with few nav items.snap.png differ diff --git a/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render correctly with many nav items.snap.png b/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render correctly with many nav items.snap.png index dff8e0f3e..6fca330f2 100644 Binary files a/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render correctly with many nav items.snap.png and b/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render correctly with many nav items.snap.png differ diff --git a/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render with footer at the screen bottom.snap.png b/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render with footer at the screen bottom.snap.png index 912b34173..6fca330f2 100644 Binary files a/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render with footer at the screen bottom.snap.png and b/cypress/snapshots/cypress/component/DefaultLayout.cy.js/Default layout/ -- render with footer at the screen bottom.snap.png differ diff --git a/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should not render modal for unknown entitlement.snap.png b/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should not render modal for unknown entitlement.snap.png index 1c16ced6e..ba31ec162 100644 Binary files a/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should not render modal for unknown entitlement.snap.png and b/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should not render modal for unknown entitlement.snap.png differ diff --git a/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for ansible.snap.png b/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for ansible.snap.png index 1e8a4f644..f9c584335 100644 Binary files a/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for ansible.snap.png and b/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for ansible.snap.png differ diff --git a/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for cost_management.snap.png b/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for cost_management.snap.png index 71cd3fecb..99dc8b7b6 100644 Binary files a/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for cost_management.snap.png and b/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for cost_management.snap.png differ diff --git a/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for insights.snap.png b/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for insights.snap.png index 50d8047cc..f5176433a 100644 Binary files a/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for insights.snap.png and b/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for insights.snap.png differ diff --git a/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for subscriptions.snap.png b/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for subscriptions.snap.png index 4681ddd6d..486cf6825 100644 Binary files a/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for subscriptions.snap.png and b/cypress/snapshots/cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx/NonEntitledModal -- should render modal for subscriptions.snap.png differ diff --git a/cypress/snapshots/cypress/component/UserToggle.cy.js/UserToggle/ -- render correctly.snap.png b/cypress/snapshots/cypress/component/UserToggle.cy.js/UserToggle/ -- render correctly.snap.png index ea221e674..1ee9731af 100644 Binary files a/cypress/snapshots/cypress/component/UserToggle.cy.js/UserToggle/ -- render correctly.snap.png and b/cypress/snapshots/cypress/component/UserToggle.cy.js/UserToggle/ -- render correctly.snap.png differ diff --git a/cypress/support/component.ts b/cypress/support/component.ts index dd8a0ff85..e999620d7 100644 --- a/cypress/support/component.ts +++ b/cypress/support/component.ts @@ -54,6 +54,5 @@ declare global { } Cypress.Commands.add('mount', mount) - // Example use: // cy.mount()