Merge branch 'main' into 943-disable-ufp-rssd-id

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

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test';
 import { test } from '../../fixtures/testFixture';
-import { blockApi } from '../../utils/blockApi';
+import { blockApi, verifyApiBlockThenUnblock } from '../../utils/blockApi';
+import { TIMEOUT_LG, TIMEOUT_XS } from '../../utils/timeoutConstants';
 import { ResultUploadMessage, uploadFile } from '../../utils/uploadFile';
 
 test('Blocking API Calls - Error Boundaries', async ({
@@ -12,31 +13,12 @@ test('Blocking API Calls - Error Boundaries', async ({
   // Type of Financial Institution page
   await test.step('Type of Financial Institution page', async () => {
     navigateToProvideTypeOfFinancialInstitution;
-    await expect(page.locator('h1'), 'h1 is correct').toContainText(
-      'Provide type of financial institution',
-    );
 
-    // Block API Call: /v1/admin/me
-    await test.step('Block API: /v1/admin/me', async () => {
-      await blockApi(page, '**/v1/admin/me/', true);
-    });
-
-    // Confirm Error Boundary
-    await test.step('Error Boundary is visible', async () => {
-      await test.step('Refresh page', async () => {
-        await page.reload();
-      });
-      await expect(page.locator('h1'), 'h1 is correct').toContainText(
-        'An unknown error occurred',
-      );
-    });
-
-    // Unblock API Call
-    await test.step('Unblock API', async () => {
-      await blockApi(page, '**/v1/admin/me/', false);
-      await expect(page.locator('h1'), 'h1 is correct').toContainText(
-        'Provide type of financial institution',
-      );
+    await verifyApiBlockThenUnblock({
+      expectedHeading: 'Provide type of financial institution',
+      endpointPath: '**/v1/admin/me/',
+      endpointLabel: '/v1/admin/me/',
+      page,
     });
 
     // Complete Form and Continue
@@ -48,29 +30,11 @@ test('Blocking API Calls - Error Boundaries', async ({
 
   // Upload file page
   await test.step('Upload file page', async () => {
-    await expect(page.locator('h1'), 'h1 is correct').toContainText(
-      'Upload file',
-    );
-
-    // Block API Call: /v1/filing/institutions
-    await test.step('Block API: /v1/filing/institutions', async () => {
-      await blockApi(page, '**/v1/filing/institutions/**', true);
-    });
-
-    // Confirm Error Boundary
-    await test.step('Error Boundary is visible', async () => {
-      await test.step('Refresh page', async () => {
-        await page.reload();
-      });
-      await expect(page.locator('h1'), 'h1 is correct').toContainText(
-        'An unknown error occurred',
-      );
-    });
-
-    // Unblock API Call
-    await test.step('Unblock API', async () => {
-      await blockApi(page, '**/v1/filing/institutions/**', false);
-      await expect(page.locator('h1')).toContainText('Upload file');
+    await verifyApiBlockThenUnblock({
+      expectedHeading: 'Upload file',
+      endpointPath: '**/v1/filing/institutions/**',
+      endpointLabel: '/v1/filing/institutions',
+      page,
     });
 
     // Upload file
@@ -87,36 +51,18 @@ test('Blocking API Calls - Error Boundaries', async ({
     // Continue to next page
     await test.step('Click: Continue', async () => {
       await page.waitForSelector('#nav-next');
-      await page.waitForTimeout(500);
+      await page.waitForTimeout(TIMEOUT_XS);
       await page.getByRole('button', { name: 'Continue to next step' }).click();
     });
   });
 
   // Resolve errors page
   await test.step('Resolve errors page', async () => {
-    await expect(page.locator('h1'), 'h1 is correct').toContainText(
-      'Resolve errors (syntax)',
-    );
-
-    // Block API Call: **/submisions/latest
-    await test.step('Block API: /submissions/latest', async () => {
-      await blockApi(page, '**/submissions/latest', true);
-    });
-
-    // Confirm Error Boundary
-    await test.step('Error Boundary is visible', async () => {
-      await test.step('Refresh page', async () => {
-        await page.reload();
-      });
-      await expect(page.locator('h1'), 'h1 is correct').toContainText(
-        'An unknown error occurred',
-      );
-    });
-
-    // Unblock API Call
-    await test.step('Unblock API', async () => {
-      await blockApi(page, '**/submissions/latest', false);
-      await expect(page.locator('h1')).toContainText('Resolve errors (syntax)');
+    await verifyApiBlockThenUnblock({
+      expectedHeading: 'Resolve errors (syntax)',
+      endpointPath: '**/submissions/latest',
+      endpointLabel: '/submissions/latest',
+      page,
     });
 
     // Navigate: Resolve errors (logic)
@@ -135,7 +81,7 @@ test('Blocking API Calls - Error Boundaries', async ({
   // Review warnings page
   await test.step('Review warnings page', async () => {
     await expect(page.locator('h1')).toContainText('Review warnings', {
-      timeout: 50_000,
+      timeout: TIMEOUT_LG,
     });
 
     // Block API Call: **/v1/institutions/
@@ -153,7 +99,7 @@ test('Blocking API Calls - Error Boundaries', async ({
       await expect(page.locator('h1'), 'h1 is visible').toContainText(
         'Review warnings',
         {
-          timeout: 50_000,
+          timeout: TIMEOUT_LG,
         },
       );
       await expect(
@@ -179,32 +125,11 @@ test('Blocking API Calls - Error Boundaries', async ({
 
   // Provide point of contact page
   await test.step('Provide point of contact page', async () => {
-    await expect(page.locator('h1'), 'h1 is correct').toContainText(
-      'Provide point of contact',
-    );
-
-    // Block API Call: /v1/admin/me
-    await test.step('Block API: /v1/admin/me', async () => {
-      await blockApi(page, '**/v1/admin/me/', true);
-    });
-
-    // Confirm Error Boundary
-    await test.step('Error Boundary is visible', async () => {
-      await test.step('Refresh page', async () => {
-        await page.reload();
-      });
-
-      await expect(page.locator('h1'), 'h1 is correct').toContainText(
-        'An unknown error occurred',
-      );
-    });
-
-    // Unblock API Call
-    await test.step('Unblock API', async () => {
-      await blockApi(page, '**/v1/admin/me/', false);
-      await expect(page.locator('h1'), 'h1 is correct').toContainText(
-        'Provide point of contact',
-      );
+    await verifyApiBlockThenUnblock({
+      expectedHeading: 'Provide point of contact',
+      endpointPath: '**/v1/admin/me/',
+      endpointLabel: '/v1/admin/me',
+      page,
     });
   });
 });

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

@@ -52,6 +52,57 @@ test('Resolve Errors (Logic)', async ({ page, navigateToUploadFile }) => {
       );
     });
 
+    await test.step('Verify navigation of paginated (logic) content', async () => {
+      await page.getByRole('button', { name: 'Continue' }).click();
+      const section = page
+        .locator('#multi-field-errors div')
+        .filter({ hasText: 'E2004' })
+        .first();
+      const nextButton = section.getByRole('button', {
+        name: 'Next',
+        exact: true,
+      });
+
+      const verifyPage3 = async () => {
+        await nextButton.click();
+        const page3row1 = section
+          .getByRole('row')
+          .filter({ hasText: '123456789TESTBANK12300080' });
+        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 test.step('Page 1, Row 1', async () => {
+        const page1row1 = section
+          .getByRole('row')
+          .filter({ hasText: '123456789TESTBANK12300034' });
+        await expect(page1row1.getByRole('cell').nth(0)).toHaveText('18');
+        await expect(page1row1.getByRole('cell').nth(2)).toHaveText('999');
+        await expect(page1row1.getByRole('cell').nth(3)).toHaveText('2222');
+      });
+      await test.step('Page 2, Row 1', async () => {
+        await nextButton.click();
+
+        const page2row1 = section
+          .getByRole('row')
+          .filter({ hasText: '123456789TESTBANK12300060' });
+        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 test.step('Page 3, Row 1', async () => {
+        await verifyPage3();
+      });
+
+      await test.step('Last page, "Next" disabled', async () => {
+        // Note: We don't set the "disabled" attribute but this verifies that
+        //       clicking the button leaves the user on the last page
+        await verifyPage3();
+      });
+    });
+
     await verifyDownloadableReport({ testUsed: test, pageUsed: page });
   });
 });

e2e/utils/blockApi.ts

@@ -1,4 +1,7 @@
 import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+import { test } from '../fixtures/testFixture';
+import { TIMEOUT_XL } from './timeoutConstants';
 
 export async function blockApi(
   page: Page,
@@ -18,3 +21,58 @@ export async function blockApi(
     await page.reload();
   }
 }
+
+/**
+ * Verify the process:
+ *   Block API -> Confirm error boundary -> Unblock API -> Confirm Filing app
+ */
+
+interface VerifyApiBlockThenUnblockProperties {
+  endpointPath: RegExp | string;
+  expectedHeading: string;
+  page: Page;
+  endpointLabel: string;
+  timeoutOverride?: number;
+}
+
+export const verifyApiBlockThenUnblock = async ({
+  endpointPath,
+  expectedHeading,
+  page,
+  endpointLabel,
+  timeoutOverride = TIMEOUT_XL,
+}: VerifyApiBlockThenUnblockProperties) => {
+  const timeoutOption = { timeout: timeoutOverride };
+
+  await expect(page.locator('h1'), 'h1 is correct').toContainText(
+    expectedHeading,
+    timeoutOption,
+  );
+
+  // Block API Call
+  await test.step(`Block API: ${endpointLabel}`, async () => {
+    await blockApi(page, endpointPath, true);
+  });
+
+  // Confirm Error Boundary
+  await test.step('Error Boundary is visible', async () => {
+    await test.step('Refresh page', async () => {
+      await page.reload();
+    });
+
+    await expect(page.locator('h1'), 'h1 is correct').toContainText(
+      'An unknown error occurred',
+      timeoutOption,
+    );
+  });
+
+  // Unblock API Call
+  await test.step('Unblock API', async () => {
+    await blockApi(page, endpointPath, false);
+
+    await expect(page.locator('h1'), 'h1 is correct').toContainText(
+      expectedHeading,
+      timeoutOption,
+    );
+  });
+};

e2e/utils/timeoutConstants.ts

@@ -0,0 +1,7 @@
+export const TIMEOUT_XXS = 500;
+export const TIMEOUT_XS = 1000;
+export const TIMEOUT_SM = 10_000;
+export const TIMEOUT_MD = 30_000;
+export const TIMEOUT_LG = 60_000;
+export const TIMEOUT_XL = 120_000;
+export const TIMEOUT_XXL = 180_000;

src/components/BetaAndLegalNotice.tsx

@@ -1,32 +1,29 @@
 import { Link } from 'components/Link';
-import { Alert, Heading, Paragraph } from 'design-system-react';
+import { Alert } from 'design-system-react';
 import type { ReactElement } from 'react';
 
 export default function BetaAndLegalNotice(): ReactElement {
   return (
     <Alert
       className='mb-[2.813rem]'
-      message={
-        <>
-          <Heading type='2' className='h4 mb-[0.313rem]'>
-            This is a beta for the Small Business Lending Data Filing Platform
-          </Heading>
-          <Paragraph>
-            Thank you for participating. The beta platform is available to
-            upload, test, and validate data. All uploaded data is for testing
-            purposes only and may be removed at any time. For questions or
-            feedback,{' '}
-            <Link href='mailto:SBLHelp@cfpb.gov?subject=[BETA] Home page: Questions or feedback'>
-              email our support staff
-            </Link>
-            .
-          </Paragraph>
-        </>
-      }
+      message='This is a beta for the Small Business Lending Data Filing Platform'
       status='warning'
       // TODO: allow setting to strip heading formatting in Alerts post-mvp
       // @ts-expect-error - See issue: https://github.com/cfpb/design-system-react/issues/351
-      headingLevel={null}
-    />
+      // headingLevel={null}
+    >
+      <span className='inline-block max-w-[41.875rem]'>
+        Thank you for participating. The beta platform is available to upload,
+        test, and validate data. All uploaded data is for testing purposes only
+        and may be removed at any time. For questions or feedback,{' '}
+        <Link
+          href='mailto:SBLHelp@cfpb.gov?subject=[BETA] Home page: Questions or feedback'
+          className='border-b-[1px]'
+        >
+          email our support staff
+        </Link>
+        .
+      </span>
+    </Alert>
   );
 }

src/components/Loading.tsx

@@ -18,7 +18,7 @@ export function LoadingContent({
   return (
     <Paragraph className='h3 mt-[25%] flex min-h-dvh justify-center text-[#43484e]'>
       <Icon isPresentational name='updating' />
-      <div className='ml-[15px]'>{message}</div>
+      <span className='ml-[15px]'>{message}</span>
     </Paragraph>
   );
 }