@chromatic-com/cypress 0.12.6 → 0.12.8

package/dist/index.js

@@ -3394,7 +3394,7 @@ var logger = process.env.LOG ? console : {
 
 // ../shared/src/resource-archiver/index.ts
 var _ResourceArchiver = class _ResourceArchiver {
-  constructor(cdpClient, allowedDomains, httpCredentials) {
+  constructor(cdpClient, allowedDomains, httpCredentials, firstUrl) {
     __publicField(this, "archive", {});
     __publicField(this, "client");
     /**
@@ -3468,6 +3468,7 @@ var _ResourceArchiver = class _ResourceArchiver {
     }, "requestPaused"));
     this.client = cdpClient;
     this.httpCredentials = httpCredentials;
+    this.firstUrl = firstUrl;
     this.assetDomains = (allowedDomains || []).map((domain) => {
       if (domain.startsWith("http")) {
         return domain;
@@ -3527,12 +3528,25 @@ var _ResourceArchiver = class _ResourceArchiver {
     const contentTypeHeader = responseHeaders.find(({ name }) => name.toLowerCase() === "content-type");
     const isFirstRequest = requestUrl.toString() === this.firstUrl.toString();
     if (isRequestFromAllowedDomain && !isFirstRequest) {
+      logger.log("Archiving request", {
+        url: request.url,
+        statusCode: responseStatusCode,
+        statusText: responseStatusText,
+        contentType: contentTypeHeader?.value
+      });
       this.archive[request.url] = {
         statusCode: responseStatusCode,
         statusText: responseStatusText,
         body: Buffer.from(body, base64Encoded ? "base64" : "utf8"),
         contentType: contentTypeHeader?.value
       };
+    } else {
+      logger.log("Skipping archiving of request", {
+        url: request.url,
+        firstUrl: this.firstUrl.toString(),
+        isFirstRequest,
+        isRequestFromAllowedDomain
+      });
     }
     await this.clientSend(request, "Fetch.continueRequest", {
       requestId
@@ -3656,6 +3670,10 @@ var _ArchiveFile = class _ArchiveFile {
     if (!queryString)
       return pathname;
     const safeQueryString = this.hash(queryString);
+    const extension = path2__default.default.extname(pathname);
+    if (extension) {
+      return `${pathname.substring(0, pathname.length - extension.length)}-${safeQueryString}${extension}`;
+    }
     return `${pathname}-${safeQueryString}`;
   }
   truncateFileName(pathname) {
@@ -3795,8 +3813,7 @@ var _DOMSnapshot = class _DOMSnapshot {
         const currentSrc = this.mapSrcsetUrls(srcsetValue, sourceMap);
         if (currentSrc) {
           node.attributes.src = currentSrc;
-          delete node.attributes.srcset;
-          delete node.attributes.sizes;
+          this.removeResponsiveImageAttributes(node.attributes);
         }
       }
       if (node.tagName === "picture") {
@@ -3821,6 +3838,7 @@ var _DOMSnapshot = class _DOMSnapshot {
       const imageElement = node.childNodes.find((childNode) => childNode.type === NodeType.Element && childNode.tagName === "img");
       if (imageElement && imageElement.attributes) {
         imageElement.attributes.src = sourceMap.get(matchingUrl);
+        this.removeResponsiveImageAttributes(imageElement.attributes);
       }
     }
   }
@@ -3855,6 +3873,10 @@ var _DOMSnapshot = class _DOMSnapshot {
     });
     return currentSrc;
   }
+  removeResponsiveImageAttributes(attributes) {
+    delete attributes.srcset;
+    delete attributes.sizes;
+  }
 };
 __name(_DOMSnapshot, "DOMSnapshot");
 var DOMSnapshot = _DOMSnapshot;
@@ -3892,9 +3914,13 @@ var STORIES_FILE_EXT = "stories.json";
 var uniqueId = {
   value: 1
 };
-function storiesFileName(testTitle) {
+function storiesFileName(testTitle, overwriteDuplicateNames = true) {
+  let title = sanitize(testTitle);
+  if (!overwriteDuplicateNames) {
+    title += "-" + uniqueId.value++;
+  }
   const fileName = [
-    sanitize(testTitle) + "-" + uniqueId.value++,
+    title,
     STORIES_FILE_EXT
   ].join(".");
   const maxByteLength = MAX_FILE_NAME_BYTE_LENGTH - 25;
@@ -3905,8 +3931,9 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
   const title = collapseNewlines(storyTitle);
   return {
     title,
-    stories: Object.entries(domSnapshots).map(([snapshotName, { viewport }]) => {
+    stories: Object.entries(domSnapshots).map(([snapshotName, { viewport, parameters }]) => {
       const name = collapseNewlines(snapshotName);
+      const { chromatic: chromaticParams, ...restParameters } = parameters || {};
       return {
         name,
         // Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
@@ -3924,6 +3951,7 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
           },
           chromatic: {
             ...chromaticStorybookParams,
+            ...chromaticParams,
             modes: buildStoryModesConfig([
               viewport
             ])
@@ -3935,7 +3963,8 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
             defaultViewport: viewportToString(findDefaultViewport([
               viewport
             ]))
-          }
+          },
+          ...restParameters
         }
       };
     })
@@ -3992,7 +4021,7 @@ function findDefaultViewport(viewports) {
 __name(findDefaultViewport, "findDefaultViewport");
 
 // ../shared/src/write-archive/index.ts
-async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStorybookParams) {
+async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStorybookParams, testRunner) {
   const { titlePath, outputDir, pageUrl } = e2eTestInfo;
   const titlePathWithoutFileExtensions = titlePath.map((pathPart) => (
     // make sure we remove file extensions, even if the file name doesn't have .spec or .test or.cy
@@ -4013,10 +4042,13 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     const archiveFile = new ArchiveFile(url, response, pageUrl);
     const origSrcPath = archiveFile.originalSrc();
     const fileSystemPath = archiveFile.toFileSystemPath();
+    const responsePath = path2.join(archiveDir, fileSystemPath);
     if (origSrcPath !== fileSystemPath) {
       sourceMap.set(origSrcPath, fileSystemPath);
     }
-    await outputFile(path2.join(archiveDir, fileSystemPath), response.body);
+    if (!fs.existsSync(responsePath)) {
+      await outputFile(responsePath, response.body);
+    }
   }));
   await Promise.all(Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
     const snapshot = new DOMSnapshot(domSnapshot);
@@ -4024,7 +4056,7 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     const snapshotFile = snapshotFileName(snapshotId(title, name), domSnapshot.viewport);
     await outputFile(path2.join(archiveDir, snapshotFile), mappedSnapshot);
   }));
-  const storiesFile = storiesFileName(title);
+  const storiesFile = storiesFileName(title, testRunner !== "vitest");
   const storiesJson = createStories(title, domSnapshots, chromaticStorybookParams);
   await outputJSONFile(path2.join(finalOutputDir, storiesFile), storiesJson);
   const errors = Object.entries(archive).filter(([, r]) => "error" in r);
@@ -4057,7 +4089,7 @@ var writeArchives = /* @__PURE__ */ __name(async ({ testTitlePath, domSnapshots,
     titlePath: testTitlePath,
     outputDir,
     pageUrl
-  }, allSnapshots, resourceArchive, chromaticStorybookParams);
+  }, allSnapshots, resourceArchive, chromaticStorybookParams, "cypress");
 }, "writeArchives");
 var resourceArchiver = null;
 var host = "";

package/dist/index.mjs

@@ -3387,7 +3387,7 @@ var logger = process.env.LOG ? console : {
 
 // ../shared/src/resource-archiver/index.ts
 var _ResourceArchiver = class _ResourceArchiver {
-  constructor(cdpClient, allowedDomains, httpCredentials) {
+  constructor(cdpClient, allowedDomains, httpCredentials, firstUrl) {
     __publicField(this, "archive", {});
     __publicField(this, "client");
     /**
@@ -3461,6 +3461,7 @@ var _ResourceArchiver = class _ResourceArchiver {
     }, "requestPaused"));
     this.client = cdpClient;
     this.httpCredentials = httpCredentials;
+    this.firstUrl = firstUrl;
     this.assetDomains = (allowedDomains || []).map((domain) => {
       if (domain.startsWith("http")) {
         return domain;
@@ -3520,12 +3521,25 @@ var _ResourceArchiver = class _ResourceArchiver {
     const contentTypeHeader = responseHeaders.find(({ name }) => name.toLowerCase() === "content-type");
     const isFirstRequest = requestUrl.toString() === this.firstUrl.toString();
     if (isRequestFromAllowedDomain && !isFirstRequest) {
+      logger.log("Archiving request", {
+        url: request.url,
+        statusCode: responseStatusCode,
+        statusText: responseStatusText,
+        contentType: contentTypeHeader?.value
+      });
       this.archive[request.url] = {
         statusCode: responseStatusCode,
         statusText: responseStatusText,
         body: Buffer.from(body, base64Encoded ? "base64" : "utf8"),
         contentType: contentTypeHeader?.value
       };
+    } else {
+      logger.log("Skipping archiving of request", {
+        url: request.url,
+        firstUrl: this.firstUrl.toString(),
+        isFirstRequest,
+        isRequestFromAllowedDomain
+      });
     }
     await this.clientSend(request, "Fetch.continueRequest", {
       requestId
@@ -3649,6 +3663,10 @@ var _ArchiveFile = class _ArchiveFile {
     if (!queryString)
       return pathname;
     const safeQueryString = this.hash(queryString);
+    const extension = path2.extname(pathname);
+    if (extension) {
+      return `${pathname.substring(0, pathname.length - extension.length)}-${safeQueryString}${extension}`;
+    }
     return `${pathname}-${safeQueryString}`;
   }
   truncateFileName(pathname) {
@@ -3788,8 +3806,7 @@ var _DOMSnapshot = class _DOMSnapshot {
         const currentSrc = this.mapSrcsetUrls(srcsetValue, sourceMap);
         if (currentSrc) {
           node.attributes.src = currentSrc;
-          delete node.attributes.srcset;
-          delete node.attributes.sizes;
+          this.removeResponsiveImageAttributes(node.attributes);
         }
       }
       if (node.tagName === "picture") {
@@ -3814,6 +3831,7 @@ var _DOMSnapshot = class _DOMSnapshot {
       const imageElement = node.childNodes.find((childNode) => childNode.type === NodeType.Element && childNode.tagName === "img");
       if (imageElement && imageElement.attributes) {
         imageElement.attributes.src = sourceMap.get(matchingUrl);
+        this.removeResponsiveImageAttributes(imageElement.attributes);
       }
     }
   }
@@ -3848,6 +3866,10 @@ var _DOMSnapshot = class _DOMSnapshot {
     });
     return currentSrc;
   }
+  removeResponsiveImageAttributes(attributes) {
+    delete attributes.srcset;
+    delete attributes.sizes;
+  }
 };
 __name(_DOMSnapshot, "DOMSnapshot");
 var DOMSnapshot = _DOMSnapshot;
@@ -3885,9 +3907,13 @@ var STORIES_FILE_EXT = "stories.json";
 var uniqueId = {
   value: 1
 };
-function storiesFileName(testTitle) {
+function storiesFileName(testTitle, overwriteDuplicateNames = true) {
+  let title = sanitize(testTitle);
+  if (!overwriteDuplicateNames) {
+    title += "-" + uniqueId.value++;
+  }
   const fileName = [
-    sanitize(testTitle) + "-" + uniqueId.value++,
+    title,
     STORIES_FILE_EXT
   ].join(".");
   const maxByteLength = MAX_FILE_NAME_BYTE_LENGTH - 25;
@@ -3898,8 +3924,9 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
   const title = collapseNewlines(storyTitle);
   return {
     title,
-    stories: Object.entries(domSnapshots).map(([snapshotName, { viewport }]) => {
+    stories: Object.entries(domSnapshots).map(([snapshotName, { viewport, parameters }]) => {
       const name = collapseNewlines(snapshotName);
+      const { chromatic: chromaticParams, ...restParameters } = parameters || {};
       return {
         name,
         // Viewport addon (Storybook 10+): `parameters.viewport.options` registers sizes; `globals.viewport`
@@ -3917,6 +3944,7 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
           },
           chromatic: {
             ...chromaticStorybookParams,
+            ...chromaticParams,
             modes: buildStoryModesConfig([
               viewport
             ])
@@ -3928,7 +3956,8 @@ function createStories(storyTitle, domSnapshots, chromaticStorybookParams) {
             defaultViewport: viewportToString(findDefaultViewport([
               viewport
             ]))
-          }
+          },
+          ...restParameters
         }
       };
     })
@@ -3985,7 +4014,7 @@ function findDefaultViewport(viewports) {
 __name(findDefaultViewport, "findDefaultViewport");
 
 // ../shared/src/write-archive/index.ts
-async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStorybookParams) {
+async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStorybookParams, testRunner) {
   const { titlePath, outputDir, pageUrl } = e2eTestInfo;
   const titlePathWithoutFileExtensions = titlePath.map((pathPart) => (
     // make sure we remove file extensions, even if the file name doesn't have .spec or .test or.cy
@@ -4006,10 +4035,13 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     const archiveFile = new ArchiveFile(url, response, pageUrl);
     const origSrcPath = archiveFile.originalSrc();
     const fileSystemPath = archiveFile.toFileSystemPath();
+    const responsePath = join(archiveDir, fileSystemPath);
     if (origSrcPath !== fileSystemPath) {
       sourceMap.set(origSrcPath, fileSystemPath);
     }
-    await outputFile(join(archiveDir, fileSystemPath), response.body);
+    if (!existsSync(responsePath)) {
+      await outputFile(responsePath, response.body);
+    }
   }));
   await Promise.all(Object.entries(domSnapshots).map(async ([name, domSnapshot]) => {
     const snapshot = new DOMSnapshot(domSnapshot);
@@ -4017,7 +4049,7 @@ async function writeTestResult(e2eTestInfo, domSnapshots, archive, chromaticStor
     const snapshotFile = snapshotFileName(snapshotId(title, name), domSnapshot.viewport);
     await outputFile(join(archiveDir, snapshotFile), mappedSnapshot);
   }));
-  const storiesFile = storiesFileName(title);
+  const storiesFile = storiesFileName(title, testRunner !== "vitest");
   const storiesJson = createStories(title, domSnapshots, chromaticStorybookParams);
   await outputJSONFile(join(finalOutputDir, storiesFile), storiesJson);
   const errors = Object.entries(archive).filter(([, r]) => "error" in r);
@@ -4050,7 +4082,7 @@ var writeArchives = /* @__PURE__ */ __name(async ({ testTitlePath, domSnapshots,
     titlePath: testTitlePath,
     outputDir,
     pageUrl
-  }, allSnapshots, resourceArchive, chromaticStorybookParams);
+  }, allSnapshots, resourceArchive, chromaticStorybookParams, "cypress");
 }, "writeArchives");
 var resourceArchiver = null;
 var host = "";

package/dist/storybook-config/main.d.mts

@@ -12,6 +12,9 @@ declare const _default: {
         renderer: string;
     };
     staticDirs: string[];
+    features: {
+        sidebarOnboardingChecklist: boolean;
+    };
 };
 
 export { _default as default };

package/dist/storybook-config/main.mjs

@@ -47,7 +47,10 @@ var main_default = {
   },
   staticDirs: [
     path2.resolve(archivesDir(DEFAULT_OUTPUT_DIR), "archive")
-  ]
+  ],
+  features: {
+    sidebarOnboardingChecklist: false
+  }
 };
 
 export { main_default as default };

package/dist/storybook-config/manager.mjs

@@ -3,7 +3,13 @@ import { addons } from 'storybook/manager-api';
 // ../shared/storybook-config/manager.ts
 addons.setConfig({
   sidebar: {
-    // this ensures we use folders at the root-level instead of categories
+    // Ensures we use folders at the root-level instead of categories
     showRoots: false
+  },
+  layoutCustomisations: {
+    // Hide toolbar options that don't make sense in e2e setup
+    showToolbar: () => false,
+    // Hide bottom panel that's empty in e2e setup
+    showPanel: () => false
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromatic-com/cypress",
-  "version": "0.12.6",
+  "version": "0.12.8",
   "description": "Chromatic Visual Regression Testing for Cypress",
   "repository": {
     "type": "git",