Add Visual Coverage Test + Combined Code Coverage for Coveralls (#275)

Use storybook test-runner and `@storybook/addon-coverage` to get visual coverage report. The setup requires spinning up storybook before generating the coverage numbers. Now, we have three test scripts:
- test => combined test coverage
- test:unit => jest test coverage only
- test:visual => story book coverage only (note: this only collect coverage on src/components)

Updated coverage github action to also create/update comment which display code coverage percentage for unit, visual, and combined tests

the test-runner only works with jest v27 right now. As nidhi noted in her [pr](#274), storybook will be adding support for v28 shortly (storybookjs/test-runner#154).

[playwright](https://www.npmjs.com/package/playwright) library is needed in the github action for test-storybook.
<img width="600" alt="Screen Shot 2022-08-03 at 4 51 03 PM" src="https://user-images.githubusercontent.com/36055303/182709211-0189bad6-e978-4f82-9ee4-ba62be350283.png">

NOTE: The report generated from `nyc` merge command may not be super accurate after some comparison between to the unit vs visual vs merge report (ex: [github issue](istanbuljs/nyc#1302)).

J=SLAP-2269 & SLAP-2270
TEST=manual&auto

- See that running `npm run test:visual` generates lcov report in coverage/visual folder. And the report is printed out in terminal.
- See that a comment is made to the PR about the three coverage percentages.
- See that coverall percentage increase without changes to tests (increased due to combined test coverage)

.github/workflows/coverage.yml

@@ -9,7 +9,51 @@ on:
   pull_request:
 
 jobs:
-  call_code_coverage:
+  combined_coverage:
     uses: yext/slapshot-reusable-workflows/.github/workflows/coverage.yml@v1
+    with:
+      test_script: npm run test
     secrets:
       caller_github_token: ${{ secrets.GITHUB_TOKEN }}
+  individual_coverage_percentages:
+    runs-on: ubuntu-latest
+    needs: combined_coverage
+    steps:
+      - uses: actions/checkout@v3
+      - name: Download the current coverage
+        uses: actions/download-artifact@v3
+        with:
+          name: coverage
+          path: coverage/
+      - name: Get Visual Coverage Percentage
+        uses: yext/slapshot-reusable-workflows/get-coverage-percent@v1
+        with:
+          coverage-file: coverage/visual/lcov.info
+        id: parse-visual-coverage
+      - name: Get Unit Coverage Percentage
+        uses: yext/slapshot-reusable-workflows/get-coverage-percent@v1
+        with:
+          coverage-file: coverage/unit/lcov.info
+        id: parse-unit-coverage
+      - name: Get Combined Coverage Percentage
+        uses: yext/slapshot-reusable-workflows/get-coverage-percent@v1
+        with:
+          coverage-file: coverage/lcov.info
+        id: parse-combined-coverage
+      - name: Find Comment
+        uses: peter-evans/find-comment@v2
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: Current visual coverage
+      - name: Create/Update Comment
+        uses: peter-evans/create-or-update-comment@v2
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          edit-mode: replace
+          body: |
+            Current unit coverage is ${{ steps.parse-unit-coverage.outputs.coverage-percent }}%
+            Current visual coverage is ${{ steps.parse-visual-coverage.outputs.coverage-percent }}%
+            Current combined coverage is ${{ steps.parse-combined-coverage.outputs.coverage-percent }}%

.storybook/main.cjs → .storybook/main.js

@@ -7,6 +7,14 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
+    {
+      name: '@storybook/addon-coverage',
+      options: {
+        istanbul: {
+          include: ['src/components/**']
+        }
+      }
+    },
     {
       name: '@storybook/addon-postcss',
       options: {

THIRD-PARTY-NOTICES

@@ -4,7 +4,7 @@ The following NPM packages may be included in this product:
  - @babel/[email protected]
  - @babel/[email protected]
  - @babel/[email protected]
- - @babel/runtime@7.16.7
+ - @babel/runtime@7.18.9
 
 These packages each contain the following license and notice below: