Setup e2e tests (#75)

* Created playwright project

* Added e2e tests to pipeline

* Added eslint and prettier

* Added eslint plugin for playwright

* Added docker-compose for tests

* Override frontend envs for tests

* Added first test on dockerized app

* Changed server port from 5001 to 8080

* Fixed default API_URL

* Added mountebank

* Added README

* Revert "Added mountebank"

This reverts commit da3b08b.

* Renamed test case, moved api url to constant

.dockerignore

@@ -1,24 +1,15 @@
-**/.classpath
 **/.dockerignore
-**/.env.local
+**/.env*
 **/.git
 **/.gitignore
-**/.project
-**/.settings
-**/.toolstarget
+**/.github
 **/.vs
 **/.vscode
 **/*.*proj.user
-**/*.dbmdl
-**/*.jfm
-**/azds.yaml
 **/bin
-**/charts
 **/docker-compose*
 **/Dockerfile*
 **/node_modules
 **/npm-debug.log
 **/obj
-**/secrets.dev.yaml
-**/values.dev.yaml
-README.md
+**/README.md

.github/workflows/build.yml

@@ -44,3 +44,39 @@ jobs:
         run: yarn build
       - name: Test
         run: yarn test
+  e2e-tests:
+    needs:
+      - backend
+      - frontend
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    defaults:
+      run:
+        working-directory: 'tests'
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+    - name: Start containers
+      run: docker-compose up -d --build
+    - name: Setup node
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18.16.0'
+    - name: Install dependencies
+      run: yarn
+    - name: Lint
+      run: yarn lint
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: tests/playwright-report/
+        retention-days: 30
+    - name: Stop containers
+      if: always()
+      run: docker-compose down
+

Dockerfile

@@ -2,6 +2,7 @@ FROM mcr.microsoft.com/dotnet/sdk:6.0 AS backend
 WORKDIR /app
 COPY src/backend .
 RUN dotnet publish -c Release -o publish src/FoodDiary.API/FoodDiary.API.csproj
+RUN dotnet publish -c Release -o publish/migrator src/FoodDiary.Migrator/FoodDiary.Migrator.csproj
 
 FROM node:18.16.0-alpine AS frontend
 WORKDIR /app

README.md

@@ -65,7 +65,7 @@ This information can be extremely useful for people who want to keep track of en
     yarn start
     ```
 
-1. Navigate to <https://localhost:5001>
+1. Navigate to <https://localhost:8080>
 
 ## How to run frontend without backend
 
@@ -93,7 +93,7 @@ VITE_APP_FAKE_AUTH_LOGIN_ON_INIT=true
 
 Name                                       | Type      | Description
 -------------------------------------------|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-`VITE_APP_API_URL`                         | `string`  | Specifies a backend API base URL without a trim slash, e.g. `https://localhost:5001`
+`VITE_APP_API_URL`                         | `string`  | Specifies a backend API base URL without a trim slash, e.g. `https://localhost:8080`
 `VITE_APP_AUTH_CHECK_INTERVAL`             | `number`  | Specifies the auth status check interval in milliseconds to ensure that users with expired cookies will not be able to use the application without refreshing the page in the browser. Not used if `VITE_APP_FAKE_AUTH_ENABLED` is `true`
 `VITE_APP_DEMO_MODE_ENABLED`               | `boolean` | Enables demo mode. In demo mode, some features related to file system or external integrations are disabled
 `VITE_APP_FAKE_AUTH_ENABLED`               | `boolean` | Setups fake authentication flow without using a backend server and OAuth Identity provider. Used for local development

certs/README.md

@@ -0,0 +1,17 @@
+# Certs
+
+These files are used for local development and testing under https.
+
+## How to generate certs
+
+Generate pfx:
+
+```shell
+dotnet dev-certs https -ep app.pfx -p test
+```
+
+Generate crt (*use your operation system password here*):
+
+```shell
+dotnet dev-certs https --trust --export-path ca.cert.crt
+```

src/backend/src/FoodDiary.API/Properties/launchSettings.json

@@ -4,7 +4,7 @@
     "FoodDiary.API": {
       "commandName": "Project",
       "launchBrowser": false,
-      "applicationUrl": "https://localhost:5001",
+      "applicationUrl": "https://localhost:8080",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

src/frontend/.env

@@ -1 +1 @@
-VITE_APP_API_URL=https://localhost:5001
+VITE_APP_API_URL=https://localhost:8080

src/frontend/src/config/index.ts

@@ -1,4 +1,4 @@
-export const API_URL = import.meta.env.VITE_APP_API_URL;
+export const API_URL = import.meta.env.VITE_APP_API_URL ?? '';
 
 export const AUTH_CHECK_INTERVAL = import.meta.env.VITE_APP_AUTH_CHECK_INTERVAL
   ? Number(import.meta.env.VITE_APP_AUTH_CHECK_INTERVAL)

tests/.eslintignore

@@ -0,0 +1 @@
+playwright.config.ts

tests/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "root": true,
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["standard-with-typescript", "plugin:playwright/recommended", "prettier"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module",
+        "ecmaFeatures": {
+          "jsx": true
+        }
+      },
+      "plugins": ["prettier", "import"],
+      "rules": {
+        "prettier/prettier": 2,
+        "no-console": "warn"
+      }
+    }
+  ]
+}

tests/.gitignore

@@ -0,0 +1,17 @@
+/node_modules
+/.pnp
+.pnp.js
+playwright-report
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions