From b6358383494bc60efc45cbb8d49c25ec966a1bce Mon Sep 17 00:00:00 2001
From: Seena Nair <55585488+seenanair@users.noreply.github.com>
Date: Thu, 7 Sep 2023 17:01:54 +0100
Subject: [PATCH] Store option on Stain page

---
 cypress/e2e/pages/staining.cy.ts        | 112 +++++++++++++++++++++++-
 src/pages/staining/ComplexStainForm.tsx |  44 ++++++----
 src/pages/staining/ComplexStainRow.tsx  |   4 +
 src/pages/staining/StainForm.tsx        |  27 +++++-
 4 files changed, 168 insertions(+), 19 deletions(-)

diff --git a/cypress/e2e/pages/staining.cy.ts b/cypress/e2e/pages/staining.cy.ts
index 5c8c876df..d154685f0 100644
--- a/cypress/e2e/pages/staining.cy.ts
+++ b/cypress/e2e/pages/staining.cy.ts
@@ -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');
@@ -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');
+    });
+  }
 });
diff --git a/src/pages/staining/ComplexStainForm.tsx b/src/pages/staining/ComplexStainForm.tsx
index f9a5d03dd..a9b6b2dc1 100644
--- a/src/pages/staining/ComplexStainForm.tsx
+++ b/src/pages/staining/ComplexStainForm.tsx
@@ -18,7 +18,7 @@ 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';
@@ -26,6 +26,7 @@ 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;
 
@@ -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();
@@ -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}
           >
diff --git a/src/pages/staining/ComplexStainRow.tsx b/src/pages/staining/ComplexStainRow.tsx
index 22b4a353f..7e7d7f21c 100644
--- a/src/pages/staining/ComplexStainRow.tsx
+++ b/src/pages/staining/ComplexStainRow.tsx
@@ -73,6 +73,7 @@ const ComplexStainRow = ({
           label={''}
           name={rowID !== undefined ? `labware.${rowID}.bondBarcode` : `bondBarcode`}
           onChange={handleChange}
+          data-testid={`${barcode}-bondBarcode`}
         />
       </TableCell>
       <TableCell className={cellClassNames}>
@@ -82,6 +83,7 @@ const ComplexStainRow = ({
           type={'number'}
           min={0}
           onChange={handleChange}
+          data-testid={`${barcode}-bondRun`}
         />
       </TableCell>
       <TableCell className={cellClassNames}>
@@ -95,6 +97,7 @@ const ComplexStainRow = ({
             });
           }}
           workNumber={rowID !== undefined ? stainFormValues.labware[rowID].workNumber ?? '' : ''}
+          dataTestId={`${barcode}-workNumber`}
         />
       </TableCell>
       <TableCell className={cellClassNames}>
@@ -116,6 +119,7 @@ const ComplexStainRow = ({
             };
           })}
           value={rowID !== undefined ? stainFormValues.labware[rowID].panel ?? '' : ''}
+          data-testid={`${barcode}-panel`}
         />
       </TableCell>
       <TableCell className={cellClassNames}>
diff --git a/src/pages/staining/StainForm.tsx b/src/pages/staining/StainForm.tsx
index 8a0168a50..5cb1489e5 100644
--- a/src/pages/staining/StainForm.tsx
+++ b/src/pages/staining/StainForm.tsx
@@ -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';
@@ -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.
@@ -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={''}
@@ -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>
 
@@ -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.