-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13620 from transcom/B-20653-Mobile-Home-Shipment-…
…Card B 20653 mobile home shipment card
- Loading branch information
Showing
13 changed files
with
319 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,142 @@ | ||
// @ts-check | ||
import { test, expect } from '../../utils/my/customerTest'; | ||
|
||
const multiMoveEnabled = process.env.FEATURE_FLAG_MULTI_MOVE; | ||
|
||
test.describe('Mobile Home shipment', () => { | ||
test.skip(multiMoveEnabled === 'true', 'Skip if MultiMove workflow is enabled.'); | ||
|
||
test('A customer can create a Mobile Home shipment', async ({ page, customerPage }) => { | ||
// Generate a new onboarded user with orders and log in | ||
const move = await customerPage.testHarness.buildMoveWithOrders(); | ||
const userId = move.Orders.ServiceMember.user_id; | ||
await customerPage.signInAsExistingCustomer(userId); | ||
|
||
// Navigate to create a new shipment | ||
await customerPage.waitForPage.home(); | ||
await page.getByTestId('shipment-selection-btn').click(); | ||
await customerPage.waitForPage.aboutShipments(); | ||
await customerPage.navigateForward(); | ||
await customerPage.waitForPage.selectShipmentType(); | ||
|
||
// Create an Mobile Home shipment | ||
await page.getByText('Move a Mobile Home').click(); | ||
await customerPage.navigateForward(); | ||
|
||
// Fill in form to create Mobile Home shipment | ||
await customerPage.waitForPage.mobileHomeShipment(); | ||
await page.getByLabel('Year').fill('2022'); | ||
await page.getByLabel('Make').fill('make'); | ||
await page.getByLabel('Model').fill('model'); | ||
await page.getByTestId('lengthFeet').fill('22'); | ||
await page.getByTestId('widthFeet').fill('22'); | ||
await page.getByTestId('heightFeet').fill('22'); | ||
await page.getByRole('button', { name: 'Continue' }).click(); | ||
|
||
await expect(page.getByTestId('tag')).toContainText('Mobile Home'); | ||
|
||
await expect(page.getByText('Pickup info')).toBeVisible(); | ||
await page.getByLabel('Preferred pickup date').fill('25 Dec 2022'); | ||
await page.getByLabel('Preferred pickup date').blur(); | ||
await page.getByText('Use my current address').click(); | ||
await page.getByLabel('Preferred delivery date').fill('25 Dec 2022'); | ||
await page.getByLabel('Preferred delivery date').blur(); | ||
await page.getByRole('button', { name: 'Save & Continue' }).click(); | ||
await customerPage.waitForPage.reviewShipments(); | ||
}); | ||
}); | ||
|
||
test.describe('(MultiMove) Mobile Home shipment', () => { | ||
test.skip(multiMoveEnabled === 'false', 'Skip if MultiMove workflow is not enabled.'); | ||
|
||
test('A customer can create a Mobile Home shipment', async ({ page, customerPage }) => { | ||
// Generate a new onboarded user with orders and log in | ||
const move = await customerPage.testHarness.buildMoveWithOrders(); | ||
const userId = move.Orders.ServiceMember.user_id; | ||
await customerPage.signInAsExistingCustomer(userId); | ||
|
||
// Navigate from MM Dashboard to Move | ||
await customerPage.navigateFromMMDashboardToMove(move); | ||
|
||
// Navigate to create a new shipment | ||
await customerPage.waitForPage.home(); | ||
await page.getByTestId('shipment-selection-btn').click(); | ||
await customerPage.waitForPage.aboutShipments(); | ||
await customerPage.navigateForward(); | ||
await customerPage.waitForPage.selectShipmentType(); | ||
|
||
// Create an Mobile Home shipment | ||
await page.getByText('Move a mobile home').click(); | ||
await customerPage.navigateForward(); | ||
|
||
// Fill in form to create Mobile Home shipment | ||
await customerPage.waitForPage.mobileHomeShipment(); | ||
await page.getByLabel('Year').fill('2022'); | ||
await page.getByLabel('Make').fill('make'); | ||
await page.getByLabel('Model').fill('model'); | ||
await page.getByTestId('lengthFeet').fill('22'); | ||
await page.getByTestId('widthFeet').fill('22'); | ||
await page.getByTestId('heightFeet').fill('22'); | ||
await page.getByRole('button', { name: 'Continue' }).click(); | ||
|
||
await expect(page.getByTestId('tag')).toContainText('Mobile Home'); | ||
|
||
await expect(page.getByText('Pickup info')).toBeVisible(); | ||
await page.getByLabel('Preferred pickup date').fill('25 Dec 2022'); | ||
await page.getByLabel('Preferred pickup date').blur(); | ||
await page.getByText('Use my current address').click(); | ||
await page.getByLabel('Preferred delivery date').fill('25 Dec 2022'); | ||
await page.getByLabel('Preferred delivery date').blur(); | ||
await page.getByRole('button', { name: 'Save & Continue' }).click(); | ||
await customerPage.waitForPage.reviewShipments(); | ||
}); | ||
|
||
test('Is able to delete a Mobile Home shipment', async ({ page, customerPage }) => { | ||
// Generate a new onboarded user with orders and log in | ||
const move = await customerPage.testHarness.buildMoveWithOrders(); | ||
const userId = move.Orders.ServiceMember.user_id; | ||
await customerPage.signInAsExistingCustomer(userId); | ||
|
||
// Navigate from MM Dashboard to Move | ||
await customerPage.navigateFromMMDashboardToMove(move); | ||
|
||
// Navigate to create a new shipment | ||
await customerPage.waitForPage.home(); | ||
await page.getByTestId('shipment-selection-btn').click(); | ||
await customerPage.waitForPage.aboutShipments(); | ||
await customerPage.navigateForward(); | ||
await customerPage.waitForPage.selectShipmentType(); | ||
|
||
// Create an Mobile Home shipment | ||
await page.getByText('Move a mobile home').click(); | ||
await customerPage.navigateForward(); | ||
|
||
// Fill in form to create Mobile Home shipment | ||
await customerPage.waitForPage.mobileHomeShipment(); | ||
await page.getByLabel('Year').fill('2022'); | ||
await page.getByLabel('Make').fill('make'); | ||
await page.getByLabel('Model').fill('model'); | ||
await page.getByTestId('lengthFeet').fill('22'); | ||
await page.getByTestId('widthFeet').fill('22'); | ||
await page.getByTestId('heightFeet').fill('22'); | ||
await page.getByRole('button', { name: 'Continue' }).click(); | ||
|
||
await expect(page.getByTestId('tag')).toContainText('Mobile Home'); | ||
|
||
await expect(page.getByText('Pickup info')).toBeVisible(); | ||
await page.getByLabel('Preferred pickup date').fill('25 Dec 2022'); | ||
await page.getByLabel('Preferred pickup date').blur(); | ||
await page.getByText('Use my current address').click(); | ||
await page.getByLabel('Preferred delivery date').fill('25 Dec 2022'); | ||
await page.getByLabel('Preferred delivery date').blur(); | ||
await page.getByRole('button', { name: 'Save & Continue' }).click(); | ||
await customerPage.waitForPage.reviewShipments(); | ||
|
||
await expect(page.getByRole('heading', { name: 'Mobile Home 1' })).toBeVisible(); | ||
await page.getByTestId('deleteShipmentButton').click(); | ||
await expect(page.getByRole('heading', { name: 'Delete this?' })).toBeVisible(); | ||
await page.getByText('Yes, Delete').click(); | ||
|
||
await expect(page.getByRole('heading', { name: 'Mobile Home 1' })).not.toBeVisible(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
143 changes: 143 additions & 0 deletions
143
...nents/Customer/Review/ShipmentCard/MobileHomeShipmentCard/MobileHomeshipmentCard.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,143 @@ | ||
import React from 'react'; | ||
import { render, screen } from '@testing-library/react'; | ||
import userEvent from '@testing-library/user-event'; | ||
|
||
import MobileHomeShipmentCard from './MobileHomeShipmentCard'; | ||
|
||
import { SHIPMENT_TYPES } from 'shared/constants'; | ||
|
||
const defaultProps = { | ||
showEditAndDeleteBtn: true, | ||
onEditClick: jest.fn(), | ||
onDeleteClick: jest.fn(), | ||
shipmentNumber: 1, | ||
requestedPickupDate: new Date('01/01/2020').toISOString(), | ||
requestedDeliveryDate: new Date('03/01/2020').toISOString(), | ||
pickupLocation: { | ||
streetAddress1: '17 8th St', | ||
city: 'New York', | ||
state: 'NY', | ||
postalCode: '11111', | ||
}, | ||
destinationLocation: { | ||
streetAddress1: '17 8th St', | ||
city: 'New York', | ||
state: 'NY', | ||
postalCode: '73523', | ||
}, | ||
releasingAgent: { | ||
firstName: 'Super', | ||
lastName: 'Mario', | ||
phone: '(555) 555-5555', | ||
email: '[email protected]', | ||
}, | ||
destinationZIP: '73523', | ||
receivingAgent: { | ||
firstName: 'Princess', | ||
lastName: 'Peach', | ||
phone: '(999) 999-9999', | ||
email: '[email protected]', | ||
}, | ||
remarks: | ||
'This is 500 characters of customer remarks right here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', | ||
shipment: { | ||
moveTaskOrderID: 'testMove123', | ||
id: '20fdbf58-879e-4692-b3a6-8a71f6dcfeaa', | ||
shipmentLocator: 'testMove123-01', | ||
shipmentType: SHIPMENT_TYPES.MOBILE_HOME, | ||
mobileHomeShipment: { | ||
year: 2020, | ||
make: 'Test Make', | ||
model: 'Test Model', | ||
lengthInInches: 240, | ||
widthInInches: 120, | ||
heightInInches: 72, | ||
}, | ||
}, | ||
}; | ||
|
||
describe('MobileHomeShipmentCard component', () => { | ||
it('renders component with all fields', () => { | ||
render(<MobileHomeShipmentCard {...defaultProps} />); | ||
|
||
expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Mobile Home 1'); | ||
expect(screen.getByText(/^#testMove123-01$/, { selector: 'p' })).toBeInTheDocument(); | ||
|
||
expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument(); | ||
expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument(); | ||
|
||
const descriptionDefinitions = screen.getAllByRole('definition'); | ||
|
||
const expectedRows = [ | ||
['Requested pickup date', '01 Jan 2020'], | ||
['Pickup location', '17 8th St New York, NY 11111'], | ||
['Releasing agent', 'Super Mario (555) 555-5555 [email protected]'], | ||
['Requested delivery date', '01 Mar 2020'], | ||
['Destination', '17 8th St New York, NY 73523'], | ||
['Receiving agent', 'Princess Peach (999) 999-9999 [email protected]'], | ||
['Mobile Home year', '2020'], | ||
['Mobile Home make', 'Test Make'], | ||
['Mobile Home model', 'Test Model'], | ||
['Dimensions', `20' L x 10' W x 6' H`], | ||
[ | ||
'Remarks', | ||
'This is 500 characters of customer remarks right here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', | ||
], | ||
]; | ||
|
||
expect(descriptionDefinitions.length).toBe(expectedRows.length); | ||
|
||
expectedRows.forEach((expectedRow, index) => { | ||
// dt (definition terms) are not accessible elements that can be found with getByRole although | ||
// testing library claims this is fixed we need to find the node package that is out of date | ||
expect(descriptionDefinitions[index].previousElementSibling).toHaveTextContent(expectedRow[0]); | ||
expect(descriptionDefinitions[index]).toHaveTextContent(expectedRow[1]); | ||
}); | ||
}); | ||
|
||
it('omits the edit button when showEditAndDeleteBtn prop is false', () => { | ||
render(<MobileHomeShipmentCard {...defaultProps} showEditAndDeleteBtn={false} />); | ||
|
||
expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument(); | ||
expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument(); | ||
}); | ||
|
||
it('calls onEditClick when edit button is pressed', async () => { | ||
render(<MobileHomeShipmentCard {...defaultProps} />); | ||
const editBtn = screen.getByRole('button', { name: 'Edit' }); | ||
await userEvent.click(editBtn); | ||
expect(defaultProps.onEditClick).toHaveBeenCalledTimes(1); | ||
}); | ||
|
||
it('calls onDeleteClick when delete button is pressed', async () => { | ||
render(<MobileHomeShipmentCard {...defaultProps} />); | ||
const deleteBtn = screen.getByRole('button', { name: 'Delete' }); | ||
await userEvent.click(deleteBtn); | ||
expect(defaultProps.onDeleteClick).toHaveBeenCalledTimes(1); | ||
}); | ||
|
||
it('renders incomplete shipment label and tooltip when shipment is incomplete', async () => { | ||
const incompleteShipmentProps = { | ||
...defaultProps, | ||
shipment: { | ||
...defaultProps.shipment, | ||
requestedPickupDate: '', | ||
mobileHomeShipment: defaultProps.shipment.mobileHomeShipment, | ||
}, | ||
onIncompleteClick: jest.fn(), | ||
}; | ||
|
||
render(<MobileHomeShipmentCard {...incompleteShipmentProps} />); | ||
|
||
expect(screen.getByText('Incomplete')).toBeInTheDocument(); | ||
expect(screen.getByTitle('Help about incomplete shipment')).toBeInTheDocument(); | ||
|
||
await userEvent.click(screen.getByTitle('Help about incomplete shipment')); | ||
|
||
expect(incompleteShipmentProps.onIncompleteClick).toHaveBeenCalledWith( | ||
'Mobile Home 1', | ||
'testMove123-01', | ||
SHIPMENT_TYPES.MOBILE_HOME, | ||
); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.