[TextInput] Add a default max length based on input type (#988)

Added overridable default max length to inputs across the application.
This consisted of creating a wrapper component for accomplishing this.
Additionally, added/updated e2e tests to verify the fuinctionality.

## Changes

- src
  - components
- TextInput.tsx: Added this to work as a component wrapper for the
design-system TextInput component. This way the character limit defaults
can be enforced anywhere this component is used.
- InputEntry.tsx: Updated this to use the new TextInput wrapper and pass
relevant required fails.
  - pages
    - PointOfContact
- index.tsx: Added relevant character limits that were different than
the default
    - ProfileForm
      - CreateProfileForm
- AddFinancialInstitution.tsx: Added relevant character limits that were
different than the default
      - Step1Form
- Step1FormInfoFieldGroup.tsx: Removed unnecessary character limits
since there is now a default
    - types
- formTypes.ts: Updated default character limits to new variable name
    - utils
- constants.ts: Updated and created input character limit constants for
use
- e2e
  - pages
    - filing-app
      - complete-user-profile
- checkCupFormErrors.spec.tsx: Added new test to verify character limits
      - point-of-contact
- checkPocFormErrors.spec.tsx: Added new test to verify character limits
    - shared-lending-platform
- NonAssociatedUserProfile.spec.tsx: Updated test to verify all
character limits
- UpdateInstitutionProfile.spec.tsx: Added test to verify character
limits
  - utils
- inputValidators.tsx: Added helper functions to unify input content
validation

## How to test this PR

1. Pull **986-default-max-length** in **sbl-frontend**
2. Verify that **TextInput.tsx** in **sbl-frontend** has no errors
3. Start the stack
4. Run the e2e tests
5. Verify that the e2e tests pass

---------

Co-authored-by: S T <shindigira@gmail.com>
Co-authored-by: Bill Himmelsbach <whimmels@gmail.com>

e2e/pages/filing-app/complete-user-profile/checkCupFormErrors.spec.ts

@@ -1,5 +1,8 @@
 import { expect } from '@playwright/test';
 import { test } from '../../../fixtures/testFixture';
+import { DefaultInputCharLimit } from 'utils/constants';
+import { assertTextInput } from '../../../utils/inputValidators';
+import { controlUnicode } from '../../../utils/unicodeConstants';
 
 test('Complete the User Profile: Checking for form errors based on user input', async ({
   page,
@@ -33,3 +36,40 @@ test('Complete the User Profile: Checking for form errors based on user input',
     );
   });
 });
+
+test('Complete the User Profile: Checking for input length restriction', async ({
+  page,
+}) => {
+  test.slow();
+
+  await test.step('Complete the User Profile: Check that the error header render when no input is filled', async () => {
+    await page.getByLabel('Submit User Profile').click();
+    await expect(page.locator('#step1FormErrorHeader div').first()).toBeVisible(
+      {
+        timeout: 30_000,
+      },
+    );
+  });
+
+  await test.step('Complete the User Profile: Check the first and last names for invalid input', async () => {
+    const expectedValues = {
+      firstField: controlUnicode.slice(0, DefaultInputCharLimit),
+      lastField: controlUnicode.slice(0, DefaultInputCharLimit),
+    };
+    const unexpectedValues = {
+      firstField: controlUnicode,
+      lastField: controlUnicode,
+    };
+
+    await assertTextInput(page, 'First name', {
+      fill: controlUnicode,
+      expected: expectedValues.firstField,
+      unexpected: unexpectedValues.firstField,
+    });
+    await assertTextInput(page, 'Last name', {
+      fill: controlUnicode,
+      expected: expectedValues.lastField,
+      unexpected: unexpectedValues.lastField,
+    });
+  });
+});

e2e/pages/filing-app/point-of-contact/checkPocFormErrors.spec.ts

@@ -1,5 +1,16 @@
 import { expect } from '@playwright/test';
 import { test } from '../../../fixtures/testFixture';
