chore: fix plugin issue with errorThreshold

baloise · Jan 29, 2024 · de1f980 · de1f980
1 parent 7edb30f
commit de1f980
Show file tree

Hide file tree

Showing 75 changed files with 696 additions and 684 deletions.
diff --git a/docs/stories/development/01-contributing/04-visual-testing.stories.mdx b/docs/stories/development/01-contributing/04-visual-testing.stories.mdx
@@ -112,12 +112,12 @@ describe('bal-close', () => {
 
   // just compare the screenshot of the element with the attribute data-testid="basic"
   it('basic component', () => {
-    cy.getByTestId('basic').compareSnapshot('close-basic', 0.0)
+    cy.getByTestId('basic').testVisual('close-basic', 0.0)
   })
 
   // create screen of the whole page
   it('component variants', () => {
-    cy.compareSnapshot('close-variants', 0.0)
+    cy.testVisual('close-variants', 0.0)
   })
 })
 ```
@@ -132,13 +132,13 @@ describe('bal-close', () => {
 
   it('basic component', () => {
     cy.platform('desktop')
-    cy.getByTestId('basic').compareSnapshot('close-basic', 0.0)
+    cy.getByTestId('basic').testVisual('close-basic', 0.0)
 
     cy.platform('tablet')
-    cy.getByTestId('basic').compareSnapshot('close-basic-tablet', 0.0)
+    cy.getByTestId('basic').testVisual('close-basic-tablet', 0.0)
 
     cy.platform('mobile')
-    cy.getByTestId('basic').compareSnapshot('close-basic-mobile', 0.0)
+    cy.getByTestId('basic').testVisual('close-basic-mobile', 0.0)
   })
 })
 ```

diff --git a/test/cypress/e2e/visual/bal-accordion.visual.cy.ts b/test/cypress/e2e/visual/bal-accordion.visual.cy.ts
@@ -4,34 +4,34 @@ describe('bal-accordion', () => {
 
     it('basic component', () => {
       cy.platform('desktop')
-      cy.getByTestId('basic').compareSnapshot('accordion-desktop')
+      cy.getByTestId('basic').testVisual('accordion-desktop')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-desktop-open')
+      cy.getByTestId('basic').testVisual('accordion-desktop-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-desktop-closed')
+      cy.getByTestId('basic').testVisual('accordion-desktop-closed')
 
       cy.platform('tablet')
-      cy.getByTestId('basic').compareSnapshot('accordion-tablet')
+      cy.getByTestId('basic').testVisual('accordion-tablet')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-tablet-open')
+      cy.getByTestId('basic').testVisual('accordion-tablet-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-tablet-closed')
+      cy.getByTestId('basic').testVisual('accordion-tablet-closed')
 
       cy.platform('mobile')
-      cy.getByTestId('basic').compareSnapshot('accordion-mobile')
+      cy.getByTestId('basic').testVisual('accordion-mobile')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-mobile-open')
+      cy.getByTestId('basic').testVisual('accordion-mobile-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-mobile-closed')
+      cy.getByTestId('basic').testVisual('accordion-mobile-closed')
     })
 
     it('with card', () => {
       cy.platform('desktop')
-      cy.getByTestId('with-card').compareSnapshot('accordion-with-card')
+      cy.getByTestId('with-card').testVisual('accordion-with-card')
       cy.getByTestId('with-card').click()
-      cy.getByTestId('with-card').compareSnapshot('accordion-with-card-open')
+      cy.getByTestId('with-card').testVisual('accordion-with-card-open')
       cy.getByTestId('with-card').click()
-      cy.getByTestId('with-card').compareSnapshot('accordion-with-card-closed')
+      cy.getByTestId('with-card').testVisual('accordion-with-card-closed')
     })
   })
 
