feat: add coverage badges (#35)

* feature: badges

* fix: update lock file

* fix: update job summary

* fix: update workflow

* fix: workflow share output

* fix: env needs

* fix: raw output

* fix: ci

* fix: test

* fix: test

* fix: mapping

* fix: test

* fix: fix empty outputs

* fix: outputs

* fix: url

* fix: ci fallback

* Update ci.yaml

* fix: remove not working fallbacks

* test: check the flow from same repo

* test: update

* test: another

* test: specific branch

* test: try to get e2e coverage

* fix: job summary deploy url

* refactor: make coverage work: alias removed, babel styled components removed

* feat: create coverage file for unit and another one for e2e tests, merge them and change format

create coverage file for unit and another one for e2e tests, merge them and change format so that
the coverage percentages include the values from both types of tests

* chore: add babel-plugin-istanbul when the CI runs

* chore: add postinstall package.json script

* refactor: remove commented out code

* ci: test coverage flow in PR

* ci: testing pipeline

* chore: remove explicit playwright install in ci

* Update badges

* ci: remove explicit run of tests as they run in the coverage step

* feature: switch to codecov

* Update ci_reusable.yaml

* fix: try base setup

* fix: pass secrets

* fix: change token to be required

* fix: coverage workflow

* test

* test

* fix: update ci reusable workflow ref

* fix: update readme and coverage workflow on pr

* test

* fix: update ci

Co-authored-by: Rafał Mikucki <[email protected]>
Co-authored-by: @bapp-ci-bot <[email protected]>

.github/workflows/ci.yaml

@@ -1,6 +1,10 @@
 name: Call reusable workflow - Interface
 
 on:
+  workflow_call:
+    secrets:
+      CODECOV_TOKEN:
+        required: true
   push:
     branches:
       - main
@@ -45,4 +49,61 @@ jobs:
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       FLEEK_API_KEY: ${{ secrets.FLEEK_API_KEY }}
-      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+  job-sumary:
+    name: Create Job Summary
+    runs-on: ubuntu-latest
+    if: ${{ always() && contains(join(needs.*.result, ','), 'success') }}
+    needs: [call-reusable-workflow-PR, call-reusable-workflow-testing, call-reusable-workflow-staging]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install JQ
+        uses: sergeysova/jq-action@v2
+        with:
+          cmd: jq -n env
+      - name: Get job outputs
+        env:
+          OUTPUTS: ${{ toJSON(needs) }}
+        run: |
+          succededJobOutput="$(
+            echo '${{ env.OUTPUTS }}' | jq '.[] | select(.result | startswith("success")) | .outputs'
+          )"
+          echo 'JOB_OUTPUT='$succededJobOutput >> $GITHUB_ENV
+      - name: Get job vars
+        run: |
+          jobLint="$(
+            echo '${{ env.JOB_OUTPUT }}' |
+            jq '.JOB_LINT'
+          )"
+          echo 'JOB_LINT='$jobLint >> $GITHUB_ENV
+
+          jobBuild="$(
+            echo '${{ env.JOB_OUTPUT }}' |
+            jq '.JOB_BUILD'
+          )"
+          echo 'JOB_BUILD='$jobBuild >> $GITHUB_ENV
+
+          deployUrl="$(
+            echo '${{ env.JOB_OUTPUT }}' |
+            jq '.DEPLOY_URL'
+          )"
+          echo 'DEPLOY_URL='$deployUrl >> $GITHUB_ENV
+
+      - name: Adding Job Summary
+        run: |
+          echo "| Command | Status |" >> $GITHUB_STEP_SUMMARY
+          echo "| ---- | ---- |" >> $GITHUB_STEP_SUMMARY
+          if [ ${{ env.JOB_LINT }} == success ]; then
+            echo "| Lint | ✅ |" >> $GITHUB_STEP_SUMMARY
+          else
+            echo "| Lint | ❌ |" >> $GITHUB_STEP_SUMMARY
+          fi
+          if [ ${{ env.JOB_BUILD }} == success ]; then
+            echo "| Build | ✅ |" >> $GITHUB_STEP_SUMMARY
+          else
+            echo "| Build | ❌ |" >> $GITHUB_STEP_SUMMARY
+          fi
+      - name: Adding Job Summary Deploy Url
+        if: ${{ env.DEPLOY_URL }}
+        run: echo "| URL | ${{ env.DEPLOY_URL }} |" >> $GITHUB_STEP_SUMMARY

.github/workflows/ci_reusable.yaml

@@ -60,24 +60,29 @@ jobs:
           key: npm-${{ hashFiles('package-lock.json') }}
           restore-keys: npm-
       - run: npm ci
-      - name: Install Playwright
-        run: npx playwright install --with-deps chromium
       - run: npm run prettier
       - run: npm run lint
       - id: lint
         run: echo "::set-output name=pass::success"
       - run: npm run build
       - id: build
         run: echo "::set-output name=pass::success"
-      # - name: Run Tests & Generate coverage report
-      #   run: npm run coverage:report
-      # - name: Upload coverage to Codecov
-      #   if: ${{ inputs.UPDATE_COVERAGE }}
-      #   uses: codecov/codecov-action@v2
-      #   with:
-      #     token: ${{ secrets.CODECOV_TOKEN }}
-      #     fail_ci_if_error: true
-      #     verbose: true
+      - name: Run Tests & Generate coverage reports
+        run: npm run coverage:report
+      - name: Upload Unit Coverage to Codecov
+        if: ${{ inputs.UPDATE_COVERAGE }}
+        uses: codecov/codecov-action@v2
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/coverage-final.json
+          flags: unittests
+      - name: Upload E2E Coverage to Codecov
+        if: ${{ inputs.UPDATE_COVERAGE }}
+        uses: codecov/codecov-action@v2
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./test-results.json
+          flags: e2etests
       - name: Copy contents from .fleek_staging.json to .fleek.json
         if: ${{ inputs.ENV_NAME == 'staging' }}
         run: mv .fleek_staging.json .fleek.json

.gitignore

@@ -24,7 +24,10 @@ yarn-debug.log*
 yarn-error.log*
 
 .env
+.nyc_output
 test-results/
 playwright-report/
+test-results.json
 
 .vscode
+codecov

README.md

