Configure Playwright for headless CI and add Gitea workflow with container support

2026-03-17 00:29:39 +00:00
parent 4326109722
commit bd9e92f304
14 changed files with 761 additions and 88 deletions
@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Line of Sight Application', () => {
+  test('should load the home page and show settings', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('text=Line of Sight Settings')).toBeVisible();
+    await expect(page.locator('text=Direction')).toBeVisible();
+  });
+
+  test('should be able to toggle map style', async ({ page }) => {
+    await page.goto('/');
+    const darkButton = page.locator('button:text("Dark")');
+    await darkButton.click();
+    await expect(darkButton).toHaveClass(/active-style/);
+  });
+
+  test('should show results when clicking the search button', async ({ page }) => {
+    await page.goto('/');
+    
+    // Mock the API response to avoid dependency on backend for E2E if desired,
+    // but here we let it hit the real backend if it's up.
+    // For a robust E2E in CI, we usually mock.
+    await page.route('**/api/line-of-sight*', async route => {
+      const json = {
+        success: true,
+        data: {
+          conurbations: [
+            { id: 1, name: 'Test City', population: 100000, country: 'TS', lat: 0, lon: 0, distance_km: 10, off_line_km: 1 }
+          ],
+          line_coordinates: [{ lat: 0, lon: 0 }, { lat: 1, lon: 1 }]
+        }
+      };
+      await route.fulfill({ json });
+    });
+
+    await page.click('button:text("Show Line of Sight")');
+    await expect(page.locator('text=Conurbations Found')).toBeVisible();
+    await expect(page.locator('text=Test City')).toBeVisible();
+  });
+});
@@ -15,10 +15,11 @@
        "react-dom": "^19.2.1"
      },
      "devDependencies": {
+        "@playwright/test": "^1.58.2",
        "@testing-library/jest-dom": "^6.6.0",
        "@testing-library/react": "^16.1.0",
        "@vitejs/plugin-react": "^4.3.0",
-        "jsdom": "^29.0.0",
+        "happy-dom": "^20.8.4",
        "vite": "^6.0.0",
        "vitest": "^3.0.0"
      }
@@ -34,6 +35,8 @@
      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.0.1.tgz",
      "integrity": "sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "@csstools/css-calc": "^3.1.1",
        "@csstools/css-color-parser": "^4.0.2",
@@ -50,6 +53,8 @@
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": "20 || >=22"
      }
@@ -59,6 +64,8 @@
      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.0.3.tgz",
      "integrity": "sha512-Q6mU0Z6bfj6YvnX2k9n0JxiIwrCFN59x/nWmYQnAqP000ruX/yV+5bp/GRcF5T8ncvfwJQ7fgfP74DlpKExILA==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "@asamuzakjp/nwsapi": "^2.3.9",
        "bidi-js": "^1.0.3",
@@ -75,6 +82,8 @@
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": "20 || >=22"
      }
@@ -83,7 +92,9 @@
      "version": "2.3.9",
      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/@babel/code-frame": {
      "version": "7.29.0",
@@ -362,6 +373,8 @@
      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "css-tree": "^3.0.0"
      },
@@ -384,6 +397,8 @@
          "url": "https://opencollective.com/csstools"
        }
      ],
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=20.19.0"
      }
@@ -403,6 +418,8 @@
          "url": "https://opencollective.com/csstools"
        }
      ],
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=20.19.0"
      },
@@ -426,6 +443,8 @@
          "url": "https://opencollective.com/csstools"
        }
      ],
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "@csstools/color-helpers": "^6.0.2",
        "@csstools/css-calc": "^3.1.1"
@@ -453,6 +472,8 @@
          "url": "https://opencollective.com/csstools"
        }
      ],
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=20.19.0"
      },
@@ -475,6 +496,8 @@
          "url": "https://opencollective.com/csstools"
        }
      ],
+      "optional": true,
+      "peer": true,
      "peerDependencies": {
        "css-tree": "^3.2.1"
      },
@@ -499,6 +522,8 @@
          "url": "https://opencollective.com/csstools"
        }
      ],
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=20.19.0"
      }
