Merge pull request #67 from c4dt/playwright

Add automated tests for navigation bar

README.docker.md

@@ -21,7 +21,7 @@ DATABASE_PASSWORD=XXX                       # choose any PostgreSQL password
 DATABASE_HOST=db
 DATABASE_PORT=5432
 DB_PATH=dvoting                             # LMDB database path
-FRONT_END_URL=http://127.0.0.1:3000
+FRONT_END_URL=http://127.0.0.1:3000         # the automated frontend tests expect this value do not change it
 BACKEND_HOST=backend
 BACKEND_PORT=5000
 SESSION_SECRET=XXX                          # choose any secret

web/frontend/.gitignore

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

web/frontend/README.md

@@ -0,0 +1,52 @@
+# Automated Tests w/ Playwright
+
+## Setup
+
+To install Playwright run
+
+```
+npm ci
+npx playwright install
+```
+
+which will install the module and its dependencies. In
+order to execute the environment necessary for the tests,
+additional system dependencies need to be installed.
+
+Run
+
+```
+npx playwright install-deps --dry-run
+```
+
+to be shown the dependencies that you need to install on your machine (requires `root` access).
+
+Your local frontend must be accessible at `http://127.0.0.1:3000`.
+
+## Run tests
+
+Run
+
+```
+npx playwright test
+```
+
+to run the tests. This will open a window in your browser w/ the test results.
+
+To run interactive tests, run
+
+```
+npx playwright test --ui
+```
+
+this will open an user interface where you can interactively run and evaluate tests.
+
+## Update HAR files
+
+To update the HAR files, you need to make sure
+
+* that a complete D-Voting setup is running, as the API will be called for real, and
+* the `REACT_APP_SCIPER_ADMIN` of the D-Voting instance value is set to `123456` (i.e. the `SCIPER_ADMIN` value in the mocks).
+
+You then change the `UPDATE = false` value in `tests/mocks.ts` to `UPDATE = true` and execute
+the tests as usual. The tests that update the mocks will be run and the other tests will be skipped.

web/frontend/package.json

@@ -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",

web/frontend/playwright.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* 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',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+  ],
+
+});

web/frontend/src/layout/NavBar.tsx

@@ -179,7 +179,6 @@ const LeftSideNavBar = ({ authCtx, t }) => (
   <div className="flex-1 flex items-center justify-center md:justify-start">
     <div className="flex-shrink-0 flex items-center">
       <NavLink to={ROUTE_HOME}>
-        <img className="block lg:hidden h-10 w-auto" src={logo} alt="Workflow" />
         <img className="hidden lg:block h-10 w-auto" src={logo} alt="Workflow" />
       </NavLink>
     </div>

web/frontend/tests/hars/123456/a03037964db4d746517f562ccb09b049db7f7a12.json

@@ -0,0 +1 @@
+{"sciper":123456,"lastName":"123456","firstName":"sciper-#","isLoggedIn":true,"authorization":{"roles":["add","list","remove"],"proxies":["post","put","delete"],"election":["create"]}}

web/frontend/tests/hars/123456/get_dev_login.har

@@ -0,0 +1,14 @@
+{
+  "log": {
+    "version": "1.2",
+    "creator": {
+      "name": "Playwright",
+      "version": "1.40.1"
+    },
+    "browser": {
+      "name": "chromium",
+      "version": "120.0.6099.28"
+    },
+    "entries": []
+  }
+}

web/frontend/tests/hars/123456/personal_info.har

@@ -0,0 +1,61 @@
+{
+  "log": {
+    "version": "1.2",
+    "creator": {
+      "name": "Playwright",
+      "version": "1.40.1"
+    },
+    "browser": {
+      "name": "chromium",
+      "version": "120.0.6099.28"
+    },
+    "entries": [
+      {
+        "startedDateTime": "2023-12-07T15:16:05.427Z",
+        "time": 63.36,
+        "request": {
+          "method": "GET",
+          "url": "http://127.0.0.1:3000/api/personal_info",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Accept", "value": "*/*" },
+            { "name": "Accept-Language", "value": "en-US" },
+            { "name": "Cookie", "value": "connect.sid=s%3AxeUPf49ZYc9AUrUtzig9-O4g0Z_RVtVV.ChZVAx%2FL%2BIzfgIlkxzUxTLVduImdZIp68OdvODtveTU" },
+            { "name": "Referer", "value": "http://127.0.0.1:3000/about" },
+            { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.6099.28 Safari/537.36" }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "OK",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "access-control-allow-origin", "value": "*" },
+            { "name": "connection", "value": "keep-alive" },
+            { "name": "content-length", "value": "184" },
+            { "name": "content-type", "value": "application/json; charset=utf-8" },
+            { "name": "date", "value": "Thu, 07 Dec 2023 15:16:05 GMT" },
+            { "name": "etag", "value": "W/\"b8-oDA3lk2010ZRf1YsywmwSdt/ehI\"" },
+            { "name": "keep-alive", "value": "timeout=5" },
+            { "name": "x-powered-by", "value": "Express" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json; charset=utf-8",
+            "_file": "a03037964db4d746517f562ccb09b049db7f7a12.json"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 63.36 }
+      }
+    ]
+  }
+}

web/frontend/tests/hars/789012/5f05240cb33cb9e581ea0ce24c4e728a04e2a5d1.json

@@ -0,0 +1 @@
+{"sciper":789012,"lastName":"789012","firstName":"sciper-#","isLoggedIn":true,"authorization":{}}

web/frontend/tests/hars/789012/get_dev_login.har

@@ -0,0 +1,14 @@
+{
+  "log": {
+    "version": "1.2",
+    "creator": {
+      "name": "Playwright",
+      "version": "1.40.1"
+    },
+    "browser": {
+      "name": "chromium",
+      "version": "120.0.6099.28"
+    },
+    "entries": []
+  }
+}