[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/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

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

@@ -1,6 +1,9 @@
 import { expect } from '@playwright/test';
 import { test } from '../../fixtures/testFixture';
 import { clickLinkWithRetry } from '../../utils/clickExternalLinkWithRetry';
+import { checkSnapshot } from '../../utils/snapshotTesting';
+
+// Note: Skipped snapshot tests for pages outside of the SBL site
 
 test('Navigation', async ({ page, navigateToFilingHome }) => {
   navigateToFilingHome;
@@ -14,20 +17,23 @@ test('Navigation', async ({ page, navigateToFilingHome }) => {
     await expect(page.locator('h1')).toContainText(
       'File your small business lending data',
     );
+    await checkSnapshot(page);
 
     // Test Home Link
     await page
       .locator('.navbar .links')
       .getByRole('link', { name: 'Home', exact: false })
       .click();
     await expect(page.locator('h1')).toContainText('File your lending data');
+    await checkSnapshot(page);
 
     // Test Profile Link
     await page
       .locator('.navbar .links')
       .getByRole('link', { name: 'Playwright Test User' })
       .click();
     await expect(page.locator('h1')).toContainText('View your user profile');
+    await checkSnapshot(page);
   });
 
   await test.step('Breadcrumb Navigation', async () => {
@@ -38,6 +44,7 @@ test('Navigation', async ({ page, navigateToFilingHome }) => {
     await expect(page.locator('h1')).toContainText(
       'View your financial institution profile',
     );
+    await checkSnapshot(page);
     await page
       .getByRole('link', {
         name: 'Update your financial institution profile',
@@ -47,6 +54,7 @@ test('Navigation', async ({ page, navigateToFilingHome }) => {
     await expect(page.locator('h1')).toContainText(
       'Update your financial institution profile',
     );
+    await checkSnapshot(page);
     await page
       .getByRole('link', { name: 'View your financial institution profile' })
       .click();
@@ -244,6 +252,7 @@ test('Navigation', async ({ page, navigateToFilingHome }) => {
       'Get started filing your lending data',
     );
     await expect(page.locator('.navbar .nav-items')).toHaveCount(0);
+    await checkSnapshot(page);
 
     // Test CFPB Logo Link
     await clickLinkWithRetry({ page, target: page.getByLabel('Home') });

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

@@ -1,8 +1,9 @@
 import { expect } from '@playwright/test';
+import { DefaultInputCharLimit, LeiInputCharLimit } from 'utils/constants';
 import { test } from '../../fixtures/testFixture';
-import { controlUnicode } from '../../utils/unicodeConstants';
 import { assertTextInput } from '../../utils/inputValidators';
-import { DefaultInputCharLimit, LeiInputCharLimit } from 'utils/constants';
+import { checkSnapshot } from '../../utils/snapshotTesting';
+import { controlUnicode } from '../../utils/unicodeConstants';
 
 const expectedNoAssociationsSummaryUrl =
   /\/profile\/complete\/summary\/submitted$/;
@@ -38,11 +39,13 @@ test('Complete User Profile -- No Associations -- process', async ({
     await page
       .getByLabel('Legal Entity Identifier (LEI)')
       .fill('12345678901234567890');
+    await checkSnapshot(page);
     await page.getByLabel('Submit User Profile').click();
 
     // redirected to the summary page
     await expect(page).toHaveURL(expectedNoAssociationsSummaryUrl);
     await expect(page.locator('#Summary div').first()).toBeVisible();
+    await checkSnapshot(page);
   });
 });
 
@@ -83,5 +86,6 @@ test('Complete User Profile with Bad Unicode -- No Associations -- process', asy
       expected: expectedValues.leiField,
       unexpected: unexpectedValues.leiField,
     });
+    await checkSnapshot(page);
   });
 });

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

@@ -1,7 +1,8 @@
 import { expect } from '@playwright/test';
-import { test } from '../../fixtures/testFixture';
 import { DefaultInputCharLimit } from 'utils/constants';
+import { test } from '../../fixtures/testFixture';
 import { assertTextInput } from '../../utils/inputValidators';
+import { checkSnapshot } from '../../utils/snapshotTesting';
 import { controlUnicode } from '../../utils/unicodeConstants';
 
 test('Update Institution Profile Page', async ({
@@ -20,6 +21,7 @@ test('Update Institution Profile Page', async ({
         .getByRole('link', { name: 'RegTech Regional Reserve - ' })
         .click();
     });
+    await checkSnapshot(page);
   });
 
   // Institution Profile page
@@ -35,6 +37,7 @@ test('Update Institution Profile Page', async ({
         .first()
         .click();
     });
+    await checkSnapshot(page);
   });
 
   // Update Institution Profile page
@@ -151,6 +154,8 @@ test('Update Institution Profile Page', async ({
         page.locator('#top_holder_rssd_id'),
         'Top-Holder RSSD is editable',
       ).toBeEditable();
+
+      await checkSnapshot(page);
     });
 
     // Reset Form
@@ -160,6 +165,8 @@ test('Update Institution Profile Page', async ({
         page.getByLabel('You must enter a type of'),
         'Other field reset',
       ).not.toBeEnabled();
+
+      await checkSnapshot(page);
     });
 
     // Add Other (again)
@@ -190,6 +197,8 @@ test('Update Institution Profile Page', async ({
         'mailto:[email protected]?subject=[BETA] Update your financial institution profile: Questions after submitting form',
       );
     });
+
+    await checkSnapshot(page);
   });
 });
 
@@ -295,5 +304,7 @@ test('Update Institution Profile Page: Check Character Limits', async ({
       expected: expectedValues.topRssdField,
       unexpected: unexpectedValues.topRssdField,
     });
+
+    await checkSnapshot(page);
   });
 });

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

