Skip to content

Commit

Permalink
Merge pull request #13923 from transcom/B-21077-Move-Shipment-Button-…
Browse files Browse the repository at this point in the history 
…INT-KICKBACK

B 21077 move shipment button int kickback
  • Loading branch information
@deandreJones
deandreJones authored Oct 16, 2024
2 parents f9cf995 + c5f141b commit 0724a12
Show file tree
Hide file tree
Showing 8 changed files with 319 additions and 147 deletions.
4 changes: 2 additions & 2 deletions src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,8 +271,8 @@ const MobileHomeShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
Example
<ul>
<li>
Is there additional information you feel is pertinent to the processing of your mobile home
shipment?(e.g., &lsquo;wrecker service requested&rsquo; and &lsquo;crane service needed&rsquo;).
Dimensions of the mobile home on the trailer are significantly different than one would expect
given their individual dimensions
</li>
</ul>
</Callout>
Expand Down
56 changes: 29 additions & 27 deletions src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,33 +87,35 @@ const ApprovedRequestedShipments = ({

return (
<div className={styles.RequestedShipments} data-testid="requested-shipments">
<h2>Approved Shipments</h2>
<div className={styles.dropdownButton}>
{!isMoveLocked && (
<Restricted to={permissionTypes.createTxoShipment}>
<ButtonDropdown
ariaLabel="Add a new shipment"
data-testid="addShipmentButton"
onChange={handleButtonDropdownChange}
>
<option value="" label="Add a new shipment">
Add a new shipment
</option>
<option data-testid="hhgOption" value={SHIPMENT_OPTIONS_URL.HHG}>
HHG
</option>
<option value={SHIPMENT_OPTIONS_URL.PPM}>PPM</option>
<option value={SHIPMENT_OPTIONS_URL.NTS}>NTS</option>
<option value={SHIPMENT_OPTIONS_URL.NTSrelease}>NTS-release</option>
<option data-testid="boatOption" value={SHIPMENT_OPTIONS_URL.BOAT}>
Boat
</option>
<option data-testid="mobileHomeOption" value={SHIPMENT_OPTIONS_URL.MOBILE_HOME}>
Mobile Home
</option>
</ButtonDropdown>
</Restricted>
)}
<div className={styles.sectionHeader}>
<h2>Approved Shipments</h2>
<div className={styles.buttonDropdown}>
{!isMoveLocked && (
<Restricted to={permissionTypes.createTxoShipment}>
<ButtonDropdown
ariaLabel="Add a new shipment"
data-testid="addShipmentButton"
onChange={handleButtonDropdownChange}
>
<option value="" label="Add a new shipment">
Add a new shipment
</option>
<option data-testid="hhgOption" value={SHIPMENT_OPTIONS_URL.HHG}>
HHG
</option>
<option value={SHIPMENT_OPTIONS_URL.PPM}>PPM</option>
<option value={SHIPMENT_OPTIONS_URL.NTS}>NTS</option>
<option value={SHIPMENT_OPTIONS_URL.NTSrelease}>NTS-release</option>
<option data-testid="boatOption" value={SHIPMENT_OPTIONS_URL.BOAT}>
Boat
</option>
<option data-testid="mobileHomeOption" value={SHIPMENT_OPTIONS_URL.MOBILE_HOME}>
Mobile Home
</option>
</ButtonDropdown>
</Restricted>
)}
</div>
</div>

<div className={shipmentCardsStyles.shipmentCards}>
Expand Down
17 changes: 13 additions & 4 deletions src/components/Office/RequestedShipments/RequestedShipments.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,19 @@
@include u-padding-x(4);
@include u-padding-y(2);

.sectionHeader {
display: flex;
justify-content: center;
align-items: center;
h2 {
margin-right: auto;
}

.buttonDropdown {
margin-left: auto
}
}

h4 {
@include u-margin(0);
font-weight: bold;
Expand Down Expand Up @@ -55,7 +68,3 @@
.serviceCounselingCompleted {
@include u-margin-top(3);
}

.dropdownButton {
float: right;
}
56 changes: 29 additions & 27 deletions src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,33 +223,35 @@ const SubmittedRequestedShipments = ({
</div>

<form onSubmit={formik.handleSubmit}>
<h2>Requested shipments</h2>
<div className={styles.dropdownButton}>
{!isMoveLocked && (
<Restricted to={permissionTypes.createTxoShipment}>
<ButtonDropdown
ariaLabel="Add a new shipment"
data-testid="addShipmentButton"
onChange={handleButtonDropdownChange}
>
<option value="" label="Add a new shipment">
Add a new shipment
</option>
<option data-testid="hhgOption" value={SHIPMENT_OPTIONS_URL.HHG}>
HHG
</option>
<option value={SHIPMENT_OPTIONS_URL.PPM}>PPM</option>
<option value={SHIPMENT_OPTIONS_URL.NTS}>NTS</option>
<option value={SHIPMENT_OPTIONS_URL.NTSrelease}>NTS-release</option>
<option data-testid="boatOption" value={SHIPMENT_OPTIONS_URL.BOAT}>
Boat
</option>
<option data-testid="mobileHomeOption" value={SHIPMENT_OPTIONS_URL.MOBILE_HOME}>
Mobile Home
</option>
</ButtonDropdown>
</Restricted>
)}
<div className={styles.sectionHeader}>
<h2>Requested shipments</h2>
<div className={styles.buttonDropdown}>
{!isMoveLocked && (
<Restricted to={permissionTypes.createTxoShipment}>
<ButtonDropdown
ariaLabel="Add a new shipment"
data-testid="addShipmentButton"
onChange={handleButtonDropdownChange}
>
<option value="" label="Add a new shipment">
Add a new shipment
</option>
<option data-testid="hhgOption" value={SHIPMENT_OPTIONS_URL.HHG}>
HHG
</option>
<option value={SHIPMENT_OPTIONS_URL.PPM}>PPM</option>
<option value={SHIPMENT_OPTIONS_URL.NTS}>NTS</option>
<option value={SHIPMENT_OPTIONS_URL.NTSrelease}>NTS-release</option>
<option data-testid="boatOption" value={SHIPMENT_OPTIONS_URL.BOAT}>
Boat
</option>
<option data-testid="mobileHomeOption" value={SHIPMENT_OPTIONS_URL.MOBILE_HOME}>
Mobile Home
</option>
</ButtonDropdown>
</Restricted>
)}
</div>
</div>
<div className={shipmentCardsStyles.shipmentCards}>
{mtoShipments &&
Expand Down
145 changes: 145 additions & 0 deletions src/components/PrimeUI/Shipment/Shipment.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -585,3 +585,148 @@ describe('PPM shipments are handled', () => {
expect(deleteShipmentButton).not.toBeInTheDocument();
});
});

const boatShipment = {
actualPickupDate: null,
approvedDate: null,
counselorRemarks: 'These are counselor remarks for a PPM.',
createdAt: '2022-07-01T13:41:33.261Z',
destinationAddress: {
city: null,
postalCode: null,
state: null,
streetAddress1: null,
},
eTag: 'MjAyMi0wNy0wMVQxNDoyMzoxOS43MzgzODla',
firstAvailableDeliveryDate: null,
id: '1b695b60-c3ed-401b-b2e3-808d095eb8cc',
moveTaskOrderID: '7024c8c5-52ca-4639-bf69-dd8238308c98',
pickupAddress: {
city: null,
postalCode: null,
state: null,
streetAddress1: null,
},
boatShipment: {
type: 'HAUL_AWAY',
year: '2022',
make: 'Yamaha',
model: '242X',
lengthInInches: 288, // 24 feet
widthInInches: 102, // 8 feet 6 inches
heightInInches: 84, // 7 feet
hasTrailer: true,
isRoadworthy: true,
},
primeEstimatedWeightRecordedDate: null,
requestedPickupDate: null,
requiredDeliveryDate: null,
scheduledPickupDate: null,
secondaryDeliveryAddress: {
city: null,
postalCode: null,
state: null,
streetAddress1: null,
},
secondaryPickupAddress: {
city: null,
postalCode: null,
state: null,
streetAddress1: null,
},
shipmentType: 'PPM',
status: 'APPROVED',
updatedAt: '2022-07-01T14:23:19.738Z',
mtoServiceItems: [],
};

const boatShipmentWaitingOnCustomer = {
...boatShipment,
boatShipment: {
...boatShipment.ppmShipment,
status: 'WAITING_ON_CUSTOMER',
},
};

const boatShipmentMissingObject = {
...boatShipment,
boatShipment: null,
};

const boatShipmentFields = boatShipment.boatShipment;

describe('Boat Shipments are handled', () => {
it('Boat Shipment fields header is present', () => {
render(
<MockProviders>
<Shipment shipment={boatShipment} moveId={moveId} />
</MockProviders>,
);

const ppmFieldsHeader = screen.getByRole('heading', { name: 'Boat-Shipment Specific Fields', level: 4 });
expect(ppmFieldsHeader).toBeInTheDocument();
});

it.each([
['Shipment Type:', boatShipmentFields.type],
['Year:', boatShipmentFields.year],
['Make:', boatShipmentFields.make],
['Model:', boatShipmentFields.model],
['Length:', `Length: ${boatShipmentFields.lengthInInches}`],
['Width:', `Width: ${boatShipmentFields.widthInInches}`],
['Height:', `Height: ${boatShipmentFields.heightInInches}`],
['Has Trailer:', 'Yes'],
['Trailer is Roadworthy:', 'Yes'],
])('Boat shipment field %s with value %s is present', async (boatShipmentField, boatShipmentFieldValue) => {
render(
<MockProviders>
<Shipment shipment={boatShipment} moveId={moveId} />
</MockProviders>,
);
const dimensionValues = ['Length:', 'Width:', 'Height:'];
const field = screen.getByText(boatShipmentField, { exact: false });
await expect(field).toBeInTheDocument();

// Don't skip to nextElementSibling if getting a dimension value (different HTML markup)
if (dimensionValues.includes(boatShipmentField)) await expect(field.textContent).toBe(boatShipmentFieldValue);
else await expect(field.nextElementSibling.textContent).toBe(boatShipmentFieldValue);
});

it("Trailer field does not show up if Boat Shipment doesn't have a trailer", () => {
const boatShipmentWithoutTrailer = boatShipment;
boatShipmentWithoutTrailer.boatShipment.hasTrailer = false;
render(
<MockProviders>
<Shipment shipment={boatShipment} moveId={moveId} />
</MockProviders>,
);

const boatTrailerField = screen.getByText('Has Trailer:');
expect(boatTrailerField).toBeInTheDocument();
expect(boatTrailerField.nextElementSibling.textContent).toBe('No');

expect(screen.queryByText('Trailer is Roadworthy:')).not.toBeInTheDocument();
});

it('Boat status does not allow deletion', () => {
render(
<MockProviders>
<Shipment shipment={boatShipmentWaitingOnCustomer} moveId={moveId} />
</MockProviders>,
);

const deleteShipmentButton = screen.queryByText(/Delete Shipment/, { selector: 'button' });
expect(deleteShipmentButton).not.toBeInTheDocument();
});

it('Boat shipment is missing boatShipment object', () => {
render(
<MockProviders>
<Shipment shipment={boatShipmentMissingObject} moveId={moveId} />
</MockProviders>,
);

const deleteShipmentButton = screen.queryByText(/Delete Shipment/, { selector: 'button' });
expect(deleteShipmentButton).not.toBeInTheDocument();
});
});
61 changes: 32 additions & 29 deletions src/pages/PrimeUI/Shipment/PrimeUIShipmentCreate.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,37 +81,40 @@ describe('successful submission of form', () => {
});
});

describe('Create PPM', () => {
it('test destination address street 1 is OPTIONAL', async () => {
createPrimeMTOShipmentV3.mockReturnValue({});
describe('Error when submitting', () => {
it('Correctly displays the unexpected server error window when an unusuable api error response is returned', async () => {
createPrimeMTOShipmentV3.mockRejectedValue('malformed api error response');
render(mockedComponent);

waitFor(async () => {
await userEvent.selectOptions(screen.getByLabelText('Shipment type'), 'HHG');

const saveButton = await screen.getByRole('button', { name: 'Save' });

expect(saveButton).not.toBeDisabled();
await userEvent.click(saveButton);
expect(screen.getByText('Unexpected error')).toBeInTheDocument();
expect(
screen.getByText('An unknown error has occurred, please check the address values used'),
).toBeInTheDocument();
});
});

it('Correctly displays the invalid fields in the error window when an api error response is returned', async () => {
createPrimeMTOShipmentV3.mockRejectedValue({ body: { title: 'Error', invalidFields: { someField: true } } });
render(mockedComponent);

await userEvent.selectOptions(screen.getByLabelText('Shipment type'), 'PPM');

// Start controlled test case to verify everything is working.
let input = await document.querySelector('input[name="ppmShipment.pickupAddress.streetAddress1"]');
expect(input).toBeInTheDocument();
// enter required street 1 for pickup
await userEvent.type(input, '123 Street');
// clear
await userEvent.clear(input);
await userEvent.tab();
// verify Required alert is displayed
const requiredAlerts = screen.getByRole('alert');
expect(requiredAlerts).toHaveTextContent('Required');
// make valid again to clear alert
await userEvent.type(input, '123 Street');

// Verify destination address street 1 is OPTIONAL.
input = await document.querySelector('input[name="ppmShipment.destinationAddress.streetAddress1"]');
expect(input).toBeInTheDocument();
// enter something
await userEvent.type(input, '123 Street');
// clear
await userEvent.clear(input);
await userEvent.tab();
// verify no validation is displayed after clearing destination address street 1 because it's OPTIONAL
expect(screen.queryByRole('alert')).not.toBeInTheDocument();
waitFor(async () => {
await userEvent.selectOptions(screen.getByLabelText('Shipment type'), 'HHG');

const saveButton = await screen.getByRole('button', { name: 'Save' });

expect(saveButton).not.toBeDisabled();
await userEvent.click(saveButton);
expect(screen.getByText('Prime API: Error')).toBeInTheDocument();
expect(
screen.getByText('An unknown error has occurred, please check the address values used'),
).toBeInTheDocument();
});
});
});
6 changes: 6 additions & 0 deletions src/pages/PrimeUI/Shipment/PrimeUIShipmentCreateForm.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,5 +486,11 @@ describe('PrimeUIShipmentCreateForm', () => {

// now the text input should be visible
expect(await screen.findByTestId('divertedFromShipmentIdInput')).toBeInTheDocument();

// Uncheck
await userEvent.click(diversionCheckbox);

// now the text input should be invisible
expect(await screen.queryByTestId('divertedFromShipmentIdInput')).toBeNull();
});
});
Loading

0 comments on commit 0724a12

Please sign in to comment.