Convert tests to RTL

Author: labkey-nicka

elisa/src/client/RunDetails/RunDetails.spec.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.test.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/RunDetails.tsx

@@ -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/actions.ts

@@ -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.spec.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>