-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Manifest type option availability (#674)
* move Manifest Type Selection to separate component * full electronic option is disabled is the generator on the manifest cannot e-Sign and Hybrid is now the default
- Loading branch information
1 parent
697b3c4
commit fc2ae37
Showing
5 changed files
with
126 additions
and
33 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
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
65 changes: 65 additions & 0 deletions
65
client/src/components/Manifest/GeneralInfo/ManifestTypeField.spec.tsx
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,65 @@ | ||
| import '@testing-library/jest-dom'; | ||
| import React from 'react'; | ||
| import { cleanup, renderWithProviders, screen } from 'test-utils'; | ||
| import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest'; | ||
| import { setupServer } from 'msw/node'; | ||
| import { userApiMocks } from 'test-utils/mock'; | ||
| import { ManifestTypeSelect } from 'components/Manifest/GeneralInfo/ManifestTypeSelect'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { createMockHandler } from 'test-utils/fixtures'; | ||
|
|
||
| const server = setupServer(...userApiMocks); | ||
| afterEach(() => cleanup()); | ||
| beforeAll(() => server.listen()); | ||
| afterAll(() => server.close()); // Disable API mocking after the tests are done. | ||
|
|
||
| interface TestComponentProps { | ||
| isDraft?: boolean; | ||
| readOnly?: boolean; | ||
| } | ||
|
|
||
| const TestComponent = ({ isDraft, readOnly }: TestComponentProps) => { | ||
| const isDraftVal = isDraft !== undefined ? isDraft : true; | ||
| const readOnlyVal = readOnly !== undefined ? readOnly : false; | ||
| return ( | ||
| <> | ||
| <ManifestTypeSelect isDraft={isDraftVal} readOnly={readOnlyVal} /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| describe('Manifest Type Field', () => { | ||
| test('renders', () => { | ||
| renderWithProviders(<TestComponent isDraft={true} readOnly={false} />); | ||
| expect(screen.getByLabelText(/Type/i)).toBeInTheDocument(); | ||
| }); | ||
| test('hybrid is default option', () => { | ||
| renderWithProviders(<TestComponent isDraft={true} readOnly={false} />); | ||
| expect(screen.getByText(/Hybrid/i)).toBeInTheDocument(); | ||
| }); | ||
| test('Full Electronic is disabled if no generator selected', async () => { | ||
| renderWithProviders(<TestComponent isDraft={true} readOnly={false} />); | ||
| await userEvent.click(screen.getByLabelText(/Type/i)); | ||
| expect(screen.getByRole('option', { name: 'Electronic' })).toHaveAttribute( | ||
| 'aria-disabled', | ||
| 'true' | ||
| ); | ||
| }); | ||
| test('Full Electronic is enabled if generator can e-Sign', async () => { | ||
| renderWithProviders(<TestComponent isDraft={true} readOnly={false} />, { | ||
| useFormProps: { | ||
| values: { | ||
| generator: createMockHandler({ | ||
| canEsign: true, | ||
| siteType: 'Generator', | ||
| }), | ||
| }, | ||
| }, | ||
| }); | ||
| await userEvent.click(screen.getByLabelText(/Type/i)); | ||
| expect(screen.getByRole('option', { name: 'Electronic' })).toHaveAttribute( | ||
| 'aria-disabled', | ||
| 'false' | ||
| ); | ||
| }); | ||
| }); |
54 changes: 54 additions & 0 deletions
54
client/src/components/Manifest/GeneralInfo/ManifestTypeSelect.tsx
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,54 @@ | ||
| import { Manifest, SubmissionType } from 'components/Manifest/manifestSchema'; | ||
| import { HtForm } from 'components/UI'; | ||
| import React from 'react'; | ||
| import Select from 'react-select'; | ||
| import { useFormContext } from 'react-hook-form'; | ||
|
|
||
| const submissionTypeOptions: Array<{ value: SubmissionType; label: string }> = [ | ||
| { value: 'Hybrid', label: 'Hybrid' }, | ||
| { value: 'FullElectronic', label: 'Electronic' }, | ||
| { value: 'DataImage5Copy', label: 'Data + Image' }, | ||
| { value: 'Image', label: 'Image Only' }, | ||
| ]; | ||
|
|
||
| const DEFAULT_SUBMISSION_TYPE = submissionTypeOptions[0]; | ||
|
|
||
| /** uniform hazardous waste manifest type field. */ | ||
| export function ManifestTypeSelect({ | ||
| readOnly, | ||
| isDraft, | ||
| }: { | ||
| readOnly?: boolean; | ||
| isDraft?: boolean; | ||
| }) { | ||
| const manifestForm = useFormContext<Manifest>(); | ||
| const generatorCanESign = manifestForm.getValues('generator.canEsign'); | ||
| return ( | ||
| <HtForm.Group> | ||
| <HtForm.Label htmlFor="submissionType" className="mb-0"> | ||
| Type | ||
| </HtForm.Label> | ||
| <Select | ||
| id="submissionType" | ||
| isDisabled={readOnly || !isDraft} | ||
| aria-label="submissionType" | ||
| {...manifestForm.register('submissionType')} | ||
| options={submissionTypeOptions} | ||
| getOptionValue={(option) => option.value} | ||
| defaultValue={DEFAULT_SUBMISSION_TYPE} | ||
| classNames={{ | ||
| control: () => 'form-select py-0 rounded-3', | ||
| }} | ||
| components={{ IndicatorSeparator: () => null, DropdownIndicator: () => null }} | ||
| onChange={(option) => { | ||
| if (option) manifestForm.setValue('submissionType', option.value); | ||
| }} | ||
| filterOption={(option) => | ||
| option.label.toLowerCase().includes('electronic') || | ||
| option.label.toLowerCase().includes('hybrid') | ||
| } | ||
| isOptionDisabled={(option) => option.value === 'FullElectronic' && !generatorCanESign} | ||
| /> | ||
| </HtForm.Group> | ||
| ); | ||
| } |