@@ -1,4 +1,7 @@
-# Boson Protocol dApp
+[![codecov](https://codecov.io/gh/bosonprotocol/interface/branch/main/graph/badge.svg?token=X52bEA3Bf6)](https://codecov.io/gh/bosonprotocol/interface)
+
+
+<a href="https://github.com/bosonprotocol/interface/actions/workflows/ci.yaml">[![Build Status](https://github.com/bosonprotocol/interface/actions/workflows/ci.yaml/badge.svg?branch=main)](https://github.com/bosonprotocol/interface/actions/workflows/ci.yaml)</a>
 
 | Env          | Network   | Endpoint                                                        |
 | ------------ | --------- | --------------------------------------------------------------- |
@@ -11,7 +14,7 @@
 The required steps to develop and test the dApp interface locally are as follows:
 
 1. Clone the repository: i.e. Run `git clone [email protected]:bosonprotocol/interface.git`
-2. Navigate into the directory & install dependencies: i.e. Run `cd interface && npm ci` 
+2. Navigate into the directory & install dependencies: i.e. Run `cd interface && npm ci`
 3. Copy the `.env.example` file to `.env` and fill out any necessary values.
 4. Start the application: i.e. Run `npm run dev`
 5. Navigate to `http://localhost:3000/` in a browser.
@@ -20,7 +23,7 @@ The required steps to develop and test the dApp interface locally are as follows
 
 ### E2E
 
-Ensure Playwright browsers need to be installed on your system: 
+Ensure Playwright browsers need to be installed on your system:
 
 ```bash
 npx playwright install

config-overrides.js

@@ -1,12 +1,15 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { override, addBabelPlugins } = require("customize-cra");
 
-module.exports = override(addBabelPlugins("babel-plugin-styled-components"));
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { alias, aliasJest, configPaths } = require("react-app-rewire-alias");
-
-const aliasMap = configPaths("./tsconfig.paths.json");
-
-module.exports = alias(aliasMap);
-module.exports.jest = aliasJest(aliasMap);
+// module.exports = override(addBabelPlugins("babel-plugin-styled-components"));
+module.exports = override(
+  process.env.USE_BABEL_PLUGIN_ISTANBUL &&
+    addBabelPlugins("babel-plugin-istanbul")
+);
+// // eslint-disable-next-line @typescript-eslint/no-var-requires
+// const { alias, aliasJest, configPaths } = require("react-app-rewire-alias");
+
+// const aliasMap = configPaths("./tsconfig.paths.json");
+
+// module.exports = alias(aliasMap);
+// module.exports.jest = aliasJest(aliasMap);

e2e-tests/Explore.spec.ts

@@ -1,9 +1,8 @@
-import { Offer } from "@lib/types/offer";
-import { expect, test } from "@playwright/test";
-
+import { Offer } from "../src/lib/types/offer";
 import { assertOffer } from "./assert/offer";
 import { assertUrlToEqualQueryParam, queryParams } from "./assert/queryParams";
 import { assertUrlHashToEqual } from "./assert/urlParams";
+import { expect, test } from "./baseFixtures";
 import { defaultMockOffers } from "./mocks/defaultMockOffers";
 import { mockSubgraph } from "./mocks/mockGetBase";
 import { sortOffersBy } from "./utils/sort";

e2e-tests/Landing.spec.ts

@@ -1,7 +1,6 @@
-import { Offer } from "@lib/types/offer";
-import { expect, test } from "@playwright/test";
-
+import { Offer } from "../src/lib/types/offer";
 import { assertOffer } from "./assert/offer";
+import { expect, test } from "./baseFixtures";
 import { defaultMockOffers } from "./mocks/defaultMockOffers";
 import { mockSubgraph } from "./mocks/mockGetBase";
 import { sortOffersBy } from "./utils/sort";

e2e-tests/OfferDetail.spec.ts

@@ -1,6 +1,7 @@
-import { Offer } from "@lib/types/offer";
-import { expect, Page, test } from "@playwright/test";
+import { Page } from "@playwright/test";
 
+import { Offer } from "../src/lib/types/offer";
+import { expect, test } from "./baseFixtures";
 import { defaultMockOffers } from "./mocks/defaultMockOffers";
 import { mockSubgraph } from "./mocks/mockGetBase";
 

e2e-tests/assert/offer.ts

@@ -1,8 +1,10 @@
 import { formatUnits } from "@ethersproject/units";
-import { Offer } from "@lib/types/offer";
-import { expect, Locator } from "@playwright/test";
+import { Locator } from "@playwright/test";
 import { BigNumber } from "ethers";
 
+import { Offer } from "../../src/lib/types/offer";
+import { expect } from "../baseFixtures";
+
 const shortenAddress = (address: string): string => {
   if (!address) {
     return address;

e2e-tests/assert/queryParams.ts

@@ -1,5 +1,6 @@
 import { Page } from "@playwright/test";
-import { expect } from "@playwright/test";
+
+import { expect } from "../baseFixtures";
 
 export const queryParams = {
   name: "name",

e2e-tests/assert/urlParams.ts

@@ -1,5 +1,6 @@
 import { Page } from "@playwright/test";
-import { expect } from "@playwright/test";
+
+import { expect } from "../baseFixtures";
 
 export async function assertUrlHashToEqual(page: Page, expectedHash: string) {
   const url = await page.url();

e2e-tests/baseFixtures.ts

@@ -0,0 +1,47 @@
+import { test as baseTest } from "@playwright/test";
+import * as crypto from "crypto";
+import * as fs from "fs";
+import * as path from "path";
+
+const istanbulCLIOutput = path.join(process.cwd(), ".nyc_output");
+
+export function generateUUID(): string {
+  return crypto.randomBytes(16).toString("hex");
+}
+
+export const test = baseTest.extend({
+  context: async ({ context }, use) => {
+    await context.addInitScript(() =>
+      window.addEventListener("beforeunload", () => {
+        return (window as any).collectIstanbulCoverage(
+          JSON.stringify((window as any).__coverage__)
+        );
+      })
+    );
+    await fs.promises.mkdir(istanbulCLIOutput, { recursive: true });
+    await context.exposeFunction(
+      "collectIstanbulCoverage",
+      (coverageJSON: string) => {
+        if (coverageJSON) {
+          fs.writeFileSync(
+            path.join(
+              istanbulCLIOutput,
+              `playwright_coverage_${generateUUID()}.json`
+            ),
+            coverageJSON
+          );
+        }
+      }
+    );
+    await use(context);
+    for (const page of context.pages()) {
+      await page.evaluate(() =>
+        (window as any).collectIstanbulCoverage(
+          JSON.stringify((window as any).__coverage__)
+        )
+      );
+    }
+  }
+});
+
+export const expect = test.expect;

e2e-tests/environment.ts

@@ -1,4 +1,4 @@
-import { CONFIG } from "@lib/config";
+import { CONFIG } from "../src/lib/config";
 
 export const graphqlEndpoint =
   "**/" + CONFIG.subgraphUrl.substring("https://".length);

e2e-tests/mocks/defaultMockOffers.ts

@@ -1,4 +1,4 @@
-import { Offer } from "@lib/types/offer";
+import { Offer } from "../../src/lib/types/offer";
 
 export const defaultMockOffers: Offer[] = [
   {

e2e-tests/mocks/mockGetOffers.ts

@@ -1,6 +1,4 @@
-import { Offer } from "@lib/types/offer";
-import { expect } from "@playwright/test";
-
+import { Offer } from "../../src/lib/types/offer";
 import { sortOffersBy } from "../utils/sort";
 import { defaultMockOffers } from "./defaultMockOffers";
 import { CustomResponse } from "./mockGetBase";

e2e-tests/mocks/mockGetSellers.ts

@@ -1,5 +1,4 @@
-import { Offer } from "@lib/types/offer";
-
+import { Offer } from "../../src/lib/types/offer";
 import { CustomResponse } from "./mockGetBase";
 
 export interface MockProps {

e2e-tests/utils/sort.ts

@@ -1,4 +1,4 @@
-import { Offer } from "@lib/types/offer";
+import { Offer } from "../../src/lib/types/offer";
 
 export function sortOffersBy(by: { property: "name"; asc: boolean }) {
   return (