Merge pull request #70 from chromaui/steven/cypress-command-name

Cypress: Manual snapshots
chromaui · Jan 18, 2024 · 8edb736 · 8edb736
2 parents c63a77c + 0909035
commit 8edb736
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 6 deletions.
diff --git a/packages/cypress/src/commands.ts b/packages/cypress/src/commands.ts
@@ -1,15 +1,15 @@
 import { snapshot } from 'rrweb-snapshot';
 import type { elementNode } from 'rrweb-snapshot';
 // @ts-expect-error will fix when Cypress has its own package
-Cypress.Commands.add('takeChromaticArchive', () => {
+Cypress.Commands.add('takeSnapshot', (name?: string) => {
   cy.document().then((doc) => {
     // here, handle the source map
     const manualSnapshot = snapshot(doc);
     // reassign manualSnapshots so it includes this new snapshot
     cy.get('@manualSnapshots')
       // @ts-expect-error will fix when Cypress has its own package
       .then((snapshots: elementNode[]) => {
-        return [...snapshots, manualSnapshot];
+        return [...snapshots, { name, snapshot: manualSnapshot }];
       })
       .as('manualSnapshots');
   });

diff --git a/packages/cypress/src/index.ts b/packages/cypress/src/index.ts
@@ -7,9 +7,16 @@ import {
   ResourceArchive,
 } from '@chromaui/shared-e2e';
 
+interface CypressSnapshot {
+  // the name of the snapshot (optionally provided for manual snapshots, never provided for automatic snapshots)
+  name?: string;
+  // the DOM snapshot
+  snapshot: elementNode;
+}
+
 interface WriteParams {
   testTitle: string;
-  domSnapshots: elementNode[];
+  domSnapshots: CypressSnapshot[];
   chromaticStorybookParams: ChromaticStorybookParameters;
   pageUrl: string;
 }
@@ -39,7 +46,11 @@ const writeArchives = async ({
   });
 
   const allSnapshots = Object.fromEntries(
-    domSnapshots.map((item, index) => [`Snapshot #${index + 1}`, Buffer.from(JSON.stringify(item))])
+    // manual snapshots can be given a name; otherwise, just use the snapshot's place in line as the name
+    domSnapshots.map(({ name, snapshot }, index) => [
+      name ?? `Snapshot #${index + 1}`,
+      Buffer.from(JSON.stringify(snapshot)),
+    ])
   );
 
   await writeTestResult(

diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts
@@ -19,7 +19,7 @@ afterEach(() => {
   }
   // can we be sure this always fires after all the requests are back?
   cy.document().then((doc) => {
-    const snap = snapshot(doc);
+    const automaticSnapshot = snapshot(doc);
     // @ts-expect-error will fix when Cypress has its own package
     cy.get('@manualSnapshots').then((manualSnapshots = []) => {
       cy.url().then((url) => {
@@ -28,7 +28,7 @@ afterEach(() => {
           action: 'save-archives',
           payload: {
             testTitle: Cypress.currentTest.title,
-            domSnapshots: [...manualSnapshots, snap],
+            domSnapshots: [...manualSnapshots, { snapshot: automaticSnapshot }],
             chromaticStorybookParams: {
               ...(Cypress.env('diffThreshold') && { diffThreshold: Cypress.env('diffThreshold') }),
               ...(Cypress.env('delay') && { delay: Cypress.env('delay') }),

diff --git a/packages/cypress/tests/cypress/e2e/manual-snapshots.cy.ts b/packages/cypress/tests/cypress/e2e/manual-snapshots.cy.ts
@@ -0,0 +1,10 @@
+it('Manual Snapshots / multiple snapshots are taken', () => {
+  cy.visit('/manual-snapshots');
+  // manual snapshot with name
+  cy.takeSnapshot('accordion collapsed');
+  cy.contains("I'm an accordion, click me!").click();
+  // manual snapshot without name
+  cy.takeSnapshot();
+  cy.contains("I'm an accordion, click me!").click();
+  cy.get('details').should('not.have.attr', 'open');
+});
diff --git a/packages/playwright/tests/manual-snapshots.spec.ts b/packages/playwright/tests/manual-snapshots.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect, takeSnapshot } from '../src';
+
+test('Manual snapshots / multiple snapshots are taken', async ({ page }, testInfo) => {
+  await page.goto('/manual-snapshots');
+  await takeSnapshot(page, 'accordion collapsed', testInfo);
+  await page.locator('summary').click();
+  await expect(page.getByText('I am hiding inside!')).toBeVisible();
+});
diff --git a/test-server/fixtures/manual-snapshots.html b/test-server/fixtures/manual-snapshots.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>    
+    <head>
+      <style>
+        summary {
+          font-size: 22px;
+        }
+
+        p {
+          padding-inline-start: 32px;
+        }
+      </style>
+    </head>
+    <body>
+        <details>
+          <summary>I'm an accordion, click me!</summary>
+          <p>I am hiding inside!</p>
+        </details>
+    </body>
+</html>
diff --git a/test-server/server.js b/test-server/server.js
@@ -80,6 +80,10 @@ app.get('/form-success', (req, res) => {
   res.send(`${htmlIntro}<body><p>OK!</p></body>${htmlOutro}`);
 });
 
+app.get('/manual-snapshots', (req, res) => {
+  res.sendFile(path.join(__dirname, 'fixtures/manual-snapshots.html'));
+});
+
 app.listen(port, () => {
   console.log(`Example app listening on port ${port}`);
 });