diff --git a/src/components/dashboard/dashboard.test.tsx b/src/components/dashboard/dashboard.test.tsx index 2a97581..b1b54d2 100644 --- a/src/components/dashboard/dashboard.test.tsx +++ b/src/components/dashboard/dashboard.test.tsx @@ -1,19 +1,32 @@ import React from 'react'; -import { screen, waitFor } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { navigate, openmrsFetch, usePagination } from '@openmrs/esm-framework'; +import { type FetchResponse, navigate, openmrsFetch, usePagination } from '@openmrs/esm-framework'; import { renderWithSwr, waitForLoadingToFinish } from '../../test-helpers'; import { deleteForm } from '../../forms.resource'; import Dashboard from './dashboard.component'; -const mockedOpenmrsFetch = openmrsFetch as jest.Mock; -const mockedDeleteForm = deleteForm as jest.Mock; -global.window.URL.createObjectURL = jest.fn(); - -jest.mock('../../forms.resource', () => ({ - deleteForm: jest.fn(), -})); -const mockUsePagination = usePagination as jest.Mock; +type OpenmrsFetchResponse = Promise< + FetchResponse<{ + results: unknown[]; + }> +>; + +type PaginationData = { + currentPage: number; + goTo: (page: number) => void; + results: unknown[]; + totalPages: number; + paginated: boolean; + showNextButton: boolean; + showPreviousButton: boolean; + goToNext: () => void; + goToPrevious: () => void; +}; + +const mockedOpenmrsFetch = jest.mocked(openmrsFetch); +const mockedDeleteForm = jest.mocked(deleteForm); +const mockUsePagination = jest.mocked(usePagination); const formsResponse = [ { @@ -37,6 +50,10 @@ const formsResponse = [ }, ]; +jest.mock('../../forms.resource', () => ({ + deleteForm: jest.fn(), +})); + jest.mock('@openmrs/esm-framework', () => { const originalModule = jest.requireActual('@openmrs/esm-framework'); @@ -51,9 +68,11 @@ jest.mock('@openmrs/esm-framework', () => { }; }); +global.window.URL.createObjectURL = jest.fn(); + describe('Dashboard', () => { it('renders an empty state view if no forms are available', async () => { - mockedOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } }); + mockedOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } } as unknown as OpenmrsFetchResponse); renderDashboard(); @@ -73,7 +92,7 @@ describe('Dashboard', () => { data: { results: formsResponse, }, - }); + } as unknown as OpenmrsFetchResponse); renderDashboard(); @@ -81,17 +100,20 @@ describe('Dashboard', () => { const searchbox = screen.getByRole('searchbox') as HTMLInputElement; - await waitFor(() => user.type(searchbox, 'COVID')); + await user.type(searchbox, 'COVID'); expect(searchbox.value).toBe('COVID'); - mockUsePagination.mockImplementation(() => ({ - currentPage: 1, - goTo: () => {}, - results: formsResponse.filter((form) => form.name === searchbox.value), - })); + mockUsePagination.mockImplementation( + () => + ({ + currentPage: 1, + goTo: () => {}, + results: formsResponse.filter((form) => form.name === searchbox.value), + }) as unknown as PaginationData, + ); - await waitFor(() => expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument()); + await expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument(); expect(screen.getByText(/no matching forms to display/i)).toBeInTheDocument(); }); @@ -102,7 +124,7 @@ describe('Dashboard', () => { data: { results: formsResponse, }, - }); + } as unknown as OpenmrsFetchResponse); renderDashboard(); @@ -112,14 +134,17 @@ describe('Dashboard', () => { name: /filter by/i, }); - await waitFor(() => user.click(publishStatusFilter)); - await waitFor(() => user.click(screen.getByRole('option', { name: /unpublished/i }))); + await user.click(publishStatusFilter); + await user.click(screen.getByRole('option', { name: /unpublished/i })); - mockUsePagination.mockImplementation(() => ({ - currentPage: 1, - goTo: () => {}, - results: formsResponse.filter((form) => !form.published), - })); + mockUsePagination.mockImplementation( + () => + ({ + currentPage: 1, + goTo: () => {}, + results: formsResponse.filter((form) => !form.published), + }) as unknown as PaginationData, + ); expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument(); expect(screen.getByText(/no matching forms to display/i)).toBeInTheDocument(); @@ -130,13 +155,16 @@ describe('Dashboard', () => { data: { results: formsResponse, }, - }); + } as unknown as OpenmrsFetchResponse); - mockUsePagination.mockImplementation(() => ({ - currentPage: 1, - goTo: () => {}, - results: formsResponse, - })); + mockUsePagination.mockImplementation( + () => + ({ + currentPage: 1, + goTo: () => {}, + results: formsResponse, + }) as unknown as PaginationData, + ); renderDashboard(); @@ -159,13 +187,16 @@ describe('Dashboard', () => { data: { results: formsResponse, }, - }); + } as unknown as OpenmrsFetchResponse); - mockUsePagination.mockImplementation(() => ({ - currentPage: 1, - goTo: () => {}, - results: formsResponse, - })); + mockUsePagination.mockImplementation( + () => + ({ + currentPage: 1, + goTo: () => {}, + results: formsResponse, + }) as unknown as PaginationData, + ); renderDashboard(); @@ -187,13 +218,16 @@ describe('Dashboard', () => { data: { results: formsResponse, }, - }); + } as unknown as OpenmrsFetchResponse); - mockUsePagination.mockImplementation(() => ({ - currentPage: 1, - goTo: () => {}, - results: formsResponse, - })); + mockUsePagination.mockImplementation( + () => + ({ + currentPage: 1, + goTo: () => {}, + results: formsResponse, + }) as unknown as PaginationData, + ); renderDashboard(); @@ -210,13 +244,16 @@ describe('Dashboard', () => { data: { results: formsResponse, }, - }); + } as unknown as OpenmrsFetchResponse); - mockUsePagination.mockImplementation(() => ({ - currentPage: 1, - goTo: () => {}, - results: formsResponse, - })); + mockUsePagination.mockImplementation( + () => + ({ + currentPage: 1, + goTo: () => {}, + results: formsResponse, + }) as unknown as PaginationData, + ); renderDashboard(); @@ -226,7 +263,7 @@ describe('Dashboard', () => { name: /edit schema/i, }); - await waitFor(() => user.click(editSchemaButton)); + await user.click(editSchemaButton); expect(navigate).toHaveBeenCalledWith({ to: expect.stringMatching(/form\-builder\/edit/), @@ -240,13 +277,17 @@ describe('Dashboard', () => { data: { results: formsResponse, }, - }); + } as unknown as OpenmrsFetchResponse); + + mockUsePagination.mockImplementation( + () => + ({ + currentPage: 1, + goTo: () => {}, + results: formsResponse, + }) as unknown as PaginationData, + ); - mockUsePagination.mockImplementation(() => ({ - currentPage: 1, - goTo: () => {}, - results: formsResponse, - })); renderDashboard(); await waitForLoadingToFinish(); @@ -255,7 +296,7 @@ describe('Dashboard', () => { name: /download schema/i, }); - await waitFor(() => user.click(downloadSchemaButton)); + await user.click(downloadSchemaButton); expect(window.URL.createObjectURL).toHaveBeenCalled(); }); @@ -267,14 +308,18 @@ describe('Dashboard', () => { data: { results: formsResponse, }, - }); - mockedDeleteForm.mockResolvedValue({}); + } as unknown as OpenmrsFetchResponse); - mockUsePagination.mockImplementation(() => ({ - currentPage: 1, - goTo: () => {}, - results: formsResponse, - })); + mockedDeleteForm.mockResolvedValue({} as FetchResponse>); + + mockUsePagination.mockImplementation( + () => + ({ + currentPage: 1, + goTo: () => {}, + results: formsResponse, + }) as unknown as PaginationData, + ); renderDashboard(); @@ -283,7 +328,7 @@ describe('Dashboard', () => { const deleteButton = screen.getByRole('button', { name: /delete schema/i }); expect(deleteButton).toBeInTheDocument(); - await waitFor(() => user.click(deleteButton)); + await user.click(deleteButton); const modal = screen.getByRole('presentation'); expect(modal).toBeInTheDocument(); @@ -292,7 +337,7 @@ describe('Dashboard', () => { expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /danger delete/i })).toBeInTheDocument(); - await waitFor(() => user.click(screen.getByRole('button', { name: /danger delete/i }))); + await user.click(screen.getByRole('button', { name: /danger delete/i })); }); }); diff --git a/src/components/header/illo.component.tsx b/src/components/header/illo.component.tsx index 0d96df1..b7c0c02 100644 --- a/src/components/header/illo.component.tsx +++ b/src/components/header/illo.component.tsx @@ -8,7 +8,7 @@ const Illustration: React.FC = () => { viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" - fill-rule="evenodd" + fillRule="evenodd" clipRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2"