Groundwork for frontend testing

.github/workflows/frontend-test.yml

@@ -0,0 +1,26 @@
+# This workflow will build a Java project with Maven
+# For more information see: https://help.github.com/actions/language-and-framework-guides/building-and-testing-java-with-maven
+
+name: Frontend-test
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 22.13.1
+        uses: actions/setup-node@v3
+        with:
+          node-version: '22.13.1'
+
+      - name: Install yarn & test
+        working-directory: ./web-frontend/src/main/v3
+        run: yarn install && yarn test

web-frontend/src/main/v3/.gitignore

@@ -33,7 +33,7 @@ yarn-error.log*
 .turbo
 
 # jest
-__snapshots__
+# __snapshots__
 
 # storybook
 storybook-static

web-frontend/src/main/v3/.husky/pre-commit

@@ -0,0 +1,14 @@
+#!/bin/sh
+if git diff --cached --name-only | grep -q '^web-frontend/src/main/v3/'; then
+  cd web-frontend/src/main/v3
+  echo "🚀 Running pre-commit hooks..."
+
+  echo "🔍 Running unit tests..."
+  npm run test || exit 1
+
+  echo "🧪 Running e2e tests..."
+  cd apps/web || exit 1
+  npm run test:e2e || exit 1
+else
+  echo "No changes in v3 - skipping tests."
+fi

web-frontend/src/main/v3/apps/web/.gitignore

@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local
 
+# e2e test test results
+/test-results/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

web-frontend/src/main/v3/apps/web/package.json

@@ -12,7 +12,9 @@
     "clean": "yarn clean:dist && yarn clean:node_modules",
     "clean:node_modules": "rm -rf node_modules",
     "clean:dist": "rm -rf dist",
-    "move:dist": "cpx \"./dist/**\" \"../../../../../target/classes/static/\""
+    "move:dist": "cpx \"./dist/**\" \"../../../../../target/classes/static/\"",
+    "test": "exit 0",
+    "test:e2e": "yarn playwright test"
   },
   "dependencies": {
     "@pinpoint-fe/ui": "*",
@@ -31,6 +33,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@playwright/test": "^1.52.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-router-dom": "^5.3.3",

web-frontend/src/main/v3/apps/web/playwright.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: '../../',
+  testMatch: ['*.e2e.test.ts'],
+  timeout: 30 * 1000,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://localhost:3000',
+    browserName: 'chromium',
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+});

web-frontend/src/main/v3/package.json

@@ -7,13 +7,15 @@
     "apps/*"
   ],
   "scripts": {
+    "prepare": "cd ../../../.. && husky web-frontend/src/main/v3/.husky",
     "build": "yarn workspace @pinpoint-fe/web build",
     "dev": "yarn workspace @pinpoint-fe/web dev",
     "lint": "yarn workspace @pinpoint-fe/web lint",
-    "test": "yarn workspace @pinpoint-fe/web test",
+    "test": "yarn workspaces run test",
     "clean": "yarn workspace @pinpoint-fe/web clean && rm -rf node_modules"
   },
   "devDependencies": {
+    "husky": "^9.1.7",
     "prettier": "^3.4.2"
   },
   "engines": {

web-frontend/src/main/v3/packages/datetime-picker/jest.config.cjs

@@ -11,7 +11,7 @@ module.exports = {
   ],
   moduleNameMapper: {
     '\\.(css|scss)$': '<rootDir>/src/test/mock/styleMock.ts',
-    '^.+\\.svg$': '<rootDir>/src/test/mock/svgMock.tsx',
+    '^.+\\.svg\\?react$': '<rootDir>/src/test/mock/svgMock.tsx',
     '^@/components/(.*)$': '<rootDir>/src/components/$1',
     '^@/constants/(.*)$': '<rootDir>/src/constants/$1',
     '^@/utils/(.*)$': '<rootDir>/src/utils/$1',

web-frontend/src/main/v3/packages/datetime-picker/src/test/mock/svgMock.tsx

@@ -1,6 +1,9 @@
+// __mocks__/svgMock.tsx
 import React from 'react';
 
-const SvgMock = () => <React.Fragment />;
-
-export const ReactComponent = SvgMock;
+const SvgMock = (props: any) => (
+  <svg {...props}>
+    <text>SVG Mock</text>
+  </svg>
+);
 export default SvgMock;

web-frontend/src/main/v3/packages/datetime-picker/src/types/custom.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg?react' {
+  import * as React from 'react';
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}