Development

.github/workflows/E2E.yml

@@ -6,40 +6,109 @@ on:
     branches: [development]
 
 jobs:
-  test:
-    timeout-minutes: 60
+  linting:
+    name: ESLint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.8.0
 
-      - name: Install Node.js
+      - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
+          cache: "pnpm"
+          # run: pnpm site install
+
+      - name: Install Dependencies
+        run: pnpm site install
+
+      - name: Lint
+        run: pnpm site run lint
 
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
+  build:
+    name: Next Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.8.0
+
+      - name: Setup node
+        uses: actions/setup-node@v3
         with:
-          version: 7
-          run_install: false
+          node-version: 18
+          cache: "pnpm"
+          # run: pnpm site install
 
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+      # - name: Setup pnpm
+      #   uses: pnpm/action-setup@v2
+      #   with:
+      #     version: 8.8.0
 
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
+      - name: Install Dependencies
+        run: pnpm site install
+
+      - name: Run build
+        run: pnpm site run build
+
+  test:
+    name: Playwright Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.8.0
+
+      - name: Setup node
+        uses: actions/setup-node@v3
         with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          node-version: 18
+          cache: "pnpm"
+          # run: pnpm site install
 
       - name: Install Dependencies
-        run: pnpm install
+        run: pnpm site install
 
-      - name: Build Site
+      - name: Run build
         run: pnpm site run build
+
+      # - name: Get pnpm store directory
+      #   id: pnpm-cache
+      #   shell: bash
+      #   run: |
+      #     echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      # - uses: actions/cache@v3
+      #   name: Setup pnpm cache
+      #   with:
+      #     path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+      #     key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+      #     restore-keys: |
+      #       ${{ runner.os }}-pnpm-store-
+
+      - name: Install Playwright Browsers
+        run: pnpm site playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm site playwright test
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

apps/site/.gitignore

@@ -19,3 +19,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+/test-results/
+/playwright-report/
+/playwright/.cache/

apps/site/package.json

@@ -7,7 +7,9 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "playwright": "playwright",
+    "playwright:test": "playwright test"
   },
   "dependencies": {
     "@astrojs/image": "^0.14.1",
@@ -25,6 +27,9 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.8.1",
+    "@playwright/test": "^1.39.0",
+    "@types/node": "^20.8.9",
     "prettier-plugin-astro": "^0.8.0",
     "typescript": "4.9.5"
   }

apps/site/playwright.config.ts

@@ -0,0 +1,83 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:3000",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+  webServer: {
+    command: "pnpm run preview",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    stdout: "ignore",
+    stderr: "pipe",
+  },
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

apps/site/src/styles/base.css

@@ -7,6 +7,12 @@
   body {
     @apply bg-breadgray-ultra-white dark:bg-breadgray-darkest;
     @apply text-breadgray-charcoal dark:text-breadgray-white;
-    @apply font-redhat;
+    @apply font-redhat;    
+  }
+  * {
+    @apply focus:outline focus:outline-4 focus:outline-green-400 focus:outline-offset-4 rounded ;
+  }
+  .transition-display {
+    transition: display 1000ms;
   }
 }

apps/site/tests/example.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+test.describe("homepage", () => {
+  // test("has title", async ({ page }) => {
+  //   await page.goto("/");
+
+  //   await expect(page).toHaveTitle(/Breadchain/);
+  // });
+
+  test("should not have any automatically detectable accessibility issues", async ({
+    page,
+  }) => {
+    await page.goto("/"); // 3
+
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); // 4
+
+    expect(accessibilityScanResults.violations).toEqual([]); // 5
+  });
+});
+
+// test("should not have any automatically detectable WCAG A or AA violations", async ({
+//   page,
+// }) => {
+//   await page.goto("/");
+
+//   const accessibilityScanResults = await new AxeBuilder({ page })
+//     .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+//     .analyze();
+
+//   expect(accessibilityScanResults.violations).toEqual([]);
+// });

packages/site-ui/components/ButtonLink/ButtonLink.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface IProps {
   children: ReactNode;

packages/site-ui/components/ColorToggle/ColorToggle.tsx

@@ -30,7 +30,11 @@ export function ColorToggle() {
   return (
     <section>
       {colorMode && (
-        <button className="flex items-center gap-2" onClick={handleColorToggle}>
+        <button
+          aria-label="toggle light and dark mode"
+          className="flex items-center gap-2 px-4 py-2"
+          onClick={handleColorToggle}
+        >
           <div
             className={classNames(
               "h-6 w-6",

packages/site-ui/components/DesktopNavigation/DesktopNavigation.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 function DesktopNavigationLink(props: {
   children: ReactNode;
@@ -9,7 +9,7 @@ function DesktopNavigationLink(props: {
   const { children, ...remainingProps } = props;
   return (
     <a
-      className="font-redhat dark:text-breadgray-white dark:hover:text-breadgray-ultra-white text-breadgray-burnt hover:text-breadgray-charcoal active:text-breadgray-violet flex items-center px-2 text-xl font-bold leading-none tracking-wider min-[810px]:px-4"
+      className="font-redhat dark:text-breadgray-light-grey dark:hover:text-breadgray-white text-breadgray-toast hover:text-breadgray-burnt active:text-breadgray-violet flex items-center px-2 text-xl font-bold leading-none tracking-wider min-[810px]:px-4"
       {...remainingProps}
     >
       {children}