chore: fix visual test lib (#1325)

* chore: fix visual test lib * chore: update popups * chore: adjust scrolling * chore: adjust scrolling * chore: change nav visuals * chore: remove 400ms waits * chore: remove scroll to top * chore(): update base images * chore: trigger build * chore: hide scrollbar for visual test * chore: hide scrollbar for visual test * chore(): update base images * chore: trigger build * chore: adjust popup visuals * chore: adjust popup visuals * chore: adjust popup visuals * chore: adjust popup visuals * chore: adjust popup visuals --------- Co-authored-by: hirsch88 <[email protected]>
baloise · Feb 6, 2024 · 8480c46 · 8480c46
1 parent deff986
commit 8480c46
Show file tree

Hide file tree

Showing 189 changed files with 5,419 additions and 1,908 deletions.
diff --git a/CHANGELOG_OLD.md b/CHANGELOG_OLD.md
@@ -3375,3 +3375,5 @@ Follow the migration guide [Migration from 8.x to 9.x](https://design.baloise.de
 
 - add design part to the documentation
 
+
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "storybook": "turbo run build --force --filter=@baloise/design-system-tokens --filter=@baloise/design-system-maps --filter=@baloise/design-system-icons --filter=@baloise/design-system-brand-icons --filter=@baloise/design-system-favicons --filter=@baloise/design-system-css --filter=@baloise/design-system-styles --filter=@baloise/design-system-output-target-* && npm --prefix packages/components run build && npm --prefix packages/components-table run build && npm --prefix docs run storybook",
     "==================== INSTALLATION / SETUP =====": "================================",
     "precommit": "lint-staged --allow-empty",
-    "cy:install": "npm --prefix test run install",
+    "cy:install": "npm --prefix test install",
     "cy:build": "turbo run build --filter=@baloise/design-system-tokens --filter=@baloise/design-system-fonts --filter=@baloise/design-system-icons --filter=@baloise/design-system-styles --filter=@baloise/design-system-output-target-vue && npm --prefix packages/components run cy:build && npm --prefix packages/testing run build && npm --prefix test run build",
     "registry": "bash scripts/registry",
     "==================== FORMATTER / LINTER =======": "================================",

diff --git a/packages/testing/src/commands/custom/platform.command.ts b/packages/testing/src/commands/custom/platform.command.ts
@@ -1,4 +1,5 @@
-import { waitAfterFramePaint } from '../helpers'
+import { Platforms, waitAfterFramePaint } from '../helpers'
+import { balViewport } from '../../viewports'
 
 Cypress.Commands.add<any>('platform', platform => {
   Cypress.log({
@@ -7,24 +8,11 @@ Cypress.Commands.add<any>('platform', platform => {
     message: platform,
   })
 
-  switch (platform) {
-    case 'mobile':
-      return cy.viewport(375, 667, { log: false }).then(() => waitAfterFramePaint())
+  const key: Platforms = (platform as Platforms) || 'desktop'
+  const viewport = balViewport[key]
 
-    case 'tablet':
-      return cy.viewport(769, 1024, { log: false }).then(() => waitAfterFramePaint())
-
-    case 'desktop':
-      return cy.viewport(1024, 1280, { log: false }).then(() => waitAfterFramePaint())
-
-    case 'highDefinition':
-      return cy.viewport(1280, 1440, { log: false }).then(() => waitAfterFramePaint())
-
-    case 'widescreen':
-      return cy.viewport(1440, 1920, { log: false }).then(() => waitAfterFramePaint())
-
-    case 'fullhd':
-      return cy.viewport(1920, 1920, { log: false }).then(() => waitAfterFramePaint())
-  }
-  return cy.viewport(1024, 1280, { log: false }).then(() => waitAfterFramePaint())
+  return cy
+    .viewport(viewport.width, viewport.height, { log: false })
+    .then(() => waitAfterFramePaint())
+    .wait(32)
 })
diff --git a/packages/testing/src/index.ts b/packages/testing/src/index.ts
@@ -3,6 +3,11 @@
  */
 export * from './selectors'
 
+/**
+ * Viewports sizes
+ */
+export * from './viewports'
+
 /**
  * Helpers
  */

diff --git a/packages/testing/src/viewports.ts b/packages/testing/src/viewports.ts
@@ -0,0 +1,50 @@
+import { Platforms } from './commands/helpers'
+
+type Viewport = {
+  [key in Platforms]: Cypress.Dimensions
+}
+
+export const balViewport: Viewport = {
+  mobile: {
+    width: 375,
+    height: 667,
+    x: 0,
+    y: 0,
+  },
+  tablet: {
+    width: 769,
+    height: 1024,
+    x: 0,
+    y: 0,
+  },
+  touch: {
+    width: 769,
+    height: 1024,
+    x: 0,
+    y: 0,
+  },
+  desktop: {
+    width: 1024,
+    height: 1280,
+    x: 0,
+    y: 0,
+  },
+  highDefinition: {
+    width: 1280,
+    height: 1440,
+    x: 0,
+    y: 0,
+  },
+  widescreen: {
+    width: 1440,
+    height: 1920,
+    x: 0,
+    y: 0,
+  },
+  fullhd: {
+    width: 1920,
+    height: 1920,
+    x: 0,
+    y: 0,
+  },
+}
diff --git a/test/cypress.config.ts b/test/cypress.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from 'cypress'
-import { configureVisualRegression } from 'cypress-visual-regression'
+import { configureVisualRegression } from './cypress/support/lib/visuals'
 import cypressSplit from 'cypress-split'
 
 export default defineConfig({

diff --git a/test/cypress/downloads/downloads.html b/test/cypress/downloads/downloads.html
diff --git a/test/cypress/e2e/visual/bal-nav-menu-flyout.visual.cy.ts b/test/cypress/e2e/visual/bal-nav-menu-flyout.visual.cy.ts
@@ -1,33 +1,55 @@
+import { balViewport } from 'support/utils'
+
 describe('bal-nav-menu-flyout', () => {
-  describe('basic', () => {
-    it('basic component', () => {
-      cy.visit('/components/bal-nav/bal-nav-menu-flyout/test/bal-nav-menu-flyout.visual.html')
-        .platform('fullhd')
-        .waitForDesignSystem()
-        .wait(32)
+  it('basic component', () => {
+    cy.visit('/components/bal-nav/bal-nav-menu-flyout/test/bal-nav-menu-flyout.visual.html')
+      .platform('fullhd')
+      .waitForDesignSystem()
 
-      cy.testVisual('menu-flyout-fullhd')
+    cy.testVisual('menu-flyout-fullhd', {
+      errorThreshold: 0.2,
+      capture: 'viewport',
+      clip: balViewport['fullhd'],
+    })
 
-      cy.platform('highDefinition').wait(32)
-      cy.testVisual('menu-flyout-highDefinition')
+    cy.platform('highDefinition')
+    cy.testVisual('menu-flyout-highDefinition', {
+      errorThreshold: 0.2,
+      capture: 'viewport',
+      clip: balViewport['highDefinition'],
+    })
 
-      cy.platform('widescreen').wait(32)
-      cy.testVisual('menu-flyout-widescreen')
+    cy.platform('widescreen')
+    cy.testVisual('menu-flyout-widescreen', {
+      errorThreshold: 0.2,
+      capture: 'viewport',
+      clip: balViewport['widescreen'],
+    })
 
-      cy.platform('desktop').wait(32)
-      cy.testVisual('menu-flyout-desktop')
+    cy.platform('desktop')
+    cy.testVisual('menu-flyout-desktop', {
+      errorThreshold: 0.2,
+      capture: 'viewport',
+      clip: balViewport['desktop'],
     })
+  })
 
-    it('basic component touch', () => {
-      cy.visit('/components/bal-nav/bal-nav-menu-flyout/test/bal-nav-menu-flyout.visual.html')
-        .platform('tablet')
-        .waitForDesignSystem()
-        .wait(400)
+  it('basic component touch', () => {
+    cy.visit('/components/bal-nav/bal-nav-menu-flyout/test/bal-nav-menu-flyout.visual.html')
+      .platform('tablet')
+      .waitForDesignSystem()
 
-      cy.testVisual('menu-flyout-tablet')
+    cy.testVisual('menu-flyout-tablet', {
+      errorThreshold: 0.2,
+      capture: 'viewport',
+      clip: balViewport['tablet'],
+    })
 
-      cy.platform('mobile').wait(400)
-      cy.testVisual('menu-flyout-mobile')
+    cy.platform('mobile')
+    cy.testVisual('menu-flyout-mobile', {
+      errorThreshold: 0.2,
+      capture: 'viewport',
+      clip: balViewport['mobile'],
     })
   })
 })
diff --git a/test/cypress/e2e/visual/bal-nav-part-1.visual.cy.ts b/test/cypress/e2e/visual/bal-nav-part-1.visual.cy.ts
@@ -1,4 +1,4 @@
-import { Platforms } from '../../../src/types'
+import { Platforms, balViewport } from 'support/utils'
 
 describe('bal-nav - desktop', () => {
   testNavigationOnDesktop('widescreen')
@@ -7,17 +7,23 @@ describe('bal-nav - desktop', () => {
 
   function testNavigationOnDesktop(platform: Platforms) {
     describe(platform, () => {
+      const visualOptions: any = {
+        errorThreshold: 0.2,
+        capture: 'viewport',
+        clip: balViewport[platform],
+      }
+
       beforeEach(() => {
-        cy.platform(platform).visit('/components/bal-nav/test/bal-nav.visual.html').waitForDesignSystem().wait(400)
+        cy.visit('/components/bal-nav/test/bal-nav.visual.html').platform(platform).waitForDesignSystem()
       })
 
       it('closed menu on top', () => {
-        cy.testVisual(`nav-desktop-${platform}-closed-top`, 0.2)
+        cy.testVisual(`nav-desktop-${platform}-closed-top`, visualOptions)
       })
 
       it('closed menu on bottom', () => {
         cy.scrollTo('bottom')
-        cy.testVisual(`nav-desktop-${platform}-closed-bottom`, 0.2)
+        cy.testVisual(`nav-desktop-${platform}-closed-bottom`, visualOptions)
       })
 
       it('open menu', () => {
@@ -27,8 +33,8 @@ describe('bal-nav - desktop', () => {
           .eq(0)
           .find('button')
           .click()
-        cy.wait(400)
-        cy.testVisual(`nav-desktop-${platform}-open`, 0.2)
+          .waitForComponents()
+        cy.testVisual(`nav-desktop-${platform}-open`, visualOptions)
       })
 
       it('open menu second tab', () => {
@@ -38,14 +44,13 @@ describe('bal-nav - desktop', () => {
           .eq(1)
           .find('button')
           .click()
-        cy.wait(400)
-        cy.testVisual(`nav-desktop-${platform}-open-menu-second-tab`, 0.2)
+          .waitForComponents()
+        cy.testVisual(`nav-desktop-${platform}-open-menu-second-tab`, visualOptions)
       })
 
       it('open search popoup', () => {
-        cy.getByTestId('basic').find('#bal-nav__meta-buttons').eq(0).click()
-        cy.wait(400)
-        cy.testVisual(`nav-desktop-${platform}-open-search-popup`, 0.2)
+        cy.getByTestId('basic').find('#bal-nav__meta-buttons').eq(0).click().waitForComponents()
+        cy.testVisual(`nav-desktop-${platform}-open-search-popup`, visualOptions)
       })
     })
   }

diff --git a/test/cypress/e2e/visual/bal-nav-part-2.visual.cy.ts b/test/cypress/e2e/visual/bal-nav-part-2.visual.cy.ts
@@ -1,30 +1,40 @@
-import { Platforms } from '../../../src/types'
+import { Platforms, balViewport } from 'support/utils'
 
 describe('bal-nav - touch', () => {
   testNavigationOnTouch('tablet')
   testNavigationOnTouch('mobile')
 
   function testNavigationOnTouch(platform: Platforms) {
     describe(platform, () => {
+      const visualOptions: any = {
+        errorThreshold: 0.2,
+        capture: 'viewport',
+        clip: balViewport[platform],
+      }
+
       beforeEach(() => {
-        cy.platform(platform).visit('/components/bal-nav/test/bal-nav.visual.html').waitForDesignSystem().wait(400)
+        cy.visit('/components/bal-nav/test/bal-nav.visual.html').platform(platform).waitForDesignSystem()
       })
 
       it('closed menu on top', () => {
-        cy.testVisual(`nav-touch-${platform}-closed-top`, 0.2)
+        cy.testVisual(`nav-touch-${platform}-closed-top`, visualOptions)
       })
 
       it('closed menu on bottom', () => {
         cy.scrollTo('bottom')
-        cy.wait(400)
-        cy.testVisual(`nav-touch-${platform}-closed-bottom`, 0.2)
+        cy.waitForBrowser()
+        cy.testVisual(`nav-touch-${platform}-closed-bottom`, visualOptions)
       })
 
       it('open menu', () => {
         cy.scrollTo('top')
-        cy.getByTestId('basic').find('.bal-nav-meta-bar').find('bal-stack > bal-button').eq(1).click()
-        cy.wait(400)
-        cy.testVisual(`nav-touch-${platform}-open`, 0.2)
+        cy.getByTestId('basic')
+          .find('.bal-nav-meta-bar')
+          .find('bal-stack > bal-button')
+          .eq(1)
+          .click()
+          .waitForComponents()
+        cy.testVisual(`nav-touch-${platform}-open`, visualOptions)
       })
     })
   }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3375,3 +3375,5 @@ Follow the migration guide [Migration from 8.x to 9.x](https://design.baloise.de

		- add design part to the documentation