feat: add automated tests powered by Playwright

web/frontend/.eslintrc

@@ -14,7 +14,7 @@
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": "tsconfig.json"
+    "project": ["tsconfig.json", "tests/tsconfig.json"]
   },
   "plugins": ["react", "@typescript-eslint", "jest", "unused-imports"],
   "root": true,
@@ -32,7 +32,7 @@
     "import/no-extraneous-dependencies": ["error", {"devDependencies": [
       "**/*.test.ts", "**/*.test.tsx",
       "**/setupTest.ts", "**/setupProxy.js",
-      "**/mocks/*"
+      "**/mocks/*", "tests/*.ts"
     ]}],
 
     // conflicts with the index.ts (eslint prefers default exports which are not compatible with index.ts)

web/frontend/.gitignore

@@ -25,4 +25,7 @@ yarn-error.log*
 .idea
 
 .vscode
-
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

web/frontend/package.json

@@ -8,8 +8,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "eslint": "./node_modules/.bin/eslint src/",
-    "eslint-fix": "./node_modules/.bin/eslint src/ --fix",
+    "eslint": "./node_modules/.bin/eslint src/ tests/",
+    "eslint-fix": "./node_modules/.bin/eslint src/ tests/ --fix",
     "prettier": "./node_modules/.bin/prettier --write src/",
     "prettier-check": "./node_modules/.bin/prettier --check src/"
   },
@@ -23,6 +23,7 @@
     "file-saver": "^2.0.5",
     "i18next": "^21.6.10",
     "i18next-browser-languagedetector": "^6.1.3",
+    "pg": "^8.11.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.1",
     "react-beautiful-dnd": "^13.1.0",
@@ -33,10 +34,10 @@
     "react-scripts": "5.0.0",
     "short-unique-id": "^4.4.4",
     "web-vitals": "^2.1.4",
-    "yup": "^0.32.11",
-    "pg": "^8.11.1"
+    "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@playwright/test": "^1.40.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.5",
     "@types/file-saver": "^2.0.5",
@@ -46,6 +47,7 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
+    "dotenv": "^16.3.1",
     "eslint": "^8.16.0",
     "eslint-config-airbnb-typescript": "^16.1.0",
     "eslint-config-prettier": "^8.3.0",

web/frontend/playwright.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/* import environment variables used in development instance */
+require("dotenv").config({ path: "./../../.env" });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  /* 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: {
+    baseURL: 'http://127.0.0.1:3000',
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  workers: 1,
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+  ],
+
+});