Jmax/lg 13875 rename documentstep in doc auth (#11092)

* Renamed component DocumentsStep -> DocumentsAndSelfieStep Renamed files to match new component name. Because policy, the rename meant moving from a .jsx file to a .tsx file, so there was some Typescript cleanup to do; it amounted to adding dummy arguments to component rendering in the specs. changelog: Upcoming Features,biometric verification,Renamed `DocumentsStep` to `DocumentsAndSelfieStep`
18F · Aug 19, 2024 · e101d33 · e101d33
1 parent 0923f95
commit e101d33
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 22 deletions.
diff --git a/app/javascript/packages/document-capture/components/document-capture-review-issues.tsx b/app/javascript/packages/document-capture/components/document-capture-review-issues.tsx
@@ -11,7 +11,7 @@ import {
   DocumentCaptureSubheaderOne,
   SelfieCaptureWithHeader,
   DocumentFrontAndBackCapture,
-} from './documents-step';
+} from './documents-and-selfie-step';
 import type { ReviewIssuesStepValue } from './review-issues-step';
 
 interface DocumentCaptureReviewIssuesProps extends FormStepComponentProps<ReviewIssuesStepValue> {

diff --git a/app/javascript/packages/document-capture/components/document-capture.tsx b/app/javascript/packages/document-capture/components/document-capture.tsx
@@ -7,7 +7,7 @@ import { useDidUpdateEffect } from '@18f/identity-react-hooks';
 import type { FormStep } from '@18f/identity-form-steps';
 import { getConfigValue } from '@18f/identity-config';
 import { UploadFormEntriesError } from '../services/upload';
-import DocumentsStep from './documents-step';
+import DocumentsAndSelfieStep from './documents-and-selfie-step';
 import InPersonPrepareStep from './in-person-prepare-step';
 import InPersonLocationPostOfficeSearchStep from './in-person-location-post-office-search-step';
 import InPersonLocationFullAddressEntryPostOfficeSearchStep from './in-person-location-full-address-entry-post-office-search-step';
@@ -53,7 +53,7 @@ function DocumentCapture({ onStepChange = () => {} }: DocumentCaptureProps) {
   // Define different states to be used in human readable array declaration
   const documentFormStep: FormStep = {
     name: 'documents',
-    form: DocumentsStep,
+    form: DocumentsAndSelfieStep,
     title: t('doc_auth.headings.document_capture'),
   };
   const reviewFormStep: FormStep = {

diff --git a/...ent-capture/components/documents-step.tsx → .../components/documents-and-selfie-step.tsx b/...ent-capture/components/documents-step.tsx → .../components/documents-and-selfie-step.tsx
@@ -84,7 +84,7 @@ export function DocumentFrontAndBackCapture({
 
 type ImageValue = Blob | string | null | undefined;
 
-interface DocumentsStepValue {
+interface DocumentsAndSelfieStepValue {
   front: ImageValue;
   back: ImageValue;
   selfie: ImageValue;
@@ -93,17 +93,17 @@ interface DocumentsStepValue {
 }
 
 type DefaultSideProps = Pick<
-  FormStepComponentProps<DocumentsStepValue>,
+  FormStepComponentProps<DocumentsAndSelfieStepValue>,
   'registerField' | 'onChange' | 'errors' | 'onError'
 >;
 
-function DocumentsStep({
+export default function DocumentsAndSelfieStep({
   value = {},
   onChange = () => {},
   errors = [],
   onError = () => {},
   registerField = () => undefined,
-}: FormStepComponentProps<DocumentsStepValue>) {
+}: FormStepComponentProps<DocumentsAndSelfieStepValue>) {
   const { t } = useI18n();
   const { isMobile } = useContext(DeviceContext);
   const { isLastStep } = useContext(FormStepsContext);
@@ -145,5 +145,3 @@ function DocumentsStep({
     </>
   );
 }
-
-export default DocumentsStep;
diff --git a/scripts/enforce-typescript-files.mjs b/scripts/enforce-typescript-files.mjs
@@ -47,7 +47,6 @@ const LEGACY_FILE_EXCEPTIONS = [
   'spec/javascript/packages/document-capture/components/document-capture-review-issues-spec.jsx',
   'spec/javascript/packages/document-capture/components/document-capture-spec.jsx',
   'spec/javascript/packages/document-capture/components/document-capture-warning-spec.jsx',
-  'spec/javascript/packages/document-capture/components/documents-step-spec.jsx',
   'spec/javascript/packages/document-capture/components/file-image-spec.jsx',
   'spec/javascript/packages/document-capture/components/file-input-spec.jsx',
   'spec/javascript/packages/document-capture/components/review-issues-step-spec.jsx',

diff --git a/...apture/components/documents-step-spec.jsx → ...onents/documents-and-selfie-step-spec.tsx b/...apture/components/documents-step-spec.jsx → ...onents/documents-and-selfie-step-spec.tsx
@@ -9,14 +9,24 @@ import {
   FailedCaptureAttemptsContextProvider,
   SelfieCaptureContext,
 } from '@18f/identity-document-capture';
-import DocumentsStep from '@18f/identity-document-capture/components/documents-step';
+import DocumentsAndSelfieStep from '@18f/identity-document-capture/components/documents-and-selfie-step';
 import { composeComponents } from '@18f/identity-compose-components';
 import { render } from '../../../support/document-capture';
 import { getFixtureFile } from '../../../support/file';
 
-describe('document-capture/components/documents-step', () => {
+describe('document-capture/components/documents-and-selfie-step', () => {
   it('renders with only front and back inputs by default', () => {
-    const { getByLabelText, queryByLabelText } = render(<DocumentsStep />);
+    const { getByLabelText, queryByLabelText } = render(
+      <DocumentsAndSelfieStep
+        value={{}}
+        onChange={() => undefined}
+        errors={[]}
+        onError={() => undefined}
+        registerField={() => undefined}
+        unknownFieldErrors={[]}
+        toPreviousStep={() => undefined}
+      />,
+    );
 
     const front = getByLabelText('doc_auth.headings.document_capture_front');
     const back = getByLabelText('doc_auth.headings.document_capture_back');
@@ -33,8 +43,18 @@ describe('document-capture/components/documents-step', () => {
       <FailedCaptureAttemptsContextProvider
         maxCaptureAttemptsBeforeNativeCamera={3}
         maxSubmissionAttemptsBeforeNativeCamera={3}
+        failedFingerprints={{ front: [], back: [] }}
       >
-        <DocumentsStep onChange={onChange} />,
+        <DocumentsAndSelfieStep
+          value={{}}
+          onChange={onChange}
+          errors={[]}
+          onError={() => undefined}
+          registerField={() => undefined}
+          unknownFieldErrors={[]}
+          toPreviousStep={() => undefined}
+        />
+        ,
       </FailedCaptureAttemptsContextProvider>,
     );
     const file = await getFixtureFile('doc_auth_images/id-back.jpg');
@@ -52,22 +72,48 @@ describe('document-capture/components/documents-step', () => {
   it('renders device-specific instructions', () => {
     let { getByText } = render(
       <DeviceContext.Provider value={{ isMobile: true }}>
-        <DocumentsStep />
+        <DocumentsAndSelfieStep
+          value={{}}
+          onChange={() => undefined}
+          errors={[]}
+          onError={() => undefined}
+          registerField={() => undefined}
+          unknownFieldErrors={[]}
+          toPreviousStep={() => undefined}
+        />
       </DeviceContext.Provider>,
     );
 
     expect(() => getByText('doc_auth.tips.document_capture_id_text4')).to.throw();
 
-    getByText = render(<DocumentsStep />).getByText;
+    getByText = render(
+      <DocumentsAndSelfieStep
+        value={{}}
+        onChange={() => undefined}
+        errors={[]}
+        onError={() => undefined}
+        registerField={() => undefined}
+        unknownFieldErrors={[]}
+        toPreviousStep={() => undefined}
+      />,
+    ).getByText;
 
     expect(() => getByText('doc_auth.tips.document_capture_id_text4')).not.to.throw();
   });
 
   it('renders the hybrid flow warning if the flow is hybrid', () => {
     const { getByText } = render(
       <DeviceContext.Provider value={{ isMobile: true }}>
-        <UploadContextProvider flowPath="hybrid">
-          <DocumentsStep />
+        <UploadContextProvider flowPath="hybrid" endpoint="unused">
+          <DocumentsAndSelfieStep
+            value={{}}
+            onChange={() => undefined}
+            errors={[]}
+            onError={() => undefined}
+            registerField={() => undefined}
+            unknownFieldErrors={[]}
+            toPreviousStep={() => undefined}
+          />
         </UploadContextProvider>
       </DeviceContext.Provider>,
     );
@@ -79,8 +125,16 @@ describe('document-capture/components/documents-step', () => {
   it('does not render the hybrid flow warning if the flow is standard (default)', () => {
     const { queryByText } = render(
       <DeviceContext.Provider value={{ isMobile: true }}>
-        <UploadContextProvider flowPath="standard">
-          <DocumentsStep />
+        <UploadContextProvider flowPath="standard" endpoint="unused">
+          <DocumentsAndSelfieStep
+            value={{}}
+            onChange={() => undefined}
+            errors={[]}
+            onError={() => undefined}
+            registerField={() => undefined}
+            unknownFieldErrors={[]}
+            toPreviousStep={() => undefined}
+          />
         </UploadContextProvider>
       </DeviceContext.Provider>,
     );
@@ -100,7 +154,7 @@ describe('document-capture/components/documents-step', () => {
             },
           },
         ],
-        [DocumentsStep],
+        [DocumentsAndSelfieStep],
       );
       const { getAllByRole, getByText, getByRole, getByLabelText, queryByLabelText } = render(
         <App />,
@@ -150,7 +204,7 @@ describe('document-capture/components/documents-step', () => {
           },
         },
       ],
-      [DocumentsStep],
+      [DocumentsAndSelfieStep],
     );
     const { queryByRole, getByRole, getByLabelText } = render(<App />);