playwright test

e2e-tests/src/layouts/LocationLayout.tsx

@@ -0,0 +1,13 @@
+import Header from "../components/Header";
+
+function LocationLayout() {
+  return (
+    <Header
+      title="Yext"
+      logo="https://a.mktgcdn.com/p/R9FjcYjRNA5dAespqgHFLMvu2m18-E5Apnb3KON0oJY/300x300.png"
+      backgroundColor="#BAD8FD"
+    />
+  );
+}
+
+export default LocationLayout;

e2e-tests/tests/__fixtures__/add-layout-page-expected.tsx

@@ -0,0 +1,16 @@
+import { GetPath, TemplateProps } from "@yext/pages";
+import Header from "../components/Header";
+
+export const getPath: GetPath<TemplateProps> = () => {
+  return "index.html";
+};
+
+export default function LayoutPage() {
+  return (
+    <Header
+      title="Yext"
+      logo="https://a.mktgcdn.com/p/R9FjcYjRNA5dAespqgHFLMvu2m18-E5Apnb3KON0oJY/300x300.png"
+      backgroundColor="#BAD8FD"
+    />
+  );
+}

e2e-tests/tests/add-page-with-layout.spec.ts

@@ -0,0 +1,22 @@
+import { expect } from "@playwright/test";
+import { studioTest } from "./infra/studioTest.js";
+import fs from "fs";
+
+const expectedPage = fs.readFileSync(
+  "./tests/__fixtures__/add-layout-page-expected.tsx",
+  "utf-8"
+);
+
+studioTest("can add a page using a layout", async ({ page, studioPage }) => {
+  const pageName = "LayoutPage"
+  await studioPage.takePageScreenshotAfterImgRender();
+  const pageInTree = page.getByText(pageName);
+  await expect(pageInTree).toHaveCount(0);
+  await studioPage.addStaticPage(pageName, "index.html", "LocationLayout");
+  await expect(pageInTree).toHaveCount(1);
+  await studioPage.takePageScreenshotAfterImgRender();
+  await studioPage.saveButton.click();
+  const pagePath = studioPage.getPagePath(pageName);
+  await expect(pagePath).toHaveContents(expectedPage);
+  await studioPage.takePageScreenshotAfterImgRender();
+});

e2e-tests/tests/infra/StudioPlaywrightPage.ts

@@ -59,21 +59,24 @@ export default class StudioPlaywrightPage {
     this.gitOps = new GitOperations(git);
   }
 
-  async addStaticPage(pageName: string, urlSlug: string) {
+  async addStaticPage(pageName: string, urlSlug: string, layoutName?: string) {
     await this.addPageButton.click();
     await this.selectPageType(false);
     await this.enterBasicPageData(pageName, urlSlug);
+    await this.selectLayout(layoutName)
   }
 
   async addEntityPage(
     pageName: string,
     streamScopeForm?: StreamScopeForm,
-    urlSlug?: string
+    urlSlug?: string,
+    layoutName?: string
   ) {
     await this.addPageButton.click();
     await this.selectPageType(true);
     await this.enterStreamScope(streamScopeForm);
     await this.enterBasicPageData(pageName, urlSlug);
+    await this.selectLayout(layoutName);
   }
 
   private async selectPageType(isEntityPage: boolean) {
@@ -112,7 +115,18 @@ export default class StudioPlaywrightPage {
       await this.typeIntoModal(basicDataModal, "URL Slug", urlSlug);
     }
     await this.takePageScreenshotAfterImgRender();
-    await this.clickModalButton(basicDataModal, "Save");
+    await this.clickModalButton(basicDataModal, "Next");
+  }
+
+  private async selectLayout(layoutName?: string) {
+    const modalName = "Select Layout";
+    await this.takePageScreenshotAfterImgRender();
+    if (layoutName) {
+      const layoutModal = this.page.getByRole("dialog", {name: modalName})
+      await layoutModal.getByRole("combobox").selectOption({label: layoutName})
+      await this.takePageScreenshotAfterImgRender();
+    }
+    await this.clickModalButton(modalName, "Save");
     await this.page.getByRole("dialog").waitFor({ state: "hidden" });
   }