chore(frontend): add code coverage (#80)

* chore(frontend): use Codecov for test coverage

* chore(frontend): add Codecov badge

* chore(frontend): use Codecov token

* chore(frontend): run validation for main branch to get base coverage

* chore(frontend): add working directory for Codecov action

* chore(frontend): attempt to set the working directory for Codecov

.github/workflows/frontend.yml

@@ -1,6 +1,13 @@
 name: Frontend CI
 
 on:
+  push:
+    branches: [main]
+    paths:
+      - '.github/workflows/frontend.yml'
+      - 'frontend/**/*'
+      - '!frontend/.simple-git-hooks.json'
+      - '!frontend/.lintstagedrc.json'
   pull_request:
     paths:
       - '.github/workflows/frontend.yml'
@@ -27,13 +34,27 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: 16.x
-      - name: Installation
+      - name: Install
         run: npm ci
-      - name: Building
+      - name: Build
         run: npm run build
-      - name: Linting
+      - name: Lint
         run: npm run check
-      - name: Testing
-        run: npm run test
+      - name: Test
+        run: npm run test:coverage
         env:
           CI: true
+      - name: Collect Coverage
+        run: |
+          echo "${{ github.workspace }}/frontend"
+          COVFILES=$(find packages -wholename '*/.coverage/lcov.info' | tr '\n' ',' | sed '$s/,$//')
+          echo "COVFILES=$COVFILES" >> $GITHUB_ENV
+      - name: Send Coverage to Codecov
+        uses: codecov/codecov-action@v2
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ${{ env.COVFILES }}
+          flags: unittests
+          fail_ci_if_error: true
+          verbose: true
+          working-directory: ${{ github.workspace }}/frontend

frontend/.gitignore

@@ -2,3 +2,4 @@ packages/*/*.d.ts
 packages/*/*.d.ts.map
 packages/*/*.js
 packages/*/*.js.map
+packages/*/.coverage

frontend/README.md

@@ -1,5 +1,8 @@
 # Vaadin Frontend
 
+![Frontend CI](https://github.com/vaadin/fusion/actions/workflows/frontend.yml/badge.svg)
+[![codecov](https://codecov.io/gh/vaadin/fusion/branch/main/graph/badge.svg?token=PQMTMS8ECC)](https://codecov.io/gh/vaadin/fusion)
+
 The collection of frontend utilities used by Vaadin Flow and Fusion.
 
 | Package                 | Status |

frontend/package.json

@@ -19,6 +19,7 @@
     "postinstall": "npm run bootstrap",
     "publish": "lerna publish",
     "test": "lerna run test",
+    "test:coverage": "lerna run test:coverage",
     "typecheck": "lerna run typecheck"
   },
   "repository": {

frontend/packages/common-frontend/package.json

@@ -14,7 +14,8 @@
     "build": "tsc --isolatedModules",
     "lint": "eslint --fix src/**/*.ts",
     "test": "web-test-runner \"test/**/*.test.ts\" --config ../../web-test-runner.config.js",
-    "test:watch": "yarn run test -- --watch",
+    "test:coverage": "npm run test -- --coverage",
+    "test:watch": "npm run test -- --watch",
     "typecheck": "tsc --noEmit"
   },
   "exports": {

frontend/packages/form/package.json

@@ -14,7 +14,8 @@
     "build": "tsc --isolatedModules",
     "lint": "eslint --fix src/**/*.ts",
     "test": "web-test-runner \"test/**/*.test.ts\" --config ../../web-test-runner.config.js",
-    "test:watch": "yarn run test -- --watch",
+    "test:coverage": "npm run test -- --coverage",
+    "test:watch": "npm run test -- --watch",
     "typecheck": "tsc --noEmit"
   },
   "exports": {

frontend/packages/fusion-frontend/package.json

@@ -14,7 +14,8 @@
     "build": "tsc --isolatedModules",
     "lint": "eslint --fix src/**/*.ts",
     "test": "web-test-runner \"test/**/*.test.ts\" --config ../../web-test-runner.config.js",
-    "test:watch": "yarn run test -- --watch",
+    "test:coverage": "npm run test -- --coverage",
+    "test:watch": "npm run test -- --watch",
     "typecheck": "tsc --noEmit"
   },
   "exports": {

frontend/web-test-runner.config.js

@@ -24,6 +24,7 @@ export default {
   browserStartTimeout: 60000, // default 30000
   testsStartTimeout: 60000, // default 10000
   testsFinishTimeout: 60000, // default 20000
+  preserveSymlinks: true,
   plugins: [
     esbuildPlugin({ ts: true, target: 'auto' }),
     {
@@ -42,4 +43,14 @@ export default {
       },
     }),
   ],
+  coverageConfig: {
+    report: true,
+    reportDir: '.coverage',
+    threshold: {
+      statements: 70,
+      branches: 70,
+      functions: 70,
+      lines: 70,
+    },
+  },
 };