Add Tailwind to Test Site and e2e-tests (#422)

This PR configures Tailwind in our test site and end-to-end tests. We also re-introduce screenshots for Darwin that we turned off in (#412). Note that the `loadingOverlay` wait was fixed in our `StudioPlaywrightPage`. Before, we waited for a button to be visible as a check for the overlay to be gone. However, Playwright only considers `hidden` [elements to be not visible](https://playwright.dev/docs/actionability#visible), while our `loadingOverlay` uses `opacity` to "toggle" visibility. Additionally, since Playwright [defaults to fast-forwarding transitions](https://playwright.dev/docs/api/class-pageassertions) for `toHaveScreenshot`, we shouldn't have to worry about the opacity transition time. I also squeeze in a quick variable rename from `userStyles` to `activeStyle` to more accurately describe that we are not injecting all user styles, but only the ones on the active page and its component tree. J=SLAP-2912 TEST=auto, manual
yext · Oct 26, 2023 · 3cd5776 · 3cd5776
1 parent 0561ab3
commit 3cd5776
Show file tree

Hide file tree

Showing 32 changed files with 364 additions and 37 deletions.
diff --git a/apps/test-site/package.json b/apps/test-site/package.json
@@ -25,10 +25,13 @@
     "@yext/pages": "^1.0.0-rc.1",
     "@yext/studio": "*",
     "@yext/types": "^0.1.12-alpha",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.11.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-react-perf": "^3.3.1",
-    "eslint-plugin-tsdoc": "^0.2.17"
+    "eslint-plugin-tsdoc": "^0.2.17",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.4"
   },
   "scripts": {
     "dev": "studio",

diff --git a/apps/test-site/postcss.config.cjs b/apps/test-site/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/test-site/src/layouts/LocationLayout.tsx b/apps/test-site/src/layouts/LocationLayout.tsx
@@ -1,4 +1,5 @@
 import Header from "../components/Header";
+import "../styles/main.css";
 
 function LocationLayout() {
   return (

diff --git a/apps/test-site/src/styles/main.css b/apps/test-site/src/styles/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/test-site/src/templates/LocationPage.tsx b/apps/test-site/src/templates/LocationPage.tsx
@@ -4,6 +4,7 @@ import BusinessInfo from "../components/BusinessInfo";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {

diff --git a/apps/test-site/src/templates/UniversalPage.tsx b/apps/test-site/src/templates/UniversalPage.tsx
@@ -4,6 +4,7 @@ import Button from "../components/Button";
 import Container from "../components/Container";
 import Cta from "../components/Cta";
 import FixedText from "../components/FixedText";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {

diff --git a/apps/test-site/src/templates/index.tsx b/apps/test-site/src/templates/index.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Button from "../components/Button";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/apps/test-site/tailwind.config.ts b/apps/test-site/tailwind.config.ts
@@ -3,13 +3,6 @@ import type { StudioTailwindConfig } from "@yext/studio";
 export default {
   content: ["./src/**/*.{ts,tsx}"],
   theme: {
-    extend: {
-      colors: {
-        primary: "#aa00ff",
-      },
-      fontSize: {
-        medium: "14px",
-      },
-    },
+    extend: {},
   },
 } satisfies StudioTailwindConfig;
diff --git a/e2e-tests/package.json b/e2e-tests/package.json
@@ -16,8 +16,11 @@
     "@vitejs/plugin-react": "^2.1.0",
     "@yext/pages": "^1.0.0-rc.1",
     "@yext/studio": "*",
+    "autoprefixer": "^10.4.16",
     "fs-extra": "^11.1.1",
-    "glob": "^10.3.1"
+    "glob": "^10.3.1",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.4"
   },
   "dependencies": {
     "kill-port": "^2.0.1"

diff --git a/e2e-tests/playwright.config.ts b/e2e-tests/playwright.config.ts
@@ -1,5 +1,6 @@
 import { PlaywrightTestConfig, expect } from "@playwright/test";
 import fs from "node:fs";
+import os from "node:os";
 
 expect.extend({
   async toHaveContents(filepath: string, expectedContents: string) {
@@ -51,7 +52,7 @@ const config: PlaywrightTestConfig = {
     video: "on",
   },
   workers: 1,
-  ignoreSnapshots: true,
+  ignoreSnapshots: os.platform() !== "darwin",
 };
 
 export default config;
diff --git a/e2e-tests/postcss.config.cjs b/e2e-tests/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/e2e-tests/src/layouts/LocationLayout.tsx b/e2e-tests/src/layouts/LocationLayout.tsx
@@ -1,4 +1,5 @@
 import Header from "../components/Header";
+import "../styles/main.css";
 
 function LocationLayout() {
   return (

diff --git a/e2e-tests/src/styles/main.css b/e2e-tests/src/styles/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/e2e-tests/src/templates/BasicPage.tsx b/e2e-tests/src/templates/BasicPage.tsx
@@ -1,6 +1,7 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Banner from "../components/Banner";
 import Container from "../components/Container";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/e2e-tests/src/templates/ErrorComponentPreviews.tsx b/e2e-tests/src/templates/ErrorComponentPreviews.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import ErrorComponent from "../components/ErrorComponent";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "error-component-page";

diff --git a/e2e-tests/src/templates/ErrorPage.tsx b/e2e-tests/src/templates/ErrorPage.tsx
@@ -1,4 +1,5 @@
 import { GetPath, TemplateProps } from "@yext/pages";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "error-page";

diff --git a/e2e-tests/src/templates/LocationPage.tsx b/e2e-tests/src/templates/LocationPage.tsx
@@ -4,6 +4,7 @@ import BusinessInfo from "../components/BusinessInfo";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {

diff --git a/e2e-tests/tests/__fixtures__/add-element-expected-page.tsx b/e2e-tests/tests/__fixtures__/add-element-expected-page.tsx
@@ -5,6 +5,7 @@ import Footer from "../components/Footer";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {

diff --git a/e2e-tests/tests/__fixtures__/add-layout-page-expected.tsx b/e2e-tests/tests/__fixtures__/add-layout-page-expected.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Header from "../components/Header";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/...sts/tests/__fixtures__/tailwind.config.ts → ...ts/__fixtures__/custom-tailwind.config.ts b/...sts/tests/__fixtures__/tailwind.config.ts → ...ts/__fixtures__/custom-tailwind.config.ts
diff --git a/e2e-tests/tests/__fixtures__/hmr/update-button-props-expected-page.tsx b/e2e-tests/tests/__fixtures__/hmr/update-button-props-expected-page.tsx
@@ -2,6 +2,7 @@ import { GetPath, TemplateProps } from "@yext/pages";
 import Banner from "../components/Banner";
 import Button from "../components/Button";
 import Container from "../components/Container";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/e2e-tests/tests/__fixtures__/hmr/updated-universal-page.tsx b/e2e-tests/tests/__fixtures__/hmr/updated-universal-page.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Button from "../components/Button";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/e2e-tests/tests/__fixtures__/rearrange-elements-expected-page.tsx b/e2e-tests/tests/__fixtures__/rearrange-elements-expected-page.tsx
@@ -4,6 +4,7 @@ import BusinessInfo from "../components/BusinessInfo";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {

diff --git a/e2e-tests/tests/__fixtures__/remove-element-expected-page.tsx b/e2e-tests/tests/__fixtures__/remove-element-expected-page.tsx
@@ -1,4 +1,5 @@
 import { GetPath, TemplateProps } from "@yext/pages";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

diff --git a/e2e-tests/tests/custom-tailwind.spec.ts b/e2e-tests/tests/custom-tailwind.spec.ts
@@ -3,7 +3,7 @@ import { studioTest } from "./infra/studioTest.js";
 import fs from "fs";
 
 studioTest.use({
-  tailwindConfigPath: "tests/__fixtures__/tailwind.config.ts",
+  tailwindConfigPath: "tests/__fixtures__/custom-tailwind.config.ts",
 });
 
 studioTest(

diff --git a/e2e-tests/tests/infra/StudioPlaywrightPage.ts b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
@@ -134,8 +134,18 @@ export default class StudioPlaywrightPage {
    */
   async waitForLoadState() {
     await this.page.waitForLoadState();
-    await expect(
-      this.page.getByRole("button", { name: "Open Add Element Menu" })
-    ).toBeVisible();
+    const overlayDomEl = this.page.getByTestId("loading-overlay");
+    await expect
+      .poll(
+        () =>
+          overlayDomEl.evaluate((e: HTMLElement) => {
+            return e.className.includes("opacity-0");
+          }),
+        {
+          message: "Waiting for LoadingOverlay to finish.",
+          timeout: 5000,
+        }
+      )
+      .toBeTruthy();
   }
 }
diff --git a/e2e-tests/tests/infra/studioTest.ts b/e2e-tests/tests/infra/studioTest.ts
@@ -25,7 +25,7 @@ export type StudioTestFixtures = {
 export const studioTest = base.extend<StudioTestFixtures>({
   createRemote: false,
   debug: false,
-  tailwindConfigPath: undefined,
+  tailwindConfigPath: "tests/infra/tailwind.config.ts",
   studioPage: async (
     { page, createRemote, debug, tailwindConfigPath },
     use,

diff --git a/e2e-tests/tests/infra/tailwind.config.ts b/e2e-tests/tests/infra/tailwind.config.ts
@@ -0,0 +1,8 @@
+import type { StudioTailwindConfig } from "@yext/studio";
+
+export default {
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+} satisfies StudioTailwindConfig;