Merge branch 'main' into patch-1

carbon-design-system · May 18, 2022 · 2cbb02c · 2cbb02c
2 parents 8ac4a55 + 606664e
commit 2cbb02c
Show file tree

Hide file tree

Showing 68 changed files with 2,567 additions and 2,524 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -114,7 +114,7 @@ jobs:
   vrt-runner:
     strategy:
       matrix:
-        shard: [1, 2]
+        shard: [1, 2, 3, 4]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -147,9 +147,9 @@ jobs:
         if: github.repository == 'carbon-design-system/carbon'
         env:
           PERCY_TOKEN: c9a21a3fde4fda0a0f822d633426ab26e2ab2c1cba55221d342d4047744c8c24
-          PERCY_PARALLEL_TOTAL: 2
+          PERCY_PARALLEL_TOTAL: 4
         run: |
-          yarn percy exec --parallel -- yarn playwright test --project chromium --grep @vrt --shard="${{ matrix.shard }}/2"
+          yarn percy exec --parallel -- yarn playwright test --project chromium --grep @vrt --shard="${{ matrix.shard }}/4"
       - name: Stop storybook
         run: kill ${{ steps.storybook.outputs.pid }}
       - name: Upload test results

diff --git a/e2e/components/AspectRatio/AspectRatio-test.e2e.js b/e2e/components/AspectRatio/AspectRatio-test.e2e.js
@@ -8,9 +8,22 @@
 'use strict';
 
 const { expect, test } = require('@playwright/test');
-const { visitStory } = require('../../test-utils/storybook');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
 
 test.describe('AspectRatio', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('aspectratio @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'AspectRatio',
+          id: 'components-aspectratio--aspect-ratio-story',
+          theme,
+        });
+      });
+    });
+  });
+
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'AspectRatio',

diff --git a/e2e/components/Button/Button-test.e2e.js b/e2e/components/Button/Button-test.e2e.js
@@ -8,9 +8,70 @@
 'use strict';
 
 const { expect, test } = require('@playwright/test');
-const { visitStory } = require('../../test-utils/storybook');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
 
 test.describe('Button', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('default @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Button',
+          id: 'components-button--default',
+          theme,
+        });
+      });
+
+      test('secondary @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Button',
+          id: 'components-button--secondary',
+          theme,
+        });
+      });
+
+      test('tertiary @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Button',
+          id: 'components-button--tertiary',
+          theme,
+        });
+      });
+
+      test('danger @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Button',
+          id: 'components-button--danger',
+          theme,
+        });
+      });
+
+      test('ghost @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Button',
+          id: 'components-button--ghost',
+          theme,
+        });
+      });
+
+      test('icon button @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Button',
+          id: 'components-button--icon-button',
+          theme,
+        });
+      });
+
+      test('set of buttons @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Button',
+          id: 'components-button--set-of-buttons',
+          theme,
+        });
+      });
+    });
+  });
+
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'Button',

diff --git a/e2e/components/Checkbox/Checkbox-test.e2e.js b/e2e/components/Checkbox/Checkbox-test.e2e.js
@@ -8,9 +8,22 @@
 'use strict';
 
 const { expect, test } = require('@playwright/test');
-const { visitStory } = require('../../test-utils/storybook');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
 
 test.describe('Checkbox', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('checkbox @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Checkbox',
+          id: 'components-checkbox--checkbox-story',
+          theme,
+        });
+      });
+    });
+  });
+
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'Checkbox',

diff --git a/e2e/components/CodeSnippet/CodeSnippet-test.e2e.js b/e2e/components/CodeSnippet/CodeSnippet-test.e2e.js
@@ -8,9 +8,62 @@
 'use strict';
 
 const { expect, test } = require('@playwright/test');
-const { visitStory } = require('../../test-utils/storybook');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
 
 test.describe('CodeSnippet', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('inline @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'CodeSnippet',
+          id: 'components-codesnippet--inline',
+          theme,
+        });
+      });
+
+      test('multiline @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'CodeSnippet',
+          id: 'components-codesnippet--multiline',
+          theme,
+        });
+      });
+
+      test('singleline @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'CodeSnippet',
+          id: 'components-codesnippet--singleline',
+          theme,
+        });
+      });
+
+      test('inline with layer @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'CodeSnippet',
+          id: 'components-codesnippet--inline-with-layer',
+          theme,
+        });
+      });
+
+      test('multiline with layer @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'CodeSnippet',
+          id: 'components-codesnippet--multiline-with-layer',
+          theme,
+        });
+      });
+
+      test('singleline with layer @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'CodeSnippet',
+          id: 'components-codesnippet--singleline-with-layer',
+          theme,
+        });
+      });
+    });
+  });
+
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'CodeSnippet',

diff --git a/e2e/components/ComboBox/ComboBox-test.e2e.js b/e2e/components/ComboBox/ComboBox-test.e2e.js
@@ -8,9 +8,30 @@
 'use strict';
 
 const { expect, test } = require('@playwright/test');
-const { visitStory } = require('../../test-utils/storybook');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
 
 test.describe('ComboBox', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('combobox @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ComboBox',
+          id: 'components-combobox--combobox',
+          theme,
+        });
+      });
+
+      test('with layer @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ComboBox',
+          id: 'components-combobox--with-layer',
+          theme,
+        });
+      });
+    });
+  });
+
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'ComboBox',

diff --git a/e2e/components/ComposedModal/ComposedModal-test.e2e.js b/e2e/components/ComposedModal/ComposedModal-test.e2e.js
@@ -8,9 +8,38 @@
 'use strict';
 
 const { expect, test } = require('@playwright/test');
-const { visitStory } = require('../../test-utils/storybook');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
 
 test.describe('ComposedModal', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('default @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ComposedModal',
+          id: 'components-composedmodal--default',
+          theme,
+        });
+      });
+
+      test('passive modal @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ComposedModal',
+          id: 'components-composedmodal--passive-modal',
+          theme,
+        });
+      });
+
+      test('with state manager @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ComposedModal',
+          id: 'components-composedmodal--with-state-manager',
+          theme,
+        });
+      });
+    });
+  });
+
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'ComposedModal',

diff --git a/e2e/components/ContentSwitcher/ContentSwitcher-test.e2e.js b/e2e/components/ContentSwitcher/ContentSwitcher-test.e2e.js
@@ -8,9 +8,30 @@
 'use strict';
 
 const { expect, test } = require('@playwright/test');
-const { visitStory } = require('../../test-utils/storybook');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
 
 test.describe('ContentSwitcher', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('default @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ContentSwitcher',
+          id: 'components-contentswitcher--default',
+          theme,
+        });
+      });
+
+      test('with layer @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ContentSwitcher',
+          id: 'components-contentswitcher--with-layer',
+          theme,
+        });
+      });
+    });
+  });
+
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'ContentSwitcher',

diff --git a/e2e/components/CopyButton/CopyButton-test.e2e.js b/e2e/components/CopyButton/CopyButton-test.e2e.js
@@ -8,9 +8,22 @@
 'use strict';
 
 const { expect, test } = require('@playwright/test');
-const { visitStory } = require('../../test-utils/storybook');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
 
 test.describe('CopyButton', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('default @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'CopyButton',
+          id: 'components-copybutton--default',
+          theme,
+        });
+      });
+    });
+  });
+
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'CopyButton',