test(lighthouse): update lighthouse test files

Signed-off-by: Frank Kong <frkong@redhat.com>

plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx

@@ -26,16 +26,31 @@ import { lighthouseApiRef } from '../../api';
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
 import * as data from '../../__fixtures__/website-list-response.json';
 import { AuditListForEntity } from './AuditListForEntity';
+import { rootRouteRef } from '../../plugin';
+import { fireEvent, screen } from '@testing-library/react';
 
 jest.mock('../../hooks/useWebsiteForEntity', () => ({
   useWebsiteForEntity: jest.fn(),
 }));
 
+jest.mock('react-router-dom', () => {
+  const actual = jest.requireActual('react-router-dom');
+  const mockNavigation = jest.fn();
+  return {
+    ...actual,
+    useNavigate: jest.fn(() => mockNavigation),
+  };
+});
+
 const useWebsiteForEntityMock = useWebsiteForEntity as jest.Mock;
 
 const websiteListResponse = data as WebsiteListResponse;
 const entityWebsite = websiteListResponse.items[0];
 
+const testAppOptions = {
+  mountedRoutes: { '/': rootRouteRef },
+};
+
 describe('<AuditListTableForEntity />', () => {
   afterEach(() => {
     jest.resetAllMocks();
@@ -73,39 +88,77 @@ describe('<AuditListTableForEntity />', () => {
       loading: false,
       error: null,
     });
-    const { findByText } = await renderInTestApp(subject());
-    expect(await findByText(entityWebsite.url)).toBeInTheDocument();
+    const rendered = await renderInTestApp(subject(), testAppOptions);
+    const create_audit_button = await rendered.findByText('Create New Audit');
+    const support_button = await rendered.findByText('Support');
+    expect(await rendered.findByText(entityWebsite.url)).toBeInTheDocument();
+    expect(await rendered.findByText('Latest Audit')).toBeInTheDocument();
+    expect(create_audit_button).toBeInTheDocument();
+    expect(support_button).toBeInTheDocument();
   });
 
-  it('renders a Progress element where the data is loading', async () => {
+  it('renders a Progress element when the data is loading', async () => {
     useWebsiteForEntityMock.mockReturnValue({
       value: null,
       loading: true,
       error: null,
     });
 
-    const { findByTestId } = await renderInTestApp(subject());
+    const { findByTestId } = await renderInTestApp(subject(), testAppOptions);
     expect(await findByTestId('progress')).toBeInTheDocument();
   });
 
-  it('renders nothing where there is an error loading data', async () => {
+  it('renders a WarningPanel when there is an error loading data', async () => {
     useWebsiteForEntityMock.mockReturnValue({
       value: null,
       loading: false,
-      error: 'error',
+      error: { name: 'error', message: 'error loading data' },
     });
-    const { queryByTestId } = await renderInTestApp(subject());
-    expect(queryByTestId('AuditListTable')).toBeNull();
+    await renderInTestApp(subject(), testAppOptions);
+    const expandIcon = screen.getByText('Error: Could not load audit list.');
+    fireEvent.click(expandIcon);
+    expect(
+      screen.getByText('Error: Could not load audit list.'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('error loading data')).toBeInTheDocument();
   });
 
-  it('renders nothing where there is not data', async () => {
+  it('renders an empty table when there is no data', async () => {
     useWebsiteForEntityMock.mockReturnValue({
       value: null,
       loading: false,
       error: null,
     });
 
-    const { queryByTestId } = await renderInTestApp(subject());
-    expect(queryByTestId('AuditListTable')).toBeNull();
+    const rendered = await renderInTestApp(subject(), testAppOptions);
+    const create_audit_button = await rendered.findByText('Create New Audit');
+    const support_button = await rendered.findByText('Support');
+    expect(
+      await rendered.findByText('No records to display'),
+    ).toBeInTheDocument();
+    expect(await rendered.findByText('Latest Audit')).toBeInTheDocument();
+    expect(create_audit_button).toBeInTheDocument();
+    expect(support_button).toBeInTheDocument();
+  });
+
+  it('renders an empty table when there is no data and error loading data due to empty database query result', async () => {
+    useWebsiteForEntityMock.mockReturnValue({
+      value: null,
+      loading: false,
+      error: {
+        name: 'error',
+        message: 'no audited website found for url unit-test-url',
+      },
+    });
+
+    const rendered = await renderInTestApp(subject(), testAppOptions);
+    const create_audit_button = await rendered.findByText('Create New Audit');
+    const support_button = await rendered.findByText('Support');
+    expect(
+      await rendered.findByText('No records to display'),
+    ).toBeInTheDocument();
+    expect(await rendered.findByText('Latest Audit')).toBeInTheDocument();
+    expect(create_audit_button).toBeInTheDocument();
+    expect(support_button).toBeInTheDocument();
   });
 });

plugins/lighthouse/src/components/AuditList/AuditListForEntity.tsx

@@ -57,19 +57,14 @@ export const AuditListForEntity = () => {
         </Button>
         <LighthouseSupportButton />
       </ContentHeader>
-      <AuditListTable
-        data-test-id="AuditListTable"
-        items={value ? [value] : []}
-      />
+      <AuditListTable items={value ? [value] : []} />
     </Content>
   );
 
   if (loading) {
     content = <Progress />;
-  } else if (
-    error &&
-    !error.message.includes('no audited website found for url')
-  ) {
+  }
+  if (error && !error.message.includes('no audited website found for url')) {
     // We only want to display this warning panel when its caused by an error other than no audits for the website
     content = (
       <WarningPanel severity="error" title="Could not load audit list.">

plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx

@@ -26,6 +26,7 @@ import {
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
 import * as data from '../../__fixtures__/website-list-response.json';
 import { LastLighthouseAuditCard } from './LastLighthouseAuditCard';
+import { fireEvent, screen } from '@testing-library/react';
 
 jest.mock('../../hooks/useWebsiteForEntity', () => ({
   useWebsiteForEntity: jest.fn(),
@@ -147,17 +148,22 @@ describe('<LastLighthouseAuditCard />', () => {
       (useWebsiteForEntity as jest.Mock).mockReturnValue({
         value: null,
         loading: false,
-        error: 'error',
+        error: { name: 'error', message: 'error loading data' },
       });
     });
 
-    it('renders nothing', async () => {
-      const { queryByTestId } = await renderInTestApp(
+    it('renders a WarningPanel', async () => {
+      await renderInTestApp(
         <EntityProvider entity={entity}>
           <LastLighthouseAuditCard />
         </EntityProvider>,
       );
-      expect(queryByTestId('AuditListTable')).toBeNull();
+      const expandIcon = screen.getByText('Error: Could not load audit list.');
+      fireEvent.click(expandIcon);
+      expect(
+        screen.getByText('Error: Could not load audit list.'),
+      ).toBeInTheDocument();
+      expect(screen.getByText('error loading data')).toBeInTheDocument();
     });
   });
 
@@ -179,4 +185,26 @@ describe('<LastLighthouseAuditCard />', () => {
       expect(queryByTestId('AuditListTable')).toBeNull();
     });
   });
+
+  describe('where error was due to an empty database query result', () => {
+    beforeEach(() => {
+      (useWebsiteForEntity as jest.Mock).mockReturnValue({
+        value: null,
+        loading: false,
+        error: {
+          name: 'error',
+          message: 'no audited website found for url unit-test-url',
+        },
+      });
+    });
+
+    it('renders EmptyState card', async () => {
+      const rendered = await renderInTestApp(
+        <EntityProvider entity={entity}>
+          <LastLighthouseAuditCard />
+        </EntityProvider>,
+      );
+      expect(rendered.getByText('No Audits Found')).toBeInTheDocument();
+    });
+  });
 });

plugins/lighthouse/src/hooks/useWebsiteForEntity.test.tsx

@@ -98,4 +98,21 @@ describe('useWebsiteForEntity', () => {
       expect(mockErrorApi.post).toHaveBeenCalledWith(error);
     });
   });
+
+  describe('where there is an error regarding "no audited websites for url"', () => {
+    const error = new Error('no audited website found for url unit-test-url');
+
+    beforeEach(() => {
+      (mockLighthouseApi.getWebsiteByUrl as jest.Mock).mockRejectedValueOnce(
+        error,
+      );
+    });
+
+    it('does not post the error to the error api and returns the error to the caller', async () => {
+      const { result, waitForNextUpdate } = subject();
+      await waitForNextUpdate();
+      expect(result.current?.error).toBe(error);
+      expect(mockErrorApi.post).not.toHaveBeenCalledWith(error);
+    });
+  });
 });