@@ -924,6 +949,8 @@
      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.0.tgz",
      "integrity": "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
@@ -1076,6 +1103,21 @@
      "resolved": "https://registry.npmjs.org/@maplibre/geojson-vt/-/geojson-vt-5.0.4.tgz",
      "integrity": "sha512-KGg9sma45S+stfH9vPCJk1J0lSDLWZgCT9Y8u8qWZJyjFlP8MNP1WGTxIMYJZjDvVT3PDn05kN1C95Sut1HpgQ=="
    },
+    "node_modules/@playwright/test": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/@rolldown/pluginutils": {
      "version": "1.0.0-beta.27",
      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -3508,6 +3550,15 @@
      "resolved": "https://registry.npmjs.org/@types/kdbush/-/kdbush-3.0.5.tgz",
      "integrity": "sha512-tdJz7jaWFu4nR+8b2B+CdPZ6811ighYylWsu2hpsivapzW058yP0KdfZuNY89IiRe5jbKvBGXN3LQdN2KPXVdQ=="
    },
+    "node_modules/@types/node": {
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.5.0.tgz",
+      "integrity": "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
    "node_modules/@types/supercluster": {
      "version": "7.1.3",
      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
@@ -3516,6 +3567,21 @@
        "@types/geojson": "*"
      }
    },
+    "node_modules/@types/whatwg-mimetype": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
+      "integrity": "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==",
+      "dev": true
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@vitejs/plugin-react": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -3725,6 +3791,8 @@
      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "require-from-string": "^2.0.2"
      }
@@ -3879,6 +3947,8 @@
      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "mdn-data": "2.27.1",
        "source-map-js": "^1.2.1"
@@ -3916,6 +3986,8 @@
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "whatwg-mimetype": "^5.0.0",
        "whatwg-url": "^16.0.0"
@@ -3945,7 +4017,9 @@
      "version": "10.6.0",
      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/deep-eql": {
      "version": "5.0.2",
@@ -4009,6 +4083,8 @@
      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=0.12"
      },
@@ -4311,6 +4387,44 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/happy-dom": {
+      "version": "20.8.4",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.8.4.tgz",
+      "integrity": "sha512-GKhjq4OQCYB4VLFBzv8mmccUadwlAusOZOI7hC1D9xDIT5HhzkJK17c4el2f6R6C715P9xB4uiMxeKUa2nHMwQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": ">=20.0.0",
+        "@types/whatwg-mimetype": "^3.0.2",
+        "@types/ws": "^8.18.1",
+        "entities": "^7.0.1",
+        "whatwg-mimetype": "^3.0.0",
+        "ws": "^8.18.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/happy-dom/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/happy-dom/node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/has-symbols": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -4352,6 +4466,8 @@
      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "@exodus/bytes": "^1.6.0"
      },
@@ -4372,7 +4488,9 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
@@ -4385,6 +4503,8 @@
      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.0.0.tgz",
      "integrity": "sha512-9FshNB6OepopZ08unmmGpsF7/qCjxGPbo3NbgfJAnPeHXnsODE9WWffXZtRFRFe0ntzaAOcSKNJFz8wiyvF1jQ==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "@asamuzakjp/css-color": "^5.0.1",
        "@asamuzakjp/dom-selector": "^7.0.2",
@@ -4425,6 +4545,8 @@
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": "20 || >=22"
      }
@@ -4550,7 +4672,9 @@
      "version": "2.27.1",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/mime-db": {
      "version": "1.52.0",
@@ -4628,6 +4752,8 @@
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
      "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "entities": "^6.0.0"
      },
@@ -4679,6 +4805,50 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
    "node_modules/point-in-polygon": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
@@ -4769,6 +4939,8 @@
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=6"
      }
@@ -4844,6 +5016,8 @@
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -4915,6 +5089,8 @@
      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "xmlchars": "^2.2.0"
      },
@@ -5028,7 +5204,9 @@
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/tinybench": {
      "version": "2.9.0",
