in reference to issue #620 #620, created a unique key for each Transp…

…orter by combining the EPAID and array index. I also found a bug where the tooltips in the Transporter list displayed the zero-index value, i.e. 'view transporter 0 details' for transporter 1. I corrected the tests to reflect this change in tooltip labels. Also added a test to ensure that only one accordion expands when the same Transporter appears in the manifest and 'Details' is clicked.
USEPA · May 29, 2024 · 2a27b02 · 2a27b02
1 parent f321508
commit 2a27b02
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/client/src/components/Manifest/Transporter/TransporterRowActions.tsx b/client/src/components/Manifest/Transporter/TransporterRowActions.tsx
@@ -54,7 +54,7 @@ export function TransporterRowActions({
         swapTransporter(index, index - 1);
       },
       disabled: isFirst,
-      label: `move transporter ${index} up`,
+      label: `move transporter ${index + 1} up`,
     },
     {
       text: 'Move Down',
@@ -68,7 +68,7 @@ export function TransporterRowActions({
         swapTransporter(index, index + 1);
       },
       disabled: isLast,
-      label: `move transporter ${index} down`,
+      label: `move transporter ${index + 1} down`,
     },
     {
       text: 'Remove',
@@ -77,7 +77,7 @@ export function TransporterRowActions({
         removeTransporter(index);
       },
       disabled: false,
-      label: `remove transporter ${index}`,
+      label: `remove transporter ${index + 1}`,
     },
     {
       text: open ? 'Close' : 'Details',
@@ -86,7 +86,7 @@ export function TransporterRowActions({
         decoratedOnClick(event);
       },
       disabled: false,
-      label: `View transporter ${index} details`,
+      label: `View transporter ${index + 1} details`,
     },
   ];
 

diff --git a/client/src/components/Manifest/Transporter/TransporterTable.spec.tsx b/client/src/components/Manifest/Transporter/TransporterTable.spec.tsx
@@ -94,7 +94,7 @@ describe('TransporterTable', () => {
     });
     for (let i = 1; i < TRAN_ARRAY.length; i++) {
       await userEvent.click(actionDropdowns[i]);
-      expect(screen.getByTitle(`move transporter ${i} up`)).not.toBeDisabled();
+      expect(screen.getByTitle(`move transporter ${i + 1} up`)).not.toBeDisabled();
     }
   });
   test('All but last move-down buttons are not disabled', async () => {
@@ -113,7 +113,33 @@ describe('TransporterTable', () => {
     });
     for (let i = 0; i < TRAN_ARRAY.length; i++) {
       await userEvent.click(actionDropdowns[i]);
-      expect(screen.getByTitle(`move transporter ${i} down`)).not.toBeDisabled();
+      expect(screen.getByTitle(`move transporter ${i + 1} down`)).not.toBeDisabled();
     }
   });
 });
+test('Expanding transporter opens one accordion only', async () => {
+  const emptyArrayFieldMethods = {}; // empty method placeholders to fulfill required prop
+  TRAN_ARRAY.push({
+    ...createMockTransporter({ epaSiteId: HANDLER_ID_1, name: HANDLER_NAME_1, order: 3 }),
+  });
+
+  renderWithProviders(
+    <TransporterTable
+      setupSign={mockSetupSign}
+      // @ts-ignore
+      arrayFieldMethods={emptyArrayFieldMethods}
+      transporters={TRAN_ARRAY}
+    />,
+    { preloadedState: { manifest: { readOnly: false } } }
+  );
+  const actionDropdown = await screen.findByRole('button', {
+    name: /transporter 1 actions/,
+  });
+  await userEvent.click(actionDropdown);
+  const detailButton = await screen.findByTitle('View transporter 1 details');
+  await userEvent.click(detailButton);
+
+  const accordion = document.querySelectorAll('.accordion-collapse.collapse.show');
+  expect(accordion).toHaveLength(1);
+  expect(accordion[0]).toBeInTheDocument();
+});
diff --git a/client/src/components/Manifest/Transporter/TransporterTable.tsx b/client/src/components/Manifest/Transporter/TransporterTable.tsx
@@ -52,8 +52,9 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp
     <>
       <Accordion ref={parent}>
         {transporters.map((transporter, index) => {
+          const transporterKey: string = `${transporter.epaSiteId}-${index.toString()}`;
           return (
-            <Card key={transporter.epaSiteId} className="py-2 ps-4 pe-2 my-2">
+            <Card key={transporterKey} className="py-2 ps-4 pe-2 my-2">
               <Row className="d-flex justify-content-around">
                 <Col xs={8} className="d-flex align-items-center">
                   <h5 className="mb-0 me-3">{transporter.order} </h5>
@@ -76,19 +77,19 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp
                 </Col>
                 <Col xs={2} className="d-flex justify-content-end align-items-center">
                   {readOnly ? (
-                    <CustomToggle eventKey={transporter.epaSiteId}></CustomToggle>
+                    <CustomToggle eventKey={transporterKey}></CustomToggle>
                   ) : (
                     <TransporterRowActions
                       removeTransporter={arrayFieldMethods.remove}
                       swapTransporter={arrayFieldMethods.swap}
                       index={index}
                       length={transporters?.length}
-                      eventKey={transporter.epaSiteId}
+                      eventKey={transporterKey}
                     />
                   )}
                 </Col>
               </Row>
-              <Accordion.Collapse eventKey={transporter.epaSiteId}>
+              <Accordion.Collapse eventKey={transporterKey}>
                 <Card.Body>
                   <Table responsive>
                     <thead>