From 6eb0bc42f949e6162586edc489499b3986c23fb8 Mon Sep 17 00:00:00 2001
From: Angelo Ashmore <angeloashmore@users.noreply.github.com>
Date: Tue, 26 Dec 2023 12:52:30 -1000
Subject: [PATCH] fix: don't use CSS selectors in Playwright tests

---
 .../components/AppLayout/index.tsx            | 10 ++++++---
 .../src/components/PageLayout/PageLayout.tsx  |  4 ++--
 .../customTypesTable/CustomTypesTablePage.tsx |  2 +-
 playwright/pages/SliceMachinePage.ts          |  6 ++++--
 playwright/tests/common/environment.spec.ts   | 21 ++++++++-----------
 5 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/slice-machine/components/AppLayout/index.tsx b/packages/slice-machine/components/AppLayout/index.tsx
index 32f902e3f7..5b5eb3c0ee 100644
--- a/packages/slice-machine/components/AppLayout/index.tsx
+++ b/packages/slice-machine/components/AppLayout/index.tsx
@@ -43,12 +43,16 @@ const PageLayoutWithActiveEnvironment: FC<PropsWithChildren> = ({
 }) => {
   const { activeEnvironment } = useActiveEnvironment();
 
-  const maybeBorderColor = activeEnvironment
+  const borderTopColor = activeEnvironment
     ? environmentTopBorderColorMap[activeEnvironment.kind]
-    : undefined;
+    : "purple";
 
   return (
-    <PageLayout borderTopColor={maybeBorderColor} {...otherProps}>
+    <PageLayout
+      borderTopColor={borderTopColor}
+      data-cy={`app-layout-top-border-color-${borderTopColor}`}
+      {...otherProps}
+    >
       {children}
     </PageLayout>
   );
diff --git a/packages/slice-machine/src/components/PageLayout/PageLayout.tsx b/packages/slice-machine/src/components/PageLayout/PageLayout.tsx
index 8f4c8353ac..6b9d6e192b 100644
--- a/packages/slice-machine/src/components/PageLayout/PageLayout.tsx
+++ b/packages/slice-machine/src/components/PageLayout/PageLayout.tsx
@@ -4,11 +4,11 @@ import clsx from "clsx";
 import * as styles from "./PageLayout.css";
 
 type PageLayoutProps = PropsWithChildren<{
-  borderTopColor?: keyof typeof styles.borderTopColor;
+  borderTopColor: keyof typeof styles.borderTopColor;
 }>;
 
 export const PageLayout: FC<PageLayoutProps> = ({
-  borderTopColor = "purple",
+  borderTopColor,
   children,
   ...otherProps
 }) => (
diff --git a/packages/slice-machine/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx b/packages/slice-machine/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx
index c3bda52c20..d470d1bfc9 100644
--- a/packages/slice-machine/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx
+++ b/packages/slice-machine/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx
@@ -89,7 +89,7 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
             </AppLayout>
           }
         >
-          <AppLayout data-cy="app-layout">
+          <AppLayout>
             <AppLayoutHeader>
               <AppLayoutBreadcrumb
                 folder={customTypesMessages.name({
diff --git a/playwright/pages/SliceMachinePage.ts b/playwright/pages/SliceMachinePage.ts
index e9169cc893..2a614a59b9 100644
--- a/playwright/pages/SliceMachinePage.ts
+++ b/playwright/pages/SliceMachinePage.ts
@@ -6,7 +6,6 @@ import { LoginDialog } from "./components/LoginDialog";
 
 export class SliceMachinePage {
   readonly page: Page;
-  readonly appLayout: Locator;
   readonly menu: Menu;
   readonly inAppGuideDialog: InAppGuideDialog;
   readonly loginDialog: LoginDialog;
@@ -26,7 +25,6 @@ export class SliceMachinePage {
      * Static locators
      */
     this.body = page.getByRole("main");
-    this.appLayout = page.getByTestId("app-layout");
     this.breadcrumb = page.getByLabel("Breadcrumb");
   }
 
@@ -37,6 +35,10 @@ export class SliceMachinePage {
     return this.breadcrumb.getByText(name, { exact: true });
   }
 
+  getPageLayoutByTopBorderColor(color: string) {
+    return this.page.getByTestId(`app-layout-top-border-color-${color}`);
+  }
+
   /**
    * Actions
    */
diff --git a/playwright/tests/common/environment.spec.ts b/playwright/tests/common/environment.spec.ts
index 281c7da00a..8f6e4d36a4 100644
--- a/playwright/tests/common/environment.spec.ts
+++ b/playwright/tests/common/environment.spec.ts
@@ -205,10 +205,9 @@ test.describe("Environment", () => {
       await sliceMachinePage.menu.environmentSelector.selectEnvironment(
         environments[0].name,
       );
-      await expect(sliceMachinePage.appLayout).toHaveCSS(
-        "border-top-color",
-        "rgb(109, 84, 207)",
-      );
+      await expect(
+        sliceMachinePage.getPageLayoutByTopBorderColor("purple"),
+      ).toBeVisible();
 
       procedures.mock(
         "project.fetchActiveEnvironment",
@@ -218,10 +217,9 @@ test.describe("Environment", () => {
       await sliceMachinePage.menu.environmentSelector.selectEnvironment(
         environments[1].name,
       );
-      await expect(sliceMachinePage.appLayout).toHaveCSS(
-        "border-top-color",
-        "rgb(56, 91, 204)",
-      );
+      await expect(
+        sliceMachinePage.getPageLayoutByTopBorderColor("indigo"),
+      ).toBeVisible();
 
       procedures.mock(
         "project.fetchActiveEnvironment",
@@ -231,10 +229,9 @@ test.describe("Environment", () => {
       await sliceMachinePage.menu.environmentSelector.selectEnvironment(
         environments[2].name,
       );
-      await expect(sliceMachinePage.appLayout).toHaveCSS(
-        "border-top-color",
-        "rgb(255, 159, 26)",
-      );
+      await expect(
+        sliceMachinePage.getPageLayoutByTopBorderColor("amber"),
+      ).toBeVisible();
     },
   );
 });