@@ -5095,6 +5273,8 @@
      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.26.tgz",
      "integrity": "sha512-WiGwQjr0qYdNNG8KpMKlSvpxz652lqa3Rd+/hSaDcY4Uo6SKWZq2LAF+hsAhUewTtYhXlorBKgNF3Kk8hnjGoQ==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "tldts-core": "^7.0.26"
      },
@@ -5106,7 +5286,9 @@
      "version": "7.0.26",
      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.26.tgz",
      "integrity": "sha512-5WJ2SqFsv4G2Dwi7ZFVRnz6b2H1od39QME1lc2y5Ew3eWiZMAeqOAfWpRP9jHvhUl881406QtZTODvjttJs+ew==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/topojson-client": {
      "version": "3.1.0",
@@ -5137,6 +5319,8 @@
      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "tldts": "^7.0.5"
      },
@@ -5149,6 +5333,8 @@
      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "punycode": "^2.3.1"
      },
@@ -5166,10 +5352,18 @@
      "resolved": "https://registry.npmjs.org/undici/-/undici-7.24.4.tgz",
      "integrity": "sha512-BM/JzwwaRXxrLdElV2Uo6cTLEjhSb3WXboncJamZ15NgUURmvlXvxa6xkwIOILIjPNo9i8ku136ZvWV0Uly8+w==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=20.18.1"
      }
    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true
+    },
    "node_modules/update-browserslist-db": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -5373,6 +5567,8 @@
      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "xml-name-validator": "^5.0.0"
      },
@@ -5385,6 +5581,8 @@
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=20"
      }
@@ -5394,6 +5592,8 @@
      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=20"
      }
@@ -5403,6 +5603,8 @@
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "@exodus/bytes": "^1.11.0",
        "tr46": "^6.0.0",
@@ -5428,11 +5630,34 @@
        "node": ">=8"
      }
    },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/xml-name-validator": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=18"
      }
@@ -5441,7 +5666,9 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/yallist": {
      "version": "3.1.1",
@@ -10,10 +10,11 @@
    "react-dom": "^19.2.1"
  },
  "devDependencies": {
+    "@playwright/test": "^1.58.2",
    "@testing-library/jest-dom": "^6.6.0",
    "@testing-library/react": "^16.1.0",
    "@vitejs/plugin-react": "^4.3.0",
-    "jsdom": "^29.0.0",
+    "happy-dom": "^20.8.4",
    "vite": "^6.0.0",
    "vitest": "^3.0.0"
  },
