[Snapshot testing] Filing details - Point of contact (#1072)

Part 2 of #1062 

Note: Merge after
[1062-snapshot__complete-user-profile](#1070)

## Changes

- Adds Snapshot testing for Filing details - Point of contact page

## How to test this PR

1. `yarn test:e2e:snapshot`
2. Run `filing-details` tests

## Screenshots

<img width="579" alt="Screenshot 2024-12-06 at 2 36 58 PM"
src="https://github.com/user-attachments/assets/e4bb90b0-9d93-4ebb-a1e9-2931ac20bd59">

e2e/pages/filing-app/filing-details/checkPocFormErrors.spec.ts

@@ -1,17 +1,18 @@
 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,
+  PhoneInputCharLimit,
   ZipInputCharLimit,
 } from 'utils/constants';
+import { test } from '../../../fixtures/testFixture';
+import {
+  assertSelectInput,
+  assertTextInput,
+} from '../../../utils/inputValidators';
 import { clickContinueNext } from '../../../utils/navigation.utils';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
+import { controlUnicode } from '../../../utils/unicodeConstants';
 
 test('Point of Contact: Checking for form errors based on user input', async ({
   page,
@@ -24,6 +25,7 @@ test('Point of Contact: Checking for form errors based on user input', async ({
     await expect(
       page.locator('#FilingDetailsFormErrors div').first(),
     ).toBeVisible();
+    await checkSnapshot(page);
   });
 
   await test.step('Point of Contact: Check the first and last names for invalid input', async () => {
@@ -45,6 +47,7 @@ test('Point of Contact: Checking for form errors based on user input', async ({
     await expect(page.locator('#FilingDetailsFormErrors')).toContainText(
       'The last name must not contain invalid characters',
     );
+    await checkSnapshot(page);
   });
 });
 
@@ -59,6 +62,7 @@ test('Point of Contact: Checking for unicode tolerance based on user input', asy
     await expect(
       page.locator('#FilingDetailsFormErrors div').first(),
     ).toBeVisible();
+    await checkSnapshot(page);
   });
 
   await test.step('Point of Contact: Check the first and last names for invalid input', async () => {
@@ -173,5 +177,6 @@ test('Point of Contact: Checking for unicode tolerance based on user input', asy
     await expect(page.locator('form')).toContainText(
       'You must enter a valid ZIP code.',
     );
+    await checkSnapshot(page);
   });
 });

e2e/pages/filing-app/filing-step-routing/errorsLogic.spec.ts

@@ -1,4 +1,5 @@
 import { test } from '../../../fixtures/testFixture';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
 import { verifyRedirects } from './_shared';
 
 const testLabel = 'Filing step routing (Errors: Logic)';
@@ -24,5 +25,6 @@ test(
       testLabel,
       userShouldNotAccess,
     });
+    await checkSnapshot(page);
   },
 );

e2e/pages/filing-app/filing-step-routing/errorsSyntax.spec.ts

@@ -1,4 +1,5 @@
 import { test } from '../../../fixtures/testFixture';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
 import { verifyRedirects } from './_shared';
 
 const testLabel = 'Filing step routing (Errors: Syntax)';
@@ -29,5 +30,6 @@ test(
       testLabel,
       userShouldNotAccess,
     });
+    await checkSnapshot(page);
   },
 );

e2e/pages/filing-app/filing-step-routing/noUpload.spec.ts

@@ -1,4 +1,5 @@
 import { test } from '../../../fixtures/testFixture';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
 import { verifyRedirects } from './_shared';
 
 const testLabel = 'Filing step routing (Upload)';
@@ -22,4 +23,5 @@ test(testLabel, async ({ page, navigateToUploadFile }) => {
     testLabel,
     userShouldNotAccess,
   });
+  await checkSnapshot(page);
 });

e2e/pages/filing-app/filing-step-routing/pointOfContact.spec.ts

@@ -1,4 +1,5 @@
 import { test } from '../../../fixtures/testFixture';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
 import { verifyRedirects } from './_shared';
 
 const testLabel = 'Filing step routing (Point of Contact)';
