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(); + }); });