@@ -40,39 +40,39 @@ describe('bal-accordion', () => {
 
     it('basic component', () => {
       cy.platform('desktop')
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-desktop')
+      cy.getByTestId('basic').testVisual('accordion-v2-desktop')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-desktop-open')
+      cy.getByTestId('basic').testVisual('accordion-v2-desktop-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-desktop-closed')
+      cy.getByTestId('basic').testVisual('accordion-v2-desktop-closed')
 
       cy.platform('tablet')
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-tablet')
+      cy.getByTestId('basic').testVisual('accordion-v2-tablet')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-tablet-open')
+      cy.getByTestId('basic').testVisual('accordion-v2-tablet-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-tablet-closed')
+      cy.getByTestId('basic').testVisual('accordion-v2-tablet-closed')
 
       cy.platform('mobile')
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-mobile')
+      cy.getByTestId('basic').testVisual('accordion-v2-mobile')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-mobile-open')
+      cy.getByTestId('basic').testVisual('accordion-v2-mobile-open')
       cy.getByTestId('basic').click()
-      cy.getByTestId('basic').compareSnapshot('accordion-v2-mobile-closed')
+      cy.getByTestId('basic').testVisual('accordion-v2-mobile-closed')
     })
 
     it('stack component', () => {
       cy.platform('desktop')
-      cy.getByTestId('stack').compareSnapshot('accordion-v2-stack-desktop')
+      cy.getByTestId('stack').testVisual('accordion-v2-stack-desktop')
       cy.getByTestId('stack').click()
-      cy.getByTestId('stack').compareSnapshot('accordion-v2-stack-desktop-open')
+      cy.getByTestId('stack').testVisual('accordion-v2-stack-desktop-open')
       cy.getByTestId('stack').click()
-      cy.getByTestId('stack').compareSnapshot('accordion-v2-stack-desktop-closed')
+      cy.getByTestId('stack').testVisual('accordion-v2-stack-desktop-closed')
     })
 
     it('button component', () => {
       cy.platform('desktop')
-      cy.getByTestId('button').compareSnapshot('accordion-v2-button-desktop')
+      cy.getByTestId('button').testVisual('accordion-v2-button-desktop')
     })
   })
 })
diff --git a/test/cypress/e2e/visual/bal-badge.visual.cy.ts b/test/cypress/e2e/visual/bal-badge.visual.cy.ts
@@ -3,22 +3,22 @@ describe('bal-badge', () => {
     beforeEach(() => cy.visit('/components/bal-badge/test/bal-badge.visual.html').waitForDesignSystem())
 
     it('basic component', () => {
-      cy.getByTestId('basic').compareSnapshot('badge-basic')
-      cy.getByTestId('icon').compareSnapshot('badge-icon')
-      cy.getByTestId('card').compareSnapshot('badge-card')
-      cy.getByTestId('button').compareSnapshot('badge-button')
-      cy.getByTestId('long-content').compareSnapshot('badge-long-content')
+      cy.getByTestId('basic').testVisual('badge-basic')
+      cy.getByTestId('icon').testVisual('badge-icon')
+      cy.getByTestId('card').testVisual('badge-card')
+      cy.getByTestId('button').testVisual('badge-button')
+      cy.getByTestId('long-content').testVisual('badge-long-content')
     })
 
     it('component variants', () => {
-      cy.compareSnapshot('button-variants')
+      cy.testVisual('button-variants')
     })
   })
   describe('theming', () => {
     beforeEach(() => cy.visit('/components/bal-badge/test/bal-badge.theming.html').waitForDesignSystem())
 
     it('basic component', () => {
-      cy.getByTestId('basic').compareSnapshot('badge-theming-basic')
+      cy.getByTestId('basic').testVisual('badge-theming-basic')
     })
   })
 })