+import { controlUnicode } from '../../../utils/unicodeConstants';
+import {
+  assertTextInput,
+  assertSelectInput,
+} from '../../../utils/inputValidators';
+import {
+  DefaultInputCharLimit,
+  PhoneInputCharLimit,
+  EmailInputCharLimit,
+  ZipInputCharLimit,
+} from 'utils/constants';
 
 test('Point of Contact: Checking for form errors based on user input', async ({
   page,
@@ -37,3 +48,133 @@ test('Point of Contact: Checking for form errors based on user input', async ({
     );
   });
 });
+
+test('Point of Contact: Checking for unicode tolerance based on user input', async ({
+  page,
+  navigateToProvidePointOfContact,
+}) => {
+  test.slow();
+
+  navigateToProvidePointOfContact;
+
+  await test.step('Point of Contact: Check that the error header render when no input is filled', async () => {
+    await page.getByRole('button', { name: 'Continue to next step' }).click();
+    await expect(
+      page.locator('#PointOfContactFormErrors div').first(),
+    ).toBeVisible();
+  });
+
+  await test.step('Point of Contact: Check the first and last names for invalid input', async () => {
+    const expectedValues = {
+      firstField: controlUnicode.slice(0, DefaultInputCharLimit),
+      lastField: controlUnicode.slice(0, DefaultInputCharLimit),
+      phoneField: controlUnicode.slice(0, PhoneInputCharLimit),
+      extensionField: controlUnicode.slice(0, DefaultInputCharLimit),
+      emailField: controlUnicode.slice(0, EmailInputCharLimit),
+      addressField1: controlUnicode.slice(0, DefaultInputCharLimit),
+      addressField2: controlUnicode.slice(0, DefaultInputCharLimit),
+      addressField3: controlUnicode.slice(0, DefaultInputCharLimit),
+      addressField4: controlUnicode.slice(0, DefaultInputCharLimit),
+      cityField: controlUnicode.slice(0, DefaultInputCharLimit),
+      stateField: 'TX',
+      zipField: controlUnicode.slice(0, ZipInputCharLimit),
+    };
+    const unexpectedValues = {
+      firstField: controlUnicode,
+      lastField: controlUnicode,
+      phoneField: controlUnicode,
+      extensionField: controlUnicode,
+      emailField: controlUnicode,
+      addressField1: controlUnicode,
+      addressField2: controlUnicode,
+      addressField3: controlUnicode,
+      addressField4: controlUnicode,
+      cityField: controlUnicode,
+      stateField: '',
+      zipField: controlUnicode,
+    };
+
+    await assertTextInput(page, 'First name', {
+      fill: controlUnicode,
+      expected: expectedValues.firstField,
+      unexpected: unexpectedValues.firstField,
+    });
+    await assertTextInput(page, 'Last name', {
+      fill: controlUnicode,
+      expected: expectedValues.lastField,
+      unexpected: unexpectedValues.lastField,
+    });
+    await assertTextInput(page, 'Phone number', {
+      fill: controlUnicode,
+      expected: expectedValues.phoneField,
+      unexpected: unexpectedValues.phoneField,
+    });
+    await assertTextInput(page, 'Extension', {
+      fill: controlUnicode,
+      expected: expectedValues.extensionField,
+      unexpected: unexpectedValues.extensionField,
+    });
+    await assertTextInput(page, 'Email address', {
+      fill: controlUnicode,
+      expected: expectedValues.emailField,
+      unexpected: unexpectedValues.emailField,
+    });
+    await assertTextInput(page, 'Street address line 1', {
+      fill: controlUnicode,
+      expected: expectedValues.addressField1,
+      unexpected: unexpectedValues.addressField1,
+    });
+    await assertTextInput(page, 'Street address line 2', {
+      fill: controlUnicode,
+      expected: expectedValues.addressField2,
+      unexpected: unexpectedValues.addressField2,
+    });
+    await assertTextInput(page, 'Street address line 3', {
+      fill: controlUnicode,
+      expected: expectedValues.addressField3,
+      unexpected: unexpectedValues.addressField3,
+    });
+    await assertTextInput(page, 'Street address line 4', {
+      fill: controlUnicode,
+      expected: expectedValues.addressField4,
+      unexpected: unexpectedValues.addressField4,
+    });
+    await assertTextInput(page, 'City', {
+      fill: controlUnicode,
+      expected: expectedValues.cityField,
+      unexpected: unexpectedValues.cityField,
+    });
+    await assertSelectInput(page, 'State or territory', {
+      fill: { label: 'Texas (TX)' },
+      expected: expectedValues.stateField,
+      unexpected: unexpectedValues.stateField,
+    });
+    await assertTextInput(page, 'Zip code', {
+      fill: controlUnicode,
+      expected: expectedValues.zipField,
+      unexpected: unexpectedValues.zipField,
+    });
+
+    await page.getByRole('button', { name: 'Continue to next step' }).click();
+
+    await expect(page.locator('#PointOfContactFormErrors')).toContainText(
+      'Enter a valid phone number',
+    );
+    await expect(page.locator('#PointOfContactFormErrors')).toContainText(
+      'Enter a valid email address',
+    );
+    await expect(page.locator('#PointOfContactFormErrors')).toContainText(
+      'Enter a valid ZIP code',
+    );
+
+    await expect(page.locator('form')).toContainText(
+      'You must enter a valid phone number.',
+    );
+    await expect(page.locator('form')).toContainText(
+      'You must enter a valid email address.',
+    );
+    await expect(page.locator('form')).toContainText(
+      'You must enter a valid ZIP code.',
+    );
+  });
+});

e2e/pages/shared-lending-platform/NonAssociatedUserProfile.spec.ts

@@ -1,6 +1,8 @@
 import { expect } from '@playwright/test';
 import { test } from '../../fixtures/testFixture';
 import { controlUnicode } from '../../utils/unicodeConstants';
+import { assertTextInput } from '../../utils/inputValidators';
+import { DefaultInputCharLimit, LeiInputCharLimit } from 'utils/constants';
 
 const expectedNoAssociationsSummaryUrl =
   /\/profile\/complete\/summary\/submitted$/;
@@ -40,62 +42,37 @@ test('Complete User Profile with Bad Unicode -- No Associations -- process', asy
 
   await test.step('Fillout Complete User Profile (No Associations) with bad unicode and verify values', async () => {
     const expectedValues = {
-      firstField: controlUnicode.slice(0, 255),
-      lastField: controlUnicode.slice(0, 255),
-      // TODO: Update with correct value after char limit in place, see:
-      // https://github.com/cfpb/sbl-frontend/issues/972
-      finField: controlUnicode,
-      // TODO: Update with correct value after char limit in place, see:
-      // https://github.com/cfpb/sbl-frontend/issues/972
-      leiField: controlUnicode,
+      firstField: controlUnicode.slice(0, DefaultInputCharLimit),
+      lastField: controlUnicode.slice(0, DefaultInputCharLimit),
+      finField: controlUnicode.slice(0, DefaultInputCharLimit),
+      leiField: controlUnicode.slice(0, LeiInputCharLimit),
     };
     const unexpectedValues = {
       firstField: controlUnicode,
       lastField: controlUnicode,
-      // TODO: Change to controlUnicode after char limit in place, see:
-      // https://github.com/cfpb/sbl-frontend/issues/972
-      finField: '',
-      // TODO: Change to controlUnicode after char limit in place, see:
-      // https://github.com/cfpb/sbl-frontend/issues/972
-      leiField: '',
+      finField: controlUnicode,
+      leiField: controlUnicode,
     };
 
-    await page.getByLabel('First name').click();
-    await page.getByLabel('First name').fill(controlUnicode);
-
-    await page.getByLabel('Last name').click();
-    await page.getByLabel('Last name').fill(controlUnicode);
-
-    await page.getByLabel('Financial institution name').click();
-    await page.getByLabel('Financial institution name').fill(controlUnicode);
-
-    await page.getByLabel('Legal Entity Identifier (LEI)').click();
-    await page.getByLabel('Legal Entity Identifier (LEI)').fill(controlUnicode);
-
-    await expect(page.getByLabel('First name')).not.toHaveValue(
-      unexpectedValues.firstField,
-    );
-    await expect(page.getByLabel('Last name')).not.toHaveValue(
-      unexpectedValues.lastField,
-    );
-    await expect(page.getByLabel('Financial institution name')).not.toHaveValue(
-      unexpectedValues.finField,
-    );
-    await expect(
-      page.getByLabel('Legal Entity Identifier (LEI)'),
-    ).not.toHaveValue(unexpectedValues.leiField);
-
-    await expect(page.getByLabel('First name')).toHaveValue(
-      expectedValues.firstField,
-    );
-    await expect(page.getByLabel('Last name')).toHaveValue(
-      expectedValues.lastField,
-    );
-    await expect(page.getByLabel('Financial institution name')).toHaveValue(
-      expectedValues.finField,
-    );
-    await expect(page.getByLabel('Legal Entity Identifier (LEI)')).toHaveValue(
-      expectedValues.leiField,
-    );
+    await assertTextInput(page, 'First name', {
+      fill: controlUnicode,
+      expected: expectedValues.firstField,
+      unexpected: unexpectedValues.firstField,
+    });
+    await assertTextInput(page, 'Last name', {
+      fill: controlUnicode,
+      expected: expectedValues.lastField,
+      unexpected: unexpectedValues.lastField,
+    });
+    await assertTextInput(page, 'Financial institution name', {
+      fill: controlUnicode,
+      expected: expectedValues.finField,
+      unexpected: unexpectedValues.finField,
+    });
+    await assertTextInput(page, 'Legal Entity Identifier (LEI)', {
+      fill: controlUnicode,
+      expected: expectedValues.leiField,
+      unexpected: unexpectedValues.leiField,
+    });
   });
 });