chore: setup complete testing infrastructure

.github/workflows/ci.yml

@@ -18,6 +18,8 @@ jobs:
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
+      with:
+        fetch-depth: 0 # Required for Chromatic
 
     - name: Setup Node.js
       uses: actions/setup-node@v4
@@ -29,14 +31,34 @@ jobs:
     - name: Install dependencies
       run: npm ci
 
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+
     - name: Lint code
       run: npm run lint
 
     - name: Build
       run: npm run build
 
-    - name: Run tests
-      run: npm test
+    - name: Run Unit & Component Tests
+      run: npm test -- --coverage
+
+    - name: Check Coverage Thresholds
+      run: |
+        # Jest will exit with non-zero if thresholds are not met
+        npm test -- --coverage --coverageThreshold='{"global":{"branches":85,"functions":85,"lines":85,"statements":85}}'
+
+    - name: Run E2E Tests
+      run: npx playwright test
+
+    - name: Run Lighthouse CI
+      run: npx lhci autoreview
+      env:
+        LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+
+    - name: Run Chromatic
+      run: npx chromatic --project-token=${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+      if: github.event_name == 'push' && github.ref == 'refs/heads/main'
 
   # Server (TypeScript) CI
   server:

frontend/.gitignore

@@ -3,11 +3,15 @@
 PULL_REQUEST.md
 # dependencies
 /node_modules
+/.tools
 /.pnp
 .pnp.js
 
 # testing
 /coverage
+/playwright-report
+/test-results
+/.lighthouseci
 
 # next.js
 /.next/

frontend/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+export default config;

frontend/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+import "../src/styles/globals.css"; // Ensure this path is correct
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

frontend/e2e/basic.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+test.describe('Basic Navigation', () => {
+  test('should navigate to the home page', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveTitle(/ArenaX/);
+  });
+
+  test('should have no accessibility violations', async ({ page }) => {
+    await page.goto('/');
+    await injectAxe(page);
+    await checkA11y(page);
+  });
+});

frontend/jest.config.js

@@ -1,13 +1,26 @@
 /** @type {import('jest').Config} */
-module.exports = {
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  dir: "./",
+});
+
+const config = {
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   testEnvironment: "jest-environment-jsdom",
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
-    "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js",
-    "\\.(jpg|jpeg|png|gif|svg|webp)$": "<rootDir>/__mocks__/fileMock.js",
   },
-  transform: {
-    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { configFile: "./babel.config.js" }],
+  collectCoverage: true,
+  coverageThreshold: {
+    global: {
+      branches: 85,
+      functions: 85,
+      lines: 85,
+      statements: 85,
+    },
   },
+  coverageReporters: ["json", "lcov", "text", "clover", "json-summary"],
 };
+
+module.exports = createJestConfig(config);

frontend/jest.setup.ts

@@ -1,6 +1,9 @@
 import "@testing-library/jest-dom";
+import { toHaveNoViolations } from "jest-axe";
 import { TextDecoder, TextEncoder } from "util";
 
+expect.extend(toHaveNoViolations);
+
 if (typeof global.TextEncoder === "undefined") {
   // Required by stellar-sdk in Jest runtime.
   global.TextEncoder = TextEncoder as unknown as typeof global.TextEncoder;
@@ -9,3 +12,20 @@ if (typeof global.TextEncoder === "undefined") {
 if (typeof global.TextDecoder === "undefined") {
   global.TextDecoder = TextDecoder as unknown as typeof global.TextDecoder;
 }
+
+// Mock window.matchMedia
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+}

frontend/lighthouserc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  ci: {
+    collect: {
+      startServerCommand: 'npm run start',
+      url: ['http://localhost:3000'],
+      numberOfRuns: 3,
+    },
+    assert: {
+      assertions: {
+        'categories:performance': ['error', { minScore: 0.85 }],
+        'categories:accessibility': ['error', { minScore: 0.9 }],
+        'categories:best-practices': ['error', { minScore: 0.9 }],
+        'categories:seo': ['error', { minScore: 0.9 }],
+      },
+    },
+    upload: {
+      target: 'temporary-public-storage',
+    },
+  },
+};