@@ -1,12 +1,14 @@
 import { expect } from '@playwright/test';
 import { test } from '../../fixtures/testFixture';
+import { checkSnapshot } from '../../utils/snapshotTesting';
 
 test('User Profile Page', async ({ page, navigateToFilingHome }) => {
   // Go to Profile page
   await test.step('H1 Heading', async () => {
     navigateToFilingHome;
     await page.goto('/profile/view');
     await expect(page.locator('h1')).toContainText('View your user profile');
+    await checkSnapshot(page);
   });
 
   await test.step('Verify nav options', async () => {

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

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { webcrypto } from 'node:crypto';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
 
 // this is just an example test (e2e tests should be way longer than this)
 test('Unauthenticated homepage: Registering with an invalid email domain', async ({
@@ -37,6 +38,7 @@ test('Unauthenticated homepage: Registering with an invalid email domain', async
     await expect(page.getByRole('heading')).toContainText(
       'Your email domain is not authorized',
     );
+    await checkSnapshot(page);
     await expect(page.locator('#Summary div').first()).toBeVisible();
   });
 });

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

@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
 import { expectedPaperworkReductionActUrl } from '../../../utils/testFixture.utils';
 
 test('Unauthenticated homepage: Paperwork Reduction Act', async ({ page }) => {
@@ -10,6 +11,7 @@ test('Unauthenticated homepage: Paperwork Reduction Act', async ({ page }) => {
     await expect(
       page.getByRole('link', { name: 'View Paperwork Reduction Act' }),
     ).toBeVisible();
+    await checkSnapshot(page);
   });
 
   await test.step('Navigates to the Paperwork Reduction Act summary', async () => {

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

@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test';
+import { checkSnapshot } from '../../../utils/snapshotTesting';
 import { expectedPrivacyNoticeUrl } from '../../../utils/testFixture.utils';
 
 test('Unauthenticated homepage: Privacy Notice', async ({ page }) => {
@@ -8,12 +9,14 @@ test('Unauthenticated homepage: Privacy Notice', async ({ page }) => {
     await expect(
       page.getByRole('link', { name: 'View Privacy Notice' }),
     ).toBeVisible();
+    await checkSnapshot(page);
   });
 
   await test.step('Navigates to the Privacy Notice summary', async () => {
     await page.getByRole('link', { name: 'View Privacy Notice' }).click();
     await expect(page).toHaveURL(expectedPrivacyNoticeUrl);
     await expect(page.getByText('/Home')).toBeVisible();
     await expect(page.getByRole('heading')).toContainText('Privacy Notice');
+    await checkSnapshot(page);
   });
 });

package.json

@@ -24,6 +24,7 @@
     "test:ci": "vitest run",
     "test:e2e": "chmod +x ./run-playwright.sh && sh ./run-playwright.sh",
     "test:e2e:snapshot": "chmod +x ./run-playwright.sh && SBL_ENABLE_PLAYWRIGHT_SNAPSHOT_TESTING=true sh ./run-playwright.sh",
+    "test:e2e:snapshot-update": "SBL_ENABLE_PLAYWRIGHT_SNAPSHOT_TESTING=true yarn playwright test --update-snapshots",
     "format": "prettier -uw --cache .",
     "run-tsc": "tsc",
     "run-eslint": "eslint --cache --fix --ignore-path .gitignore --ignore-path .eslintignore --ext .ts,.tsx .",

src/components/AssociatedInstitution.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/require-default-props */
 import { ListLink } from 'components/Link';
-import { formatPipeSeparatedString } from 'utils/formatting';
 import type { InstitutionDetailsApiType } from 'types/formTypes';
+import { formatPipeSeparatedString } from 'utils/formatting';
 
 export function AssociatedInstitution({
   name,
@@ -17,7 +17,7 @@ export function AssociatedInstitution({
   }
 
   return (
-    <ListLink href={href} key={lei}>
+    <ListLink href={href} key={lei} className='snapshot-ignore'>
       {text}
     </ListLink>
   );

src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx

@@ -83,6 +83,7 @@ function UpdateIdentifyingInformation({
           {...register(taxID)}
           errorMessage={formErrors[taxID]?.message}
           showError
+          className='snapshot-ignore'
         />
         <InputEntry
           id={rssdID}
@@ -94,6 +95,7 @@ function UpdateIdentifyingInformation({
           value={rssdIdValue}
           errorMessage={formErrors[rssdID]?.message}
           showError
+          className='snapshot-ignore'
         />
         <FieldFederalPrudentialRegulator {...{ register, data }} />
       </WellContainer>

src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx

@@ -102,6 +102,7 @@ export function FinancialInstitutionDetails({
           <DisplayField
             label={InstitutionDataLabels.emailDomains}
             value={formatDomains(data.domains)}
+            className='snapshot-ignore'
           />
         ) : (
           ''

src/pages/Filing/ViewUserProfile/UserInformation.tsx

@@ -28,10 +28,12 @@ export default function UserInformation({
         <DisplayField
           label='Full name'
           value={<Paragraph className='mb-[0.625rem]'>{data.name}</Paragraph>}
+          className='snapshot-ignore'
         />
         <DisplayField
           label='Email address'
           value={<Paragraph className='mb-[0.625rem]'>{data.email}</Paragraph>}
+          className='snapshot-ignore'
         />
       </WellContainer>
     </>