Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Store option on Stain page #397

Merged
merged 1 commit into from
Sep 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 110 additions & 2 deletions cypress/e2e/pages/staining.cy.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { selectOption } from '../shared/customReactSelect.cy';
import { selectOption, selectSGPNumber } from '../shared/customReactSelect.cy';

describe('Staining Page', () => {
before(() => {
cy.visit('/lab/staining');
});

describe('Showing measurements', () => {
/*describe('Showing measurements', () => {
context('when a Stain Type with measurements is selected', () => {
before(() => {
selectOption('stainType', 'H&E');
Expand Down Expand Up @@ -112,5 +112,113 @@ describe('Staining Page', () => {
cy.findAllByText('Positive').should('have.length', 3);
});
});
});*/
describe('On Submission', () => {
describe('when H&E Stain Type is selected', () => {
before(() => {
submitStainInfo('H&E');
});
shouldDisplaySuccessDialog(['Store', 'Reset Form', 'Return Home']);
shouldNavigateToStore();
});
describe('when IHC Stain Type is selected', () => {
before(() => {
submitStainInfo('IHC');
});
shouldDisplaySuccessDialog(['Store', 'Stain Again', 'Reset Form', 'Return Home']);
shouldNavigateToStore();
});
describe('when Massons Trichrome Stain Type is selected', () => {
before(() => {
cy.visit('/lab/staining');
selectOption('stainType', `Masson's Trichrome`);
cy.get('#labwareScanInput').type('STAN-3111{enter}');
selectSGPNumber('SGP1008');
getButton('Submit').click();
});
shouldDisplaySuccessDialog(['Store', 'Reset Form', 'Return Home']);
shouldNavigateToStore();
});
describe('when RNAscope Stain Type is selected', () => {
before(() => {
submitStainInfo('RNAscope');
});
shouldDisplaySuccessDialog(['Store', 'Stain Again', 'Reset Form', 'Return Home']);
shouldNavigateToStore();
});
describe('when RNAscope & IHC Stain Type is selected', () => {
before(() => {
submitStainInfo('RNAscope & IHC');
});
shouldDisplaySuccessDialog(['Store', 'Stain Again', 'Reset Form', 'Return Home']);
shouldNavigateToStore();
});
});

function submitStainInfo(stainType: string) {
cy.visit('/lab/staining');
selectOption('stainType', stainType);
cy.get('#labwareScanInput').type('STAN-3111{enter}');
fillInForm(stainType);
getButton('Submit').click();
}
function fillInForm(stainType: string) {
if (stainType == 'H&E') {
selectSGPNumber('SGP1008');
cy.findByTestId('timeMeasurements.0.minutes').type('1');
cy.findByTestId('timeMeasurements.0.seconds').type('1');
cy.findByTestId('timeMeasurements.1.minutes').type('1');
cy.findByTestId('timeMeasurements.1.seconds').type('1');
cy.findByTestId('timeMeasurements.2.minutes').type('1');
cy.findByTestId('timeMeasurements.2.seconds').type('1');
}
if (stainType == 'IHC' || stainType == 'RNAscope' || stainType == 'RNAscope & IHC') {
cy.findByTestId('STAN-3111-bondBarcode').type('1234');
cy.findByTestId('STAN-3111-bondRun').type('1');
selectOption('STAN-3111-workNumber', 'SGP1008');
selectOption('STAN-3111-panel', 'Positive');
if (stainType == 'RNAscope' || stainType == 'RNAscope & IHC') {
cy.findByTestId('STAN-3111-plexRNAscope').type('1');
}
if (stainType == 'IHC' || stainType == 'RNAscope & IHC') {
cy.findByTestId('STAN-3111-plexIHC').type('1');
}
}
}
function shouldNavigateToStore() {
context('when store option selected for stained labware', () => {
before(() => {
storeButton().click();
});
context('while in store page with confirmed labware', () => {
it('navigates to store page', () => {
cy.url().should('be.equal', 'http://localhost:3000/store');
});
it('when redirected to the Store page', () => {
cy.findByRole('table').contains('td', 'STAN-3111');
});
});
});
}
function shouldDisplaySuccessDialog(buttonNames: string[]) {
context('when the form is submitted', () => {
it('shows the success dialog', () => {
cy.findByText('Staining Successful');
});
it('displays all buttons', () => {
shouldDisplayButtons(buttonNames);
});
});
}
function getButton(buttonName: string) {
return cy.findByRole('button', { name: `${buttonName}` });
}
function storeButton() {
return getButton('Store');
}
function shouldDisplayButtons(buttonNames: string[]) {
buttonNames.forEach((buttonName) => {
getButton(buttonName).should('be.visible');
});
}
});
44 changes: 29 additions & 15 deletions src/pages/staining/ComplexStainForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,15 @@ import PinkButton from '../../components/buttons/PinkButton';
import * as Yup from 'yup';
import { useMachine } from '@xstate/react';
import createFormMachine from '../../lib/machines/form/formMachine';
import { reload, stanCore } from '../../lib/sdk';
import { history, reload, stanCore } from '../../lib/sdk';
import { FormikLabwareScanner } from '../../components/labwareScanner/FormikLabwareScanner';
import Table, { TableBody, TableHead, TableHeader } from '../../components/Table';
import OperationCompleteModal from '../../components/modal/OperationCompleteModal';
import Warning from '../../components/notifications/Warning';
import WhiteButton from '../../components/buttons/WhiteButton';
import { FormikFieldValueArray } from '../../components/forms/FormikFieldValueArray';
import ComplexStainRow from './ComplexStainRow';
import { createSessionStorageForLabwareAwaiting } from '../../types/stan';

type ComplexStainFormValues = ComplexStainRequest;

Expand Down Expand Up @@ -60,17 +61,15 @@ export default function ComplexStainForm({ stainType, initialLabware, onLabwareC
bondRun: Yup.number().integer().positive().label('Bond Run'),
workNumber: Yup.string().required().label('SGP Number'),
panel: Yup.string().oneOf(Object.values(StainPanel)).required().label('Experimental Panel'),
plexRNAscope: Yup.number().when('stainTypes', (stainTypes) => {
const value = stainTypes[0] as unknown as string;
if (value !== 'IHC') {
plexRNAscope: Yup.number().when('stainTypes', () => {
if (stainType !== 'IHC') {
return Yup.number().integer().min(plexMin).max(plexMax).required().label('RNAScope Plex Number');
} else {
return Yup.number().notRequired();
}
}),
plexIHC: Yup.number().when('stainTypes', (stainTypes) => {
const value = stainTypes[0] as unknown as string;
if (value !== 'RNAscope') {
plexIHC: Yup.number().when('stainTypes', () => {
if (stainType !== 'RNAscope') {
return Yup.number().required().integer().min(plexMin).max(plexMax).label('IHC Plex Number');
} else {
return Yup.number().notRequired();
Expand Down Expand Up @@ -219,14 +218,29 @@ export default function ComplexStainForm({ stainType, initialLabware, onLabwareC
show={current.matches('submitted')}
message={'Staining Successful'}
additionalButtons={
<WhiteButton
type="button"
style={{ marginRight: 'auto' }}
className="w-full text-base md:ml-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => send({ type: 'RESET' })}
>
Stain Again
</WhiteButton>
<div className={'flex flex-row gap-x-3'}>
<WhiteButton
type="button"
style={{ marginRight: 'auto' }}
className="w-full text-base md:ml-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => send({ type: 'RESET' })}
>
Stain Again
</WhiteButton>
<WhiteButton
type="button"
style={{ marginLeft: 'auto' }}
className="w-full text-base md:ml-0 sm:ml-3 sm:w-auto sm:text:sm"
onClick={() => {
if (initialLabware.length > 0) {
createSessionStorageForLabwareAwaiting(initialLabware);
}
history.push('/store');
}}
>
Store
</WhiteButton>
</div>
}
onReset={reload}
>
Expand Down
4 changes: 4 additions & 0 deletions src/pages/staining/ComplexStainRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ const ComplexStainRow = ({
label={''}
name={rowID !== undefined ? `labware.${rowID}.bondBarcode` : `bondBarcode`}
onChange={handleChange}
data-testid={`${barcode}-bondBarcode`}
/>
</TableCell>
<TableCell className={cellClassNames}>
Expand All @@ -82,6 +83,7 @@ const ComplexStainRow = ({
type={'number'}
min={0}
onChange={handleChange}
data-testid={`${barcode}-bondRun`}
/>
</TableCell>
<TableCell className={cellClassNames}>
Expand All @@ -95,6 +97,7 @@ const ComplexStainRow = ({
});
}}
workNumber={rowID !== undefined ? stainFormValues.labware[rowID].workNumber ?? '' : ''}
dataTestId={`${barcode}-workNumber`}
/>
</TableCell>
<TableCell className={cellClassNames}>
Expand All @@ -116,6 +119,7 @@ const ComplexStainRow = ({
};
})}
value={rowID !== undefined ? stainFormValues.labware[rowID].panel ?? '' : ''}
data-testid={`${barcode}-panel`}
/>
</TableCell>
<TableCell className={cellClassNames}>
Expand Down
27 changes: 25 additions & 2 deletions src/pages/staining/StainForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
import { useMachine } from '@xstate/react';
import createFormMachine from '../../lib/machines/form/formMachine';
import { GetStainInfoQuery, LabwareFieldsFragment, StainMutation, StainRequest } from '../../types/sdk';
import { reload, stanCore } from '../../lib/sdk';
import { history, reload, stanCore } from '../../lib/sdk';
import * as Yup from 'yup';
import { Form, Formik } from 'formik';
import GrayBox, { Sidebar } from '../../components/layouts/GrayBox';
Expand All @@ -19,6 +19,8 @@ import columns from '../../components/dataTableColumns/labwareColumns';
import FormikInput from '../../components/forms/Input';
import PinkButton from '../../components/buttons/PinkButton';
import OperationCompleteModal from '../../components/modal/OperationCompleteModal';
import { createSessionStorageForLabwareAwaiting } from '../../types/stan';
import WhiteButton from '../../components/buttons/WhiteButton';

/**
* Type used for the values in the form.
Expand Down Expand Up @@ -217,6 +219,7 @@ export default function StainForm({ stainType, stainingInfo, initialLabware, onL
placeholder="mm"
min={0}
value={measurementType._minutes === 0 ? '' : measurementType._minutes}
data-testid={`timeMeasurements.${i}.minutes`}
/>
<FormikInput
label={''}
Expand All @@ -235,6 +238,7 @@ export default function StainForm({ stainType, stainingInfo, initialLabware, onL
placeholder="ss"
min={0}
value={measurementType._seconds === 0 ? '' : measurementType._seconds}
data-testid={`timeMeasurements.${i}.seconds`}
/>
</div>

Expand Down Expand Up @@ -276,7 +280,26 @@ export default function StainForm({ stainType, stainingInfo, initialLabware, onL
</PinkButton>
</Sidebar>
</GrayBox>
<OperationCompleteModal show={current.matches('submitted')} message={'Staining Successful'} onReset={reload}>
<OperationCompleteModal
show={current.matches('submitted')}
message={'Staining Successful'}
onReset={reload}
additionalButtons={
<WhiteButton
type="button"
style={{ marginLeft: 'auto' }}
className="w-full text-base md:ml-0 sm:ml-3 sm:w-auto sm:text:sm"
onClick={() => {
if (initialLabware.length > 0) {
createSessionStorageForLabwareAwaiting(initialLabware);
}
history.push('/store');
}}
>
Store
</WhiteButton>
}
>
<p>
If you wish to start the process again, click the "Reset Form" button. Otherwise you can return to the
Home screen.
Expand Down