db-ui · nmerget · Aug 2, 2022 · Aug 2, 2022 · Aug 2, 2022 · Aug 2, 2022
@@ -17,7 +17,7 @@ jobs:
 
       - name: 🔬 Validate repo
         run: |
-          node ./scripts/cypress-component-check.js
+          node ./scripts/cypress/component-check.js
           node ./scripts/angular-module-component-check.js
           npm run lint:eslint
           npm run lint:stylelint

@@ -38,6 +38,8 @@ packages/db-ui-poc-react/.env
 cypress/videos/*
 cypress/screenshots/*
 cypress/results/*
+cypress/snapshots/actual
+cypress/snapshots/diff
 
 
 coverage/

@@ -2,7 +2,7 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npx --yes pretty-quick --staged
-npx concurrently "node ./scripts/cypress-component-check.js" "node ./scripts/angular-module-component-check.js" "npm run lint:eslint" "npm run lint:stylelint" "npm run lint:markdownlint" "npx validate-branch-name"
+npx concurrently "node ./scripts/cypress/component-check.js" "node ./scripts/angular-module-component-check.js" "npm run lint:eslint" "npm run lint:stylelint" "npm run lint:markdownlint" "npx validate-branch-name"
 
 
 

@@ -7,5 +7,10 @@
   },
   "experimentalStudio": true,
   "viewportWidth": 1920,
-  "viewportHeight": 1200
+  "viewportHeight": 1200,
+  "screenshotsFolder": "./cypress/snapshots/actual",
+  "trashAssetsBeforeRuns": true,
+  "env": {
+    "ALWAYS_GENERATE_DIFF": false
+  }
 }
@@ -3,6 +3,10 @@ context('db-footer', () => {
     cy.visit('/iframe.html?id=areas-footer-intro--page&viewMode=story');
   });
 
+  it('db-footer - snapshot', () => {
+    cy.snap('db-footer');
+  });
+
   const selector = 'db-footer > footer';
   it('Standard footer exists', function () {
     cy.get(selector).eq(0).should('have.class', 'has-border');

@@ -3,6 +3,10 @@ context('db-header', () => {
     cy.visit('/iframe.html?id=areas-header-intro--page&viewMode=story');
   });
 
+  it('db-header - snapshot', () => {
+    cy.snap('db-header');
+  });
+
   it('Standard header exists', function () {
     cy.get('db-header > header').find('db-brand');
     cy.get('db-header > header').invoke('attr', 'role').should('eq', 'banner');

@@ -2,6 +2,9 @@ context('db-accordion', () => {
   beforeEach(() => {
     cy.visit('/iframe.html?id=components-accordion-intro--page&viewMode=story');
   });
+  it('db-accordion - snapshot', () => {
+    cy.snap('db-accordion');
+  });
 
   it('accordion exists', function () {
     cy.get('db-accordion')

@@ -3,6 +3,10 @@ context('db-brand', () => {
     cy.visit('/iframe.html?id=components-brand-intro--page&viewMode=story');
   });
 
+  it('db-brand - snapshot', () => {
+    cy.snap('db-brand');
+  });
+
   it('Brand exists', function () {
     cy.get('db-brand')
       .eq(0)

@@ -5,6 +5,10 @@ context('db-breadcrumb', () => {
     );
   });
 
+  it('db-breadcrumb - snapshot', () => {
+    cy.snap('db-breadcrumb');
+  });
+
   it('breadcrumb contains links', function () {
     cy.get('db-breadcrumb')
       .eq(0)

@@ -3,6 +3,10 @@ context('db-card', () => {
     cy.visit('/iframe.html?id=components-card-intro--page&viewMode=story');
   });
 
+  it('db-card - snapshot', () => {
+    cy.snap('db-card');
+  });
+
   it('card contains title', function () {
     cy.get('db-card')
       .eq(0)

@@ -3,6 +3,10 @@ context('db-cards', () => {
     cy.visit('/iframe.html?id=components-cards-intro--page&viewMode=story');
   });
 
+  it('db-cards - snapshot', () => {
+    cy.snap('db-cards');
+  });
+
   it('card-list contains 4 cards', function () {
     cy.get('db-cards').get('db-card').should('have.length', 4);
   });

@@ -3,6 +3,10 @@ context('db-dropdown', () => {
     cy.visit('/iframe.html?id=components-dropdown-intro--page&viewMode=story');
   });
 
+  it('db-dropdown - snapshot', () => {
+    cy.snap('db-dropdown');
+  });
+
   it('dropdown contains links', function () {
     cy.get('db-dropdown')
       .eq(0)

@@ -5,6 +5,10 @@ context('db-language-switcher', () => {
     );
   });
 
+  it('db-language-switcher - snapshot', () => {
+    cy.snap('db-language-switcher');
+  });
+
   it('language-switcher contains links', function () {
     cy.get('db-language-switcher')
       .eq(0)

@@ -3,6 +3,10 @@ context('db-linklist', () => {
     cy.visit('/iframe.html?id=components-linklist-intro--page&viewMode=story');
   });
 
+  it('db-linklist - snapshot', () => {
+    cy.snap('db-linklist');
+  });
+
   it('Linklist contains links', function () {
     cy.get('db-linklist > ul > li')
       .eq(0)

@@ -5,6 +5,10 @@ context('db-mainnavigation', () => {
     );
   });
 
+  it('db-mainnavigation - snapshot', () => {
+    cy.snap('db-mainnavigation');
+  });
+
   it('mainnavigation contains links', function () {
     cy.get('db-mainnavigation')
       .eq(0)

@@ -5,6 +5,10 @@ context('db-metanavigation', () => {
     );
   });
 
+  it('db-metanavigation - snapshot', () => {
+    cy.snap('db-metanavigation');
+  });
+
   it('metanavigation contains links', function () {
     cy.get('db-metanavigation')
       .eq(0)

@@ -5,6 +5,9 @@ context('db-notification', () => {
     );
   });
 
+  it('db-notification - snapshot', () => {
+    cy.snap('db-notification', 0.37);
+  });
   it('Shows a simple notification', function () {
     cy.get('db-notifications')
       .eq(0)

@@ -5,6 +5,10 @@ context('db-overflow-menu', () => {
     );
   });
 
+  it('db-overflow-menu - snapshot', () => {
+    cy.snap('db-overflow-menu');
+  });
+
   it('overflow-menu contains links', function () {
     cy.get('db-overflow-menu')
       .eq(0)

@@ -5,6 +5,10 @@ context('db-pagination', () => {
     );
   });
 
+  it('db-pagination - snapshot', () => {
+    cy.snap('db-pagination', 0.2);
+  });
+
   it('Pagination with slot displays correctly on pages', function () {
     cy.get('db-pagination > nav > ol').eq(0).find('li > a').should('exist');
     cy.get('db-pagination > nav > ol')

@@ -3,6 +3,10 @@ context('db-sidenavi', () => {
     cy.visit('/iframe.html?id=components-sidenavi-intro--page&viewMode=story');
   });
 
+  it('db-sidenavi - snapshot', () => {
+    cy.snap('db-sidenavi', 0.1);
+  });
+
   it('sidenavi contains links', function () {
     cy.get('db-sidenavi')
       .eq(0)

@@ -3,6 +3,10 @@ context('db-tab-bar', () => {
     cy.visit('/iframe.html?id=components-tab-bar-intro--page&viewMode=story');
   });
 
+  it('db-tab-bar - snapshot', () => {
+    cy.snap('db-tab-bar');
+  });
+
   it('tab-bar is clickable', function () {
     cy.get('section')
       .eq(0)

@@ -3,6 +3,10 @@ context('db-table', () => {
     cy.visit('/iframe.html?id=components-table-intro--page&viewMode=story');
   });
 
+  it('db-table - snapshot', () => {
+    cy.snap('db-table', 0.17);
+  });
+
   it('Renders tables with column tabledata', function () {
     cy.get('db-table > div > table > caption').eq(0).should('exist');
     cy.get('db-table > div > table > thead > tr')

@@ -5,6 +5,10 @@ context('db-button', () => {
 
   const selector = 'db-button > button';
 
+  it('db-button - snapshot', () => {
+    cy.snap('db-button', 0.2);
+  });
+
   it('Simple Button exists', function () {
     cy.get(selector).eq(0).contains('Button').click();
   });

@@ -2,7 +2,9 @@ context('db-checkbox', () => {
   beforeEach(() => {
     cy.visit('/iframe.html?id=elements-checkbox-intro--page&viewMode=story');
   });
-
+  it('db-checkbox - snapshot', () => {
+    cy.snap('db-checkbox', 0.16);
+  });
   const selector = 'db-checkbox > input';
   it('Checkbox exists and can be un-/checked', function () {
     cy.get(selector).first().check().should('be.checked');

@@ -2,7 +2,9 @@ context('db-headline', () => {
   beforeEach(() => {
     cy.visit('/iframe.html?id=elements-headline-intro--page&viewMode=story');
   });
-
+  it('db-headline - snapshot', () => {
+    cy.snap('db-headline');
+  });
   it('Headline contains correct size', function () {
     cy.get('db-headline').eq(1).contains('h1', 'Headline 1');
     cy.get('db-headline').eq(2).contains('h2', 'Headline 2');

@@ -3,6 +3,9 @@ context('db-icon', () => {
     cy.visit('/iframe.html?id=elements-icon-intro--page&viewMode=story');
   });
 
+  it('db-icon - snapshot', () => {
+    cy.snap('db-icon');
+  });
   it('Icons exists in the shadow 👻', function () {
     Array.from(Array(8)).forEach((num, idx) => {
       cy.get('db-icon')

@@ -3,6 +3,9 @@ context('db-image', () => {
     cy.visit('/iframe.html?id=elements-image-intro--page&viewMode=story');
   });
 
+  it('db-image - snapshot', () => {
+    cy.snap('db-image', 0.2);
+  });
   it('images should have the right class and alt text', function () {
     const imagesclassic = [0, 1, 2];
     const imagesadvanced = [0, 1, 2, 3];

@@ -3,6 +3,9 @@ context('db-input', () => {
     cy.visit('/iframe.html?id=elements-input-intro--page&viewMode=story');
   });
 
+  it('db-input - snapshot', () => {
+    cy.snap('db-input');
+  });
   it('Input can be typed into', function () {
     cy.get('db-input')
       .eq(0)

@@ -3,6 +3,9 @@ context('db-link', () => {
     cy.visit('/iframe.html?id=elements-link-intro--page&viewMode=story');
   });
 
+  it('db-link - snapshot', () => {
+    cy.snap('db-link', 0.17);
+  });
   it('Links contains anchors and correct targets', function () {
     cy.get('db-link > a').eq(0).contains('Link');
     cy.get('db-link > a').eq(1).contains('Link');

@@ -3,6 +3,9 @@ context('db-progress', () => {
     cy.visit('/iframe.html?id=elements-progress-intro--page&viewMode=story');
   });
 
+  it('db-progress - snapshot', () => {
+    cy.snap('db-progress');
+  });
   it('Progress should exist and be configurable', function () {
     const simpleProgress = [0, 1];
     simpleProgress.forEach((num) => {

@@ -3,6 +3,9 @@ context('db-radio', () => {
     cy.visit('/iframe.html?id=elements-radio-intro--page&viewMode=story');
   });
 
+  it('db-radio - snapshot', () => {
+    cy.snap('db-radio', 0.17);
+  });
   it('Radio buttons should be checkable', function () {
     cy.get('db-radio > input').eq(0).check().should('be.checked');
     cy.get('db-radio > input').eq(2).should('be.disabled');

@@ -3,6 +3,9 @@ context('db-select', () => {
     cy.visit('/iframe.html?id=elements-select-intro--page&viewMode=story');
   });
 
+  it('db-select - snapshot', () => {
+    cy.snap('db-select');
+  });
   it('selects should have be selectable', function () {
     cy.get('db-select > select > option')
       .eq(0)

@@ -3,6 +3,9 @@ context('db-tag', () => {
     cy.visit('/iframe.html?id=elements-tag-intro--page&viewMode=story');
   });
 
+  it('db-tag - snapshot', () => {
+    cy.snap('db-tag', 0.18);
+  });
   it('tags should have the right colors', function () {
     const mostTags = [1, 2, 3, 4, 5];
     const tagsColors = [

@@ -3,6 +3,9 @@ context('db-textarea', () => {
     cy.visit('/iframe.html?id=elements-textarea-intro--page&viewMode=story');
   });
 
+  it('db-textarea - snapshot', () => {
+    cy.snap('db-textarea');
+  });
   it('textarea should be writable', function () {
     cy.get('db-textarea > textarea')
       .eq(0)

@@ -3,6 +3,9 @@ context('db-toggle', () => {
     cy.visit('/iframe.html?id=elements-toggle-intro--page&viewMode=story');
   });
 
+  it('db-toggle - snapshot', () => {
+    cy.snap('db-toggle');
+  });
   it('Toggle can be toggeled', function () {
     cy.get('db-toggle> input')
       .eq(0)

@@ -0,0 +1,21 @@
+context('showcases-visuals', () => {
+  const showcases = require('../../fixtures/showcases.json');
+  showcases.forEach((showcase) => {
+    it(`${showcase}: Test Form - snapshot`, () => {
+      cy.showcaseGoto(showcase, 'Form');
+      cy.snap('showcase-form', 0.15, false);
+    });
+    it(`${showcase}: Test OtherComponents - snapshot`, () => {
+      cy.showcaseGoto(showcase, 'OtherComponents');
+      cy.snap('showcase-other-components', 0.15, false);
+    });
+    it(`${showcase}: Test OtherElements - snapshot`, () => {
+      cy.showcaseGoto(showcase, 'OtherElements');
+      cy.snap('showcase-other-elements', 0.27, false);
+    });
+    it(`${showcase}: Test Tables - snapshot`, () => {
+      cy.showcaseGoto(showcase, 'Tables');
+      cy.snap('showcase-tables', 0.15, false);
+    });
+  });
+});