Package Updates

elisa/eslint.config.mjs

@@ -0,0 +1,2 @@
+import config from '@labkey/eslint-config';
+export default config;

elisa/jest.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+    globals: {
+        LABKEY: {
+            contextPath: ''
+        }
+    },
+    moduleFileExtensions: [
+        'tsx',
+        'ts',
+        'js'
+    ],
+    preset: 'ts-jest',
+    setupFilesAfterEnv: [
+        '<rootDir>/test/js/setup.ts'
+    ],
+    testEnvironment: 'jsdom',
+    testMatch: null,
+    testRegex: '(\\.(test))\\.(ts|tsx)$',
+    testResultsProcessor: 'jest-teamcity-reporter',
+    transform: {
+        '^.+\\.tsx?$': [
+            'ts-jest',
+            {
+                tsconfig: 'node_modules/@labkey/build/webpack/tsconfig.test.json',
+            }
+        ]
+    }
+};

elisa/package.json

@@ -12,49 +12,18 @@
     "clean": "rimraf resources/web/elisa/gen && rimraf resources/web/gen",
     "test": "cross-env NODE_ENV=test jest --silent"
   },
-  "jest": {
-    "globals": {
-      "LABKEY": {}
-    },
-    "moduleFileExtensions": [
-      "tsx",
-      "ts",
-      "js"
-    ],
-    "preset": "ts-jest",
-    "setupFilesAfterEnv": [
-      "<rootDir>/test/js/setup.ts"
-    ],
-    "testEnvironment": "jsdom",
-    "testMatch": null,
-    "testRegex": "(\\.(test|spec))\\.(ts|tsx)$",
-    "testResultsProcessor": "jest-teamcity-reporter",
-    "transform": {
-      "^.+\\.tsx?$": [
-        "ts-jest",
-        {
-          "isolatedModules": true,
-          "tsconfig": "node_modules/@labkey/build/webpack/tsconfig.json"
-        }
-      ]
-    }
-  },
   "dependencies": {
-    "@labkey/components": "4.2.0"
+    "@labkey/components": "6.56.0"
   },
   "devDependencies": {
-    "@labkey/build": "7.4.0",
-    "@labkey/eslint-config-react": "0.0.15",
-    "@types/enzyme": "3.10.18",
-    "@types/jest": "29.5.12",
-    "@types/react": "16.14.60",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.8",
-    "enzyme-to-json": "3.6.2",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
+    "@labkey/build": "8.6.0",
+    "@labkey/eslint-config": "1.0.1",
+    "@types/jest": "30.0.0",
+    "@types/react": "18.3.23",
+    "@types/react-dom": "18.3.7",
+    "jest": "30.0.4",
+    "jest-environment-jsdom": "30.0.4",
     "jest-teamcity-reporter": "0.9.0",
-    "react-test-renderer": "16.14.0",
-    "ts-jest": "29.2.3"
+    "ts-jest": "29.4.0"
   }
 }

elisa/src/client/RunDetails/RunDetails.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+
+import { RunDetailsImpl } from './RunDetails';
+import { TEST_PLOT_DATA } from './utils.test';
+import { REQUIRED_COLUMN_NAMES } from './constants';
+
+class MockClass {
+    render() {
+    }
+}
+
+LABKEY.vis = {
+    Geom: {
+        Path: MockClass,
+        Point: MockClass,
+    },
+    Layer: MockClass,
+    Plot: MockClass,
+};
+
+describe('RunDetailsImpl', () => {
+    test('check initial display', async () => {
+        render(
+            <RunDetailsImpl
+                columnInfo={REQUIRED_COLUMN_NAMES.reduce((columnInfo, name) => {
+                    columnInfo[name] = {};
+                    return columnInfo;
+                }, {})}
+                data={TEST_PLOT_DATA}
+                getCurveFitXYPairs={jest.fn().mockResolvedValue({})}
+                measures={[]}
+                protocolId={1}
+                runId={2}
+                runPropertiesRow={undefined}
+            />
+        );
+        await waitFor(() => {
+            expect(document.querySelectorAll('.run-details-left')).toHaveLength(1);
+        });
+
+        expect(document.querySelectorAll('.data-selections-panel')).toHaveLength(1);
+        expect(document.querySelectorAll('.plot-options-panel')).toHaveLength(1);
+        expect(document.querySelectorAll('.curve-fit-panel')).toHaveLength(1);
+        expect(document.querySelectorAll('.run-details-right')).toHaveLength(1);
+        expect(document.querySelectorAll('.calibration-curve-panel')).toHaveLength(1);
+        expect(document.querySelectorAll('.alert')).toHaveLength(0);
+    });
+
+    test('missing field keys', async () => {
+        render(
+            <RunDetailsImpl
+                columnInfo={{}}
+                data={TEST_PLOT_DATA}
+                measures={[]}
+                protocolId={1}
+                runId={2}
+                runPropertiesRow={undefined}
+            />
+        );
+        await waitFor(() => {
+            expect(document.querySelectorAll('.alert')).toHaveLength(1);
+        });
+
+        expect(document.querySelector('.alert')).toHaveTextContent(REQUIRED_COLUMN_NAMES.join(', '));
+    });
+});

