#8582 e2e fixture method for verifying mod definition yaml (#8662)

* e2e fixture method for verifying mod definition yaml

* fix ts

* fix e2e test

* rename func

.pre-commit-config.yaml

@@ -10,8 +10,6 @@ repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v3.2.0
     hooks:
-      - id: end-of-file-fixer
-      - id: trailing-whitespace
       - id: detect-private-key
   - repo: https://github.com/Yelp/detect-secrets
     rev: v1.5.0

end-to-end-tests/fixtures/modDefinitions.ts

@@ -15,13 +15,27 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { expect } from "@playwright/test";
 import { test as pageContextFixture } from "./pageContext";
 import { WorkshopPage } from "../pageObjects/extensionConsole/workshop/workshopPage";
 
+// Replaces any uuids in the text with a fixed value to make snapshots more stable
+function normalizeUUids(string: string) {
+  return string.replaceAll(
+    // eslint-disable-next-line unicorn/better-regex -- more clear this way
+    /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/g,
+    "00000000-0000-0000-0000-000000000000",
+  );
+}
+
 export const test = pageContextFixture.extend<{
   // These should correspond 1-1 with the mod definition file names in the fixtures/modDefinitions directory
   modDefinitionNames: string[];
   createdModIds: string[];
+  verifyModDefinitionSnapshot: (options: {
+    modId: string;
+    snapshotName: string;
+  }) => Promise<void>;
 }>({
   modDefinitionNames: [],
   createdModIds: [
@@ -49,4 +63,26 @@ export const test = pageContextFixture.extend<{
     },
     { auto: true },
   ],
+  async verifyModDefinitionSnapshot({ page, extensionId }, use, testInfo) {
+    // Overriding the snapshot suffix to avoid including the os name.
+    testInfo.snapshotSuffix = `${testInfo.title}`;
+    const _verifyModDefinitionSnapshot = async ({
+      modId,
+      snapshotName,
+    }: {
+      modId: string;
+      snapshotName: string;
+    }) => {
+      const workshopPage = new WorkshopPage(page, extensionId);
+      await workshopPage.goto();
+      const editPage = await workshopPage.findAndSelectMod(modId);
+
+      const normalizedModDefinitionYaml = normalizeUUids(
+        await editPage.editor.getValue(),
+      );
+      expect(normalizedModDefinitionYaml).toMatchSnapshot(snapshotName);
+    };
+
+    await use(_verifyModDefinitionSnapshot);
+  },
 });

end-to-end-tests/pageObjects/extensionConsole/workshop/modEditor.ts