diff --git a/test/cypress/e2e/visual/bal-button.visual.cy.ts b/test/cypress/e2e/visual/bal-button.visual.cy.ts
@@ -3,60 +3,60 @@ describe('bal-button', () => {
 
   it('basic component', () => {
     cy.platform('desktop')
-    cy.getByTestId('primary').compareSnapshot('button-primary-desktop')
-    cy.getByTestId('colors').compareSnapshot('button-colors-desktop')
-    cy.getByTestId('colors-alternatives').compareSnapshot('button-colors-alternatives-desktop')
-    cy.getByTestId('sizes').compareSnapshot('button-sizes-desktop')
-    cy.getByTestId('inverted').compareSnapshot('button-inverted-desktop')
-    cy.getByTestId('expanded').compareSnapshot('button-expanded-desktop')
-    cy.getByTestId('flat').compareSnapshot('button-flat-desktop')
-    cy.getByTestId('outlined').compareSnapshot('button-outlined-desktop')
-    cy.getByTestId('rounded').compareSnapshot('button-rounded-desktop')
-    cy.getByTestId('shadow').compareSnapshot('button-shadow-desktop')
-    cy.getByTestId('icon-right').compareSnapshot('button-icon-right-desktop')
-    cy.getByTestId('variants').compareSnapshot('button-variants-desktop')
-    cy.getByTestId('states').compareSnapshot('button-states-desktop')
-    cy.getByTestId('square').compareSnapshot('button-square-desktop')
-    cy.getByTestId('group').compareSnapshot('button-group-desktop')
-    cy.getByTestId('links').compareSnapshot('button-links-desktop')
-    cy.getByTestId('inverted-links').compareSnapshot('button-inverted-links-desktop')
+    cy.getByTestId('primary').testVisual('button-primary-desktop')
+    cy.getByTestId('colors').testVisual('button-colors-desktop')
+    cy.getByTestId('colors-alternatives').testVisual('button-colors-alternatives-desktop')
+    cy.getByTestId('sizes').testVisual('button-sizes-desktop')
+    cy.getByTestId('inverted').testVisual('button-inverted-desktop')
+    cy.getByTestId('expanded').testVisual('button-expanded-desktop')
+    cy.getByTestId('flat').testVisual('button-flat-desktop')
+    cy.getByTestId('outlined').testVisual('button-outlined-desktop')
+    cy.getByTestId('rounded').testVisual('button-rounded-desktop')
+    cy.getByTestId('shadow').testVisual('button-shadow-desktop')
+    cy.getByTestId('icon-right').testVisual('button-icon-right-desktop')
+    cy.getByTestId('variants').testVisual('button-variants-desktop')
+    cy.getByTestId('states').testVisual('button-states-desktop')
+    cy.getByTestId('square').testVisual('button-square-desktop')
+    cy.getByTestId('group').testVisual('button-group-desktop')
+    cy.getByTestId('links').testVisual('button-links-desktop')
+    cy.getByTestId('inverted-links').testVisual('button-inverted-links-desktop')
 
     cy.platform('tablet')
-    cy.getByTestId('primary').compareSnapshot('button-primary-tablet')
-    cy.getByTestId('colors').compareSnapshot('button-colors-tablet')
-    cy.getByTestId('colors-alternatives').compareSnapshot('button-colors-alternatives-tablet')
-    cy.getByTestId('sizes').compareSnapshot('button-sizes-tablet')
-    cy.getByTestId('inverted').compareSnapshot('button-inverted-tablet')
-    cy.getByTestId('expanded').compareSnapshot('button-expanded-tablet')
-    cy.getByTestId('flat').compareSnapshot('button-flat-tablet')
-    cy.getByTestId('outlined').compareSnapshot('button-outlined-tablet')
-    cy.getByTestId('rounded').compareSnapshot('button-rounded-tablet')
-    cy.getByTestId('shadow').compareSnapshot('button-shadow-tablet')
-    cy.getByTestId('icon-right').compareSnapshot('button-icon-right-tablet')
-    cy.getByTestId('variants').compareSnapshot('button-variants-tablet')
-    cy.getByTestId('states').compareSnapshot('button-states-tablet')
-    cy.getByTestId('square').compareSnapshot('button-square-tablet')
-    cy.getByTestId('group').compareSnapshot('button-group-tablet')
-    cy.getByTestId('links').compareSnapshot('button-links-tablet')
-    cy.getByTestId('inverted-links').compareSnapshot('button-inverted-links-tablet')
+    cy.getByTestId('primary').testVisual('button-primary-tablet')
+    cy.getByTestId('colors').testVisual('button-colors-tablet')
+    cy.getByTestId('colors-alternatives').testVisual('button-colors-alternatives-tablet')
+    cy.getByTestId('sizes').testVisual('button-sizes-tablet')
+    cy.getByTestId('inverted').testVisual('button-inverted-tablet')
+    cy.getByTestId('expanded').testVisual('button-expanded-tablet')
+    cy.getByTestId('flat').testVisual('button-flat-tablet')
+    cy.getByTestId('outlined').testVisual('button-outlined-tablet')
+    cy.getByTestId('rounded').testVisual('button-rounded-tablet')
+    cy.getByTestId('shadow').testVisual('button-shadow-tablet')
+    cy.getByTestId('icon-right').testVisual('button-icon-right-tablet')
+    cy.getByTestId('variants').testVisual('button-variants-tablet')
+    cy.getByTestId('states').testVisual('button-states-tablet')
+    cy.getByTestId('square').testVisual('button-square-tablet')
+    cy.getByTestId('group').testVisual('button-group-tablet')
+    cy.getByTestId('links').testVisual('button-links-tablet')
+    cy.getByTestId('inverted-links').testVisual('button-inverted-links-tablet')
 
     cy.platform('mobile')
-    cy.getByTestId('primary').compareSnapshot('button-primary-mobile')
-    cy.getByTestId('colors').compareSnapshot('button-colors-mobile')
-    cy.getByTestId('colors-alternatives').compareSnapshot('button-colors-alternatives-mobile')
-    cy.getByTestId('sizes').compareSnapshot('button-sizes-mobile')
-    cy.getByTestId('inverted').compareSnapshot('button-inverted-mobile')
-    cy.getByTestId('expanded').compareSnapshot('button-expanded-mobile')
-    cy.getByTestId('flat').compareSnapshot('button-flat-mobile')
-    cy.getByTestId('outlined').compareSnapshot('button-outlined-mobile')
-    cy.getByTestId('rounded').compareSnapshot('button-rounded-mobile')
-    cy.getByTestId('shadow').compareSnapshot('button-shadow-mobile')
-    cy.getByTestId('icon-right').compareSnapshot('button-icon-right-mobile')
-    cy.getByTestId('variants').compareSnapshot('button-variants-mobile')
-    cy.getByTestId('states').compareSnapshot('button-states-mobile')
-    cy.getByTestId('square').compareSnapshot('button-square-mobile')
-    cy.getByTestId('group').compareSnapshot('button-group-mobile')
-    cy.getByTestId('links').compareSnapshot('button-links-mobile')
-    cy.getByTestId('inverted-links').compareSnapshot('button-inverted-links-mobile')
+    cy.getByTestId('primary').testVisual('button-primary-mobile')
+    cy.getByTestId('colors').testVisual('button-colors-mobile')
+    cy.getByTestId('colors-alternatives').testVisual('button-colors-alternatives-mobile')
+    cy.getByTestId('sizes').testVisual('button-sizes-mobile')
+    cy.getByTestId('inverted').testVisual('button-inverted-mobile')
+    cy.getByTestId('expanded').testVisual('button-expanded-mobile')
+    cy.getByTestId('flat').testVisual('button-flat-mobile')
+    cy.getByTestId('outlined').testVisual('button-outlined-mobile')
+    cy.getByTestId('rounded').testVisual('button-rounded-mobile')
+    cy.getByTestId('shadow').testVisual('button-shadow-mobile')
+    cy.getByTestId('icon-right').testVisual('button-icon-right-mobile')
+    cy.getByTestId('variants').testVisual('button-variants-mobile')
+    cy.getByTestId('states').testVisual('button-states-mobile')
+    cy.getByTestId('square').testVisual('button-square-mobile')
+    cy.getByTestId('group').testVisual('button-group-mobile')
+    cy.getByTestId('links').testVisual('button-links-mobile')
+    cy.getByTestId('inverted-links').testVisual('button-inverted-links-mobile')
   })
 })
