expose cropToViewport chromatic config

chromaui · Mar 19, 2024 · cf75f80 · cf75f80
1 parent f149343
commit cf75f80
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 0 deletions.
diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts
@@ -49,6 +49,9 @@ afterEach(() => {
               ...(Cypress.env('prefersReducedMotion') && {
                 prefersReducedMotion: Cypress.env('prefersReducedMotion'),
               }),
+              ...(Cypress.env('cropToViewport') && {
+                cropToViewport: Cypress.env('cropToViewport'),
+              }),
             },
             pageUrl: url,
             viewport: {

diff --git a/packages/cypress/tests/cypress/e2e/options.cy.ts b/packages/cypress/tests/cypress/e2e/options.cy.ts
@@ -17,3 +17,7 @@ it('force high-contrast', { env: { forcedColors: 'active' } }, () => {
 it('prefers reduced motion', { env: { prefersReducedMotion: 'reduce' } }, () => {
   cy.visit('/options/prefers-reduced-motion');
 });
+
+it('crops to viewport', { env: { cropToViewport: true } }, () => {
+  cy.visit('/options/crop-to-viewport');
+});
diff --git a/packages/playwright/src/makeTest.ts b/packages/playwright/src/makeTest.ts
@@ -37,6 +37,7 @@ export const makeTest = (
     prefersReducedMotion: [undefined, { option: true }],
     resourceArchiveTimeout: [DEFAULT_GLOBAL_RESOURCE_ARCHIVE_TIMEOUT_MS, { option: true }],
     assetDomains: [[], { option: true }],
+    cropToViewport: [undefined, { option: true }],
 
     save: [
       async (
@@ -51,6 +52,7 @@ export const makeTest = (
           prefersReducedMotion,
           resourceArchiveTimeout,
           assetDomains,
+          cropToViewport,
         },
         use,
         testInfo
@@ -92,6 +94,7 @@ export const makeTest = (
           ...(forcedColors && { forcedColors }),
           ...(pauseAnimationAtEnd && { pauseAnimationAtEnd }),
           ...(prefersReducedMotion && { prefersReducedMotion }),
+          ...(cropToViewport && { cropToViewport }),
         };
 
         await writeTestResult(

diff --git a/packages/playwright/tests/options.spec.ts b/packages/playwright/tests/options.spec.ts
@@ -39,3 +39,11 @@ test.describe(() => {
     await page.goto('/options/prefers-reduced-motion');
   });
 });
+
+test.describe(() => {
+  test.use({ cropToViewport: true });
+
+  test('crops to viewport', async ({ page }) => {
+    await page.goto('/options/crop-to-viewport');
+  });
+});
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
@@ -28,6 +28,9 @@ export interface ChromaticConfig {
   // (needed when, for example, CI environment can't access the archives later on)
   // ex: www.some-domain.com
   assetDomains?: string[];
+
+  // Crop snapshots to the viewport size.
+  cropToViewport?: boolean;
 }
 
 export type ChromaticStorybookParameters = Omit<ChromaticConfig, 'disableAutoSnapshot'>;
diff --git a/test-server/fixtures/options/crop-to-viewport.html b/test-server/fixtures/options/crop-to-viewport.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" href="/css.urls.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <div class="grid grid-flow-row m-10">
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+      <div><img src="/img"/></div>
+
+      <div><img src="/img/another"/></div>
+      <div><img src="/img/another"/></div>
+      <div><img src="/img/another"/></div>
+      <div><img src="/img/another"/></div>
+    </div>
+  </body>
+</html>