[Snapshot testing - Part 3] Shared lending platform

README.md

@@ -51,6 +51,9 @@ If you'll be using VS Code, be sure to:
 - `yarn test:ci` - run all unit and integration tests in CI mode
 - `yarn test:e2e` - run all e2e tests with Playwright UI mode.
 - `yarn test:e2e:headless` - run all e2e tests headlessly.
+- `yarn test:e2e:snapshot` - run all e2e tests with snapshot testing.
+- `yarn test:e2e:snapshot-update` - update all snapshots.
+- `yarn test:e2e:snapshot-update <TEST_PATH>` - update snapshots for specific tests. Example: `yarn test:e2e:snapshot-update e2e/pages/shared-lending-platform/UserProfile*`
 - `yarn format` - format all files with Prettier.
 - `yarn lint` - runs TypeScript, ESLint and Stylelint.
 - `yarn validate` - runs `lint`, `test:ci` and `test:e2e`.

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/InstitutionProfile.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test';
 import { test } from '../../fixtures/testFixture';
 import { clickLinkWithRetry } from '../../utils/clickExternalLinkWithRetry';
+import { checkSnapshot } from '../../utils/snapshotTesting';
 
 test('Institution Profile Page', async ({ page, navigateToFilingHome }) => {
   // Go to Profile page
@@ -20,6 +21,7 @@ test('Institution Profile Page', async ({ page, navigateToFilingHome }) => {
     await expect(page.locator('h1'), 'h1 is correct').toContainText(
       'View your financial institution profile',
     );
+    await checkSnapshot(page);
   });
 
   // Check Detail Headings