diff --git a/test/cypress/e2e/visual/bal-card.visual.cy.ts b/test/cypress/e2e/visual/bal-card.visual.cy.ts
@@ -3,27 +3,27 @@ describe('bal-card', () => {
 
   it('basic component', () => {
     cy.platform('desktop')
-    cy.getByTestId('basic').compareSnapshot('card-basic-desktop')
-    cy.getByTestId('colors').compareSnapshot('card-colors-desktop')
-    cy.getByTestId('flat').compareSnapshot('card-flat-desktop')
-    cy.getByTestId('square').compareSnapshot('card-square-desktop')
-    cy.getByTestId('border').compareSnapshot('card-border-desktop')
-    cy.getByTestId('space').compareSnapshot('card-space-desktop')
+    cy.getByTestId('basic').testVisual('card-basic-desktop')
+    cy.getByTestId('colors').testVisual('card-colors-desktop')
+    cy.getByTestId('flat').testVisual('card-flat-desktop')
+    cy.getByTestId('square').testVisual('card-square-desktop')
+    cy.getByTestId('border').testVisual('card-border-desktop')
+    cy.getByTestId('space').testVisual('card-space-desktop')
 
     cy.platform('tablet')
-    cy.getByTestId('basic').compareSnapshot('card-basic-tablet')
-    cy.getByTestId('colors').compareSnapshot('card-colors-tablet')
-    cy.getByTestId('flat').compareSnapshot('card-flat-tablet')
-    cy.getByTestId('square').compareSnapshot('card-square-tablet')
-    cy.getByTestId('border').compareSnapshot('card-border-tablet')
-    cy.getByTestId('space').compareSnapshot('card-space-tablet')
+    cy.getByTestId('basic').testVisual('card-basic-tablet')
+    cy.getByTestId('colors').testVisual('card-colors-tablet')
+    cy.getByTestId('flat').testVisual('card-flat-tablet')
+    cy.getByTestId('square').testVisual('card-square-tablet')
+    cy.getByTestId('border').testVisual('card-border-tablet')
+    cy.getByTestId('space').testVisual('card-space-tablet')
 
     cy.platform('mobile')
-    cy.getByTestId('basic').compareSnapshot('card-basic-mobile')
-    cy.getByTestId('colors').compareSnapshot('card-colors-mobile')
-    cy.getByTestId('flat').compareSnapshot('card-flat-mobile')
-    cy.getByTestId('square').compareSnapshot('card-square-mobile')
-    cy.getByTestId('border').compareSnapshot('card-border-mobile')
-    cy.getByTestId('space').compareSnapshot('card-space-mobile')
+    cy.getByTestId('basic').testVisual('card-basic-mobile')
+    cy.getByTestId('colors').testVisual('card-colors-mobile')
+    cy.getByTestId('flat').testVisual('card-flat-mobile')
+    cy.getByTestId('square').testVisual('card-square-mobile')
+    cy.getByTestId('border').testVisual('card-border-mobile')
+    cy.getByTestId('space').testVisual('card-space-mobile')
   })
 })
