From 57ac2d9b96abdd9271c3ebe7ec0ac2fb29e0d574 Mon Sep 17 00:00:00 2001 From: Zedd Shmais Date: Tue, 10 Oct 2023 09:58:16 -0500 Subject: [PATCH] add MultiplexResultInputGroup tests --- .../MultiplexResultInputGroup.test.tsx | 136 ++++++++ .../MultiplexResultInputGroup.tsx | 10 +- .../MultiplexResultInputGroup.test.tsx.snap | 326 ++++++++++++++++++ 3 files changed, 464 insertions(+), 8 deletions(-) create mode 100644 frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/MultiplexResultInputGroup.test.tsx create mode 100644 frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/__snapshots__/MultiplexResultInputGroup.test.tsx.snap diff --git a/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/MultiplexResultInputGroup.test.tsx b/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/MultiplexResultInputGroup.test.tsx new file mode 100644 index 00000000000..c36a6868b91 --- /dev/null +++ b/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/MultiplexResultInputGroup.test.tsx @@ -0,0 +1,136 @@ +import React from "react"; +import userEvent from "@testing-library/user-event"; +import { render, screen } from "@testing-library/react"; +import { within } from "@storybook/testing-library"; + +import mockSupportedDiseaseCovid from "../../mocks/mockSupportedDiseaseCovid"; +import { mockSupportedDiseaseFlu } from "../../mocks/mockSupportedDiseaseMultiplex"; + +import MultiplexResultInputGroup from "./MultiplexResultInputGroup"; + +describe("MultiplexResultInputGroup", () => { + const onChangeMock = jest.fn(); + const queueItemId = "QUEUE-ITEM-ID"; + + const device1Name = "LumiraDX"; + const device2Name = "Abbott BinaxNow"; + const specimen1Name = "Swab of internal nose"; + const specimen1Id = "SPECIMEN-1-ID"; + const specimen2Name = "Nasopharyngeal swab"; + const specimen2Id = "SPECIMEN-2-ID"; + const device1Id = "DEVICE-1-ID"; + const device2Id = "DEVICE-2-ID"; + + const testRestults = [ + { diseaseName: "COVID-19", testResult: "POSITIVE" }, + { diseaseName: "Flu A", testResult: "POSITIVE" }, + { diseaseName: "Flu B", testResult: "POSITIVE" }, + ]; + + const deviceTypes = [ + { + internalId: device1Id, + name: device1Name, + testLength: 15, + supportedDiseaseTestPerformed: mockSupportedDiseaseCovid, + swabTypes: [ + { + name: specimen1Name, + internalId: specimen1Id, + typeCode: "445297001", + }, + { + name: specimen2Name, + internalId: specimen2Id, + typeCode: "258500001", + }, + ], + }, + { + internalId: device2Id, + name: device2Name, + testLength: 15, + supportedDiseaseTestPerformed: mockSupportedDiseaseFlu, + swabTypes: [ + { + name: specimen1Name, + internalId: specimen1Id, + typeCode: "445297001", + }, + ], + }, + ]; + + const devicesMap = new Map(); + deviceTypes.map((d) => devicesMap.set(d.internalId, d)); + + async function renderMultiplexResultInputGroup(deviceId?: string) { + jest.spyOn(global.Math, "random").mockReturnValue(1); + + const { container } = render( + + ); + return { container, user: userEvent.setup() }; + } + + it("matches snapshot", async () => { + expect(await renderMultiplexResultInputGroup()).toMatchSnapshot(); + }); + + it("calls onChange when result", async () => { + const { user } = await renderMultiplexResultInputGroup(); + + await user.click( + within( + screen.getByTestId(`covid-test-result-${queueItemId}`) + ).getByLabelText("Negative (-)") + ); + expect(onChangeMock).toHaveBeenCalledWith([ + { diseaseName: "COVID-19", testResult: "NEGATIVE" }, + { diseaseName: "Flu A", testResult: "POSITIVE" }, + { diseaseName: "Flu B", testResult: "POSITIVE" }, + ]); + + await user.click( + within( + screen.getByTestId(`flu-a-test-result-${queueItemId}`) + ).getByLabelText("Negative (-)") + ); + expect(onChangeMock).toHaveBeenCalledWith([ + { diseaseName: "COVID-19", testResult: "NEGATIVE" }, + { diseaseName: "Flu A", testResult: "NEGATIVE" }, + { diseaseName: "Flu B", testResult: "POSITIVE" }, + ]); + + await user.click( + within( + screen.getByTestId(`flu-b-test-result-${queueItemId}`) + ).getByLabelText("Negative (-)") + ); + expect(onChangeMock).toHaveBeenCalledWith([ + { diseaseName: "COVID-19", testResult: "NEGATIVE" }, + { diseaseName: "Flu A", testResult: "NEGATIVE" }, + { diseaseName: "Flu B", testResult: "NEGATIVE" }, + ]); + }); + + it("doesnt show covid result input with flu only device", async () => { + await renderMultiplexResultInputGroup(device2Id); + + expect( + screen.queryByTestId(`covid-test-result-${queueItemId}`) + ).not.toBeInTheDocument(); + expect( + screen.getByTestId(`flu-a-test-result-${queueItemId}`) + ).toBeInTheDocument(); + expect( + screen.getByTestId(`flu-b-test-result-${queueItemId}`) + ).toBeInTheDocument(); + }); +}); diff --git a/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/MultiplexResultInputGroup.tsx b/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/MultiplexResultInputGroup.tsx index 8a69e879b15..4ee6b2bb635 100644 --- a/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/MultiplexResultInputGroup.tsx +++ b/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/MultiplexResultInputGroup.tsx @@ -324,10 +324,7 @@ const MultiplexResultInputGroup: React.FC = ({ /> )} -
+
{ @@ -349,10 +346,7 @@ const MultiplexResultInputGroup: React.FC = ({ required={areAllResultsRequired} />
-
+
{ diff --git a/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/__snapshots__/MultiplexResultInputGroup.test.tsx.snap b/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/__snapshots__/MultiplexResultInputGroup.test.tsx.snap new file mode 100644 index 00000000000..fa7586248a4 --- /dev/null +++ b/frontend/src/app/testQueue/TestCardForm/diseaseSpecificComponents/__snapshots__/MultiplexResultInputGroup.test.tsx.snap @@ -0,0 +1,326 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MultiplexResultInputGroup matches snapshot 1`] = ` +Object { + "container":
+
+
+
+
+ + COVID-19 result + + + * + + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ + Flu A result + + + * + + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ + Flu B result + + + * + + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+ + Inconclusive tests + +
+
+ + +
+
+
+
+
+
+ + + + +
+
+
, + "user": Object { + "clear": [Function], + "click": [Function], + "copy": [Function], + "cut": [Function], + "dblClick": [Function], + "deselectOptions": [Function], + "hover": [Function], + "keyboard": [Function], + "paste": [Function], + "pointer": [Function], + "selectOptions": [Function], + "setup": [Function], + "tab": [Function], + "tripleClick": [Function], + "type": [Function], + "unhover": [Function], + "upload": [Function], + }, +} +`;