Merge pull request #1563 from argos-ci/variant-switch

feat: allow to switch between viewport & browser variants

Author: gregberge

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
 }

apps/backend/src/graphql/__generated__/resolver-types.ts

@@ -8,6 +8,7 @@ import {
   IScreenshotDiffResolvers,
   IScreenshotDiffStatus,
 } from "../__generated__/resolver-types.js";
+import { getVariantKey } from "../services/variant-key.js";
 
 const { gql } = gqlTag;
 
@@ -30,8 +31,8 @@ export const typeDefs = gql`
     url: String
     "Name of the diff (either base or compare screenshot name)"
     name: String!
-    "Base name of the diff, same for all retries"
-    baseName: String!
+    "Unique key to identify screenshot variant (browser, resolution, retries)"
+    variantKey: String!
     width: Int
     height: Int
     status: ScreenshotDiffStatus!
@@ -103,25 +104,9 @@ export const resolvers: IResolvers = {
       return getPublicImageFileUrl(file);
     },
     name: nameResolver,
-    baseName: async (...args) => {
-      const [name, status] = await Promise.all([
-        nameResolver(...args),
-        statusResolver(...args),
-      ]);
-
-      if (
-        status === IScreenshotDiffStatus.Failure ||
-        status === IScreenshotDiffStatus.RetryFailure
-      ) {
-        // Match ":name #num (failed).png"
-        const match = name.match(/^(.*) #\d+ \(failed\)\.png$/);
-        if (match && match[1]) {
-          return match[1];
-        }
-        return name;
-      }
-
-      return name;
+    variantKey: async (...args) => {
+      const name = await nameResolver(...args);
+      return getVariantKey(name);
     },
     width: async (screenshotDiff, _args, ctx) => {
       if (!screenshotDiff.fileId) {

apps/backend/src/graphql/__generated__/schema.gql

@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+
+import { getVariantKey } from "./variant-key";
+
+describe("#getVariantKey", () => {
+  it("returns the variant key", async () => {
+    expect(getVariantKey("chromium/role/edit/space-ui vw-375.png")).toBe(
+      "role/edit/space-ui",
+    );
+    expect(getVariantKey("firefox/space-ui vw-375.png")).toBe("space-ui");
+    expect(getVariantKey("safari/another/path vw-480.png")).toBe(
+      "another/path",
+    );
+    expect(getVariantKey("chrome/role/edit/space-ui vw-720.png")).toBe(
+      "role/edit/space-ui",
+    );
+    expect(getVariantKey("chrome/role/edit/space-ui.png")).toBe(
+      "role/edit/space-ui",
+    );
+  });
+
+  it("handles failed variant keys", async () => {
+    expect(getVariantKey("chromium/role/edit/space-ui #123 (failed).png")).toBe(
+      "role/edit/space-ui",
+    );
+    expect(getVariantKey("firefox/space-ui #456 (failed).png")).toBe(
+      "space-ui",
+    );
+    expect(getVariantKey("safari/another/path #789 (failed).png")).toBe(
+      "another/path",
+    );
+    expect(getVariantKey("chrome/role/edit/space-ui #101 (failed).png")).toBe(
+      "role/edit/space-ui",
+    );
+  });
+
+  it("handles variant keys without browser prefix", async () => {
+    expect(getVariantKey("role/edit/space-ui vw-375.png")).toBe(
+      "role/edit/space-ui",
+    );
+    expect(getVariantKey("space-ui vw-375.png")).toBe("space-ui");
+    expect(getVariantKey("another/path vw-480.png")).toBe("another/path");
+    expect(getVariantKey("role/edit/space-ui vw-720.png")).toBe(
+      "role/edit/space-ui",
+    );
+    expect(getVariantKey("role/edit/space-ui.png")).toBe("role/edit/space-ui");
+  });
+
+  it("handles variant keys without vw suffix", async () => {
+    expect(getVariantKey("chromium/role/edit/space-ui.png")).toBe(
+      "role/edit/space-ui",
+    );
+    expect(getVariantKey("firefox/space-ui.png")).toBe("space-ui");
+    expect(getVariantKey("safari/another/path.png")).toBe("another/path");
+    expect(getVariantKey("chrome/role/edit/space-ui.png")).toBe(
+      "role/edit/space-ui",
+    );
+  });
+});

apps/backend/src/graphql/definitions/ScreenshotDiff.ts

@@ -0,0 +1,20 @@
+/**
+ * Generates a variant key by sanitizing the given name string.
+ *
+ * The function performs the following transformations:
+ * 1. Removes the browser prefix (chromium, firefox, safari, chrome) followed by a slash.
+ * 2. Removes any whitespace followed by "vw-" and digits, ending with ".png".
+ * 3. Removes any occurrence of " #<digits> (failed).png".
+ * 4. Removes the ".png" extension.
+ *
+ * @param name - The name string to be sanitized.
+ * @returns The sanitized variant key.
+ */
+export function getVariantKey(name: string): string {
+  return name
+    .replace(/^(chromium|firefox|safari|chrome)\//, "")
+    .replace(/\s+vw-\d+\.png$/, "")
+    .replace(/ #\d+ \(failed\)\.png$/, "")
+    .replace(/\.png$/, "")
+    .trim();
+}