Task: Improve test coverage (#1434)

* add test coverage for root app * add react testing library to dev dependencies * added tests * coverage currently 53% * test coverage at 70% * fix linting errors * update coverage * clean up tests * fix augloop file path * fix linting error * fix linting error * restore workflow * remove unnecessary mocks * fix code smells * fix failing tests * merge with dev * fix merge conflicts
microsoftgraph · Feb 18, 2022 · 8e1bb8a · 8e1bb8a
1 parent 44f0b1b
commit 8e1bb8a
Show file tree

Hide file tree

Showing 95 changed files with 5,022 additions and 66 deletions.
diff --git a/config/CSSStub.ts b/config/CSSStub.ts
@@ -0,0 +1 @@
+module.exports = null;
diff --git a/jest.config.js b/jest.config.js
@@ -1,9 +1,14 @@
+const esModules = ['@ms-ofb', 'ngx-bootstrap', 'lodash-es', '@fluentui'].join('|');
 module.exports = {
   collectCoverageFrom: [
     'src/**/*.{js,jsx,ts,tsx}',
     '!**/node_modules/**',
     '!build/**',
-    '!src/**/*.d.ts'
+    '!src/**/*.d.ts',
+    '!src/index.tsx',
+    '!src/tests/accessibility/**',
+    '!src/app/middleware/telemetryMiddleware.ts',
+    '!src/telemetry/telemetry.ts'
   ],
   resolver: 'jest-pnp-resolver',
   setupFiles: ['react-app-polyfill/jsdom'],
@@ -17,15 +22,17 @@ module.exports = {
   transform: {
     '^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
     '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)':'ts-jest'
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)':'ts-jest',
+    [`(${esModules}).+\\.js$`]: 'ts-jest'
   },
   transformIgnorePatterns: [
-    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
-    '^.+\\.module\\.(css|sass|scss)$'
+    '^.+\\.module\\.(css|sass|scss)$',
+    '/node_modules/(?!@fluentui)'
   ],
   moduleNameMapper: {
     '^react-native$': 'react-native-web',
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy'
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+    '^.+\\.(css|less|scss)$': '<rootDir>/config/CSSStub.ts'
   },
   moduleFileExtensions: [
     'web.js',
@@ -43,5 +50,6 @@ module.exports = {
     'jest-watch-typeahead/filename',
     'jest-watch-typeahead/testname'
   ],
-  testResultsProcessor: 'jest-sonar-reporter'
+  testResultsProcessor: 'jest-sonar-reporter',
+  testPathIgnorePatterns: ['<rootDir>/src/tests/accessibility/']
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -101,11 +101,13 @@
     ],
     "devDependencies": {
         "@testing-library/react": "12.1.2",
+        "@testing-library/user-event": "13.5.0",
         "@types/chromedriver": "2.38.0",
         "@types/enzyme": "3.10.10",
         "@types/enzyme-adapter-react-16": "1.0.5",
         "@types/isomorphic-fetch": "0.0.35",
         "@types/jest": "24.0.6",
+        "@types/jsdom": "^16.2.14",
         "@types/jwt-decode": "2.2.1",
         "@types/node": "11.9.4",
         "@types/react": "17.0.35",

diff --git a/src/app/services/actions/ocps-action-creators.ts b/src/app/services/actions/ocps-action-creators.ts
@@ -87,9 +87,9 @@ export function getPolicy(response: any): IPolicyValues {
   return values;
 }
 
-function getPolicyUrl():string {
+export function getPolicyUrl(): string {
   const { NODE_ENV } = process.env;
-  if(NODE_ENV === 'development'){
+  if (NODE_ENV === 'development') {
     return 'https://sip.clients.config.office.net/user/v1.0/web/policies';
   } else {
     return 'https://clients.config.office.net/user/v1.0/web/policies';

diff --git a/src/app/services/actions/permissions-action-creator.ts b/src/app/services/actions/permissions-action-creator.ts
@@ -100,7 +100,7 @@ export function fetchScopes(): Function {
   };
 }
 
-function getPermissionsScopeType(profile: IUser | null | undefined) {
+export function getPermissionsScopeType(profile: IUser | null | undefined) {
   if (profile?.profileType === ACCOUNT_TYPE.MSA) {
     return PERMS_SCOPE.PERSONAL;
   }

diff --git a/src/app/services/actions/profile-action-creators.ts b/src/app/services/actions/profile-action-creators.ts
@@ -68,7 +68,7 @@ export function getProfileInfo(): Function {
   };
 }
 
-async function getProfileInformation(): Promise<IUser> {
+export async function getProfileInformation(): Promise<IUser> {
   const profile: IUser = {
     id: '',
     displayName: '',
@@ -89,7 +89,7 @@ async function getProfileInformation(): Promise<IUser> {
   }
 }
 
-async function getBetaProfile(): Promise<IBetaProfile> {
+export async function getBetaProfile(): Promise<IBetaProfile> {
   try {
     query.sampleUrl = BETA_USER_INFO_URL;
     const { userInfo } = await getProfileResponse();
@@ -101,7 +101,7 @@ async function getBetaProfile(): Promise<IBetaProfile> {
   }
 }
 
-function getAgeGroup(userInfo: any): AgeGroup {
+export function getAgeGroup(userInfo: any): AgeGroup {
   const profileType = getProfileType(userInfo);
   if (profileType === ACCOUNT_TYPE.MSA) {
     const ageGroup = userInfo?.account?.[0]?.ageGroup;
@@ -113,15 +113,15 @@ function getAgeGroup(userInfo: any): AgeGroup {
     return 0;
   }
 }
-function getProfileType(userInfo: any): ACCOUNT_TYPE {
+export function getProfileType(userInfo: any): ACCOUNT_TYPE {
   const profileType: ACCOUNT_TYPE = userInfo?.account?.[0]?.source?.type?.[0];
   if (profileType === undefined) {
     return ACCOUNT_TYPE.UNDEFINED;
   }
   return profileType;
 }
 
-async function getProfileImage(): Promise<string> {
+export async function getProfileImage(): Promise<string> {
   let profileImageUrl = '';
   try {
     query.sampleUrl = USER_PICTURE_URL;
@@ -137,7 +137,7 @@ async function getProfileImage(): Promise<string> {
   return profileImageUrl;
 }
 
-async function getProfileResponse(): Promise<IProfileResponse> {
+export async function getProfileResponse(): Promise<IProfileResponse> {
   const scopes = DEFAULT_USER_SCOPES.split(' ');
   const respHeaders: any = {};
 

diff --git a/src/app/services/actions/snippet-action-creator.ts b/src/app/services/actions/snippet-action-creator.ts
@@ -56,13 +56,12 @@ export function getSnippet(language: string): Function {
 
       const requestBody =
         sampleQuery.sampleBody &&
-        Object.keys(sampleQuery.sampleBody).length !== 0 && // check if empty object
-        sampleQuery.sampleBody.trim() !== ''
+          Object.keys(sampleQuery.sampleBody).length !== 0 && // check if empty object
+          sampleQuery.sampleBody.trim() !== ''
           ? JSON.stringify(sampleQuery.sampleBody)
           : '';
 
-      const body = `${sampleQuery.selectedVerb} /${queryVersion}/${
-        requestUrl + search
+      const body = `${sampleQuery.selectedVerb} /${queryVersion}/${requestUrl + search
       } HTTP/1.1\r\nHost: graph.microsoft.com\r\nContent-Type: application/json\r\n\r\n${requestBody}`;
       const options: IRequestOptions = { method, headers, body };
       const obj: any = {};

diff --git a/src/app/services/reducers/query-runner-reducers.ts b/src/app/services/reducers/query-runner-reducers.ts
@@ -20,6 +20,7 @@ export function graphResponse(
     case QUERY_GRAPH_SUCCESS:
       return action.response;
     case VIEW_HISTORY_ITEM_SUCCESS:
+      console.log('Here is the item', action.response);
       return action.response;
     case QUERY_GRAPH_RUNNING:
       return initialState;

diff --git a/src/app/views/query-runner/query-input/QueryInput.tsx b/src/app/views/query-runner/query-input/QueryInput.tsx
@@ -1,5 +1,4 @@
-import { IDropdownOption } from '@fluentui/react';
-import { Dropdown } from '@fluentui/react';
+import { IDropdownOption, Dropdown } from '@fluentui/react';
 import React from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';

diff --git a/src/app/views/query-runner/request/request.scss b/src/app/views/query-runner/request/request.scss
@@ -53,10 +53,4 @@
 
 .query-request {
     overflow: hidden;
-
-     @media screen and (min-width: 1320px){
-        .pivot-request *[data-content='Got feedback? xx'] {
-            float: right !important;
-        }
-    }
 }
diff --git a/src/app/views/sidebar/Sidebar.tsx b/src/app/views/sidebar/Sidebar.tsx
@@ -5,7 +5,6 @@ import { telemetry } from '../../../telemetry';
 import { translateMessage } from '../../utils/translate-messages';
 import History from './history/History';
 import SampleQueries from './sample-queries/SampleQueries';
-
 export const Sidebar = () => {
   return (
     <div>