Update Playwright test for rearranging elements (#342)

This PR updates the Playwright test for rearranging elements so that it uses the new LocationPage.

J=SLAP-2888
TEST=auto

e2e-tests/tests/__fixtures__/rearrange-elements-expected-page.tsx

@@ -1,18 +1,54 @@
-import { GetPath, TemplateProps } from "@yext/pages";
-import Banner from "../components/Banner";
-import Container from "../components/Container";
+import { GetPath, TemplateConfig, TemplateProps } from "@yext/pages";
+import AddressDisplay from "../components/AddressDisplay";
+import BusinessInfo from "../components/BusinessInfo";
+import Header from "../components/Header";
+import HoursDisplay from "../components/HoursDisplay";
 
-export const getPath: GetPath<TemplateProps> = () => {
-  return "index.html";
+export const config: TemplateConfig = {
+  stream: {
+    $id: "studio-stream-id-LocationPage",
+    localization: { locales: ["en"], primary: false },
+    filter: { entityTypes: ["location"] },
+    fields: ["hours", "address", "slug"],
+  },
+};
+export const getPath: GetPath<TemplateProps> = ({
+  document,
+}: TemplateProps) => {
+  return `${document.slug}`;
 };
 
-export default function BasicPage() {
+export default function LocationPage({ document }: TemplateProps) {
   return (
     <>
-      <Banner bool={false} num={0} />
-      <div>
-        <Container />
-      </div>
+      <Header
+        title="Yext"
+        logo="https://a.mktgcdn.com/p/R9FjcYjRNA5dAespqgHFLMvu2m18-E5Apnb3KON0oJY/300x300.png"
+        backgroundColor="#BAD8FD"
+      />
+      <BusinessInfo>
+        <HoursDisplay
+          monday={{
+            isClosed: false,
+            openIntervals: document.hours.monday.openIntervals,
+          }}
+          tuesday={{
+            isClosed: false,
+            openIntervals: document.hours.tuesday.openIntervals,
+          }}
+          wednesday={{
+            isClosed: false,
+            openIntervals: document.hours.wednesday.openIntervals,
+          }}
+        />
+        <AddressDisplay
+          line1={`${document.address.line1}`}
+          city={`${document.address.city}`}
+          region={`${document.address.region}`}
+          postalCode={`${document.address.postalCode}`}
+          countryCode=""
+        />
+      </BusinessInfo>
     </>
   );
 }

e2e-tests/tests/rearrange-elements.spec.ts

@@ -8,22 +8,30 @@ const expectedPage = fs.readFileSync(
 );
 
 studioTest("can rearrange elements in tree", async ({ page, studioPage }) => {
-  const banner = page.getByText("Banner");
-  const div = page.getByRole("list").filter({ hasText: "div" });
-  const divBox = await div.boundingBox();
+  await studioPage.switchPage("LocationPage");
+  const hoursDisplay = page.getByText("HoursDisplay");
+  const addressDisplay = page
+    .getByRole("listitem")
+    .filter({ hasText: /^AddressDisplay$/ });
+  const addressDisplayBox = await addressDisplay.boundingBox();
 
-  await banner.hover();
+  await hoursDisplay.hover();
   await page.mouse.down();
-  divBox &&
-    (await page.mouse.move(divBox.x + divBox.width / 4, divBox.y, {
-      steps: 1000,
-    }));
+  addressDisplayBox &&
+    (await page.mouse.move(
+      addressDisplayBox.x + addressDisplayBox.width / 4,
+      addressDisplayBox.y,
+      {
+        steps: 1000,
+      }
+    ));
   await page.waitForTimeout(1000);
   await page.mouse.up();
+  await expect(studioPage.saveButton.button).toBeEnabled();
   await expect(page).toHaveScreenshot();
 
   await studioPage.saveButton.click();
-  const pagePath = studioPage.getPagePath("BasicPage");
+  const pagePath = studioPage.getPagePath("LocationPage");
   await expect(pagePath).toHaveContents(expectedPage);
-  await expect(page).toHaveScreenshot();
+  await expect(studioPage.saveButton.button).toBeDisabled();
 });