Group Percy snapshots by test case name (#5299)

* Group by test case name

* Resolve conflicts with previous version of script

* Add test case for ensuring unique combination of test case and snapshot name

snapshots.js

@@ -130,18 +130,19 @@ async function getPercyConfigURLs() {
   let urls = [];
 
   for (let link of links) {
-    const path = new URL(link).pathname.replace(/\/?$/, '/');
-
     for (const theme of SNAPSHOT_COLOR_THEMES) {
-      const url = `${link}?${COLOR_THEME_QUERY_PARAM_NAME}=${theme}`;
+      const url = new URL(`${link}?${COLOR_THEME_QUERY_PARAM_NAME}=${theme}`);
+      const path = url.pathname.replace(/\/?$/, '/');
+
       const name = `${path.slice(0, path.length - 1)}?${COLOR_THEME_QUERY_PARAM_NAME}=${theme}`;
       const widths = await getWidthsForExample(path, theme);
 
       // Default theme captured responsively, other themes captured at the largest width
       urls.push({
-        url,
+        url: url.href,
         name,
         widths,
+        testCase: url.pathname.replace(/standalone\//g, ''),
       });
     }
   }

tests/snapshots.test.js

@@ -110,3 +110,17 @@ test('Returns snapshots with only the expected set of color themes', async () =>
   }, new Set());
   expect(JSON.stringify(encounteredThemes)).toBe(JSON.stringify(new Set(SNAPSHOT_COLOR_THEMES)));
 });
+
+test('Returns snapshots with unique combination of test case and name', async () => {
+  const snapshots = await snapshotsTest();
+  const encounteredTestCaseAndName = new Map();
+  const failedSnapshots = [];
+  snapshots.forEach((snapshot) => {
+    const key = `${snapshot.testCase}-${snapshot.name}`;
+    if (encounteredTestCaseAndName.has(key)) {
+      failedSnapshots.push(snapshot);
+    }
+    encounteredTestCaseAndName.set(key, snapshot.url);
+  });
+  expect(failedSnapshots).toHaveLength(0);
+});