fix test

chromaui · Nov 9, 2023 · f9c5b5b · f9c5b5b
1 parent c65834f
commit f9c5b5b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 33 deletions.
diff --git a/src/write-archive/index.test.ts b/src/write-archive/index.test.ts
@@ -1,9 +1,28 @@
 import fs from 'fs-extra';
 import { resolve } from 'path';
 import type { TestInfo } from '@playwright/test';
+import { NodeType } from '@chromaui/rrweb-snapshot';
 import { writeTestResult } from '.';
 
 jest.mock('fs-extra');
+
+const snapshotJson = {
+  childNodes: [
+    {
+      type: NodeType.Element,
+      attributes: {
+        src: '/home/',
+      },
+    },
+    {
+      type: NodeType.Element,
+      attributes: {
+        src: '/img?src=some-path',
+      },
+    },
+  ],
+};
+
 describe('writeTestResult', () => {
   beforeEach(() => {
     fs.ensureDir.mockClear();
@@ -17,7 +36,7 @@ describe('writeTestResult', () => {
     await writeTestResult(
       // the default output directory in playwright
       { title: 'Test Story', outputDir: resolve('test-results/test-story-chromium') } as TestInfo,
-      { home: Buffer.from('Chromatic') },
+      { home: Buffer.from(JSON.stringify(snapshotJson)) },
       { 'http://localhost:3000/home': { statusCode: 200, body: Buffer.from('Chromatic') } },
       {
         diffThreshold: 5,
@@ -48,50 +67,36 @@ describe('writeTestResult', () => {
   it('successfully generates test results with mapped source entries', async () => {
     // @ts-expect-error Jest mock
     fs.ensureDir.mockReturnValue(true);
-    const storyJson = {
-      childNodes: [
-        {
-          attributes: {
-            src: '/home/',
-          },
-        },
-        {
-          attributes: {
-            src: '/img?src=some-path',
-          },
-        },
-      ],
-    };
 
     const expectedMappedJson = {
       childNodes: [
         {
+          type: NodeType.Element,
           attributes: {
             src: '/home/index.html',
           },
         },
         {
+          type: NodeType.Element,
           attributes: {
             src: '/img-fe2b41833610050d950fb9112407d3b3.png',
           },
         },
       ],
     };
 
-    const expectedBuffer = Buffer.from(JSON.stringify(expectedMappedJson));
-
     await writeTestResult(
       // the default output directory in playwright
       { title: 'Toy Story', outputDir: resolve('test-results/toy-story-chromium') } as TestInfo,
-      { home: Buffer.from(JSON.stringify(storyJson)) },
+      { home: Buffer.from(JSON.stringify(snapshotJson)) },
       {
         'http://localhost:3000/home/': {
           statusCode: 200,
-          body: Buffer.from(JSON.stringify(storyJson)),
+          body: Buffer.from(JSON.stringify(snapshotJson)),
         },
         'http://localhost:3000/img?src=some-path': {
           statusCode: 200,
-          body: Buffer.from(JSON.stringify(storyJson)),
+          body: Buffer.from('image'),
           contentType: 'image/png',
         },
       },
@@ -103,7 +108,7 @@ describe('writeTestResult', () => {
     expect(fs.outputFile).toHaveBeenCalledTimes(3);
     expect(fs.outputFile).toHaveBeenCalledWith(
       resolve('./test-results/chromatic-archives/archive/toy-story-home.snapshot.json'),
-      expectedBuffer
+      JSON.stringify(expectedMappedJson)
     );
     expect(fs.outputJson).toHaveBeenCalledWith(
       resolve('./test-results/chromatic-archives/toy-story.stories.json'),
@@ -131,7 +136,7 @@ describe('writeTestResult', () => {
         // simulates setting a custom output directory in Playwright
         outputDir: resolve('some-custom-directory/directory/test-story-chromium'),
       } as TestInfo,
-      { home: Buffer.from('Chromatic') },
+      { home: Buffer.from(JSON.stringify(snapshotJson)) },
       { 'http://localhost:3000/home': { statusCode: 200, body: Buffer.from('Chromatic') } },
       { viewports: [720] }
     );

diff --git a/src/write-archive/index.ts b/src/write-archive/index.ts
@@ -62,17 +62,19 @@ export async function writeTestResult(
     })
   );
 
-  await Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
-    // XXX_jwir3: We go through our stories here and map any instances that are found in
-    //            the keys of the source map to their respective values.
-    const snapshot = new DOMSnapshot(domSnapshot);
-    const mappedSnapshot = await snapshot.mapAssetPaths(sourceMap);
-
-    await outputFile(
-      join(archiveDir, `${sanitize(title)}-${sanitize(name)}.snapshot.json`),
-      mappedSnapshot
-    );
-  });
+  await Promise.all(
+    await Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
+      // XXX_jwir3: We go through our stories here and map any instances that are found in
+      //            the keys of the source map to their respective values.
+      const snapshot = new DOMSnapshot(domSnapshot);
+      const mappedSnapshot = await snapshot.mapAssetPaths(sourceMap);
+
+      await outputFile(
+        join(archiveDir, `${sanitize(title)}-${sanitize(name)}.snapshot.json`),
+        mappedSnapshot
+      );
+    })
+  );
 
   await writeStoriesFile(
     join(finalOutputDir, `${sanitize(title)}.stories.json`),