@@ -15,22 +15,40 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { type Locator, type Page } from "@playwright/test";
+import { type Locator, type Page, expect } from "@playwright/test";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { uuidv4 } from "@/types/helpers";
 
 export class WorkshopModEditor {
   readonly textArea: Locator;
+  readonly content: Locator;
   readonly baseLocator: Locator;
 
   constructor(private readonly page: Page) {
     this.baseLocator = this.page.getByLabel("Editor");
+    this.content = this.baseLocator.locator(".ace_content");
     this.textArea = this.baseLocator.getByRole("textbox");
   }
 
+  async waitForLoad() {
+    await expect(this.textArea).toBeVisible();
+    await expect(this.baseLocator.getByText("Loading editor...")).toBeHidden();
+  }
+
+  async getValue() {
+    // Ace editor does not provide an easy way for e2e tests to get the value of the textarea with new line spacing intact,
+    // so we use the clipboard API to copy the text and then read it from the clipboard
+    await this.textArea.press("ControlOrMeta+a");
+    await this.textArea.press("ControlOrMeta+c");
+    const handle = await this.page.evaluateHandle(async () =>
+      navigator.clipboard.readText(),
+    );
+    return handle.jsonValue();
+  }
+
   async findText(text: string) {
-    await this.baseLocator.locator(".ace_content").click(); // Focus on the visible editor
+    await this.content.click(); // Focus on the visible editor
     await this.page.keyboard.press("ControlOrMeta+f");
     await this.page.getByPlaceholder("Search for").fill(text);
   }

end-to-end-tests/pageObjects/extensionConsole/workshop/workshopPage.ts

@@ -49,12 +49,15 @@ export class WorkshopPage {
       .fill(modId);
     await this.page.getByRole("cell", { name: modId }).click();
 
-    return new EditWorkshopModPage(this.page);
+    const editPage = new EditWorkshopModPage(this.page);
+    await editPage.editor.waitForLoad();
+    return editPage;
   }
 
   async createNewModFromDefinition(modDefinitionName: string) {
     await this.createNewBrickButton.click();
     const createPage = new CreateWorkshopModPage(this.page);
+    await createPage.editor.waitForLoad();
     const modId =
       await createPage.editor.replaceWithModDefinition(modDefinitionName);
     await createPage.createBrickButton.click();

end-to-end-tests/tests/extensionConsoleActivation.spec.ts → end-to-end-tests/tests/extensionConsole/activation.spec.ts

@@ -15,22 +15,22 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { test, expect } from "../fixtures/testBase";
-import { ActivateModPage } from "../pageObjects/extensionConsole/modsPage";
+import { test, expect } from "../../fixtures/testBase";
+import { ActivateModPage } from "../../pageObjects/extensionConsole/modsPage";
 // @ts-expect-error -- https://youtrack.jetbrains.com/issue/AQUA-711/Provide-a-run-configuration-for-Playwright-tests-in-specs-with-fixture-imports-only
 import { test as base } from "@playwright/test";
 import {
   getSidebarPage,
   clickAndWaitForNewPage,
   runModViaQuickBar,
   getBrowserOs,
-} from "../utils";
+} from "../../utils";
 import path from "node:path";
 import { VALID_UUID_REGEX } from "@/types/stringTypes";
 import { type Serializable } from "playwright-core/types/structs";
-import { SERVICE_URL } from "../env";
-import { ExtensionsShortcutsPage } from "end-to-end-tests/pageObjects/extensionsShortcutsPage";
-import { FloatingActionButton } from "end-to-end-tests/pageObjects/floatingActionButton";
+import { SERVICE_URL } from "../../env";
+import { ExtensionsShortcutsPage } from "../../pageObjects/extensionsShortcutsPage";
+import { FloatingActionButton } from "../../pageObjects/floatingActionButton";
 
 test("can activate a mod with no config options", async ({
   page,
@@ -70,7 +70,10 @@ test("can activate a mod with built-in integration", async ({
       giphyRequestPostData = route.request().postDataJSON();
 
       return route.fulfill({
-        path: path.join(__dirname, "../fixtures/responses/giphy-search.json"),
+        path: path.join(
+          __dirname,
+          "../../fixtures/responses/giphy-search.json",
+        ),
       });
     }
 

end-to-end-tests/tests/workshop/createMod.spec.ts

@@ -26,6 +26,7 @@ test("can create a new mod from a yaml definition", async ({
   page,
   extensionId,
   createdModIds,
+  verifyModDefinitionSnapshot,
 }) => {
   // Test uses the modDefinitionNames fixture to automatically create the mod definition
   const simpleSidebarModId = createdModIds[0];
@@ -38,4 +39,9 @@ test("can create a new mod from a yaml definition", async ({
   await expect(editWorkshopModPage.editor.baseLocator).toContainText(
     simpleSidebarModId,
   );
+
+  await verifyModDefinitionSnapshot({
+    modId: simpleSidebarModId,
+    snapshotName: "simple-sidebar-panel",
+  });
 });

end-to-end-tests/tests/workshop/createMod.spec.ts-snapshots/simple-sidebar-panel-chrome-can create a new mod from a yaml definition

@@ -0,0 +1,73 @@
+kind: recipe
+options:
+  schema:
+    type: object
+    properties: {}
+  uiSchema:
+    ui:order:
+      - "*"
+metadata:
+  id: "@extension-e2e-test-unaffiliated/simple-sidebar-panel-00000000-0000-0000-0000-000000000000"
+  name: Simple Sidebar Panel
+  version: 1.0.0
+  description: Created with the PixieBrix Page Editor
+apiVersion: v3
+definitions:
+  extensionPoint:
+    kind: extensionPoint
+    definition:
+      type: actionPanel
+      reader:
+        - "@pixiebrix/document-metadata"
+        - "@pixiebrix/document-context"
+      isAvailable:
+        matchPatterns:
+          - https://pbx.vercel.app/*
+        urlPatterns: []
+        selectors: []
+      trigger: load
+      debounce:
+        waitMillis: 250
+        leading: false
+        trailing: true
+      customEvent: null
+extensionPoints:
+  - label: Simple Sidebar Panel
+    config:
+      heading: Simple Sidebar Panel
+      body:
+        - id: "@pixiebrix/document"
+          rootMode: document
+          config:
+            body:
+              - type: container
+                config: {}
+                children:
+                  - type: row
+                    config: {}
+                    children:
+                      - type: column
+                        config: {}
+                        children:
+                          - type: header
+                            config:
+                              title: !nunjucks Simple Sidebar Panel
+                              heading: h1
+                  - type: row
+                    config: {}
+                    children:
+                      - type: column
+                        config: {}
+                        children:
+                          - type: text
+                            config:
+                              text: !nunjucks >-
+                                Simple sidebar panel for testing sidepanel
+                                open/close behavior
+                              enableMarkdown: true
+          root: null
+    permissions:
+      origins: []
+      permissions: []
+    id: extensionPoint
+    services: {}

end-to-end-tests/tests/workshop/createMod.spec.ts-snapshots/simple-sidebar-panel-edge-can create a new mod from a yaml definition

@@ -0,0 +1,73 @@
+kind: recipe
+options:
+  schema:
+    type: object
+    properties: {}
+  uiSchema:
+    ui:order:
+      - "*"
+metadata:
+  id: "@extension-e2e-test-unaffiliated/simple-sidebar-panel-00000000-0000-0000-0000-000000000000"
+  name: Simple Sidebar Panel
+  version: 1.0.0
+  description: Created with the PixieBrix Page Editor
+apiVersion: v3
+definitions:
+  extensionPoint:
+    kind: extensionPoint
+    definition:
+      type: actionPanel
+      reader:
+        - "@pixiebrix/document-metadata"
+        - "@pixiebrix/document-context"
+      isAvailable:
+        matchPatterns:
+          - https://pbx.vercel.app/*
+        urlPatterns: []
+        selectors: []
+      trigger: load
+      debounce:
+        waitMillis: 250
+        leading: false
+        trailing: true
+      customEvent: null
+extensionPoints:
+  - label: Simple Sidebar Panel
+    config:
+      heading: Simple Sidebar Panel
+      body:
+        - id: "@pixiebrix/document"
+          rootMode: document
+          config:
+            body:
+              - type: container
+                config: {}
+                children:
+                  - type: row
+                    config: {}
+                    children:
+                      - type: column
+                        config: {}
+                        children:
+                          - type: header
+                            config:
+                              title: !nunjucks Simple Sidebar Panel
+                              heading: h1
+                  - type: row
+                    config: {}
+                    children:
+                      - type: column
+                        config: {}
+                        children:
+                          - type: text
+                            config:
+                              text: !nunjucks >-
+                                Simple sidebar panel for testing sidepanel
+                                open/close behavior
+                              enableMarkdown: true
+          root: null
+    permissions:
+      origins: []
+      permissions: []
+    id: extensionPoint
+    services: {}

src/tsconfig.strictNullChecks.json

@@ -13,7 +13,7 @@
     "../end-to-end-tests/pageObjects/extensionConsole/workshop/workshopPage.ts",
     "../end-to-end-tests/setup/affiliated.setup.ts",
     "../end-to-end-tests/setup/unaffiliated.setup.ts",
-    "../end-to-end-tests/tests/extensionConsoleActivation.spec.ts",
+    "../end-to-end-tests/tests/extensionConsole/activation.spec.ts",
     "../end-to-end-tests/tests/smoke/modsPage.spec.ts",
     "../end-to-end-tests/tests/telemetry/errors.spec.ts",
     "./__mocks__/@/auth/featureFlagStorage.ts",