[RW-5959][risk=no] Upgrade jest to latest version (#4733)

* upgrade jest to latest version * remove node from types in tsconfig.jest.json * fix setupFilesAfterEnv * update more * fix error TS2304: Cannot find name 'setImmediate' * fix test error * wip * revert profile-page.spec * update package.json * remove .spec.tsx in package.json * fix profile-page bug * remove whitespace in import * lint error * rebase * fix test script in package.json * fix tests * revert lib es2016 * move ts-jest to devDependencies
all-of-us · Apr 1, 2021 · e605ad1 · e605ad1
1 parent a530989
commit e605ad1
Show file tree

Hide file tree

Showing 16 changed files with 2,117 additions and 1,061 deletions.
diff --git a/e2e/app/page/notebook-page.ts b/e2e/app/page/notebook-page.ts
@@ -23,10 +23,10 @@ enum CssSelector {
 }
 
 enum Xpath {
-  fileMenuDropdown = '//a[text()="File"]',
-  downloadMenuDropdown = '//a[text()="Download as"]',
-  downloadIpynbButton = '//*[@id="download_script"]/a',
-  downloadMarkdownButton = '//*[@id="download_markdown"]/a'
+  fileMenuDropdown = './/a[text()="File"]',
+  downloadMenuDropdown = './/a[text()="Download as"]',
+  downloadIpynbButton = './/*[@id="download_script"]/a',
+  downloadMarkdownButton = './/*[@id="download_markdown"]/a'
 }
 
 export enum Mode {
@@ -94,9 +94,11 @@ export default class NotebookPage extends AuthenticatedPage {
   private async downloadAs(formatXpath: string): Promise<NotebookDownloadModal> {
     const frame = await this.getIFrame();
 
-    await (await frame.waitForXPath(Xpath.fileMenuDropdown, { visible: true })).click();
-    await (await frame.waitForXPath(Xpath.downloadMenuDropdown, { visible: true })).hover();
-    await (await frame.waitForXPath(formatXpath, { visible: true })).click();
+    await frame.waitForXPath(Xpath.fileMenuDropdown, { visible: true }).then((element) => element.click());
+    await frame.waitForXPath(Xpath.downloadMenuDropdown, { visible: true }).then((element) => element.hover());
+    const menuOption = await frame.waitForXPath(formatXpath, { visible: true });
+    await menuOption.hover();
+    await menuOption.click();
 
     const modal = new NotebookDownloadModal(this.page, frame);
     return await modal.waitForLoad();

diff --git a/e2e/jest.test-setup.ts b/e2e/jest.test-setup.ts
@@ -203,7 +203,9 @@ beforeEach(async () => {
     const title = await getPageTitle();
     try {
       const args = await Promise.all(message.args().map((a) => describeJsHandle(a)));
-      console[message.type() === 'warning' ? 'warn' : message.type()](`Page console: "${title}"\n`, ...args);
+      const msgType = message.type() === 'warning' ? 'warn' : message.type();
+      console[msgType](`Page console: "${title}"`);
+      console[msgType](...args);
       console.log('');
     } catch (err) {
       console.error(`❗ "${title}"\nException occurred when getting page console message.\n${err}\n${message.text()}`);

diff --git a/ui/package.json b/ui/package.json
@@ -8,7 +8,7 @@
     "dev-up": "yarn && yarn run codegen && yarn start",
     "build": "ng build",
     "test": "ng test --source-map=true",
-    "test-react": "jest",
+    "test-react": "yarn jest",
     "lint": "yarn eslint src --ext .ts,.tsx && ng lint --type-check=true",
     "e2e": "ng e2e",
     "codegen": "yarn run codegen-clean && yarn run codegen-swagger && yarn run codegen-swagger && yarn run notebooks-codegen-swagger",
@@ -18,31 +18,35 @@
     "coverage": "ng test --source-map=false --watch=false --code-coverage"
   },
   "jest": {
+    "preset": "ts-jest",
     "clearMocks": true,
     "setupFiles": [
       "./test-shim.js",
       "./test-setup.js"
     ],
-    "setupTestFrameworkScriptFile": "./test-setup-script.js",
+    "setupFilesAfterEnv": [
+      "./test-setup-script.js"
+    ],
     "moduleFileExtensions": [
       "ts",
       "tsx",
       "js",
-      "spec.ts"
+      "json",
+      "node"
     ],
     "moduleDirectories": [
       "node_modules",
       "src"
     ],
     "transform": {
-      "^.+\\.(ts|tsx)$": "ts-jest"
+      "^.+\\.tsx?$": "ts-jest"
     },
     "testMatch": [
       "**/*.spec.tsx"
     ],
     "globals": {
       "ts-jest": {
-        "tsConfig": "src/tsconfig.jest.json"
+        "tsconfig": "<rootDir>/src/tsconfig.jest.json"
       }
     }
   },
@@ -117,7 +121,6 @@
     "serialize-javascript": "^3.1.0",
     "stackdriver-errors-js": "^0.4.0",
     "stacktrace-js": "^2.0.0",
-    "ts-jest": "^25.3.0",
     "ts-key-enum": "^3.0.0",
     "tslib": "^1.9.0",
     "validate.js": "^0.12.0",
@@ -136,16 +139,16 @@
     "@types/google.analytics": "0.0.39",
     "@types/jasmine": "^3.3.5",
     "@types/jasminewd2": "^2.0.3",
-    "@types/jest": "^23.3.11",
+    "@types/jest": "^26.0.21",
     "@types/node": "^10.12.11",
     "@types/react-router-dom": "^5.1.5",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
     "codelyzer": "^4.1.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^6.8.0",
-    "eslint-plugin-jest": "^23.20.0",
+    "eslint-plugin-jest": "^24.3.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prefer-arrow": "^1.2.0",
     "eslint-plugin-prettier": "^3.1.3",
@@ -154,7 +157,7 @@
     "eslint-plugin-sort-keys-fix": "^1.1.0",
     "jasmine-core": "~3.3.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "jest": "^23.6.0",
+    "jest": "^26.6.3",
     "karma": "^5.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~1.0.1",
@@ -167,6 +170,7 @@
     "prettier": "^2.0.4",
     "react-test-renderer": "^16.6.3",
     "set-value": "^2.0.1",
+    "ts-jest": "^26.5.4",
     "ts-node": "~3.0.4",
     "tslint": "^5.9.1",
     "tslint-eslint-rules": "^5.4.0",

diff --git a/ui/src/app/cohort-search/cohort-search/cohort-search.component.tsx b/ui/src/app/cohort-search/cohort-search/cohort-search.component.tsx
@@ -248,7 +248,7 @@ export const CohortSearch = withCurrentCohortSearchContext()(class extends React
       clearTimeout(this.growlTimer);
     }
     // This is to set style display: 'none' on the growl so it doesn't block the nav icons in the sidebar
-    this.growlTimer = setTimeout(() => this.setState({growlVisible: false}), 2500);
+    this.growlTimer = global.setTimeout(() => this.setState({growlVisible: false}), 2500);
     this.setState({growlVisible: true});
   }
 

diff --git a/ui/src/app/cohort-search/search-group-item/search-group-item.component.tsx b/ui/src/app/cohort-search/search-group-item/search-group-item.component.tsx
@@ -216,7 +216,7 @@ export const SearchGroupItem = withCurrentWorkspace()(
     remove() {
       triggerEvent('Delete', 'Click', 'Snowman - Delete Criteria - Cohort Builder');
       this.updateSearchRequest('status', 'pending', true);
-      const timeout = setTimeout(() => {
+      const timeout: Timeout = global.setTimeout(() => {
         this.updateSearchRequest(null, null, false, true);
       }, 10000);
       this.setState({timeout});

diff --git a/ui/src/app/cohort-search/search-group/search-group.component.tsx b/ui/src/app/cohort-search/search-group/search-group.component.tsx
@@ -331,7 +331,7 @@ export const SearchGroup = withCurrentWorkspace()(
     remove() {
       triggerEvent('Delete', 'Click', 'Snowman - Delete Group - Cohort Builder');
       this.hide('pending');
-      this.deleteTimeout = setTimeout(() => {
+      this.deleteTimeout = global.setTimeout(() => {
         this.removeGroup();
       }, 10000);
     }

diff --git a/ui/src/app/pages/analysis/notebook-redirect.tsx b/ui/src/app/pages/analysis/notebook-redirect.tsx
@@ -355,7 +355,7 @@ export const NotebookRedirect = fp.flow(
       this.incrementProgress(Progress.Redirecting);
 
       // give it a second to "redirect"
-      this.redirectTimer = setTimeout(() => this.incrementProgress(Progress.Loaded), redirectMillis);
+      this.redirectTimer = global.setTimeout(() => this.incrementProgress(Progress.Loaded), redirectMillis);
     }
 
     private async getNotebookPathAndLocalize(runtime: Runtime) {

diff --git a/ui/src/app/pages/data/cohort-review/sidebar-content.component.tsx b/ui/src/app/pages/data/cohort-review/sidebar-content.component.tsx
@@ -163,7 +163,7 @@ const AnnotationItem = fp.flow(
       console.error(error);
       this.setState({saving: false, error: true});
     } finally {
-      const timeout = setTimeout(() => this.setState({error: false, success: false}), 5000);
+      const timeout: Timeout = global.setTimeout(() => this.setState({error: false, success: false}), 5000);
       this.setState({savingValue: undefined, timeout});
     }
   }

diff --git a/ui/src/app/pages/data/criteria-search.tsx b/ui/src/app/pages/data/criteria-search.tsx
@@ -272,7 +272,7 @@ export const CriteriaSearch = fp.flow(withUrlParams(), withCurrentWorkspace())(c
       clearTimeout(this.growlTimer);
     }
     // This is to set style display: 'none' on the growl so it doesn't block the nav icons in the sidebar
-    this.growlTimer = setTimeout(() => this.setState({growlVisible: false}), 2500);
+    this.growlTimer = global.setTimeout(() => this.setState({growlVisible: false}), 2500);
     this.setState({growlVisible: true});
   }
 

diff --git a/ui/src/app/pages/login/account-creation/account-creation.tsx b/ui/src/app/pages/login/account-creation/account-creation.tsx
@@ -156,7 +156,7 @@ export class AccountCreation extends React.Component<AccountCreationProps, Accou
     // TODO: This should use a debounce, rather than manual setTimeout()s.
     clearTimeout(this.usernameCheckTimeout);
     this.setState({usernameCheckInProgress: true, usernameConflictError: false});
-    this.usernameCheckTimeout = setTimeout(() => {
+    this.usernameCheckTimeout = global.setTimeout(() => {
       profileApi().isUsernameTaken(username)
           .then((body) => {
             this.setState({usernameCheckInProgress: false, usernameConflictError: body.isTaken});

diff --git a/ui/src/app/pages/profile/profile-page.tsx b/ui/src/app/pages/profile/profile-page.tsx
@@ -433,7 +433,10 @@ export const ProfilePage = fp.flow(
 
       const makeProfileInput = ({title, valueKey, isLong = false, ...props}) => {
         let errorText = profile && errors && errors[valueKey];
-        if (valueKey && Array.isArray(valueKey) && valueKey.length > 1) {
+        if (valueKey && !Array.isArray(valueKey)) {
+          valueKey = [valueKey];
+        }
+        if (valueKey && valueKey.length > 1) {
           errorText = profile && errors && errors[valueKey[1]];
         }
         const inputProps = {

diff --git a/ui/src/app/utils/leo-runtime-initializer.spec.tsx b/ui/src/app/utils/leo-runtime-initializer.spec.tsx
@@ -7,7 +7,7 @@ import {Runtime} from 'generated/fetch';
 import {RuntimeStatus} from 'generated/fetch';
 import {RuntimeApi} from 'generated/fetch/api';
 import SpyInstance = jest.SpyInstance;
-import expect = jest.Expect;
+import {expect} from '@jest/globals';
 import {RuntimesApi as LeoRuntimesApi} from 'notebooks-generated/fetch';
 import {defaultRuntime, RuntimeApiStub} from 'testing/stubs/runtime-api-stub';
 import {LeoRuntimesApiStub} from 'testing/stubs/leo-runtimes-api-stub';

diff --git a/ui/src/polyfills.ts b/ui/src/polyfills.ts
@@ -70,3 +70,11 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  * Need to import at least one locale-data with intl.
  */
 // import 'intl/locale-data/jsonp/en';
+
+/**
+ * https://github.com/angular/angular-cli/issues/9827#issuecomment-386154063
+ * Add global to window, assigning the value of window itself.
+ * Resolving ERROR: ReferenceError: global is not defined.
+ *
+ */
+(window as any).global = window;
diff --git a/ui/src/tsconfig.jest.json b/ui/src/tsconfig.jest.json
@@ -7,12 +7,10 @@
     // No outDir needs to be specified here, as test runs will not produce output files anyway.
     "baseUrl": "./",
     "module": "commonjs",
-    "target": "es5",
     "types": [
       "jest",
       "node"
-    ],
-    "jsx": "react"
+    ]
   },
   "files": [
     "polyfills.ts"

diff --git a/ui/tsconfig.json b/ui/tsconfig.json
@@ -11,16 +11,13 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
     "lib": [
       "es2016",
       "es2018.promise",
       "dom"
     ],
     "module": "es2015",
-    "baseUrl": "./",
+    "baseUrl": "./src",
     "jsx": "react",
     "resolveJsonModule": true
   }