elisa/src/client/RunDetails/RunDetails.tsx

@@ -18,7 +18,7 @@ import {
     parsePlotDataFromResponse,
     shouldReloadCurveFitData
 } from "./utils";
-import { getCurveFitXYPairs } from "./actions";
+import { GetCurveFitXYPairs, getCurveFitXYPairs } from './actions';
 import { CalibrationCurvePanel } from "./components/CalibrationCurvePanel";
 import { DataSelectionsPanel } from "./components/DataSelectionsPanel";
 import { PlotOptionsPanel } from "./components/PlotOptionsPanel";
@@ -138,6 +138,7 @@ export class RunDetails extends PureComponent<Props, State> {
 interface ImplProps extends CommonRunProps {
     data: any[],
     columnInfo: {[key: string]: any},
+    getCurveFitXYPairs?: GetCurveFitXYPairs;
     measures: string[]
 }
 
@@ -153,6 +154,10 @@ interface ImplState {
 
 // exported just for jest testing
 export class RunDetailsImpl extends PureComponent<ImplProps, ImplState> {
+    static defaultProps = {
+        getCurveFitXYPairs: getCurveFitXYPairs,
+    };
+
     constructor(props: ImplProps) {
         super(props);
 
@@ -188,7 +193,7 @@ export class RunDetailsImpl extends PureComponent<ImplProps, ImplState> {
         const { plotOptions } = this.state;
         const filteredData = filterDataByPlotOptions(data, [], [], plotOptions, false);
 
-        getCurveFitXYPairs(protocolId, runId, plotOptions.plateName, plotOptions.spot, filteredData)
+        this.props.getCurveFitXYPairs(protocolId, runId, plotOptions.plateName, plotOptions.spot, filteredData)
             .then(curveFitData => {
                 this.setState(() => ({ curveFitData }));
             })

elisa/src/client/RunDetails/actions.ts

@@ -4,7 +4,15 @@ import { CurveFitData } from "./models";
 import { getMaxFromData, getMinFromData } from "./utils";
 import { DEFAULT_X_AXIS_PROP } from "./constants";
 
-export function getCurveFitXYPairs(protocolId: number, runId: number, plateName: string, spot: number, data: any[]): Promise<CurveFitData> {
+export type GetCurveFitXYPairs = (
+    protocolId: number,
+    runId: number,
+    plateName: string,
+    spot: number,
+    data: any[]
+) => Promise<CurveFitData>;
+
+export const getCurveFitXYPairs: GetCurveFitXYPairs = (protocolId, runId, plateName, spot, data) => {
     return new Promise((resolve, reject) => {
         const xMin = getMinFromData(data, DEFAULT_X_AXIS_PROP);
         let xMax = getMaxFromData(data, DEFAULT_X_AXIS_PROP);

elisa/src/client/RunDetails/app.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { App } from '@labkey/api';
 
 import { AppContext, RunDetails } from './RunDetails';
 
 import './RunDetails.scss';
 
 App.registerApp<AppContext>('elisaRunDetails', (target: string, ctx: AppContext) => {
-    ReactDOM.render(<RunDetails context={ctx} />, document.getElementById(target));
+    createRoot(document.getElementById(target)).render(<RunDetails context={ctx} />);
 });

elisa/src/client/RunDetails/components/CalibrationCurvePanel.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CalibrationCurvePanel } from './CalibrationCurvePanel';
+import { getDefaultPlotOptions } from '../utils';
+
+describe('CalibrationCurvePanel', () => {
+    test('default props', () => {
+        render(
+            <CalibrationCurvePanel
+                columnInfo={{}}
+                curveFitData={undefined}
+                data={[]}
+                plotOptions={getDefaultPlotOptions([], [])}
+                protocolId={1}
+                runId={2}
+                runPropertiesRow={{}}
+            />
+        );
+
+        expect(document.querySelectorAll('.calibration-curve-panel')).toHaveLength(1);
+        expect(document.querySelectorAll('.plot-panel-display')).toHaveLength(1);
+        expect(document.querySelectorAll('.plot-button-bar')).toHaveLength(1);
+    });
+});

elisa/src/client/RunDetails/components/CalibrationCurvePanel.tsx

@@ -65,7 +65,7 @@ export class CalibrationCurvePanel extends PureComponent<Props, State> {
 
     render() {
         return (
-            <div className="panel panel-default">
+            <div className="panel panel-default calibration-curve-panel">
                 <div className="panel-heading">
                     Calibration Curve
                 </div>