Find help data fix

.github/workflows/e2e.yml

@@ -0,0 +1,32 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [staging]
+  pull_request:
+    branches: [staging]
+
+jobs:
+  e2e:
+    name: Run Playwright E2E Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run E2E tests
+        run: npx playwright test
+        env:
+          CI: true

e2e/find-help.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Find Help Page', () => {
+  test('loads and shows postcode input', async ({ page }) => {
+    await page.goto('/find-help');
+
+    await expect(page.getByLabel('Enter your postcode')).toBeVisible();
+    await expect(page.getByRole('button', { name: /continue/i })).toBeVisible();
+  });
+});

jest.config.cjs

@@ -2,19 +2,23 @@
 console.log('[JEST CONFIG] Using CJS config');
 
 module.exports = {
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/e2e/',
+    '<rootDir>/.next/',
+  ],
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.(ts|tsx)$': 'babel-jest',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1', // ← ✅ this is correct
+    '^@/(.*)$': '<rootDir>/src/$1',
     '^leaflet$': '<rootDir>/__mocks__/leaflet.js',
     '^react-leaflet$': '<rootDir>/__mocks__/react-leaflet.ts',
     '\\.css$': 'identity-obj-proxy',
   },
   moduleDirectories: ['node_modules', 'src'],
-  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
   transformIgnorePatterns: [
     'node_modules/(?!(react-leaflet|@react-leaflet|leaflet|@esm|lodash-es)/)',
   ],

package.json

@@ -11,7 +11,10 @@
     "lint": "next lint",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:ci": "jest --ci"
+    "test:ci": "jest --ci",
+    "test:e2e": "playwright test --config=playwright.config.ts",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -26,6 +29,7 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
+    "@playwright/test": "^1.52.0",
     "@tailwindcss/postcss": "^4.1.8",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -43,6 +47,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.0.0-beta.3",
+    "playwright": "^1.52.0",
     "postcss": "^8.5.4",
     "tailwindcss": "^4.1.8",
     "typescript": "^5"

playwright.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  testIgnore: ['__tests__/**', 'tests/**'],
+  use: {
+    baseURL: 'http://localhost:3000',
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+  },
+  webServer: {
+    command: 'npm run dev',
+    port: 3000,
+    reuseExistingServer: true,
+  },
+});

src/components/FindHelp/FilterPanel.tsx

@@ -45,13 +45,16 @@ export default function FilterPanel({ onFilterChange }: Props) {
   }, []);
 
   useEffect(() => {
-    setSubCategory('');
-    onFilterChange({ category, subCategory: '' });
-  }, [category, onFilterChange]);
+    const current = categories.find((c) => c.key === category);
+    const validSub = current?.subCategories.some((sub) => sub.key === subCategory);
 
-  useEffect(() => {
-    onFilterChange({ category, subCategory });
-  }, [subCategory, category, onFilterChange]);
+    if (!validSub) {
+      setSubCategory('');
+      onFilterChange({ category, subCategory: '' });
+    } else {
+      onFilterChange({ category, subCategory });
+    }
+  }, [category, subCategory, categories, onFilterChange]);
 
   const currentCategory = category
     ? categories.find((c) => c.key === category)
@@ -78,7 +81,7 @@ export default function FilterPanel({ onFilterChange }: Props) {
         </select>
       </div>
 
-        {category && Array.isArray(currentCategory?.subCategories) && currentCategory.subCategories.length > 0 && (
+        {category && currentCategory?.subCategories?.length && (
         <div>
           <label htmlFor="subCategory" className="block text-sm font-medium text-gray-700 mb-1">
             Subcategory