fix test TS errors

package.json

@@ -104,7 +104,7 @@
     "@types/jstree": "^3.3.35",
     "@types/lodash": "4.14.104",
     "@types/lolex": "1.5.31",
-    "@types/mocha": "2.2.41",
+    "@types/mocha": "9.0.0",
     "@types/numeral": "0.0.22",
     "@types/pako": "1.0.1",
     "@types/pdfobject": "2.0.5",
@@ -341,6 +341,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jasmine-core": "^3.9.0",
     "jest": "^27.2.1",
+    "jest-canvas-mock": "^2.3.1",
     "jest-environment-jsdom": "^27.2.0",
     "json": "^9.0.6",
     "mocha": "^9.1.1",
@@ -356,9 +357,9 @@
     "yargs": "^6.6.0"
   },
   "jest": {
-    "preset": "ts-jest",
+    "preset": "ts-jest/presets/js-with-ts",
     "moduleNameMapper": {
-      "\\.(css|sass|scss)$": "identity-obj-proxy",
+      "\\.(css|sass|scss|png|svg)$": "identity-obj-proxy",
       "^containers(.*)$": "<rootDir>/src/containers$1",
       "^components(.*)$": "<rootDir>/src/components$1",
       "^config(.*)$": "<rootDir>/src/config$1",
@@ -374,7 +375,8 @@
       }
     },
     "setupFiles": [
-      "<rootDir>/src/setupTests.ts"
+      "<rootDir>/src/setupTests.ts",
+      "jest-canvas-mock"
     ],
     "testMatch": [
       "<rootDir>/src/**/*.spec.ts",

src/AppStore.ts

@@ -5,7 +5,7 @@ import {
     remoteData,
 } from 'cbioportal-frontend-commons';
 import { getLoadConfig, getServerConfig } from './config/config';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import internalClient from 'shared/api/cbioportalInternalClientInstance';
 import { sendSentryMessage } from './shared/lib/tracking';
 

src/appBootstrapper.jsx

@@ -18,7 +18,7 @@ import {
 } from './config/config';
 
 import './shared/lib/ajaxQuiet';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import $ from 'jquery';
 import * as superagent from 'superagent';
 import { buildCBioPortalPageUrl } from './shared/api/urls';

src/appShell/App/PortalHeader.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import { Link, NavLink } from 'react-router-dom';
 import { If, Then, Else } from 'react-if';
 import { AppStore } from '../../AppStore';

src/config/config.ts

@@ -4,7 +4,7 @@ import {
     ILoadConfig,
     IServerConfig,
 } from './IAppConfig';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import ServerConfigDefaults from './serverConfigDefaults';
 import memoize from 'memoize-weak-decorator';
 

src/pages/groupComparison/ClinicalDataEnrichmentsTable.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import { observer } from 'mobx-react';
 import autobind from 'autobind-decorator';
 import LazyMobXTable from 'shared/components/lazyMobXTable/LazyMobXTable';

src/pages/groupComparison/GenericAssayEnrichments.tsx

@@ -6,7 +6,7 @@ import { MakeMobxView } from '../../shared/components/MobxView';
 import Loader from '../../shared/components/loadingIndicator/LoadingIndicator';
 import ErrorMessage from '../../shared/components/ErrorMessage';
 import { MakeEnrichmentsTabUI } from './GroupComparisonUtils';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import ComparisonStore from '../../shared/lib/comparison/ComparisonStore';
 import GenericAssayEnrichmentsContainer from 'pages/resultsView/enrichments/GenericAssayEnrichmentsContainer';
 import EnrichmentsDataSetDropdown from 'pages/resultsView/enrichments/EnrichmentsDataSetDropdown';

src/pages/groupComparison/MRNAEnrichments.tsx

@@ -8,7 +8,7 @@ import LoadingIndicator from '../../shared/components/loadingIndicator/LoadingIn
 import ErrorMessage from '../../shared/components/ErrorMessage';
 import ExpressionEnrichmentContainer from '../resultsView/enrichments/ExpressionEnrichmentsContainer';
 import { MakeEnrichmentsTabUI } from './GroupComparisonUtils';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import ComparisonStore from '../../shared/lib/comparison/ComparisonStore';
 import { EnrichmentType } from 'pages/resultsView/enrichments/EnrichmentsUtil';
 

src/pages/groupComparison/MethylationEnrichments.tsx

@@ -8,7 +8,7 @@ import ExpressionEnrichmentContainer from '../resultsView/enrichments/Expression
 import Loader from '../../shared/components/loadingIndicator/LoadingIndicator';
 import ErrorMessage from '../../shared/components/ErrorMessage';
 import { MakeEnrichmentsTabUI } from './GroupComparisonUtils';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import ComparisonStore from '../../shared/lib/comparison/ComparisonStore';
 import { EnrichmentType } from 'pages/resultsView/enrichments/EnrichmentsUtil';
 

src/pages/groupComparison/ProteinEnrichments.tsx

@@ -8,7 +8,7 @@ import ExpressionEnrichmentContainer from '../resultsView/enrichments/Expression
 import Loader from '../../shared/components/loadingIndicator/LoadingIndicator';
 import ErrorMessage from '../../shared/components/ErrorMessage';
 import { MakeEnrichmentsTabUI } from './GroupComparisonUtils';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import ComparisonStore from '../../shared/lib/comparison/ComparisonStore';
 import { EnrichmentType } from 'pages/resultsView/enrichments/EnrichmentsUtil';
 

src/pages/groupComparison/UpSet.tsx

@@ -10,7 +10,7 @@ import {
     Bar,
 } from 'victory';
 import { computed, makeObservable, observable } from 'mobx';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import {
     CBIOPORTAL_VICTORY_THEME,
     axisTickLabelStyles,
@@ -34,7 +34,6 @@ import * as ReactDOM from 'react-dom';
 import { Popover } from 'react-bootstrap';
 import classnames from 'classnames';
 import styles from '../resultsView/survival/styles.module.scss';
-import Timer = NodeJS.Timer;
 import WindowStore from '../../shared/components/window/WindowStore';
 import invertIncreasingFunction from '../../shared/lib/invertIncreasingFunction';
 import GroupTickLabelComponent from './labelComponents/GroupTickLabelComponent';
@@ -86,9 +85,6 @@ export default class UpSet extends React.Component<IUpSetProps, {}> {
     }
 
     private makeMouseEvents() {
-        let disappearTimeout: Timer | null = null;
-        const disappearDelayMs = 250;
-
         return [
             {
                 target: 'data',

src/pages/patientView/PatientViewPage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import GenomicOverview from './genomicOverview/GenomicOverview';
 import {
     CancerStudy,

src/pages/patientView/SampleManager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import SampleInline from './patientHeader/SampleInline';
 import {
     ClinicalData,

src/pages/patientView/clinicalInformation/ClinicalInformationSamplesTable.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import convertSamplesData, {
     IConvertedSamplesData,
 } from './lib/convertSamplesData';

src/pages/patientView/clinicalInformation/PatientViewPageStore.ts

@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import _ from 'lodash';
 import {
     CBioPortalAPIInternal,
     ClinicalData,

src/pages/patientView/clinicalInformation/SampleGeneCache.ts

@@ -1,6 +1,6 @@
 import { observable, action, makeObservable } from 'mobx';
 import Immutable from 'seamless-immutable';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import accumulatingDebounce from '../../../shared/lib/accumulatingDebounce';
 
 export type CacheData<T> =

src/pages/patientView/copyNumberAlterations/CopyNumberTableWrapper.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { computed, makeObservable, observable } from 'mobx';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import LazyMobXTable from 'shared/components/lazyMobXTable/LazyMobXTable';
 import {
     CancerStudy,
@@ -31,8 +31,6 @@ import {
     RemoteData,
 } from 'cbioportal-utils';
 import { CancerGene } from 'oncokb-ts-api-client';
-import { getPercentage } from 'shared/lib/FormatUtils';
-import Timeout = NodeJS.Timeout;
 
 class CNATableComponent extends LazyMobXTable<DiscreteCopyNumberData[]> {}
 
@@ -76,7 +74,7 @@ export default class CopyNumberTableWrapper extends React.Component<
     {}
 > {
     @observable oncokbWidth = 22;
-    private oncokbInterval: Timeout;
+    private oncokbInterval: any;
 
     constructor(props: ICopyNumberTableWrapperProps) {
         super(props);

src/pages/patientView/copyNumberAlterations/column/AnnotationColumnFormatter.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import {
     buildCivicEntry,
     calculateOncoKbAvailableDataType,

src/pages/patientView/genomicOverview/GenomicOverview.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import { If } from 'react-if';
 import Tracks from './Tracks';
 import { ThumbnailExpandVAFPlot } from '../vafPlot/ThumbnailExpandVAFPlot';

src/pages/patientView/genomicOverview/Tracks.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import * as tracksHelper from './tracksHelper';
 import {
     ClinicalDataBySampleId,

src/pages/patientView/genomicOverview/tracksHelper.ts

@@ -1,6 +1,6 @@
 import Raphael from 'webpack-raphael';
 import $ from 'jquery';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import 'qtip2';
 import 'qtip2/dist/jquery.qtip.css';
 import { Mutation } from 'cbioportal-ts-api-client';

src/pages/patientView/mutation/column/AlleleFreqColumnFormatter.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import { DefaultTooltip } from 'cbioportal-frontend-commons';
 import 'rc-tooltip/assets/bootstrap_white.css';
 import { Mutation } from 'cbioportal-ts-api-client';

src/pages/patientView/mutation/oncoprint/MutationOncoprint.tsx

@@ -41,7 +41,6 @@ import styles from './styles.module.scss';
 import PatientViewMutationsDataStore from '../PatientViewMutationsDataStore';
 import { Mutation } from 'cbioportal-ts-api-client';
 import ReactDOM from 'react-dom';
-import Timeout = NodeJS.Timeout;
 import PatientViewUrlWrapper from '../../PatientViewUrlWrapper';
 import { getVariantAlleleFrequency } from 'shared/lib/MutationUtils';
 
@@ -116,7 +115,7 @@ export default class MutationOncoprint extends React.Component<
     @observable private horzZoomSliderState = 100;
     @observable minZoom = 0;
 
-    private minZoomUpdater: Timeout;
+    private minZoomUpdater: any;
 
     constructor(props: IMutationOncoprintProps) {
         super(props);

src/pages/patientView/pathologyReport/PathologyReport.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PathologyReportPDF } from '../clinicalInformation/PatientViewPageStore';
 import { If, Then, Else } from 'react-if';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import IFrameLoader from '../../../shared/components/iframeLoader/IFrameLoader';
 import { observer } from 'mobx-react';
 

src/pages/patientView/structuralVariant/PatientViewStructuralVariantTable.tsx

@@ -10,7 +10,7 @@ import TumorColumnFormatter from '../mutation/column/TumorColumnFormatter';
 import HeaderIconMenu from '../mutation/HeaderIconMenu';
 import GeneFilterMenu from '../mutation/GeneFilterMenu';
 import PanelColumnFormatter from 'shared/components/mutationTable/column/PanelColumnFormatter';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import { MakeMobxView } from 'shared/components/MobxView';
 import LoadingIndicator from 'shared/components/loadingIndicator/LoadingIndicator';
 import ErrorMessage from 'shared/components/ErrorMessage';
@@ -19,7 +19,6 @@ import { getServerConfig } from 'config/config';
 import { ServerConfigHelpers } from 'config/config';
 import ChromosomeColumnFormatter from 'shared/components/mutationTable/column/ChromosomeColumnFormatter';
 import { remoteData } from 'cbioportal-frontend-commons';
-import Timeout = NodeJS.Timeout;
 
 export interface IPatientViewStructuralVariantTableProps {
     store: PatientViewPageStore;
@@ -38,7 +37,7 @@ export default class PatientViewStructuralVariantTable extends React.Component<
     {}
 > {
     @observable oncokbWidth = 22;
-    private oncokbInterval: Timeout;
+    private oncokbInterval: any;
 
     constructor(props: IPatientViewStructuralVariantTableProps) {
         super(props);

src/pages/patientView/structuralVariant/column/AnnotationColumnFormatter.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import {
     civicSortValue,
     DEFAULT_ANNOTATION_DATA,

src/pages/patientView/timeline/Timeline.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import $ from 'jquery';
 import 'jquery-migrate';
 require('datatables.net');

src/pages/patientView/timeline/legacy.js

@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import * as d3 from 'd3';
 
 import clinicalTimelineExports from './timeline-lib';

src/pages/patientView/trialMatch/TrialMatchFeedback.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import { Modal } from 'react-bootstrap';
 import { ISelectedTrialFeedbackFormData } from './TrialMatchTable';
 

src/pages/patientView/trialMatch/TrialMatchTable.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { If, Then, Else } from 'react-if';
 import { observer } from 'mobx-react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import {
     IClinicalGroupMatch,
     IGenomicGroupMatch,

src/pages/patientView/trialMatch/TrialMatchTableUtils.spec.ts

@@ -1,5 +1,5 @@
 import { assert } from 'chai';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import {
     getMatchPriority,
     excludeControlArms,

src/pages/patientView/trialMatch/TrialMatchTableUtils.ts

@@ -10,7 +10,7 @@ import {
     IDrug,
     IGenomicMatchType,
 } from '../../../shared/model/MatchMiner';
-import * as _ from 'lodash';
+import _ from 'lodash';
 
 export function groupTrialMatchesById(
     trials: ITrial[],

src/pages/resultsView/ResultsViewPage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import $ from 'jquery';
 import URL from 'url';
 import { inject, observer } from 'mobx-react';

src/pages/resultsView/ResultsViewPageHelpers.tsx

@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import _ from 'lodash';
 
 import { SamplesSpecificationElement } from './ResultsViewPageStore';
 import ResultsViewURLWrapper, {

src/pages/resultsView/ResultsViewPageStore.ts

@@ -103,7 +103,7 @@ import {
 import { fetchHotspotsData } from 'shared/lib/CancerHotspotsUtils';
 import ResultsViewMutationMapperStore from './mutation/ResultsViewMutationMapperStore';
 import { getServerConfig } from 'config/config';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import { toSampleUuid } from '../../shared/lib/UuidUtils';
 import MutationDataCache from '../../shared/cache/MutationDataCache';
 import AccessorsForOqlFilter, {

src/pages/resultsView/ResultsViewPageStoreUtils.spec.ts

@@ -37,7 +37,7 @@ import {
 } from '../../shared/lib/oql/oqlfilter';
 import { observable } from 'mobx';
 import { IndicatorQueryResp } from 'oncokb-ts-api-client';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import sinon from 'sinon';
 import sessionServiceClient from 'shared/api//sessionServiceInstance';
 import client from 'shared/api/cbioportalClientInstance';
@@ -54,6 +54,7 @@ import {
     VirtualStudy,
     VirtualStudyData,
 } from 'shared/api/session-service/sessionServiceModels';
+import $ from 'jquery';
 
 describe('ResultsViewPageStoreUtils', () => {
     describe('computeCustomDriverAnnotationReport', () => {

src/pages/resultsView/bookmark/BookmarkModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import { observer } from 'mobx-react';
 import { Modal } from 'react-bootstrap';
 import { makeObservable, observable } from 'mobx';

src/pages/resultsView/cancerSummary/CancerSummaryChart.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import {
     VictoryChart,
     VictoryLegend,