@@ -22,4 +23,5 @@ test(testLabel, async ({ page, navigateToProvideFilingDetails }) => {
     page,
     test,
   });
+  await checkSnapshot(page);
 });

e2e/pages/filing-app/filing-step-routing/warnings.spec.ts

@@ -1,4 +1,5 @@
 import { test } from '../../../fixtures/testFixture';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
 import { verifyRedirects } from './_shared';
 
 const testLabel = 'Filing step routing (Warnings)';
@@ -24,5 +25,6 @@ test(
       testLabel,
       userShouldNotAccess,
     });
+    await checkSnapshot(page);
   },
 );

e2e/pages/filing-app/formAlerts.spec.ts

@@ -1,8 +1,9 @@
 import { expect } from '@playwright/test';
 import { test } from '../../fixtures/testFixture';
 import pointOfContactJson from '../../test-data/point-of-contact/point-of-contact-data-1.json';
-import { ResultUploadMessage, uploadFile } from '../../utils/uploadFile';
 import { clickContinue, clickContinueNext } from '../../utils/navigation.utils';
+import { checkSnapshot } from '../../utils/snapshotTesting';
+import { ResultUploadMessage, uploadFile } from '../../utils/uploadFile';
 
 test('Form Alerts', async ({
   page,
@@ -14,6 +15,7 @@ test('Form Alerts', async ({
     await expect(page.locator('h1'), 'h1 is correct').toContainText(
       'Provide type of financial institution',
     );
+    await checkSnapshot(page);
 
     // Submit Incomplete form
     await test.step('Submit Incomplete form', async () => {
@@ -29,6 +31,7 @@ test('Form Alerts', async ({
           'There was a problem updating your type of financial institution',
         );
       });
+      await checkSnapshot(page);
     });
 
     // Submit Completed Form
@@ -37,6 +40,7 @@ test('Form Alerts', async ({
         await page.getByText('Bank or savings association').check();
       });
       await clickContinue(test, page);
+      await checkSnapshot(page);
     });
   });
 
@@ -54,6 +58,7 @@ test('Form Alerts', async ({
 
     // Continue to next page
     await clickContinueNext(test, page);
+    await checkSnapshot(page);
   });
 
   // Resolve errors (syntax) page
@@ -76,6 +81,7 @@ test('Form Alerts', async ({
     await test.step('Click: Upload new file', async () => {
       await page.getByRole('link', { name: 'Upload a new file' }).click();
     });
+    await checkSnapshot(page);
   });
 
   // Upload file with logic errors
@@ -92,6 +98,7 @@ test('Form Alerts', async ({
     });
 
     // Continue to next page
+    await checkSnapshot(page);
     await clickContinueNext(test, page);
   });
 
@@ -104,6 +111,7 @@ test('Form Alerts', async ({
       page.locator('.m-notification__success'),
       'Success message is visible',
     ).toContainText('Your register contains no syntax errors');
+    await checkSnapshot(page);
     await clickContinue(test, page);
   });
 
@@ -125,6 +133,7 @@ test('Form Alerts', async ({
     ).toContainText(
       'You must resolve all errors to continue to the next step.',
     );
+    await checkSnapshot(page);
     await test.step('Click: Upload new file', async () => {
       await page.getByRole('link', { name: 'Upload a new file' }).click();
     });
@@ -141,6 +150,7 @@ test('Form Alerts', async ({
       filePath: '../test-data/sample-sblar-files/logic-warnings_small.csv',
       resultMessage: ResultUploadMessage.warning,
     });
+    await checkSnapshot(page);
     await clickContinueNext(test, page);
   });
 
@@ -153,6 +163,7 @@ test('Form Alerts', async ({
       page.locator('.m-notification__success'),
       'Success message is visible',
     ).toContainText('Your register contains no syntax errors');
+    await checkSnapshot(page);
     await clickContinue(test, page);
   });
 
@@ -165,6 +176,7 @@ test('Form Alerts', async ({
       page.locator('.m-notification__success'),
       'Success message is visible',
     ).toContainText('Your register contains no logic errors');
+    await checkSnapshot(page);
     await clickContinueNext(test, page);
   });
 
@@ -173,6 +185,7 @@ test('Form Alerts', async ({
     await expect(page.locator('h1'), 'h1 is correct').toContainText(
       'Review warnings',
     );
+    await checkSnapshot(page);
     await clickContinueNext(test, page);
     await expect(
       page.locator('#error-header-alert'),
@@ -183,6 +196,7 @@ test('Form Alerts', async ({
     await test.step('Click: Verify checkbox', async () => {
       await page.getByText('I verify the accuracy of').check();
     });
+    await checkSnapshot(page);
     await clickContinueNext(test, page);
   });
 
@@ -191,6 +205,7 @@ test('Form Alerts', async ({
     await expect(page.locator('h1'), 'h1 is correct').toContainText(
       'Provide filing details',
     );
+    await checkSnapshot(page);
 
     // Submit Incomplete form
     await test.step('Submit Incomplete form', async () => {
@@ -201,6 +216,7 @@ test('Form Alerts', async ({
       ).toContainText(
         'There was a problem updating your filing detailsIndicate your voluntary reporter statusEnter the first name of the point of contactEnter the last name of the point of contactEnter the phone number of the point of contactEnter the email address of the point of contactEnter the street address of the point of contactEnter the city of the point of contactSelect the state or territory of the point of contactEnter the ZIP code of the point of contact',
       );
+      await checkSnapshot(page);
     });
 
     // Submit Completed form
@@ -218,6 +234,7 @@ test('Form Alerts', async ({
         await page.getByLabel('City').fill('Utah (U');
         await page.selectOption('select#state', 'UT');
         await page.getByLabel('Zip code').fill('55555');
+        await checkSnapshot(page);
       });
     });
 
@@ -230,5 +247,6 @@ test('Form Alerts', async ({
     await expect(page.locator('h1'), 'h1 is correct').toContainText(
       'Sign and submit',
     );
+    await checkSnapshot(page);
   });
 });

e2e/pages/filing-app/sign-and-submit/completeFilingFlowWithOnlyWarnings.spec.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test';
 import { test } from '../../../fixtures/testFixture';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
 
 test('Sign and submit: complete filing flow with only warnings', async ({
   page,
@@ -13,5 +14,6 @@ test('Sign and submit: complete filing flow with only warnings', async ({
         'Congratulations! You have reached the end of the beta filing process.',
       ),
     ).toBeVisible();
+    await checkSnapshot(page);
   });
 });

e2e/pages/filing-app/unavailableApis.spec.ts

@@ -1,8 +1,9 @@
 import { expect } from '@playwright/test';
 import { test } from '../../fixtures/testFixture';
 import { blockApi, verifyApiBlockThenUnblock } from '../../utils/blockApi';
-import { ResultUploadMessage, uploadFile } from '../../utils/uploadFile';
 import { clickContinue, clickContinueNext } from '../../utils/navigation.utils';
+import { checkSnapshot } from '../../utils/snapshotTesting';
+import { ResultUploadMessage, uploadFile } from '../../utils/uploadFile';
 
 test('Blocking API Calls - Error Boundaries', async ({
   page,
@@ -91,6 +92,7 @@ test('Blocking API Calls - Error Boundaries', async ({
         page.locator('#main .m-notification__error'),
         'Error Alert is visible',
       ).toBeVisible();
+      await checkSnapshot(page);
     });
 
     // Unblock API Call

e2e/pages/filing-app/uploadFile/completeUploadLogicErrors.spec.ts

@@ -1,11 +1,12 @@
 import { expect } from '@playwright/test';
 import { test } from '../../../fixtures/testFixture';
-import { ResultUploadMessage, uploadFile } from '../../../utils/uploadFile';
-import { verifyDownloadableReport } from '../../../utils/verifyDownloadableReport';
 import {
   clickContinue,
   clickContinueNext,
 } from '../../../utils/navigation.utils';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
+import { ResultUploadMessage, uploadFile } from '../../../utils/uploadFile';
+import { verifyDownloadableReport } from '../../../utils/verifyDownloadableReport';
 
 test('Resolve Errors (Logic)', async ({ page, navigateToUploadFile }) => {
   navigateToUploadFile;
@@ -28,6 +29,7 @@ test('Resolve Errors (Logic)', async ({ page, navigateToUploadFile }) => {
       await expect(
         page.getByText('Your register contains no syntax errors'),
       ).toBeVisible();
+      await checkSnapshot(page);
     });
 
     await test.step('Verify Resolve Errors (logic) and number of errors', async () => {
@@ -45,6 +47,7 @@ test('Resolve Errors (Logic)', async ({ page, navigateToUploadFile }) => {
       await expect(page.locator('#multi-field-errors')).toContainText(
         'Multi-field errors: 52 found',
       );
+      await checkSnapshot(page);
     });
 
     await test.step('Verify navigation of paginated (logic) content', async () => {
@@ -67,6 +70,7 @@ test('Resolve Errors (Logic)', async ({ page, navigateToUploadFile }) => {
         await expect(page3row1.getByRole('cell').nth(0)).toHaveText('62');
         await expect(page3row1.getByRole('cell').nth(2)).toHaveText('999');
         await expect(page3row1.getByRole('cell').nth(3)).toHaveText('1');
+        await checkSnapshot(page);
       };
 
       await test.step('Page 1, Row 1', async () => {
@@ -86,10 +90,12 @@ test('Resolve Errors (Logic)', async ({ page, navigateToUploadFile }) => {
         await expect(page2row1.getByRole('cell').nth(0)).toHaveText('42');
         await expect(page2row1.getByRole('cell').nth(2)).toHaveText('999');
         await expect(page2row1.getByRole('cell').nth(3)).toHaveText('1');
+        await checkSnapshot(page);
       });
 
       await test.step('Page 3, Row 1', async () => {
         await verifyPage3();
+        await checkSnapshot(page);
       });
 
       await test.step('Last page, "Next" disabled', async () => {

e2e/pages/filing-app/uploadFile/completeUploadSyntaxErrors.spec.ts

@@ -1,8 +1,9 @@
 import { expect } from '@playwright/test';
 import { test } from '../../../fixtures/testFixture';
+import { clickContinueNext } from '../../../utils/navigation.utils';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
 import { ResultUploadMessage, uploadFile } from '../../../utils/uploadFile';
 import { verifyDownloadableReport } from '../../../utils/verifyDownloadableReport';
-import { clickContinueNext } from '../../../utils/navigation.utils';
 
 test('Resolve Errors (Syntax)', async ({ page, navigateToUploadFile }) => {
   navigateToUploadFile;
@@ -25,6 +26,7 @@ test('Resolve Errors (Syntax)', async ({ page, navigateToUploadFile }) => {
       await expect(page.locator('h2')).toContainText(
         'Single-field errors: 136 found',
       );
+      await checkSnapshot(page);
     });
 
     await verifyDownloadableReport({ testUsed: test, pageUsed: page });

e2e/pages/shared-lending-platform/unauthenticated-homepage/DeniedDomain.spec.ts

@@ -17,8 +17,10 @@ test('Unauthenticated homepage: Registering with an invalid email domain', async
     await page.getByRole('link', { name: 'Register' }).click();
     await page.getByLabel('Username').click();
     await page.getByLabel('Username').fill(`exampleUsername-${seed}`);
-    await page.getByLabel('Password', { exact: true }).click();
-    await page.getByLabel('Password', { exact: true }).fill('examplePassword');
+    await page.getByLabel('Password *', { exact: true }).click();
+    await page
+      .getByLabel('Password *', { exact: true })
+      .fill('examplePassword');
     await page.getByLabel('Confirm password').click();
     await page.getByLabel('Confirm password').fill('examplePassword');
     await page.getByLabel('Email').click();

e2e/utils/blockApi.ts

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 import { test } from '../fixtures/testFixture';
+import { checkSnapshot } from './snapshotTesting';
 
 export async function blockApi(
   page: Page,
@@ -57,6 +58,7 @@ export const verifyApiBlockThenUnblock = async ({
     await expect(page.locator('h1'), 'h1 is correct').toContainText(
       'An unknown error occurred',
     );
+    await checkSnapshot(page);
   });
 
   // Unblock API Call