@@ -21,7 +22,8 @@
    "start": "vite",
    "build": "vite build",
    "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "test:e2e": "playwright test"
  },
  "browserslist": {
    "production": [
@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? 'list' : 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    headless: true,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run start',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});
@@ -1,53 +1,109 @@
-/**
- * Placeholder test file for Line of Sight Frontend
- * 
- * TODO: Add real tests for:
- * - Map component rendering
- * - Direction selector functionality
- * - API integration
- * - User interactions
- * - Line of sight visualization
- */
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi, describe, test, expect, beforeEach } from 'vitest';
+import App from '../App';
+import apiService from '../services/api';

-describe('Line of Sight Frontend', () => {
-  describe('App Component', () => {
-    test('should render map container', () => {
-      // TODO: Implement component rendering test
-      expect(true).toBe(true);
+// Mock MapLibre GL
+vi.mock('maplibre-gl', () => {
+  const mInstance = {
+    on: vi.fn(),
+    off: vi.fn(),
+    remove: vi.fn(),
+    addSource: vi.fn(),
+    removeSource: vi.fn(),
+    addLayer: vi.fn(),
+    removeLayer: vi.fn(),
+    getSource: vi.fn(() => ({ setData: vi.fn() })),
+    getLayer: vi.fn(),
+    setLayoutProperty: vi.fn(),
+    setStyle: vi.fn(),
+    flyTo: vi.fn(),
+    jumpTo: vi.fn(),
+    fitBounds: vi.fn(),
+    isStyleLoaded: vi.fn(() => true),
+    setSky: vi.fn(),
+    setTerrain: vi.fn(),
+  };
+  
+  return {
+    default: {
+      Map: vi.fn(() => mInstance),
+      Marker: vi.fn(() => ({
+        setLngLat: vi.fn().mockReturnThis(),
+        addTo: vi.fn().mockReturnThis(),
+        remove: vi.fn().mockReturnThis(),
+        getElement: vi.fn(() => {
+          const el = document.createElement('div');
+          // Add a simple way to trigger click for tests if needed
+          return el;
+        }),
+      })),
+      Popup: vi.fn(() => ({
+        setLngLat: vi.fn().mockReturnThis(),
+        setDOMContent: vi.fn().mockReturnThis(),
+        addTo: vi.fn().mockReturnThis(),
+        remove: vi.fn().mockReturnThis(),
+        on: vi.fn().mockReturnThis(),
+      })),
+      LngLatBounds: vi.fn(() => ({
+        extend: vi.fn().mockReturnThis(),
+      })),
+      MercatorCoordinate: {
+        fromLngLat: vi.fn(() => ({ x: 0, y: 0, z: 0 })),
+      }
+    }
+  };
+});
+
+// Mock apiService
+vi.mock('../services/api', () => ({
+  default: {
+    getLineOfSight: vi.fn(),
+    healthCheck: vi.fn(),
+  }
+}));
+
+describe('App Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('renders the application title', () => {
+    render(<App />);
+    expect(screen.getByText(/Line of Sight Settings/i)).toBeInTheDocument();
+  });
+
+  test('renders initial controls', () => {
+    render(<App />);
+    // Use role or more specific text to avoid duplicates
+    expect(screen.getByText(/Direction \(0-360°\):/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Show Line of Sight/i })).toBeInTheDocument();
+  });
+
+  test('calls API when clicking "Show Line of Sight"', async () => {
+    apiService.getLineOfSight.mockResolvedValue({
+      data: {
+        success: true,
+        data: {
+          conurbations: [],
+          line_coordinates: [{ lat: 0, lon: 0 }]
+        }
+      }
    });

-    test('should display direction selector', () => {
-      // TODO: Implement direction selector test
-      expect(true).toBe(true);
-    });
+    render(<App />);
+    const button = screen.getByRole('button', { name: /Show Line of Sight/i });
+    fireEvent.click(button);

-    test('should handle map click events', () => {
-      // TODO: Implement click event test
-      expect(true).toBe(true);
+    await waitFor(() => {
+      expect(apiService.getLineOfSight).toHaveBeenCalled();
    });
  });

-  describe('API Integration', () => {
-    test('should fetch line of sight data', () => {
-      // TODO: Implement API fetch test
-      expect(true).toBe(true);
-    });
-
-    test('should handle API errors gracefully', () => {
-      // TODO: Implement error handling test
-      expect(true).toBe(true);
-    });
-  });
-
-  describe('UI Components', () => {
-    test('should toggle map style between light/dark', () => {
-      // TODO: Implement style toggle test
-      expect(true).toBe(true);
-    });
-
-    test('should display conurbation results table', () => {
-      // TODO: Implement results table test
-      expect(true).toBe(true);
-    });
+  test('toggles map style', () => {
+    render(<App />);
+    const darkButton = screen.getByRole('button', { name: /Dark/i });
+    fireEvent.click(darkButton);
+    expect(darkButton).toHaveClass('active-style');
  });
 });
@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+// Global mocks if needed
@@ -0,0 +1,8 @@
+{
+  "status": "failed",
+  "failedTests": [
+    "a510cc93a867214a2ea0-87d527ee6ab9fa6e55ec",
+    "a510cc93a867214a2ea0-64f1332b15a123b767f1",
+    "a510cc93a867214a2ea0-ebcb65ad8c44378dd3e8"
+  ]
+}
@@ -5,7 +5,9 @@ export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
-    environment: 'jsdom',
+    environment: 'happy-dom',
+    setupFiles: ['./src/setupTests.js'],
+    exclude: ['**/e2e/**', '**/node_modules/**'],
  },
  server: {
    port: 3000,