Merge branch 'pipeline-frontend' into 'master'

Adjust pipeline setup

See merge request !54

.gitlab-ci.yml

@@ -6,16 +6,55 @@ variables:
 cache:
   paths:
     - .cache/pip
-    - venv/
+    - venv/ # makes the virtual env available for jobs
 
-before_script:
-  - python -V
+stages:
+  - venv update # Keep the cached virtual env up to date with dependencies
+  - tests and linting # Run test/linting for frontend and backend
 
-test:
+update:
+  before_script:
+    - python -V
+  image: python:3.9-buster
+  stage: venv update
   script:
     - make install
+
+backend lint:
+  before_script:
+    - python -V
+  image: python:3.9-buster
+  stage: tests and linting
+  script:
     - make lint
+
+backend test:
+  before_script:
+    - python -V
+  image: python:3.9-buster
+  stage: tests and linting
+  script:
     - make test
   artifacts:
     reports:
       cobertura: coverage.xml
+
+frontend test:
+  image: node:14-alpine
+  stage: tests and linting
+  script:
+    - cd frontend
+    - npm install -g npm@latest
+    - npm ci
+    - npm run coverage:ci
+  coverage:
+    '/All files[^|]*\|[^|]*\s+([\d\.]+)/'
+
+frontend lint:
+  image: node:14-alpine
+  stage: tests and linting
+  script:
+    - cd frontend
+    - npm install -g npm@latest
+    - npm ci
+    - npm run lint

frontend/.eslintrc.json

+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb",
+    "airbnb-typescript",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "semi": "off",
+    "@typescript-eslint/semi": ["error", "never"]
+  }
+}

frontend/.gitignore

@@ -11,6 +11,9 @@
 # production
 /build
 
+# frontend configuration
+/public/env.js
+
 # misc
 .DS_Store
 .env.local

frontend/package.json

@@ -26,11 +26,16 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "NODE_ENV=development HOST=0.0.0.0 npm run build:env && react-scripts start",
-    "build": "npm run build:env && react-scripts build",
+    "start": "NODE_ENV=development HOST=0.0.0.0 npm run build:env && DISABLE_ESLINT_PLUGIN='true' react-scripts start",
+    "build": "npm run build:env && DISABLE_ESLINT_PLUGIN='true' react-scripts build",
     "build:env": "node scripts/build-env.js",
+    "test": "react-scripts test --env=jsdom",
+    "test:ci": "react-scripts test --env=jsdom --ci --reporters=default --reporters=jest-junit --coverageReporters=cobertura --coverage --coverageDirectory=coverage",
+    "coverage:ci": "react-scripts test --env=jsdom --ci --coverage --color --watchAll=false",
+    "coverage": "react-scripts test --env=jsdom --coverage --color",
+    "lint": "eslint --ext js,jsx,ts,tsx src",
+    "lint-report": "eslint --ext js,jsx,ts,tsx -f checkstyle -o checkstyle-result.xml src",
     "clean": "rm -rf node_modules",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -53,6 +58,17 @@
   },
   "devDependencies": {
     "@types/react-helmet": "^6.1.2",
-    "@types/react-router-dom": "^5.1.8"
+    "@types/react-router-dom": "^5.1.8",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^14.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "jest-junit": "^12.2.0"
   }
 }

frontend/public/env.js

-window.ENV = {
-  NODE_ENV: 'development',
-  PUBLIC_URL: '',
-  FAST_REFRESH: true,
-  REACT_APP_VERSION: '0.1.0',
-  REACT_APP_NAME: 'greg',
-}

frontend/src/components/button/index.tsx

@@ -15,3 +15,4 @@ export const Button = styled.a`
   }
   background: ${({ theme }) => theme.colors.main};
 `
+export default Button

frontend/src/components/link/index.tsx

@@ -31,7 +31,7 @@ const externalLinkIcon = (
                 d="M16.807.19a.596.596 0 0 0-.426-.173h-4.854a.596.596 0 0 0-.426.173.548.548 0 0 0-.18.409c0 .157.06.294.18.409l1.668 1.598-6.18 5.923a.281.281 0 0 0-.095.21c0 .078.031.148.094.208L7.67 9.983a.306.306 0 0 0 .436 0l6.18-5.923 1.67 1.599c.12.115.262.172.426.172a.596.596 0 0 0 .426-.172.547.547 0 0 0 .18-.409V.599a.548.548 0 0 0-.18-.409z"/>
         </g>
     </svg>
-);
+)
 
 const ExternalIcon = styled.span`
   margin-left: 1.2rem;

frontend/src/components/link/link.test.tsx

+import React from 'react'
+import { render, waitFor, screen } from '@testing-library/react'
+import Link from './index'
+
+
+describe('Tests for Link component', () => {
+  test('External link prefixes route link with //', async () => {
+    render(<Link external to='example.org' />)
+
+    await waitFor(() => screen.getByRole('link'))
+
+    expect(screen.getByRole('link')).toHaveAttribute('href', '//example.org')
+  })
+})
\ No newline at end of file

frontend/src/routes/frontpage/index.tsx

@@ -18,9 +18,9 @@ export default function FrontPage() {
           setApiHealth(result)
         }
       })
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
       .catch((error) => {
         setApiHealth('error')
-        console.log(error)
       })
   }
   return (

frontend/src/routes/index.tsx

@@ -10,7 +10,6 @@ import FrontPage from 'routes/frontpage'
 import Footer from 'routes/components/footer'
 import Header from 'routes/components/header'
 import NotFound from 'routes/components/notFound'
-import Link from '../components/link'
 
 const AppWrapper = styled.div`
   display: flex;