Add documentation for unit tests coverage (#4253)

.github/workflows/ci.yml

@@ -156,6 +156,16 @@ jobs:
         run: npm install -g @microsoft/rush
       - name: Install dependencies
         run: rush install --max-install-attempts 3
+      # Switch flavor if necessary
+      - name: Switch flavor for build
+        id: switch-flavor
+        if: ${{ matrix.flavor != 'beta' }}
+        run: |
+          rush switch-flavor:${{ matrix.flavor }}
+          node ./common/scripts/force-build-flavor.mjs ${{ matrix.flavor }}
+      - name: Run dependency update for stable
+        if: ${{ matrix.flavor == 'stable' }}
+        run: rush update:stable
       - name: Build Packages
         run: rush build -t @azure/communication-react
       - name: Test Packages
@@ -172,7 +182,12 @@ jobs:
         # but it's still needed for the upload bundle report step when main is updated
         if: ${{ !startsWith(github.event.pull_request.base.ref, 'release/') }}
         run: npx nyc report --temp-dir temp/jest/current/merge/detailed-full/ --report-dir temp/jest/current/merge/summary/ --reporter json-summary
-
+      # Upload coverage report to review the merged report locally
+      - name: Upload detailed and summary jest coverage reports
+        uses: actions/upload-artifact@v3
+        with:
+          name: jest-coverage-report-${{ matrix.flavor }}
+          path: temp/jest/current/merge/
       # Pull requests show details of coverage changes
       - name: Get jest tests coverage of main from gist
         if: ${{ github.event_name == 'pull_request' && !startsWith(github.event.pull_request.base.ref, 'release/') }}

change/@azure-communication-react-c731162d-d104-4f6a-85b0-330efcdaa49a.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "improvement",
+  "workstream": "Documentation",
+  "comment": "Add documentation for unit tests coverage",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

docs/references/automated-tests.md

@@ -50,4 +50,30 @@ Most often, you should write a combination of unit-tests and hermetic browser te
 | components        | +fast, less-flakey                 | Validate features for components only       |
 | browser: hermetic | fast-ish, less-flakey, e2e/static | Validate features, composite snapshots      |
 | browser: live     | -slow, -flakey, +faithful         | Smoke testing, critical user journeys       |
-| storybook         | ??                                | ??                                          |
+| storybook         | ??                                | ??                                          |
+
+## Tests coverage
+
+### Get unit tests coverage locally
+`rushx test:coverage` command can be used to generate jest tests coverage reports locally for some packages. Currently the command is available for:
+- acs-ui-common
+- calling-component-binding
+- calling-stateful-client
+- chat-component-binding
+- chat-stateful-client
+- react-components
+- react-composites
+
+After running the command in a Terminal, a new `temp/jest/coverage/` folder will be created under the repository root folder and an HTML report will be generated. 
+The report will be rewritten if `rushx test:coverage` is run again (even for an another package). In order to save the report to an another folder, use `rushx test:coverage --coverageDirectory <new-path-to-save-coverage-report>`.
+
+### Download unit tests coverage report from CI workflow
+Unit tests coverage is calculated for @azure/communication-react as part of the CI workflow. The coverage results are compared to the main branch coverage and a comment with this information is posted in a PR. The reports posted in CI workflow artifacts can be used to get an HTML report for @azure/communication-react if needed. 
+
+Steps to create an HTML coverage report from the CI workflow artifacts:
+- Download coverage reports from the PR artifacts
+- Open `detailed-full/coverage-report.json`
+- Update `/home/runner/work/communication-ui-library` in `detailed-full/coverage-report.json` to a folder where communication-react project is located locally.
+- Save the file
+- Run in Terminal `npx nyc report --temp-dir '<path-to-jest-coverage-report-{flavor}-folder>/detailed-full/' --report-dir <directory-path-where-html-report-will-be-saved> --reporter lcov`. This step is needed to generate an HTTML report from the JSON one.
+- Open `index.html` file rom `lcov-report` folder for coverage preview.