Skip to content

Commit

Permalink
Bob and bobby/7768 fix checkbox multiselect bug (#7771)
Browse files Browse the repository at this point in the history
* fix checkbox bug

* add a regression test

* cleanup and fix a display issue

* lint

* lint pt 2

* rerename

* padding zero across the board

* update issue for facilities form checkboxes

* fix e2e

* but actually this time
  • Loading branch information
fzhao99 authored Jun 6, 2024
1 parent a19ab76 commit d8172f7
Show file tree
Hide file tree
Showing 13 changed files with 315 additions and 113 deletions.
10 changes: 3 additions & 7 deletions cypress/e2e/04-covid_only_tests.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,7 @@ describe("Conducting a COVID test from:", () => {

cy.injectSRAxe();
cy.get(".results-dropdown").within(() => {
cy.get("button.usa-button--unstyled:first-of-type")
.contains("Begin test")
.click();
cy.get("[data-cy='name0-birthdate0']").contains("Begin test").click();
});

cy.wait("@AddPatientToQueue");
Expand Down Expand Up @@ -142,10 +140,8 @@ describe("Conducting a COVID test from:", () => {
cy.get("input").type("2021-10-05");
});

cy.get("[data-testid='symptom-selection']").within(() => {
cy.contains("label", "Chills").click();
cy.contains("label", "Headache").click();
});
cy.contains("label", "Chills").click();
cy.contains("label", "Headache").click();

cy.checkAccessibility();

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/Settings/Users/UserFacilitiesSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const UserFacilitiesSettings: React.FC<UserFacilitiesSettingProps> = ({
boxes={boxes}
legend="Facilities access"
hintText={facilityAccessDescription}
name="facilities"
name="facilities-settings"
required
onChange={() => {}}
validationStatus={error?.type ? "error" : undefined}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ const UserFacilitiesSettingsForm: React.FC<Props> = ({
boxes={boxes}
legend="Facilities"
legendSrOnly
name="facilities"
name="facilities-settings-form"
onChange={(e) => {
const { value, checked } = e.target;
if (value === "ALL_FACILITIES") {
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/app/commonComponents/Checkboxes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ const Checkboxes = (props: Props) => {
return (
<div
className={classnames(
"usa-form-group",
"usa-form-group padding-0",
validationStatus === "error" && "usa-form-group--error"
)}
>
Expand Down Expand Up @@ -128,11 +128,12 @@ const CheckboxesFragment = (props: FragmentProps) => {
const { boxes, name, inputRef, onChange } = props;

return boxes.map(({ value, label, disabled, checked, ...inputProps }) => (
<div className="usa-checkbox" key={value}>
<div className="usa-checkbox" key={`${name}-${value}`}>
<input
className="usa-checkbox__input"
checked={checked}
id={`symptom-${value}`}
id={`${name}-${value}`}
data-testid={`${name}-${value}`}
onChange={onChange}
type="checkbox"
value={value}
Expand All @@ -141,7 +142,7 @@ const CheckboxesFragment = (props: FragmentProps) => {
disabled={disabled || props.disabled}
{...inputProps}
/>
<label className="usa-checkbox__label" htmlFor={`symptom-${value}`}>
<label className="usa-checkbox__label" htmlFor={`${name}-${value}`}>
{label}
</label>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Object {
You can join the waitlist to be notified when SimpleReport is available in your state, or if your organization is reporting to a SimpleReport state, you can continue.
</p>
<div
class="usa-form-group"
class="usa-form-group padding-0"
>
<fieldset
class="usa-fieldset prime-checkboxes"
Expand All @@ -83,14 +83,15 @@ Object {
<input
aria-label="acknowledged"
class="usa-checkbox__input"
id="symptom-acknowledged"
data-testid="acknowledge-acknowledged"
id="acknowledge-acknowledged"
name="acknowledge"
type="checkbox"
value="acknowledged"
/>
<label
class="usa-checkbox__label"
for="symptom-acknowledged"
for="acknowledge-acknowledged"
>
My organization is submitting test results to a
Expand Down
125 changes: 125 additions & 0 deletions frontend/src/app/testQueue/TestCard/TestCard.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ import { sharedTestOrderInfo } from "../TestCardForm/testUtils/testConstants";
import { REQUIRED_AOE_QUESTIONS_BY_DISEASE } from "../TestCardForm/TestCardForm.utils";

import { TestCard, TestCardProps } from "./TestCard";
import {
positiveGenerateMockOne,
firstCardSymptomUpdateMock,
secondCardSymptomUpdateMock,
} from "./testMocks";

jest.mock("../../TelemetryService", () => ({
getAppInsights: jest.fn(),
Expand Down Expand Up @@ -1408,4 +1413,124 @@ describe("TestCard", () => {
expect(screen.queryByText(AOE_ERROR_TEXT)).not.toBeInTheDocument();
});
});

describe("regression test", () => {
it("test card checkboxes don't conflict with each other", async () => {
// https://github.com/CDCgov/prime-simplereport/issues/7768
const secondTestOrder: QueriedTestOrder = {
internalId: "01c807c9-d42b-45c7-aa9f-1fd290eb2fdf",
dateAdded: "2024-06-05 22:03:12.205",
symptoms:
'{"64531003":"true","103001002":"false","84229001":"false","68235000":"false","426000000":"false","49727002":"false","68962001":"true","422587007":"true","267036007":"false","62315008":"false","43724002":"false","36955009":"false","44169009":"false","422400008":"false","230145002":"false","25064002":"false","162397003":"false"}',
symptomOnset: null,
noSymptoms: true,
deviceType: {
internalId: device3Id,
name: device3Name,
model: "LumiraDx SARS-CoV-2 Ag Test*",
testLength: 15,
},
specimenType: {
internalId: specimen1Id,
name: specimen1Name,
typeCode: "445297001",
},
patient: {
internalId: "72b3ce1e-9d5a-4ad2-9ae8-e1099ed1b7e0",
telephone: "(571) 867-5309",
birthDate: "2015-09-20",
firstName: "Althea",
middleName: "Hedda Mclaughlin",
lastName: "Dixon",
gender: "refused",
testResultDelivery: null,
preferredLanguage: null,
email: "[email protected]",
emails: ["[email protected]"],
phoneNumbers: [
{
type: PhoneType.Mobile,
number: "(553) 223-0559",
},
{
type: PhoneType.Landline,
number: "(669) 789-0799",
},
],
},
results: [],
dateTested: null,
correctionStatus: "ORIGINAL",
reasonForCorrection: null,
};
const secondTestProps: TestCardProps = {
refetchQueue: jest.fn().mockReturnValue(null),
testOrder: secondTestOrder,
facility: facilityInfo,
devicesMap: devicesMap,
startTestPatientId: "",
setStartTestPatientId: setStartTestPatientIdMock,
removePatientFromQueue: removePatientFromQueueMock,
};

const firstCardMocks = [
falseNoSymptomAoeMock,
firstCardSymptomUpdateMock,
positiveGenerateMockOne,
];
const { user } = await renderQueueItem({ mocks: firstCardMocks });

const secondCardMocks = [
falseNoSymptomAoeMock,
secondCardSymptomUpdateMock,
];
await renderQueueItem({ props: secondTestProps, mocks: secondCardMocks });

// set up test card one
await user.click(
within(
screen.getByTestId(`COVID-19-test-result-${testOrderInfo.internalId}`)
).getByText("Positive", { exact: false })
);

await user.click(
within(
screen.getByTestId(`has-any-symptoms-${testOrderInfo.internalId}`)
).getByText("Yes", { exact: false })
);

const CHILLS_SNOMED_CODE = 43724002;
const firstChillsCheckBox = screen.getByTestId(
`symptoms-${testOrderInfo.internalId}-${CHILLS_SNOMED_CODE}`
);
await user.click(firstChillsCheckBox);

// set up test card two
await user.click(
within(
screen.getByTestId(
`COVID-19-test-result-${secondTestOrder.internalId}`
)
).getByText("Positive", { exact: false })
);

await user.click(
within(
screen.getByTestId(`has-any-symptoms-${secondTestOrder.internalId}`)
).getByText("Yes", { exact: false })
);

const secondChillsCheckBox = screen.getByTestId(
`symptoms-${secondTestOrder.internalId}-${CHILLS_SNOMED_CODE}`
);

expect(secondChillsCheckBox).not.toBeChecked();
await user.click(
within(
screen.getByTestId(`symptom-selection-${secondTestOrder.internalId}`)
).getByText("Chills", { exact: false })
);
expect(firstChillsCheckBox).toBeChecked();
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,7 @@ Object {
>
<div
class="grid-col-auto"
id="covid-aoe-form"
id="covid-aoe-form-72b3ce1e-9d5a-4ad2-9ae8-e1099ed1b7e0"
>
<div
class="grid-row"
Expand Down
38 changes: 38 additions & 0 deletions frontend/src/app/testQueue/TestCard/testMocks.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import {
baseUpdateAoeMutationRequest,
generateEditQueueMock,
mutationResponse,
NO_SYMPTOMS_FALSE_OVERRIDE,
} from "../TestCardForm/testUtils/submissionMocks";
import { MULTIPLEX_DISEASES, TEST_RESULTS } from "../../testResults/constants";

const FIRST_CARD_SYMPTOM_OVERRIDE = {
symptoms:
'{"25064002":false,"36955009":false,"43724002":true,"44169009":false,"49727002":false,"62315008":false,"64531003":false,"68235000":false,"68962001":false,"84229001":false,"103001002":false,"162397003":false,"230145002":false,"261665006":false,"267036007":false,"422400008":false,"422587007":false,"426000000":false}',
};

const SECOND_CARD_SYMPTOM_OVERRIDE = {
symptoms:
'{"25064002":false,"36955009":false,"43724002":true,"44169009":false,"49727002":false,"62315008":false,"64531003":true,"68235000":false,"68962001":true,"84229001":false,"103001002":false,"162397003":false,"230145002":false,"261665006":false,"267036007":false,"422400008":false,"422587007":true,"426000000":false}',
};

export const firstCardSymptomUpdateMock = {
...baseUpdateAoeMutationRequest({
...NO_SYMPTOMS_FALSE_OVERRIDE,
...FIRST_CARD_SYMPTOM_OVERRIDE,
}),
...mutationResponse,
};

export const secondCardSymptomUpdateMock = {
...baseUpdateAoeMutationRequest({
...NO_SYMPTOMS_FALSE_OVERRIDE,
...SECOND_CARD_SYMPTOM_OVERRIDE,
}),
...mutationResponse,
};

export const positiveGenerateMockOne = generateEditQueueMock(
MULTIPLEX_DISEASES.COVID_19,
TEST_RESULTS.POSITIVE
);
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ Object {
>
<div
class="grid-col-auto"
id="covid-aoe-form"
id="covid-aoe-form-72b3ce1e-9d5a-4ad2-9ae8-e1099ed1b7e0"
>
<div
class="grid-row"
Expand Down Expand Up @@ -797,7 +797,7 @@ Object {
>
<div
class="grid-col-auto"
id="covid-aoe-form"
id="covid-aoe-form-72b3ce1e-9d5a-4ad2-9ae8-e1099ed1b7e0"
>
<div
class="grid-row"
Expand Down Expand Up @@ -1680,7 +1680,7 @@ Object {
>
<div
class="grid-col-auto"
id="covid-aoe-form"
id="covid-aoe-form-72b3ce1e-9d5a-4ad2-9ae8-e1099ed1b7e0"
>
<div
class="grid-row"
Expand Down Expand Up @@ -2092,7 +2092,7 @@ Object {
>
<div
class="grid-col-auto"
id="covid-aoe-form"
id="covid-aoe-form-72b3ce1e-9d5a-4ad2-9ae8-e1099ed1b7e0"
>
<div
class="grid-row"
Expand Down Expand Up @@ -2804,7 +2804,7 @@ Object {
>
<div
class="grid-col-auto"
id="covid-aoe-form"
id="covid-aoe-form-72b3ce1e-9d5a-4ad2-9ae8-e1099ed1b7e0"
>
<div
class="grid-row"
Expand Down Expand Up @@ -3443,7 +3443,7 @@ Object {
>
<div
class="grid-col-auto"
id="covid-aoe-form"
id="covid-aoe-form-72b3ce1e-9d5a-4ad2-9ae8-e1099ed1b7e0"
>
<div
class="grid-row"
Expand Down Expand Up @@ -3928,7 +3928,7 @@ Object {
>
<div
class="grid-col-auto"
id="covid-aoe-form"
id="covid-aoe-form-72b3ce1e-9d5a-4ad2-9ae8-e1099ed1b7e0"
>
<div
class="grid-row"
Expand Down Expand Up @@ -4340,7 +4340,7 @@ Object {
>
<div
class="grid-col-auto"
id="covid-aoe-form"
id="covid-aoe-form-72b3ce1e-9d5a-4ad2-9ae8-e1099ed1b7e0"
>
<div
class="grid-row"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,10 @@ const CovidAoEForm = ({
respiratorySymptomDefinitions
);
return (
<div className="grid-col-auto" id="covid-aoe-form">
<div
className="grid-col-auto"
id={`covid-aoe-form-${testOrder.patient.internalId}`}
>
<div className="grid-row">
<div className="grid-col-auto">
<RadioGroup
Expand Down Expand Up @@ -102,8 +105,8 @@ const CovidAoEForm = ({
></TextInput>
</div>
<div
className="grid-row grid-gap margin-left-0"
data-testid="symptom-selection"
className="grid-row grid-gap margin-left-0 "
data-testid={`symptom-selection-${testOrder.internalId}`}
>
<Checkboxes
boxes={respiratorySymptomDefinitions.map(({ label, value }) => ({
Expand All @@ -120,6 +123,7 @@ const CovidAoEForm = ({
? SYMPTOM_SUBQUESTION_ERROR
: undefined
}
className={"padding-left-0"}
/>
</div>
</>
Expand Down
Loading

0 comments on commit d8172f7

Please sign in to comment.