improvements to add starter brick e2e spec (#8917)

* improvements to add starter brick e2e spec * rename method
pixiebrix · Jul 25, 2024 · ef44074 · ef44074
1 parent 8c2fb42
commit ef44074
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 156 deletions.
diff --git a/end-to-end-tests/pageObjects/pageEditor/brickActionsPanel.ts b/end-to-end-tests/pageObjects/pageEditor/brickActionsPanel.ts
@@ -16,18 +16,18 @@
  */
 
 import { BasePageObject } from "../basePageObject";
-import { ModifiesModState } from "./utils";
+import { ModifiesModFormState } from "./utils";
 
 export class Brick extends BasePageObject {
   moveBrickUpButton = this.getByRole("button", { name: "Move brick higher" });
   moveBrickDownButton = this.getByRole("button", { name: "Move brick lower" });
 
-  @ModifiesModState
+  @ModifiesModFormState
   async moveUp() {
     return this.moveBrickUpButton.click();
   }
 
-  @ModifiesModState
+  @ModifiesModFormState
   async moveDown() {
     return this.moveBrickDownButton.click();
   }
@@ -40,6 +40,7 @@ export class Brick extends BasePageObject {
 export class BrickActionsPanel extends BasePageObject {
   removeBrickButton = this.getByTestId("icon-button-removeNode");
   copyBrickButton = this.getByTestId("icon-button-copyNode");
+  bricks = this.getByTestId("editor-node");
 
   getAddBrickButton(n: number) {
     return this.getByTestId(/icon-button-.*-add-brick/).nth(n);
@@ -51,25 +52,21 @@ export class BrickActionsPanel extends BasePageObject {
 
   getBrickByName(brickName: string) {
     return new Brick(
-      this.getByTestId("editor-node").filter({
+      this.bricks.filter({
         hasText: brickName,
       }),
     );
   }
 
-  async getBricksInPipeline() {
-    return this.getByTestId("editor-node").all();
-  }
-
   getActiveBrick() {
     return new Brick(
-      this.getByTestId("editor-node").filter({
+      this.bricks.filter({
         has: this.locator(".active"),
       }),
     );
   }
 
-  @ModifiesModState
+  @ModifiesModFormState
   async removeActiveBrick() {
     return this.removeBrickButton.click();
   }
@@ -78,12 +75,12 @@ export class BrickActionsPanel extends BasePageObject {
     return this.copyBrickButton.click();
   }
 
-  @ModifiesModState
+  @ModifiesModFormState
   async pasteBrick(index = 0) {
     return this.getPasteBrickButton(index).click();
   }
 
-  @ModifiesModState
+  @ModifiesModFormState
   async addBrick(brickName: string, { index = 0 }: { index?: number } = {}) {
     await this.getAddBrickButton(index).click();
 

diff --git a/end-to-end-tests/pageObjects/pageEditor/configurationForm.ts b/end-to-end-tests/pageObjects/pageEditor/configurationForm.ts
@@ -16,26 +16,26 @@
  */
 
 import { BasePageObject } from "../basePageObject";
-import { ModifiesModState } from "./utils";
+import { ModifiesModFormState } from "./utils";
 
 export class ConfigurationForm extends BasePageObject {
-  @ModifiesModState
+  @ModifiesModFormState
   async fillField(fieldLabel: string, value: string) {
     const field = this.getByLabel(fieldLabel);
     // Click to enable the field, if it's not already enabled
     await field.click();
     await field.fill(value);
   }
 
-  @ModifiesModState
+  @ModifiesModFormState
   async fillFieldByPlaceholder(fieldPlaceholder: string, value: string) {
     const field = this.getByPlaceholder(fieldPlaceholder);
     // Click to enable the field, if it's not already enabled
     await field.click();
     await field.fill(value);
   }
 
-  @ModifiesModState
+  @ModifiesModFormState
   async toggleSwitch(label: string) {
     await this.getSwitchByLabel(label).click();
   }

diff --git a/end-to-end-tests/pageObjects/pageEditor/createModModal.ts b/end-to-end-tests/pageObjects/pageEditor/createModModal.ts
@@ -17,7 +17,7 @@
 
 import { BasePageObject } from "../basePageObject";
 import { type UUID } from "@/types/stringTypes";
-import { ModifiesModState } from "./utils";
+import { ModifiesModFormState } from "./utils";
 
 export class CreateModModal extends BasePageObject {
   modIdInput = this.getByTestId("registryId-id-id");
@@ -29,7 +29,7 @@ export class CreateModModal extends BasePageObject {
    * @param modName the modName to use
    * @param modUuid the UUID of the mod component from adding the starter brick
    */
-  @ModifiesModState
+  @ModifiesModFormState
   async createMod(modName: string, modUuid: UUID): Promise<string> {
     const modId = `${modName.split(" ").join("-").toLowerCase()}-${modUuid}`;
 
@@ -46,7 +46,7 @@ export class CreateModModal extends BasePageObject {
    * @param modName the modName to use
    * @param modUuid the UUID of the mod component from adding the starter brick
    */
-  @ModifiesModState
+  @ModifiesModFormState
   async copyMod(modName: string, modUuid: UUID): Promise<string> {
     const modId = `${modName.split(" ").join("-").toLowerCase()}-${modUuid}`;
 

diff --git a/end-to-end-tests/pageObjects/pageEditor/modListingPanel.ts b/end-to-end-tests/pageObjects/pageEditor/modListingPanel.ts
@@ -17,6 +17,7 @@
 
 import { BasePageObject } from "../basePageObject";
 import { uuidv4 } from "@/types/helpers";
+import { ModifiesModFormState } from "./utils";
 
 export type StarterBrickUIName =
   | "Context Menu"
@@ -66,6 +67,7 @@ export class ModListingPanel extends BasePageObject {
    * not the underlying type
    * @returns modName the generated mod name
    */
+  @ModifiesModFormState
   async addStarterBrick(starterBrickName: StarterBrickUIName) {
     const modUuid = uuidv4();
     const modComponentName = `Test ${starterBrickName} ${modUuid}`;

diff --git a/end-to-end-tests/pageObjects/pageEditor/pageEditorPage.ts b/end-to-end-tests/pageObjects/pageEditor/pageEditorPage.ts
@@ -26,7 +26,7 @@ import { BrickActionsPanel } from "./brickActionsPanel";
 import { ConfigurationForm } from "./configurationForm";
 import { DataPanel } from "./dataPanel";
 import { ModEditorPane } from "./modEditorPane";
-import { ModifiesModState } from "./utils";
+import { ModifiesModFormState } from "./utils";
 import { CreateModModal } from "./createModModal";
 import { DeactivateModModal } from "end-to-end-tests/pageObjects/pageEditor/deactivateModModal";
 
@@ -99,26 +99,16 @@ export class PageEditorPage extends BasePageObject {
   }
 
   /** Used for interactions that require selecting an element on the connected page, such as the button starter brick */
-  @ModifiesModState
-  async selectConnectedPageElement(
-    connectedPage: Page,
-    selectLocator: Locator,
-    expectedElementSelector: string,
-  ) {
-    // Without focusing first, the click doesn't enable selection tool ¯\_(ツ)_/¯
-    await this.getByLabel("Select element").focus();
-    await this.getByLabel("Select element").click();
-
+  @ModifiesModFormState
+  async selectConnectedPageElement(selectLocator: Locator) {
+    const connectedPage = selectLocator.page();
     await connectedPage.bringToFront();
     await expect(
       connectedPage.getByText("Selection Tool: 0 matching"),
     ).toBeVisible();
     await selectLocator.click();
 
     await this.page.bringToFront();
-    await expect(this.getByPlaceholder("Select an element")).toHaveValue(
-      expectedElementSelector,
-    );
   }
 
   /**
@@ -144,7 +134,7 @@ export class PageEditorPage extends BasePageObject {
     );
   }
 
-  @ModifiesModState
+  @ModifiesModFormState
   async saveStandaloneMod(modName: string, modUuid: UUID) {
     const modListItem = this.modListingPanel.getModListItemByName(modName);
     await modListItem.select();
@@ -156,7 +146,7 @@ export class PageEditorPage extends BasePageObject {
     this.savedPackageModIds.push(modId);
   }
 
-  @ModifiesModState
+  @ModifiesModFormState
   async copyMod(modName: string, modUuid: UUID) {
     const modListItem = this.modListingPanel.getModListItemByName(modName);
     await modListItem.select();
@@ -181,7 +171,7 @@ export class PageEditorPage extends BasePageObject {
     await deactivateModModal.deactivateButton.click();
   }
 
-  @ModifiesModState
+  @ModifiesModFormState
   async createModFromModComponent({
     modNameRoot,
     modComponentName,

diff --git a/end-to-end-tests/pageObjects/pageEditor/utils.ts b/end-to-end-tests/pageObjects/pageEditor/utils.ts
@@ -19,9 +19,9 @@ import { type BasePageObject } from "../basePageObject";
 
 type AsyncFunction<T> = (...args: any[]) => Promise<T>;
 
-// Decorator used for functions that modify the state of the mod.
+// Decorator used for functions that modify the Page Editor mod form state.
 // This is used to wait for Redux to update before continuing.
-export function ModifiesModState<T>(
+export function ModifiesModFormState<T>(
   value: AsyncFunction<T>,
   context: ClassMethodDecoratorContext<BasePageObject, AsyncFunction<T>>,
 ) {

diff --git a/end-to-end-tests/tests/modLifecycle.spec.ts b/end-to-end-tests/tests/modLifecycle.spec.ts
@@ -38,10 +38,10 @@ test("create, run, package, and update mod", async ({
     await pageEditorPage.modListingPanel.addStarterBrick("Button");
 
   await test.step("Configure the Button brick", async () => {
-    await page.bringToFront();
-    await page.getByRole("button", { name: "Action #3" }).click();
+    await pageEditorPage.selectConnectedPageElement(
+      page.getByRole("button", { name: "Action #3" }),
+    );
 
-    await pageEditorPage.bringToFront();
     await pageEditorPage.brickConfigurationPanel.fillField(
       "Button text",
       "Search Youtube",
@@ -60,11 +60,23 @@ test("create, run, package, and update mod", async ({
       "searchText",
     );
 
+    // Without focusing first, the click doesn't enable selection tool ¯\_(ツ)_/¯
+    await pageEditorPage.brickConfigurationPanel
+      .getByLabel("Select element")
+      .focus();
+    await pageEditorPage.brickConfigurationPanel
+      .getByLabel("Select element")
+      .click();
+
     await pageEditorPage.selectConnectedPageElement(
-      page,
       page.getByRole("heading", { name: "Transaction Table" }),
-      "#root h1",
     );
+
+    await expect(
+      pageEditorPage.brickConfigurationPanel.getByPlaceholder(
+        "Select an element",
+      ),
+    ).toHaveValue("#root h1");
   });
 
   await test.step("Add the YouTube search brick and configure it", async () => {