Merge pull request #13958 from transcom/b20884-MAIN2-fix_prime_weight…

…_tool_tip B20884-MAIN2-fix prime weight tool tip
transcom · Oct 22, 2024 · ff71810 · ff71810
2 parents d702365 + 1fbf38b
commit ff71810
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 11 deletions.
diff --git a/src/components/ShipmentList/ShipmentList.jsx b/src/components/ShipmentList/ShipmentList.jsx
@@ -26,6 +26,7 @@ export const ShipmentListItem = ({
   showShipmentWeight,
   isOverweight,
   isMissingWeight,
+  showShipmentTooltip,
 }) => {
   const isMobileHome = shipment.shipmentType === SHIPMENT_OPTIONS.MOBILE_HOME;
   const isPPM = shipment.shipmentType === SHIPMENT_OPTIONS.PPM;
@@ -64,15 +65,17 @@ export const ShipmentListItem = ({
           {showNumber && ` ${shipmentNumber}`}
         </strong>{' '}
         <br />
-        {(shipment.shipmentType === SHIPMENT_OPTIONS.HHG ||
-          shipment.shipmentType === SHIPMENT_OPTIONS.NTS ||
-          isBoat) && (
-          <>
-            <span>{formatWeight(shipment.primeEstimatedWeight * WEIGHT_ADJUSTMENT)} </span>
-            <ToolTip text="110% Prime Estimated Weight" icon="circle-question" closeOnLeave />
-          </>
-        )}
-        {shipment.shipmentType === SHIPMENT_OPTIONS.NTSR && (
+        {showShipmentTooltip &&
+          (shipment.shipmentType === SHIPMENT_OPTIONS.HHG ||
+            shipment.shipmentType === SHIPMENT_OPTIONS.NTS ||
+            isBoat ||
+            isMobileHome) && (
+            <>
+              <span>{formatWeight(shipment.primeEstimatedWeight * WEIGHT_ADJUSTMENT)} </span>
+              <ToolTip text="110% Prime Estimated Weight" icon="circle-question" closeOnLeave />
+            </>
+          )}
+        {showShipmentTooltip && shipment.shipmentType === SHIPMENT_OPTIONS.NTSR && (
           <>
             <span>{formatWeight(shipment.ntsRecordedWeight * WEIGHT_ADJUSTMENT)} </span>
             <ToolTip text="110% Previously Recorded Weight" icon="circle-question" closeOnLeave />
@@ -143,6 +146,7 @@ ShipmentListItem.propTypes = {
   showNumber: bool,
   showIncomplete: bool,
   showShipmentWeight: bool,
+  showShipmentTooltip: bool,
   isOverweight: bool,
   isMissingWeight: bool,
 };
@@ -151,13 +155,21 @@ ShipmentListItem.defaultProps = {
   showNumber: true,
   showIncomplete: false,
   showShipmentWeight: false,
+  showShipmentTooltip: false,
   isOverweight: false,
   isMissingWeight: false,
   onShipmentClick: null,
   onDeleteClick: null,
 };
 
-const ShipmentList = ({ shipments, onShipmentClick, onDeleteClick, moveSubmitted, showShipmentWeight }) => {
+const ShipmentList = ({
+  shipments,
+  onShipmentClick,
+  onDeleteClick,
+  moveSubmitted,
+  showShipmentWeight,
+  showShipmentTooltip,
+}) => {
   const shipmentNumbersByType = {};
   const shipmentCountByType = {};
   shipments.forEach((shipment) => {
@@ -225,6 +237,7 @@ const ShipmentList = ({ shipments, onShipmentClick, onDeleteClick, moveSubmitted
             shipmentNumber={shipmentNumber}
             showNumber={showNumber}
             showShipmentWeight={showShipmentWeight}
+            showShipmentTooltip={showShipmentTooltip}
             canEditOrDelete={canEditOrDelete}
             isOverweight={isOverweight}
             showIncomplete={isIncomplete}
@@ -245,10 +258,12 @@ ShipmentList.propTypes = {
   onDeleteClick: func,
   moveSubmitted: bool.isRequired,
   showShipmentWeight: bool,
+  showShipmentTooltip: bool,
 };
 
 ShipmentList.defaultProps = {
   showShipmentWeight: false,
+  showShipmentTooltip: false,
   onShipmentClick: null,
   onDeleteClick: null,
 };

diff --git a/src/components/ShipmentList/ShipmentList.test.jsx b/src/components/ShipmentList/ShipmentList.test.jsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 
 import ShipmentList from './ShipmentList';
 
-import { SHIPMENT_OPTIONS } from 'shared/constants';
+import { SHIPMENT_OPTIONS, SHIPMENT_TYPES } from 'shared/constants';
 import { formatWeight } from 'utils/formatters';
 
 beforeEach(() => {
@@ -91,6 +91,52 @@ describe('ShipmentList component', () => {
   });
 });
 
+describe('ShipmentList shipment weight tooltip', () => {
+  const defaultProps = {
+    moveSubmitted: false,
+  };
+
+  it.each([
+    [SHIPMENT_OPTIONS.HHG, 'ID-2', '110% Prime Estimated Weight'],
+    [SHIPMENT_OPTIONS.NTS, 'ID-3', '110% Prime Estimated Weight'],
+    [SHIPMENT_OPTIONS.NTSR, 'ID-4', '110% Previously Recorded Weight'],
+    [SHIPMENT_TYPES.BOAT_HAUL_AWAY, 'ID-5', '110% Prime Estimated Weight'],
+    [SHIPMENT_TYPES.BOAT_TOW_AWAY, 'ID-6', '110% Prime Estimated Weight'],
+    [SHIPMENT_OPTIONS.MOBILE_HOME, 'ID-7', '110% Prime Estimated Weight'],
+  ])('shipment weight tooltip, show is true. %s', async (type, id, expectedTooltipText) => {
+    // Render component
+    const props = { ...defaultProps, showShipmentTooltip: true, shipments: [{ id, shipmentType: type }] };
+    render(<ShipmentList {...props} />);
+
+    // Verify tooltip exists
+    const tooltipIcon = screen.getByTestId('tooltip-container');
+    expect(tooltipIcon).toBeInTheDocument();
+
+    // Click the tooltip
+    await userEvent.hover(tooltipIcon);
+
+    // Verify tooltip text
+    const tooltipText = await screen.findByText(expectedTooltipText);
+    expect(tooltipText).toBeInTheDocument();
+  });
+
+  it.each([
+    [SHIPMENT_OPTIONS.HHG, 'ID-2'],
+    [SHIPMENT_OPTIONS.NTS, 'ID-3'],
+    [SHIPMENT_OPTIONS.NTSR, 'ID-4'],
+    [SHIPMENT_TYPES.BOAT_HAUL_AWAY, 'ID-5'],
+    [SHIPMENT_TYPES.BOAT_TOW_AWAY, 'ID-6'],
+    [SHIPMENT_OPTIONS.MOBILE_HOME, 'ID-7'],
+  ])('shipment weight tooltip, show is false. %s', async (type, id) => {
+    // Render component
+    const props = { ...defaultProps, showShipmentTooltip: false, shipments: [{ id, shipmentType: type }] };
+    render(<ShipmentList {...props} />);
+
+    // Verify tooltip doesn't exist
+    expect(screen.queryByTestId('tooltip-container')).not.toBeInTheDocument();
+  });
+});
+
 describe('Shipment List being used for billable weight', () => {
   it('renders maximum billable weight, actual billable weight, actual weight and weight allowance with no flags', () => {
     const shipments = [

diff --git a/src/shared/ToolTip/ToolTip.jsx b/src/shared/ToolTip/ToolTip.jsx
@@ -48,6 +48,7 @@ const ToolTip = ({ text, position, icon, color, closeOnLeave, title }) => {
   return (
     <div
       className={styles.tooltipContainer}
+      data-testid="tooltip-container"
       onMouseEnter={() => setIsVisible(true)}
       onMouseLeave={() => closeOnMouseLeave()}
       onClick={() => determineIsVisible()}

diff --git a/src/shared/ToolTip/ToolTip.test.jsx b/src/shared/ToolTip/ToolTip.test.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import ToolTip from './ToolTip';
 
@@ -56,6 +57,7 @@ describe('ToolTip', () => {
     // Assert that the tooltip content is displayed
     expect(tooltipContent.text()).toBe(text);
   });
+
   it('should display tooltip with title when provided', () => {
     const titleText = 'Tooltip Title';
     const bodyText = 'Tooltip Body';
@@ -85,4 +87,13 @@ describe('ToolTip', () => {
     expect(tooltipTitle.exists()).toBe(false);
     expect(tooltipBody.text()).toBe(bodyText);
   });
+
+  it('verify data-testid is present', () => {
+    const text = 'Test Text';
+    render(<ToolTip text={text} icon="circle-question" position="left" />);
+
+    // Verify data-testid is present
+    const tooltipIcon = screen.getByTestId('tooltip-container');
+    expect(tooltipIcon).toBeInTheDocument();
+  });
 });