Component unit tests: AlertApiUnavailable, AssociatedInstitution

e2e/utils/createInstitution.ts

@@ -8,6 +8,32 @@ interface CreateInstitutionProperties {
   testRssdId: string;
 }
 
+// disabled for test data
+// eslint-disable @typescript-eslint/no-magic-numbers unicorn/numeric-separators-style
+export const generateInstitutionData = (data: CreateInstitutionProperties) => ({
+  lei: data.testLei,
+  name: data.testInstitutionName,
+  tax_id: data.testTaxId,
+  rssd_id: data.testRssdId,
+  lei_status_code: 'ISSUED',
+  primary_federal_regulator_id: 'OCC',
+  hmda_institution_type_id: '1',
+  hq_address_street_1: 'Test Address Street 1',
+  hq_address_street_2: '',
+  hq_address_street_3: '',
+  hq_address_street_4: '',
+  hq_address_city: 'Test City 1',
+  hq_address_state_code: 'GA',
+  hq_address_zip: '00000',
+  parent_lei: '012PARENTTESTBANK127',
+  parent_legal_name: 'PARENT TEST BANK 127',
+  parent_rssd_id: 12_745,
+  top_holder_lei: '01274TOPHOLDERLEI123',
+  top_holder_legal_name: 'TOP HOLDER LEI 123',
+  top_holder_rssd_id: 123_456,
+});
+// eslint-enable @typescript-eslint/no-magic-numbers unicorn/numeric-separators-style
+
 // Allow developers to disable routing in development
 export default async function createInstitution({
   adminToken,
@@ -16,35 +42,17 @@ export default async function createInstitution({
   testLei,
   testRssdId,
 }: CreateInstitutionProperties): Promise<void> {
-  // disabled for test data
-  // eslint-disable @typescript-eslint/no-magic-numbers unicorn/numeric-separators-style
   const options = {
     method: 'POST',
     url: `${process.env.SBL_PLAYWRIGHT_TEST_REGTECH_TARGET}/v1/institutions`,
     headers: { Authorization: `Bearer ${adminToken}` },
-    data: {
-      lei: testLei,
-      name: testInstitutionName,
-      lei_status_code: 'ISSUED',
-      tax_id: testTaxId,
-      rssd_id: testRssdId,
-      primary_federal_regulator_id: 'OCC',
-      hmda_institution_type_id: '1',
-      hq_address_street_1: 'Test Address Street 1',
-      hq_address_street_2: '',
-      hq_address_street_3: '',
-      hq_address_street_4: '',
-      hq_address_city: 'Test City 1',
-      hq_address_state_code: 'GA',
-      hq_address_zip: '00000',
-      parent_lei: '012PARENTTESTBANK127',
-      parent_legal_name: 'PARENT TEST BANK 127',
-      parent_rssd_id: 12_745,
-      top_holder_lei: '01274TOPHOLDERLEI123',
-      top_holder_legal_name: 'TOP HOLDER LEI 123',
-      top_holder_rssd_id: 123_456,
-    },
-    // eslint-enable @typescript-eslint/no-magic-numbers unicorn/numeric-separators-style
+    data: generateInstitutionData({
+      adminToken,
+      testInstitutionName,
+      testTaxId,
+      testLei,
+      testRssdId,
+    }),
   };
 
   try {

src/components/AssociatedInstitution.tsx

@@ -3,10 +3,17 @@ import { ListLink } from 'components/Link';
 import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { formatPipeSeparatedString } from 'utils/formatting';
 
+type AssociatedInstitutionProperties = Omit<
+  InstitutionDetailsApiType,
+  'lei'
+> & {
+  lei: string | undefined;
+};
+
 export function AssociatedInstitution({
   name,
   lei,
-}: InstitutionDetailsApiType): JSX.Element {
+}: AssociatedInstitutionProperties): JSX.Element {
   let href =
     'mailto:[email protected]?subject=[BETA] Associated institutions: Missing "Name" or "LEI"';
   let text = 'Missing institution details, email our support staff.';

src/components/__tests__/AlertApiUnavailable.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import AlertApiUnavailable from 'components/AlertApiUnavailable';
+import { AuthProvider } from 'react-oidc-context';
+import { MemoryRouter } from 'react-router-dom';
+import { sblHelpMail } from 'utils/common';
+
+describe('<AlertApiUnavailable />', () => {
+  it('Renders default content', async () => {
+    const message = 'Unable to connect at the moment';
+    const href = sblHelpMail;
+
+    render(
+      <AuthProvider>
+        <MemoryRouter>
+          <AlertApiUnavailable />,
+        </MemoryRouter>
+      </AuthProvider>,
+    );
+
+    expect(screen.getByText(message)).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('link', { name: 'email our support staff' }),
+    ).toHaveAttribute('href', href);
+  });
+
+  it('Renders custom message and link target', async () => {
+    const message = 'test alert message';
+    const href = '/bad/url/';
+
+    render(
+      <AuthProvider>
+        <MemoryRouter>
+          <AlertApiUnavailable message={message} href={href} />,
+        </MemoryRouter>
+      </AuthProvider>,
+    );
+
+    expect(screen.getByText(message)).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('link', { name: 'email our support staff' }),
+    ).toHaveAttribute('href', href);
+  });
+});

src/components/__tests__/AssociatedInstitution.test.tsx

@@ -0,0 +1,107 @@
+import { render, screen } from '@testing-library/react';
+import AssociatedInstitution from 'components/AssociatedInstitution';
+import { AuthProvider } from 'react-oidc-context';
+import { MemoryRouter } from 'react-router-dom';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
+import { formatPipeSeparatedString } from 'utils/formatting';
+import { generateInstitutionData } from '../../../e2e/utils/createInstitution';
+
+const mockInstitutionApiResponse = (): InstitutionDetailsApiType => {
+  const adminToken = 'N/A';
+  const testInstitutionName = 'SBL Test Bank 5522';
+  const testLei = 'TESTBANK000000005522';
+  const testTaxId = 'testTaxId';
+  const testRssdId = 'testRssdId';
+
+  const institutionData = generateInstitutionData({
+    adminToken,
+    testInstitutionName,
+    testLei,
+    testTaxId,
+    testRssdId,
+  });
+
+  return {
+    ...institutionData,
+    hmda_institution_type_id: {
+      name: 'HMDA TYPE 22',
+      id: '22',
+    },
+    lei_status: {
+      name: institutionData.name,
+      code: 'test',
+      can_file: true,
+    },
+    primary_federal_regulator: {
+      name: 'Primary Federal Regulator',
+      id: 'PrimeFedReg01',
+    },
+    sbl_institution_types: [],
+    hq_address_state: { name: 'State', code: 'ST' },
+    domains: [],
+  };
+};
+
+describe('<AssociatedInstitution />', () => {
+  it('Renders with Name and LEI provided', async () => {
+    const institutionData = mockInstitutionApiResponse();
+
+    const expectedText = formatPipeSeparatedString([
+      institutionData.name,
+      institutionData.lei,
+    ]);
+
+    const expectedLink = `/institution/${institutionData.lei}`;
+    const expectedLinkName = `${institutionData.name} | ${institutionData.lei}`;
+
+    render(
+      <AuthProvider>
+        <MemoryRouter>
+          <AssociatedInstitution {...institutionData} />,
+        </MemoryRouter>
+      </AuthProvider>,
+    );
+
+    expect(
+      screen.getByText(expectedText, {
+        collapseWhitespace: false, // Preserve our double-spaced separator
+      }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('link', {
+        name: expectedLinkName,
+      }),
+    ).toHaveAttribute('href', expectedLink);
+  });
+
+  it('Contact support about missing details', async () => {
+    const institutionData = mockInstitutionApiResponse();
+
+    const expectedText =
+      'Missing institution details, email our support staff.';
+
+    const expectedLink =
+      'mailto:[email protected]?subject=[BETA] Associated institutions: Missing "Name" or "LEI"';
+
+    render(
+      <AuthProvider>
+        <MemoryRouter>
+          <AssociatedInstitution {...institutionData} lei={undefined} />,
+        </MemoryRouter>
+      </AuthProvider>,
+    );
+
+    expect(
+      screen.getByText(expectedText, {
+        collapseWhitespace: false, // Preserve our double-spaced separator
+      }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('link', {
+        name: expectedText,
+      }),
+    ).toHaveAttribute('href', expectedLink);
+  });
+});