From 058e9fbfa7f1a861d4b10fabd632a24f4935d3e4 Mon Sep 17 00:00:00 2001 From: CynthiaKamau Date: Thu, 11 Jan 2024 10:59:42 +0300 Subject: [PATCH] OHRI-2079 Add unit tests for OTable in commons lib (#1753) --- __mocks__/obs-base-table.mock.ts | 346 +----------------- .../data-table/o-table.component.tsx | 3 +- .../components/data-table/o-table.test.tsx | 49 +++ 3 files changed, 69 insertions(+), 329 deletions(-) create mode 100644 packages/esm-commons-lib/src/components/data-table/o-table.test.tsx diff --git a/__mocks__/obs-base-table.mock.ts b/__mocks__/obs-base-table.mock.ts index 057c443ba..643a051f5 100644 --- a/__mocks__/obs-base-table.mock.ts +++ b/__mocks__/obs-base-table.mock.ts @@ -1,7 +1,7 @@ -export const tableHeaders = [ +export const mockTableHeaders = [ { key: 'date', - header: 'Enrollment/Re-enrollment Date', + header: 'Enrollment Date', }, { key: 'clientDescription', @@ -25,41 +25,10 @@ export const tableHeaders = [ }, ]; -export const tableRows = [ +export const mockTableRows = [ { id: '687d4066-462b-4838-802d-30f3fb53bc83', - actions: { - key: null, - ref: null, - props: { - flipped: true, - children: [ - { - key: null, - ref: null, - props: { - itemText: 'View details', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - { - key: null, - ref: null, - props: { - itemText: 'Edit Form', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - ], - }, - _owner: null, - }, + actions: [], date: '09 — Oct — 2023', clientDescription: 'Mother enrolled in prevention of maternal to child transmission (PMTCT) program', dateConfirmedPositive: '--', @@ -68,39 +37,8 @@ export const tableRows = [ }, { id: 'c03760e4-913d-40d5-b86c-8451c8366262', - actions: { - key: null, - ref: null, - props: { - flipped: true, - children: [ - { - key: null, - ref: null, - props: { - itemText: 'View details', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - { - key: null, - ref: null, - props: { - itemText: 'Edit Form', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - ], - }, - _owner: null, - }, - date: '09 — Oct — 2023', + actions: [], + date: '10 — Oct — 2023', clientDescription: 'Transfer-in', dateConfirmedPositive: '--', entryPoint: '--', @@ -108,39 +46,8 @@ export const tableRows = [ }, { id: '12473bbe-f24a-401f-9bcb-fac2497e1ec6', - actions: { - key: null, - ref: null, - props: { - flipped: true, - children: [ - { - key: null, - ref: null, - props: { - itemText: 'View details', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - { - key: null, - ref: null, - props: { - itemText: 'Edit Form', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - ], - }, - _owner: null, - }, - date: '09 — Oct — 2023', + actions: [], + date: '11 — Oct — 2023', clientDescription: 'Transfer-in', dateConfirmedPositive: '--', entryPoint: '--', @@ -148,39 +55,8 @@ export const tableRows = [ }, { id: '1cdae5df-d183-47a6-9784-337e4378fc7b', - actions: { - key: null, - ref: null, - props: { - flipped: true, - children: [ - { - key: null, - ref: null, - props: { - itemText: 'View details', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - { - key: null, - ref: null, - props: { - itemText: 'Edit Form', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - ], - }, - _owner: null, - }, - date: '09 — Oct — 2023', + actions: [], + date: '12 — Oct — 2023', clientDescription: 'Transfer-in', dateConfirmedPositive: '--', entryPoint: '--', @@ -188,38 +64,7 @@ export const tableRows = [ }, { id: '97ede60c-9216-4604-9527-abc3e20b3f48', - actions: { - key: null, - ref: null, - props: { - flipped: true, - children: [ - { - key: null, - ref: null, - props: { - itemText: 'View details', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - { - key: null, - ref: null, - props: { - itemText: 'Edit Form', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - ], - }, - _owner: null, - }, + actions: [], date: '--', clientDescription: 'Mother enrolled in prevention of maternal to child transmission (PMTCT) program', dateConfirmedPositive: '--', @@ -228,38 +73,7 @@ export const tableRows = [ }, { id: 'c7cdc574-b518-4694-89fa-e1aa5d4a56e7', - actions: { - key: null, - ref: null, - props: { - flipped: true, - children: [ - { - key: null, - ref: null, - props: { - itemText: 'View details', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - { - key: null, - ref: null, - props: { - itemText: 'Edit Form', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - ], - }, - _owner: null, - }, + actions: [], date: '06 — Oct — 2023', clientDescription: 're-enrol', dateConfirmedPositive: '--', @@ -268,38 +82,7 @@ export const tableRows = [ }, { id: '99820023-6a94-43c0-8c75-07308a39d751', - actions: { - key: null, - ref: null, - props: { - flipped: true, - children: [ - { - key: null, - ref: null, - props: { - itemText: 'View details', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - { - key: null, - ref: null, - props: { - itemText: 'Edit Form', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - ], - }, - _owner: null, - }, + actions: [], date: '06 — Oct — 2023', clientDescription: 're-enrol', dateConfirmedPositive: '--', @@ -308,39 +91,8 @@ export const tableRows = [ }, { id: '92173c27-9b04-4b8b-a75e-e5aff814eafa', - actions: { - key: null, - ref: null, - props: { - flipped: true, - children: [ - { - key: null, - ref: null, - props: { - itemText: 'View details', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - { - key: null, - ref: null, - props: { - itemText: 'Edit Form', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - ], - }, - _owner: null, - }, - date: '06 — Oct — 2023', + actions: [], + date: '05 — Oct — 2023', clientDescription: 're-enrol', dateConfirmedPositive: '--', entryPoint: '--', @@ -348,38 +100,7 @@ export const tableRows = [ }, { id: '9ec831a1-bc59-484f-9be7-ec01981a7e1e', - actions: { - key: null, - ref: null, - props: { - flipped: true, - children: [ - { - key: null, - ref: null, - props: { - itemText: 'View details', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - { - key: null, - ref: null, - props: { - itemText: 'Edit Form', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - ], - }, - _owner: null, - }, + actions: [], date: '01 — Oct — 2023', clientDescription: 'New client', dateConfirmedPositive: '--', @@ -388,39 +109,8 @@ export const tableRows = [ }, { id: '537974e8-e2ea-4eff-b757-b54d732e21d5', - actions: { - key: null, - ref: null, - props: { - flipped: true, - children: [ - { - key: null, - ref: null, - props: { - itemText: 'View details', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - { - key: null, - ref: null, - props: { - itemText: 'Edit Form', - hasDivider: false, - isDelete: false, - disabled: false, - }, - _owner: null, - }, - ], - }, - _owner: null, - }, - date: '01 — Oct — 2023', + actions: [], + date: '04 — Oct — 2023', clientDescription: 'New client', dateConfirmedPositive: '--', entryPoint: '--', diff --git a/packages/esm-commons-lib/src/components/data-table/o-table.component.tsx b/packages/esm-commons-lib/src/components/data-table/o-table.component.tsx index a0982e89b..ae4bdaa9d 100644 --- a/packages/esm-commons-lib/src/components/data-table/o-table.component.tsx +++ b/packages/esm-commons-lib/src/components/data-table/o-table.component.tsx @@ -18,9 +18,10 @@ interface TableProps { } export const OTable: React.FC = ({ tableHeaders, tableRows }) => { + return ( - + {({ rows, headers, getHeaderProps, getTableProps }) => ( diff --git a/packages/esm-commons-lib/src/components/data-table/o-table.test.tsx b/packages/esm-commons-lib/src/components/data-table/o-table.test.tsx new file mode 100644 index 000000000..e97e7cf78 --- /dev/null +++ b/packages/esm-commons-lib/src/components/data-table/o-table.test.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { mockTableHeaders, mockTableRows } from '../../../../../__mocks__/obs-base-table.mock'; +import userEvent from '@testing-library/user-event'; +import { render, screen, act } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; +import { OTable } from './o-table.component'; + +const testProps = { + tableHeaders: mockTableHeaders, + tableRows: mockTableRows, +}; + +jest.setTimeout(20000); + +jest.mock('@openmrs/esm-framework', () => ({ + ...jest.requireActual('@openmrs/esm-framework'), + useLayoutType: jest.fn(() => 'small-desktop'), +})); + +describe('ObsTable', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + test('should render the table component', async () => { + const user = userEvent.setup(); + await act(async () => { + render(); + }); + expect(screen.getAllByText('General population')); + expect(screen.getAllByText('06 — Oct — 2023')); + expect(screen.getAllByText('09 — Oct — 2023')); + expect(screen.getAllByText('Mother enrolled in prevention of maternal to child transmission (PMTCT) program')); + expect(screen.getByText('Click to sort rows by Enrollment Date header in ascending order')).toBeInTheDocument(); + expect(screen.getAllByText('Transfer-in')); + expect(screen.getAllByText('Target population')); + const expectedColumnHeaders = [ + /Enrollment Date/, + /Patient Type at Enrollment/, + /Date Confirmed HIV Positive/, + /Entry Point/, + /Population Category/, + /Actions/, + ]; + expectedColumnHeaders.forEach((header) => { + expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument(); + }); + }); +});