feat: add tests and example jest config (#1987)

* feat: add tests and example jest config

* added tests for GraphHelper utils

* ci: adding test reporting and coverage commenting

* reorder ci steps{

* ci: enable caching of node_modules

* ci: fix missing brace

* refactor: restored test to operation

* adding upload steps to archive test results for dependent workflow

* add working branch to PR list

* removing pack step

* reordering steps to test summary output

* pivot trigger to pull_request_target

* removing archival steps

* refactoring to publish comments from dependent workflow

* simplify run condition

* pivot reporting workflow to trigger on completed workflows

* simplify run condition

* adding a name to the pr reporting workflow

* removing path from artifact download

* trigger workflow

* simplify conditionals for archiving

* adding lerna install for consistency with other pipelines

* Expanding comments

* comment

* adding a test for the EventDispatcher and removing a duplicate delay function

* added two simple component tests and example of mocking http requests

* fixing branch filter for reporting

* setting up exclusions to omit some files from test coverage

* correcting mgt-person tests after update from main

* refactor: move MockProvider and MockGraph back to mgt-element for testing purposes

Author: gavinbarron

.github/workflows/pr-reporting.yml

@@ -0,0 +1,35 @@
+name: PR Quality Reporting
+
+on:
+  workflow_run:
+    workflows: [Build pr]
+    types:
+      - completed
+    branches: [main, release/**, next/**]
+
+jobs:
+  pr_report:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Test Report
+        uses: dorny/test-reporter@v1
+        if: always() # run this step even if previous step failed
+        with:
+          artifact: test-results
+          name: JEST Tests # Name of the check run which will be created
+          path: junit.xml # Path to test results
+          reporter: jest-junit # Format of test results
+
+      - name: Code Coverage Summary Report
+        uses: irongut/[email protected]
+        with:
+          filename: coverage/cobertura-coverage.xml
+          badge: true
+          format: 'markdown'
+          output: 'both'
+      - name: Add Coverage PR Comment
+        uses: marocchino/sticky-pull-request-comment@v2
+        if: github.event_name == 'pull_request'
+        with:
+          recreate: true
+          path: code-coverage-results.md

.github/workflows/pr.yml

@@ -1,11 +1,13 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+# Tests are executed and coverage reports are emitted as to the action summary
+# A dependent workflow which uses workflow_run as a trigger reads the archived outputs and emits comments to the PR triggering this build
 
 name: Build pr
 
 on:
   pull_request:
-    branches: [main, release/**, next/**]
+    branches: [main, release/**, next/**, feat/add-jest-tests]
 
 jobs:
   build:
@@ -21,21 +23,42 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm install -g yarn
-      - run: yarn
+      - name: Cache Node Modules
+        id: cache-node-modules
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
+      - run: npm install -g yarn lerna
+      - name: Install node_modules
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn
       - run: node scripts/setVersion.js --next
       - run: yarn run tsc -v
       - run: yarn build
-      - run: yarn run pack
-
-      - name: Upload a Build Artifact - package
-        uses: actions/upload-artifact@v2
+      - run: yarn test
+      - name: Archive test results
+        uses: actions/upload-artifact@v2 # upload test results
+        if: always() # run this step even if previous step failed
         with:
-          name: npm-packages
-          path: artifacts/*
+          name: test-results
+          path: testResults/junit.xml
+      - name: Archive coverage report
+        uses: actions/upload-artifact@v2 # upload coverage report
+        if: always() # run this step even if previous step failed
+        with:
+          name: coverage
+          path: coverage/cobertura-coverage.xml
 
-      - name: Upload a Build Artifact - bundle
-        uses: actions/upload-artifact@v2
+      - name: Code Coverage Summary Report
+        uses: irongut/[email protected]
         with:
-          name: bundle
-          path: packages/mgt/dist/bundle
+          filename: coverage/cobertura-coverage.xml
+          badge: true
+          format: 'markdown'
+          output: 'both'
+
+      - name: Write to Job Summary
+        run: cat code-coverage-results.md >> $GITHUB_STEP_SUMMARY

.gitignore

@@ -7,6 +7,8 @@ assets/mgt.storybook.js
 *.sw[mnpcod]
 *.log
 *.lock
+# explicitly allow yarn lock to facilitate pipeline caching of node_modules
+!yarn.lock
 *.tmp
 *.tmp.*
 log.txt
@@ -32,7 +34,7 @@ UserInterfaceState.xcuserstate
 # testing
 coverage/
 *.tgz
-testResults/junit.xml
+testResults/
 
 *-css.ts
 *.tsbuildinfo

.vscode/launch.json

@@ -19,6 +19,15 @@
       "url": "http://localhost:3000",
       "webRoot": "${workspaceFolder}",
       "version": "dev"
+    },
+    {
+      "name": "Debug Jest Tests",
+      "type": "node",
+      "request": "launch",
+      "runtimeArgs": ["--inspect-brk", "${workspaceRoot}/node_modules/jest/bin/jest.js", "--runInBand"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "port": 9229
     }
   ]
 }

jest-setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

jest.config.js

@@ -0,0 +1,45 @@
+// These files are know to be ESM and should be transformed by ts-jest
+const esModules = [
+  'msal',
+  '@open-wc',
+  '@lit',
+  'lit',
+  'testing-library__dom',
+  '@microsoft/microsoft-graph-client',
+  '@microsoft/mgt-element',
+  '@microsoft/mgt-components',
+  '@microsoft/mgt-msal-provider'
+].join('|');
+
+const config = {
+  collectCoverage: true,
+  coverageReporters: ['cobertura', 'html'],
+  coveragePathIgnorePatterns: ['/node_modules/', '/dist/', '-css.ts', '/__test_data/'],
+  reporters: [
+    'default',
+    [
+      'jest-junit',
+      {
+        outputDirectory: 'testResults',
+        outputName: 'junit.xml'
+      }
+    ]
+  ],
+  transformIgnorePatterns: [`<rootDir>/node_modules/(?!${esModules})`],
+  testEnvironment: 'jsdom',
+  testMatch: ['**/*.tests.{ts,tsx}'],
+  setupFiles: ['whatwg-fetch'], // polyfill fetch for Graph Client,
+  setupFilesAfterEnv: ['./jest-setup.js'],
+  transform: {
+    // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
+    // '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
+    '^.+\\.[tj]sx?$': [
+      'ts-jest',
+      {
+        useESM: false, // transpile ESM to CJS for Jest
+        tsconfig: './tsconfig.test.json'
+      }
+    ]
+  }
+};
+module.exports = config;

package.json

@@ -58,6 +58,7 @@
     "storybook:build": "npm run storybook:bundle && npm run storybook:dev && build-storybook -s assets && cpx .storybook/CNAME storybook-static",
     "storybook:deploy": "npm run storybook:build && storybook-to-ghpages -e storybook-static",
     "setLicense": "gulp setLicense",
+    "test": "jest",
     "version:tsc": "tsc -v"
   },
   "storybook-deployer": {
@@ -74,6 +75,7 @@
     "@babel/preset-react": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
     "@octokit/rest": "^18.5.3",
+    "@open-wc/testing-helpers": "^2.1.4",
     "@storybook/addon-a11y": "^6.4.4",
     "@storybook/addon-actions": "^6.4.4",
     "@storybook/addon-docs": "^6.4.4",
@@ -83,7 +85,10 @@
     "@storybook/cli": "^6.4.4",
     "@storybook/storybook-deployer": "^2.8.10",
     "@storybook/web-components": "^6.4.4",
-    "@types/jest": "^24.9.1",
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.4",
     "@types/node": "12.12.22",
     "@types/react": "^17.0.00",
     "@types/react-dom": "^17.0.0",
@@ -102,8 +107,10 @@
     "gulp-sass": "^5.1.0",
     "gulp-util": "^3.0.8",
     "husky": "^4.3.0",
-    "jest": "^24.5.0",
-    "jest-junit": "^6.3.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-fetch-mock": "^3.0.3",
+    "jest-junit": "^15.0.0",
     "lerna": "^3.22.1",
     "lit": "^2.3.1",
     "monaco-editor": "^0.19.3",
@@ -126,13 +133,14 @@
     "sass": "^1.29.0",
     "shx": "^0.3.3",
     "storybook-addon-web-components-knobs": "^0.3.20",
-    "ts-jest": "^26.5.5",
+    "testing-library__dom": "^7.29.4-beta.1",
+    "ts-jest": "^29.0.3",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "tslint-microsoft-contrib": "^6.2.0",
     "typescript": "^4.8.2",
     "web-component-analyzer": "^1.1.6",
-    "whatwg-fetch": "^3.5.0"
+    "whatwg-fetch": "^3.6.2"
   },
   "husky": {
     "hooks": {

packages/mgt-components/src/components/PersonCardInteraction.ts

@@ -5,6 +5,8 @@
  * -------------------------------------------------------------------------------------------
  */
 
+/* istanbul ignore file */
+
 /**
  * Defines how a person card is shown when a user interacts with
  * a person component

packages/mgt-components/src/components/mgt-person/__test_data/mock-responses.ts

@@ -0,0 +1,65 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { screen } from 'testing-library__dom';
+import { fixture } from '@open-wc/testing-helpers';
+import { enableFetchMocks } from 'jest-fetch-mock';
+import fetchMock from 'jest-fetch-mock';
+import { MockProvider, Providers } from '@microsoft/mgt-element';
+import { userPhotoBatchResponse } from './__test_data/mock-responses';
+import './mgt-person';
+enableFetchMocks();
+
+let person: Element;
+describe('mgt-person - tests', () => {
+  beforeEach(async () => {
+    fetchMock.resetMocks();
+    fetchMock
+      // Response for the setup of the MockGraph to call to the proxy service
+      .once(() =>
+        Promise.resolve({
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          status: 200,
+          body: 'https://fake-proxy.microsoft.com/'
+        })
+      )
+      // response to the $batch request to load the user photo and user data when there is nothing in the cache
+      // note that this used mockOnceIf matching the fake url supplied in the first mock.
+      .mockOnceIf(/https:\/\/fake-proxy.microsoft.com\/*$/, () =>
+        Promise.resolve({
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          status: 200,
+          body: JSON.stringify(userPhotoBatchResponse)
+        })
+      );
+  });
+
+  it('should render', async () => {
+    Providers.globalProvider = new MockProvider(true);
+    person = await fixture('<mgt-person person-query="me" view="twoLines"></mgt-person>');
+    const img = await screen.findAllByAltText('Photo for Megan Bowen');
+    expect(img).not.toBeNull();
+  });
+
+  it('should pop up a flyout on click', async () => {
+    Providers.globalProvider = new MockProvider(true);
+    person = await fixture('<mgt-person person-query="me" view="twoLines" person-card="click"></mgt-person>');
+    const img = await screen.findAllByAltText('Photo for Megan Bowen');
+    expect(img).not.toBeNull();
+    expect(img.length).toBe(1);
+    // test that there is no flyout
+    expect(screen.queryByTestId('flyout-slot')).toBeNull();
+
+    img[0].click();
+
+    expect(screen.queryByTestId('flyout-slot')).toBeDefined();
+  });
+});