PR to test Playwright Pipelines

.github/workflows/playwright-pizzashop.yml

@@ -0,0 +1,46 @@
+name: Playwright Pizza Shop
+
+on: [pull_request]
+
+jobs:
+  vercel-pizza:
+    name: Wait for Vercel (pizza-shop)
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    outputs:
+      preview_url: ${{ steps.waitForVercelPreviewDeployment.outputs.url }}
+    steps:
+      - name: Wait for Vercel pizza environment to be ready
+        uses: patrickedqvist/wait-for-vercel-preview@dca4940010f36d2d44caa487087a09b57939b24a #v1.3.1
+        id: waitForVercelPreviewDeployment
+        with:
+          environment: "Preview – monorepo-testing-workshop-pizza-shop"
+          token: ${{ secrets.GITHUB_TOKEN }}
+          check_interval: 30
+          max_timeout: 400
+
+  playwright-pizza:
+    needs: vercel-pizza
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0
+
+      - name: Pnpm install
+        uses: pnpm/action-setup@d882d12c64e032187b2edb46d3a0d003b7a43598 #v2.4.0
+        with:
+          run_install: true
+
+      - name: Setup node
+        uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d #v3.8.1
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - name: Show preview url
+        run: echo ${{ needs.vercel-pizza.outputs.preview_url }}
+
+      - name: Run Playwright tests
+        run: pnpm --filter pizza-shop run e2e
+        env:
+          PLAYWRIGHT_BASE_URL: ${{ needs.vercel-pizza.outputs.preview_url }}

.github/workflows/playwright-ta.yml

@@ -1,35 +1,46 @@
-# name: Playwright Test Automation
+ name: Playwright Test Automation
 
-# on: [pull_request]
+ on: [pull_request]
 
-# jobs:
-#   vercel-ta:
-#     name: Wait for Vercel (test-automation)
-#     WRITE YOUR CODE HERE
-#     USE: https://github.com/patrickedqvist/wait-for-vercel-preview
+ jobs:
+   vercel-ta:
+     name: Wait for Vercel (test-automation)
+     runs-on: ubuntu-latest
+     timeout-minutes: 15
+     outputs:
+       preview_url: ${{ steps.waitForVercelPreviewDeployment.outputs.url }}
+     steps:
+       - name: Wait for Vercel test automation environment to be ready
+         uses: patrickedqvist/wait-for-vercel-preview@dca4940010f36d2d44caa487087a09b57939b24a #v1.3.1
+         id: waitForVercelPreviewDeployment
+         with:
+           environment: "Preview – monorepo-testing-workshop-test-automation"
+           token: ${{ secrets.GITHUB_TOKEN }}
+           check_interval: 30
+           max_timeout: 400
 
-# playwright-ta:
-#   needs: vercel-ta
-#   runs-on: ubuntu-latest
-#   timeout-minutes: 10
-#   steps:
-#     - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0
-
-#     - name: Pnpm install
-#       uses: pnpm/action-setup@d882d12c64e032187b2edb46d3a0d003b7a43598 #v2.4.0
-#       with:
-#         run_install: true
-
-#     - name: Setup node
-#       uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d #v3.8.1
-#       with:
-#         node-version: 18
-#         cache: "pnpm"
-
-#     - name: Show preview url
-#       run: echo ${{ needs.vercel-ta.outputs.preview_url }}
-
-#     - name: Run Playwright tests
-#       run: pnpm --filter test-automation run e2e
-#       env:
-#         PLAYWRIGHT_BASE_URL: ${{ needs.vercel-ta.outputs.preview_url }}
+   playwright-ta:
+     needs: vercel-ta
+     runs-on: ubuntu-latest
+     timeout-minutes: 10
+     steps:
+       - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0
+  
+       - name: Pnpm install
+         uses: pnpm/action-setup@d882d12c64e032187b2edb46d3a0d003b7a43598 #v2.4.0
+         with:
+           run_install: true
+  
+       - name: Setup node
+         uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d #v3.8.1
+         with:
+           node-version: 18
+           cache: "pnpm"
+  
+       - name: Show preview url
+         run: echo ${{ needs.vercel-ta.outputs.preview_url }}
+  
+       - name: Run Playwright tests
+         run: pnpm --filter test-automation run e2e
+         env:
+           PLAYWRIGHT_BASE_URL: ${{ needs.vercel-ta.outputs.preview_url }}

.gitignore

@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+.idea
+.vscode
 # dependencies
 node_modules
 .pnp

apps/pizza-shop/src/app/page.tsx

@@ -11,6 +11,16 @@ const LINKS = [
     href: "https://www.google.com/search?q=hawaii+pizza",
     description: "Italians love it!",
   },
+  {
+    title: "🇮🇹 Pizza Calzone!",
+    href: "https://www.google.com/search?q=hawaii+calzone",
+    description: "Ghislain loves this!",
+  },
+  {
+    title: "🇮🇹 Pizza Testy!",
+    href: "https://www.google.com/search?q=hawaii+calzone",
+    description: "Ghislain loves this!",
+  },
 ];
 
 export default function Page(): JSX.Element {

apps/test-automation/playwright.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
     baseURL: process.env.PLAYWRIGHT_BASE_URL
       ? process.env.PLAYWRIGHT_BASE_URL
       : "http://127.0.0.1:3000",
-    trace: "on-first-retry",
+    trace: "retain-on-failure",
   },
   projects: [
     {

apps/test-automation/src/app/contact/page.tsx

@@ -1,16 +1,10 @@
-import { Heading } from "ui";
+import { Heading , Button} from "ui";
 
 export default function Page(): JSX.Element {
   return (
     <main className="flex min-h-screen flex-col items-center p-24">
       <Heading title="Contact Us" />
-      <button
-        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-        data-testid="contact-button"
-        type="button"
-      >
-        Click me
-      </button>
+        <Button title="Click Me" />
     </main>
   );
 }

apps/test-automation/src/app/page.tsx

@@ -11,6 +11,11 @@ const LINKS = [
     href: "/contact",
     description: "Contact us for even better deals",
   },
+  {
+    title: "💌 Ghislain is amazing",
+    href: "/Ghislain",
+    description: "Ghislain is amazing",
+  },
 ];
 
 export default function Page(): JSX.Element {

apps/test-automation/tests/seo.spec.ts

@@ -1,3 +1,6 @@
-import { shouldHavePageTitle } from "e2e-tests/tests/seo";
+import { shouldHavePageTitle, shouldNavigateToContactPage } from "e2e-tests/tests/seo";
 
 shouldHavePageTitle({ pageTitle: "Test Automation" });
+
+shouldNavigateToContactPage()
+

packages/e2e-tests/tests/seo.ts

@@ -6,3 +6,12 @@ export const shouldHavePageTitle = (options: { pageTitle: string }) => {
     await expect(page).toHaveTitle(options.pageTitle);
   });
 };
+
+
+//QUESTION: Store locators in apps or in testcase?
+export const shouldNavigateToContactPage = () => {
+  return test("Should navigate to contact page and click me button", async ({ page }) => {
+    await page.goto("/contact/");
+    await page.locator(`data-testid=contact-button`).click();
+  });
+};

packages/ui/src/atoms/button.test.tsx

@@ -0,0 +1,9 @@
+import { expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {Button} from "./button.tsx";
+
+it("renders heading", () => {
+    render(<Button title="Hello" />);
+    const headline = screen.getByText(/Hello/i);
+    expect(headline).not.toBeNull();
+});

packages/ui/src/atoms/button.tsx

@@ -0,0 +1,11 @@
+export function Button({ title }: { title: string }): JSX.Element {
+  return (
+      <button
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          data-testid="contact-button"
+          type="button"
+      >
+          {title}{" "}
+      </button>
+  );
+}

packages/ui/src/index.tsx

@@ -3,6 +3,7 @@ import "./styles.css";
 
 // components
 export * from "./atoms/heading";
+export * from "./atoms/button";
 export * from "./molecules/card";
 export * from "./organisms/deals";
 export * from "./templates/main-view";

packages/ui/src/molecules/card.test.tsx

@@ -0,0 +1,11 @@
+// import { expect, it } from "vitest";
+// import { render, screen } from "@testing-library/react";
+// import { Card } from "./card.tsx";
+//
+// it("renders heading", () => {
+//   render(<Card
+//       title="Hello"
+//       // href="test" children={}/>);
+//   const headline = screen.getByText(/Hello/i);
+//   expect(headline).not.toBeNull();
+// });

turbo.json

@@ -17,6 +17,11 @@
     "clean": {
       "cache": false
     },
+    "test": {
+      "dependsOn": ["^build"],
+      "cache": true,
+      "inputs": ["src/**/*.tsx", "src/**/ *.ts"]
+    },
     "e2e": {
       "cache": false,
       "persistent": true,