[e2e] unavailableApis.spec - Refactor + add extended timeouts (#1004)

Part of #987 ## Changes - [e2e] Unavailable APIs - Refactored to make the tests easier to read and reduce code duplication (`verifyApiBlockThenUnblock()`) - Added timeouts to enable test to consistently pass ## How to test this PR 1. Start `sbl-frontend`: `yarn start` 2. Open Playwright: `yarn playwright test --ui --workers 1` 3. Run test `filing-app` -> `unavailableApis.spec.ts` twice 4. Confirm it passes consistently ## Screenshots <img width="371" alt="Screenshot 2024-10-16 at 3 19 23 PM" src="https://github.com/user-attachments/assets/844013ed-8bd2-43e4-bbc4-5e65e8e23127"> <img width="835" alt="Screenshot 2024-10-16 at 3 22 14 PM" src="https://github.com/user-attachments/assets/56e9f645-feb1-478c-8601-9a83f7ad533c"> ## Notes - TODO (Future PR): Utilize `e2e/utils/timeoutConstants.ts` in more tests to reduce one-off timeout values --------- Co-authored-by: Tanner Ricks <[email protected]>
cfpb · Oct 17, 2024 · 4a12d6c · 4a12d6c
1 parent ae4a220
commit 4a12d6c
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 100 deletions.
diff --git a/e2e/pages/filing-app/unavailableApis.spec.ts b/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,
     });
   });
 });
diff --git a/e2e/utils/blockApi.ts b/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,
+    );
+  });
+};
diff --git a/e2e/utils/timeoutConstants.ts b/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;