test(playwright): Convert Cypress tests to Playwright - 3

packages/slice-machine/lib/builders/CustomTypeBuilder/index.tsx

@@ -57,6 +57,7 @@ export const CustomTypeBuilder: FC<CustomTypeBuilderProps> = (props) => {
               onAddNewTab={() => {
                 setDialog({ type: "CREATE_CUSTOM_TYPE" });
               }}
+              iconButtonTestId={{ "data-cy": "add-tab-button" }}
             >
               {customType.tabs.map((tab) => (
                 <WindowTabsTrigger

packages/slice-machine/src/components/Window/Window.tsx

@@ -36,17 +36,21 @@ export const WindowTabs: FC<WindowTabsProps> = (props) => (
   <Tabs.Root {...props} activationMode="manual" className={styles.tabs} />
 );
 
-type WindowTabsListProps = PropsWithChildren<{ onAddNewTab?: () => void }>;
+type WindowTabsListProps = PropsWithChildren<{
+  onAddNewTab?: () => void;
+  iconButtonTestId?: { [name: string]: string };
+}>;
 
 export const WindowTabsList: FC<WindowTabsListProps> = ({
   children,
   onAddNewTab,
+  iconButtonTestId,
   ...otherProps
 }) => (
   <Tabs.List {...otherProps} className={styles.tabsList}>
     {children}
     <div className={styles.newTabButton}>
-      <IconButton icon="add" onClick={onAddNewTab} />
+      <IconButton icon="add" onClick={onAddNewTab} {...iconButtonTestId} />
     </div>
   </Tabs.List>
 );

playwright/pages/ChangelogPage.ts

@@ -1,9 +1,11 @@
-import { Locator, Page } from "@playwright/test";
+import { Locator, Page, expect } from "@playwright/test";
 
 import { SliceMachinePage } from "./SliceMachinePage";
 
 export class ChangelogPage extends SliceMachinePage {
+  readonly path: string;
   readonly breadcrumbLabel: Locator;
+  readonly breakingChangesWarning: Locator;
 
   constructor(page: Page) {
     super(page);
@@ -16,7 +18,12 @@ export class ChangelogPage extends SliceMachinePage {
     /**
      * Static locators
      */
+    this.path = "/changelog";
     this.breadcrumbLabel = this.body.getByText("Changelog", { exact: true });
+    this.breakingChangesWarning = this.body.getByText(
+      "This update includes breaking changes. To update correctly, follow the steps below.",
+      { exact: true },
+    );
   }
 
   /**
@@ -27,10 +34,20 @@ export class ChangelogPage extends SliceMachinePage {
   /**
    * Actions
    */
-  // Handle actions here
+  async goto() {
+    await this.page.goto(this.path);
+  }
+
+  async selectVersion(version: string) {
+    await this.body.getByText(version, { exact: true }).click();
+  }
 
   /**
    * Assertions
    */
-  // Handle assertions here
+  async checkReleaseNotes(releaseNotes: string) {
+    await expect(
+      this.body.getByText(releaseNotes, { exact: true }),
+    ).toBeVisible();
+  }
 }

playwright/pages/SliceBuilderPage.ts

@@ -12,6 +12,8 @@ export class SliceBuilderPage extends BuilderPage {
   readonly renameVariationDialog: RenameVariationDialog;
   readonly deleteVariationDialog: DeleteVariationDialog;
   readonly savedMessage: Locator;
+  readonly simulateTooltipTitle: Locator;
+  readonly simulateTooltipCloseButton: Locator;
   readonly variationCards: Locator;
   readonly addVariationButton: Locator;
   readonly staticZone: Locator;
@@ -39,6 +41,8 @@ export class SliceBuilderPage extends BuilderPage {
     this.savedMessage = page.getByText("Slice saved successfully", {
       exact: false,
     });
+    this.simulateTooltipTitle = page.getByText("Simulate your slices");
+    this.simulateTooltipCloseButton = page.getByText("Got it");
     // Variations
     this.variationCards = page.getByRole("link", {
       name: "slice card",

playwright/pages/components/AddTabDialog.ts

@@ -0,0 +1,47 @@
+import { expect, Locator, Page } from "@playwright/test";
+
+import { Dialog } from "./Dialog";
+
+export class AddTabDialog extends Dialog {
+  readonly idInput: Locator;
+
+  constructor(page: Page) {
+    super(page, {
+      title: "Add Tab",
+      submitName: "Save",
+    });
+
+    /**
+     * Components
+     */
+    // Handle components here
+
+    /**
+     * Static locators
+     */
+    this.idInput = this.dialog.getByPlaceholder(
+      "A label for selecting the tab (i.e. not used in the API)",
+      { exact: true },
+    );
+  }
+
+  /**
+   * Dynamic locators
+   */
+  // Handle dynamic locators here
+
+  /**
+   * Actions
+   */
+  async createTab(name: string) {
+    await expect(this.title).toBeVisible();
+    await this.idInput.fill(name);
+    await this.submitButton.click();
+    await expect(this.title).not.toBeVisible();
+  }
+
+  /**
+   * Assertions
+   */
+  // Handle assertions here
+}

playwright/pages/components/CreateSliceDialog.ts

@@ -5,6 +5,7 @@ import { Dialog } from "./Dialog";
 export class CreateSliceDialog extends Dialog {
   readonly createdMessage: Locator;
   readonly nameInput: Locator;
+  readonly sliceAlreadyExistMessage: Locator;
 
   constructor(page: Page) {
     super(page, {
@@ -24,6 +25,10 @@ export class CreateSliceDialog extends Dialog {
       exact: false,
     });
     this.nameInput = this.dialog.getByTestId("slice-name-input");
+    this.sliceAlreadyExistMessage = this.dialog.getByText(
+      "Slice name is already taken.",
+      { exact: true },
+    );
   }
 
   /**

playwright/pages/components/SelectExistingSlicesDialog.ts

@@ -0,0 +1,49 @@
+import { expect, Locator, Page } from "@playwright/test";
+
+import { Dialog } from "./Dialog";
+
+export class SelectExistingSlicesDialog extends Dialog {
+  readonly sharedSliceCard: Locator;
+  readonly addedMessage: Locator;
+
+  constructor(page: Page) {
+    super(page, {
+      title: `Select existing slices`,
+      submitName: "Add",
+    });
+
+    /**
+     * Static locators
+     */
+    this.sharedSliceCard = this.dialog.getByTestId("shared-slice-card");
+    this.addedMessage = page.getByText("Slice(s) added to slice zone", {
+      exact: true,
+    });
+  }
+
+  /**
+   * Dynamic locators
+   */
+  // Handle dynamic locators here
+
+  /**
+   * Actions
+   */
+  async selectExistingSlices(names: string[]) {
+    await expect(this.title).toBeVisible();
+    for (const name of names) {
+      await this.sharedSliceCard.getByText(name, { exact: true }).click();
+    }
+    await this.submitButton.click();
+    await this.checkCreatedMessage();
+    await expect(this.title).not.toBeVisible();
+  }
+
+  /**
+   * Assertions
+   */
+  async checkCreatedMessage() {
+    await expect(this.addedMessage).toBeVisible();
+    await expect(this.addedMessage).not.toBeVisible();
+  }
+}