ongoing poc

playwright/fixtures/app.ts

@@ -1,6 +1,7 @@
-import { test as base } from "@playwright/test";
+import { test as base, expect } from "@playwright/test";
 import { MenuPage } from "../pages/menu.page";
 import { CreateSliceModalPage } from "../pages/slices/createSliceModal.page";
+import { RenameSliceModalPage } from "../pages/slices/renameSliceModal.page";
 import { CreateTypeModalPage } from "../pages/types/createTypeModal.page";
 import { SliceDetailsPage } from "../pages/slices/sliceDetails.page";
 import { SliceListPage } from "../pages/slices/sliceList.page";
@@ -10,10 +11,13 @@ import { ChangesPage } from "../pages/changes.page";
 import { ChangelogPage } from "../pages/changelog.page";
 import { CustomTypesDetailsPage } from "../pages/types/customTypesDetails.page";
 import { RenameTypeModalPage } from "../pages/types/renameTypeModal.page";
+import { DeleteSliceModalPage } from "../pages/slices/deleteSliceModal.page";
 
 // Declare the types of your fixtures.
 type MyFixtures = {
   createSliceModalPage: CreateSliceModalPage;
+  deleteSliceModalPage: DeleteSliceModalPage;
+  renameSliceModalPage: RenameSliceModalPage;
   sliceDetailsPage: SliceDetailsPage;
   sliceListPage: SliceListPage;
   customTypesListPage: CustomTypesListPage;
@@ -24,6 +28,7 @@ type MyFixtures = {
   changesPage: ChangesPage;
   changelogPage: ChangelogPage;
   menu: MenuPage;
+  slice: Record<"name", string>;
 };
 
 export const test = base.extend<MyFixtures>({
@@ -33,6 +38,12 @@ export const test = base.extend<MyFixtures>({
   createSliceModalPage: async ({ page }, use) => {
     await use(new CreateSliceModalPage(page));
   },
+  deleteSliceModalPage: async ({ page }, use) => {
+    await use(new DeleteSliceModalPage(page));
+  },
+  renameSliceModalPage: async ({ page }, use) => {
+    await use(new RenameSliceModalPage(page));
+  },
   sliceDetailsPage: async ({ page }, use) => {
     await use(new SliceDetailsPage(page));
   },
@@ -60,6 +71,28 @@ export const test = base.extend<MyFixtures>({
   changelogPage: async ({ page }, use) => {
     await use(new ChangelogPage(page));
   },
+
+  slice: async (
+    { sliceListPage, createSliceModalPage, sliceDetailsPage },
+    use
+  ) => {
+    await sliceListPage.goto();
+    await expect(sliceListPage.title).toBeVisible();
+    await sliceListPage.openCreateModal();
+
+    const randomInt = Math.floor(Math.random() * 1e9);
+    const sliceName = "Slice" + randomInt;
+    await createSliceModalPage.createSlice(sliceName);
+
+    await expect(sliceDetailsPage.title).toBeVisible();
+    await expect(sliceDetailsPage.title).toContainText(sliceName);
+
+    await expect(sliceDetailsPage.staticZonePlaceholder).toBeVisible();
+    await expect(sliceDetailsPage.repeatableZonePlaceholder).toBeVisible();
+    await expect(sliceDetailsPage.saveButton).toBeDisabled();
+
+    await use({ name: sliceName });
+  },
 });
 
 export { expect } from "@playwright/test";

playwright/fixtures/onboarded.ts

@@ -5,8 +5,9 @@ const onboardedModel = {
   userContext: JSON.stringify({
     hasSendAReview: true,
     updatesViewed: { latest: null, latestNonBreaking: null },
+    hasSeenChangesToolTip: true,
     hasSeenSimulatorToolTip: true,
-    hasSeenTutorialsTooTip: true,
+    hasSeenTutorialsToolTip: true,
     authStatus: "unknown",
     lastSyncChange: null,
   }),

playwright/package.json

@@ -8,6 +8,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.35.1"
+    "@playwright/test": "^1.39.0"
   }
 }

playwright/pages/Modal.page.ts

@@ -0,0 +1,20 @@
+import { Locator, Page } from "@playwright/test";
+
+export class Modal {
+  readonly page: Page;
+  readonly root: Locator;
+  readonly title: Locator;
+  readonly closeButton: Locator;
+  readonly cancelButton: Locator;
+  readonly submitButton: Locator;
+
+  constructor(page: Page, title: string | RegExp, submitName: string) {
+    this.page = page;
+    this.root = page.getByRole("dialog");
+    this.title = this.root.getByRole("heading", { name: title });
+    this.closeButton = this.root.getByRole("button", { name: "Close" });
+    this.cancelButton = this.root.getByRole("button", { name: "Cancel" });
+    this.submitButton = this.root.getByRole("button", { name: submitName });
+  }
+
+}

playwright/pages/changelog.page.ts

@@ -2,12 +2,10 @@ import { Locator, Page } from "@playwright/test";
 
 export class ChangelogPage {
   readonly page: Page;
-  readonly root: Locator;
   readonly title: Locator;
 
   constructor(page: Page) {
     this.page = page;
-    this.root = page.getByRole("main");
-    this.title = this.root.getByText("Changelog");
+    this.title = page.getByRole("main").getByText("Changelog");
   }
 }

playwright/pages/changes.page.ts

@@ -2,14 +2,12 @@ import { Locator, Page } from "@playwright/test";
 
 export class ChangesPage {
   readonly page: Page;
-  readonly root: Locator;
   readonly title: Locator;
   readonly pushButton: Locator;
 
   constructor(page: Page) {
     this.page = page;
-    this.root = page.getByRole("main").first();
-    this.title = this.root.getByRole("link", { name: "Changes" });
-    this.title = this.root.getByRole("button", { name: "Push Changes" });
+    this.title = page.getByLabel("Breadcrumb").getByText("Changes");
+    // this.title = this.root.getByRole("button", { name: "Push Changes" });
   }
 }

playwright/pages/slices/createSliceModal.page.ts

@@ -1,20 +1,12 @@
 import { expect, Locator, Page } from "@playwright/test";
+import { Modal } from "../Modal.page";
 
-export class CreateSliceModalPage {
-  readonly page: Page;
-  readonly title: Locator;
+export class CreateSliceModalPage extends Modal {
   readonly nameInput: Locator;
-  readonly closeButton: Locator;
-  readonly cancelButton: Locator;
-  readonly submitButton: Locator;
 
   constructor(page: Page) {
-    this.page = page;
-    this.title = page.getByRole("heading", { name: "Create a new slice" });
+    super(page, "Create a new slice", "Create");
     this.nameInput = page.getByTestId("slice-name-input");
-    this.closeButton = page.getByRole("button", { name: "Close" });
-    this.cancelButton = page.getByRole("button", { name: "Cancel" });
-    this.submitButton = page.getByRole("button", { name: "Create" });
   }
 
   async createSlice(name: string) {

playwright/pages/slices/deleteSliceModal.page.ts

@@ -0,0 +1,14 @@
+import { expect, Page } from "@playwright/test";
+import { Modal } from "../Modal.page";
+
+export class DeleteSliceModalPage extends Modal {
+  constructor(page: Page) {
+    super(page, "Delete Slice", "Delete");
+  }
+
+  async deleteSlice() {
+    await expect(this.title).toBeVisible();
+    await this.submitButton.click();
+    await expect(this.title).not.toBeVisible();
+  }
+}

playwright/pages/slices/renameSliceModal.page.ts

@@ -0,0 +1,18 @@
+import { expect, Locator, Page } from "@playwright/test";
+import { Modal } from "../Modal.page";
+
+export class RenameSliceModalPage extends Modal {
+  readonly nameInput: Locator;
+
+  constructor(page: Page) {
+    super(page, "Rename a slice", "Rename");
+    this.nameInput = page.getByTestId("slice-name-input");
+  }
+
+  async renameSlice(name: string) {
+    await expect(this.title).toBeVisible();
+    await this.nameInput.fill(name);
+    await this.submitButton.click();
+    await expect(this.title).not.toBeVisible();
+  }
+}

playwright/pages/slices/sliceDetails.page.ts

@@ -17,8 +17,8 @@ export class SliceDetailsPage {
   constructor(page: Page) {
     this.page = page;
 
-    this.title = page.getByTestId("slice-and-variation-name-header");
-    this.saveButton = page.getByRole("button", { name: "Save to File System" });
+    this.title = page.getByLabel("Breadcrumb");
+    this.saveButton = page.getByRole("button", { name: "Save" });
 
     this.showSnippetsButton = page.getByRole("button", {
       name: "Show code snippets",
@@ -67,7 +67,7 @@ export class SliceDetailsPage {
     await expect(this.addFieldsModalTitle).toBeVisible();
     await this.page.getByRole("heading", { name: type }).click();
     await expect(this.addFieldsModalTitle).not.toBeVisible();
-    await this.page.getByPlaceholder("Field Name").type(name);
+    await this.page.getByPlaceholder("Field Name").fill(name);
     await expect(this.page.getByPlaceholder("e.g. buttonLink")).toHaveValue(
       expectedId
     );