diff --git a/test/cypress/e2e/visual/bal-carousel.visual.cy.ts b/test/cypress/e2e/visual/bal-carousel.visual.cy.ts
@@ -3,27 +3,27 @@ describe('bal-carousel', () => {
 
   it('basic component', () => {
     cy.platform('desktop')
-    cy.getByTestId('basic').compareSnapshot('carousel-basic-desktop')
-    cy.getByTestId('image').compareSnapshot('carousel-image-desktop')
-    cy.getByTestId('product').compareSnapshot('carousel-product-desktop')
-    cy.getByTestId('card').compareSnapshot('carousel-card-desktop')
-    cy.getByTestId('card-with-value').compareSnapshot('carousel-card-with-value-desktop')
-    cy.getByTestId('responsive').compareSnapshot('carousel-responsive-desktop')
+    cy.getByTestId('basic').testVisual('carousel-basic-desktop')
+    cy.getByTestId('image').testVisual('carousel-image-desktop')
+    cy.getByTestId('product').testVisual('carousel-product-desktop')
+    cy.getByTestId('card').testVisual('carousel-card-desktop')
+    cy.getByTestId('card-with-value').testVisual('carousel-card-with-value-desktop')
+    cy.getByTestId('responsive').testVisual('carousel-responsive-desktop')
 
     cy.platform('tablet')
-    cy.getByTestId('basic').compareSnapshot('carousel-basic-tablet')
-    cy.getByTestId('image').compareSnapshot('carousel-image-tablet')
-    cy.getByTestId('product').compareSnapshot('carousel-product-tablet')
-    cy.getByTestId('card').compareSnapshot('carousel-card-tablet')
-    cy.getByTestId('card-with-value').compareSnapshot('carousel-card-with-value-tablet')
-    cy.getByTestId('responsive').compareSnapshot('carousel-responsive-tablet')
+    cy.getByTestId('basic').testVisual('carousel-basic-tablet')
+    cy.getByTestId('image').testVisual('carousel-image-tablet')
+    cy.getByTestId('product').testVisual('carousel-product-tablet')
+    cy.getByTestId('card').testVisual('carousel-card-tablet')
+    cy.getByTestId('card-with-value').testVisual('carousel-card-with-value-tablet')
+    cy.getByTestId('responsive').testVisual('carousel-responsive-tablet')
 
     cy.platform('mobile')
-    cy.getByTestId('basic').compareSnapshot('carousel-basic-mobile')
-    cy.getByTestId('image').compareSnapshot('carousel-image-mobile')
-    cy.getByTestId('product').compareSnapshot('carousel-product-mobile')
-    cy.getByTestId('card').compareSnapshot('carousel-card-mobile')
-    cy.getByTestId('card-with-value').compareSnapshot('carousel-card-with-value-mobile')
-    cy.getByTestId('responsive').compareSnapshot('carousel-responsive-mobile')
+    cy.getByTestId('basic').testVisual('carousel-basic-mobile')
+    cy.getByTestId('image').testVisual('carousel-image-mobile')
+    cy.getByTestId('product').testVisual('carousel-product-mobile')
+    cy.getByTestId('card').testVisual('carousel-card-mobile')
+    cy.getByTestId('card-with-value').testVisual('carousel-card-with-value-mobile')
+    cy.getByTestId('responsive').testVisual('carousel-responsive-mobile')
   })
 })