diff --git a/src/components/ShipmentList/ShipmentList.jsx b/src/components/ShipmentList/ShipmentList.jsx
index f8e2393bada..d5692e8e406 100644
--- 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}`}
{' '}
- {(shipment.shipmentType === SHIPMENT_OPTIONS.HHG ||
- shipment.shipmentType === SHIPMENT_OPTIONS.NTS ||
- isBoat) && (
- <>
- {formatWeight(shipment.primeEstimatedWeight * WEIGHT_ADJUSTMENT)}
-
- >
- )}
- {shipment.shipmentType === SHIPMENT_OPTIONS.NTSR && (
+ {showShipmentTooltip &&
+ (shipment.shipmentType === SHIPMENT_OPTIONS.HHG ||
+ shipment.shipmentType === SHIPMENT_OPTIONS.NTS ||
+ isBoat ||
+ isMobileHome) && (
+ <>
+ {formatWeight(shipment.primeEstimatedWeight * WEIGHT_ADJUSTMENT)}
+
+ >
+ )}
+ {showShipmentTooltip && shipment.shipmentType === SHIPMENT_OPTIONS.NTSR && (
<>
{formatWeight(shipment.ntsRecordedWeight * WEIGHT_ADJUSTMENT)}
@@ -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
index 6e46c06d6d2..5bb673bc46f 100644
--- 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();
+
+ // 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();
+
+ // 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
index 4ec66b3ecd4..4932bb2fff8 100644
--- 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 (
setIsVisible(true)}
onMouseLeave={() => closeOnMouseLeave()}
onClick={() => determineIsVisible()}
diff --git a/src/shared/ToolTip/ToolTip.test.jsx b/src/shared/ToolTip/ToolTip.test.jsx
index 6ff1df1574b..d12026561cf 100644
--- 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();
+
+ // Verify data-testid is present
+ const tooltipIcon = screen.getByTestId('tooltip-container');
+ expect(tooltipIcon).toBeInTheDocument();
+ });
});