From 1ee9e5f734def903e0edb43f2ae6abd69efa5586 Mon Sep 17 00:00:00 2001 From: Peter Muriuki Date: Wed, 20 Apr 2022 11:30:19 +0300 Subject: [PATCH 1/4] Use useSimpleTabularHook in careTeam --- .../src/components/ListView/index.tsx | 121 ++++-------------- 1 file changed, 23 insertions(+), 98 deletions(-) diff --git a/packages/fhir-care-team/src/components/ListView/index.tsx b/packages/fhir-care-team/src/components/ListView/index.tsx index f4f844981..fb35fe4ed 100644 --- a/packages/fhir-care-team/src/components/ListView/index.tsx +++ b/packages/fhir-care-team/src/components/ListView/index.tsx @@ -5,7 +5,6 @@ import { Row, Col, Table, - Spin, PageHeader, Button, Divider, @@ -14,69 +13,35 @@ import { Popconfirm, } from 'antd'; import { MoreOutlined, PlusOutlined } from '@ant-design/icons'; -import { RouteComponentProps, useHistory } from 'react-router'; +import { RouteComponentProps, useHistory, useParams } from 'react-router'; import { Link } from 'react-router-dom'; -import { useQuery } from 'react-query'; -import { FHIRServiceClass } from '@opensrp/react-utils'; -import { createChangeHandler, getQueryParams, SearchForm, BrokenPage } from '@opensrp/react-utils'; +import { FHIRServiceClass, useSimpleTabularView, BrokenPage, SearchForm } from '@opensrp/react-utils'; import lang from '../../lang'; import { - SEARCH_QUERY_PARAM, FHIR_CARE_TEAM, URL_EDIT_CARE_TEAM, URL_CARE_TEAM, - ROUTE_PARAM_CARE_TEAM_ID, URL_CREATE_CARE_TEAM, + careTeamResourceType, } from '../../constants'; import { ViewDetails } from '../ViewDetails'; import { Dictionary } from '@onaio/utils'; import { sendErrorNotification, sendSuccessNotification } from '@opensrp/notifications'; +import { ICareTeam } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ICareTeam'; + // route params for care team pages interface RouteParams { careTeamId: string | undefined; } -interface TableData { - key: number | string; - id: string; - name: string; -} - interface Props { fhirBaseURL: string; careTeamPageSize: number; } -export interface PaginationProps { - currentPage: number; - pageSize: number; -} - -/** default component props */ -const defaultProps = { - fhirBaseURL: '', - careTeamPageSize: 5, -}; - export type CareTeamListPropTypes = Props & RouteComponentProps; -export const fetchCareTeams = async ( - fhirBaseURL: string, - pageSize: number, - pageOffset: number, - setPayloadCount: (count: number) => void -) => { - const serve = new FHIRServiceClass(fhirBaseURL, FHIR_CARE_TEAM); - const params = { - _count: pageSize, - _getpagesoffset: pageOffset, - }; - return serve.list(params).then((res) => { - setPayloadCount(res.total as number); - return res; - }); -}; export const deleteCareTeam = async (fhirBaseURL: string, id: string): Promise => { const serve = new FHIRServiceClass(fhirBaseURL, FHIR_CARE_TEAM); @@ -86,20 +51,6 @@ export const deleteCareTeam = async (fhirBaseURL: string, id: string): Promise sendErrorNotification(lang.ERROR_OCCURRED)); }; -export const useCareTeamsHook = ( - fhirBaseURL: string, - pageSize: number, - pageOffset: number, - setPayloadCount: (count: number) => void -) => { - return useQuery( - [FHIR_CARE_TEAM, pageOffset], - () => fetchCareTeams(fhirBaseURL, pageSize, pageOffset, setPayloadCount), - { - refetchOnWindowFocus: false, - } - ); -}; /** * Function which shows the list of all roles and their details @@ -108,36 +59,21 @@ export const useCareTeamsHook = ( * @returns {Function} returns User Roles list display */ export const CareTeamList: React.FC = (props: CareTeamListPropTypes) => { - const { fhirBaseURL, careTeamPageSize } = props; - const history = useHistory(); - const careTeamId = props.match.params[ROUTE_PARAM_CARE_TEAM_ID] ?? ''; + const { fhirBaseURL } = props; - const [payloadCount, setPayloadCount] = React.useState(0); - const [pageProps, setPageProps] = React.useState({ - currentPage: 1, - pageSize: careTeamPageSize, - }); - const { currentPage, pageSize } = pageProps; - const pageOffset = (currentPage - 1) * pageSize; - - const { data, isLoading, isFetching, error, refetch } = useCareTeamsHook( + const { careTeamId: resourceId } = useParams(); + const { searchFormProps, tablePaginationProps, queryValues } = useSimpleTabularView( fhirBaseURL, - pageSize as number, - pageOffset, - setPayloadCount + careTeamResourceType ); + const history = useHistory(); - if (isLoading || isFetching) return ; + const { data, isFetching, isLoading, error, refetch } = queryValues; - if (error) { - return ; + if (error && !data) { + return ; } - const searchFormProps = { - defaultValue: getQueryParams(props.location)[SEARCH_QUERY_PARAM], - onChangeHandler: createChangeHandler(SEARCH_QUERY_PARAM, props), - }; - const tableData = data?.entry?.map((datum: Dictionary, index: number) => { return { key: `${index}`, @@ -145,6 +81,7 @@ export const CareTeamList: React.FC = (props: CareTeamLis name: datum.resource.name, }; }); + type TableData = typeof tableData[0]; const columns = [ { @@ -205,6 +142,13 @@ export const CareTeamList: React.FC = (props: CareTeamLis }, ]; + const tableProps = { + datasource: tableData, + columns, + loading: isFetching || isLoading, + pagination: tablePaginationProps, + }; + return (
@@ -223,30 +167,11 @@ export const CareTeamList: React.FC = (props: CareTeamLis
{ - setPageProps({ - currentPage: page, - pageSize: pageSize ?? careTeamPageSize, - }); - }, - current: currentPage, - total: payloadCount, - pageSizeOptions: ['5', '10', '20', '50', '100'], - }} + {...tableProps} /> - + ); }; - -CareTeamList.defaultProps = defaultProps; - -export default CareTeamList; From 1b9f8f19ee25c1e4c1c052d2abc5f533fc44491d Mon Sep 17 00:00:00 2001 From: Peter Muriuki Date: Wed, 20 Apr 2022 11:35:52 +0300 Subject: [PATCH 2/4] Code style and lint tweaks --- .../src/components/ListView/index.tsx | 30 +++++++------------ .../src/components/ViewDetails/index.tsx | 4 +-- 2 files changed, 12 insertions(+), 22 deletions(-) diff --git a/packages/fhir-care-team/src/components/ListView/index.tsx b/packages/fhir-care-team/src/components/ListView/index.tsx index fb35fe4ed..a5c52ad84 100644 --- a/packages/fhir-care-team/src/components/ListView/index.tsx +++ b/packages/fhir-care-team/src/components/ListView/index.tsx @@ -1,21 +1,16 @@ /* eslint-disable @typescript-eslint/naming-convention */ import React from 'react'; import { Helmet } from 'react-helmet'; -import { - Row, - Col, - Table, - PageHeader, - Button, - Divider, - Dropdown, - Menu, - Popconfirm, -} from 'antd'; +import { Row, Col, Table, PageHeader, Button, Divider, Dropdown, Menu, Popconfirm } from 'antd'; import { MoreOutlined, PlusOutlined } from '@ant-design/icons'; import { RouteComponentProps, useHistory, useParams } from 'react-router'; import { Link } from 'react-router-dom'; -import { FHIRServiceClass, useSimpleTabularView, BrokenPage, SearchForm } from '@opensrp/react-utils'; +import { + FHIRServiceClass, + useSimpleTabularView, + BrokenPage, + SearchForm, +} from '@opensrp/react-utils'; import lang from '../../lang'; import { FHIR_CARE_TEAM, @@ -29,7 +24,6 @@ import { Dictionary } from '@onaio/utils'; import { sendErrorNotification, sendSuccessNotification } from '@opensrp/notifications'; import { ICareTeam } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ICareTeam'; - // route params for care team pages interface RouteParams { careTeamId: string | undefined; @@ -42,7 +36,6 @@ interface Props { export type CareTeamListPropTypes = Props & RouteComponentProps; - export const deleteCareTeam = async (fhirBaseURL: string, id: string): Promise => { const serve = new FHIRServiceClass(fhirBaseURL, FHIR_CARE_TEAM); return serve @@ -51,7 +44,6 @@ export const deleteCareTeam = async (fhirBaseURL: string, id: string): Promise sendErrorNotification(lang.ERROR_OCCURRED)); }; - /** * Function which shows the list of all roles and their details * @@ -74,7 +66,7 @@ export const CareTeamList: React.FC = (props: CareTeamLis return ; } - const tableData = data?.entry?.map((datum: Dictionary, index: number) => { + const tableData = data?.records.map((datum: Dictionary, index: number) => { return { key: `${index}`, id: datum.resource.id, @@ -166,11 +158,9 @@ export const CareTeamList: React.FC = (props: CareTeamLis -
+
- + resourceId && ); diff --git a/packages/fhir-care-team/src/components/ViewDetails/index.tsx b/packages/fhir-care-team/src/components/ViewDetails/index.tsx index 08c0daaa1..a289cd74e 100644 --- a/packages/fhir-care-team/src/components/ViewDetails/index.tsx +++ b/packages/fhir-care-team/src/components/ViewDetails/index.tsx @@ -7,7 +7,7 @@ import { useQuery, useQueries } from 'react-query'; import { IfhirR4 } from '@smile-cdr/fhirts'; import { Resource404, BrokenPage, FHIRServiceClass } from '@opensrp/react-utils'; import lang from '../../lang'; -import { FHIR_CARE_TEAM, URL_CARE_TEAM } from '../../constants'; +import { careTeamResourceType, FHIR_CARE_TEAM, URL_CARE_TEAM } from '../../constants'; import { getPatientName } from '../CreateEditCareTeam/utils'; import { FHIR_GROUPS, FHIR_PRACTITIONERS } from '../../constants'; const { Text } = Typography; @@ -29,7 +29,7 @@ const ViewDetails = (props: ViewDetailsProps) => { const history = useHistory(); const { data, isLoading, error } = useQuery({ - queryKey: [`CareTeam/${careTeamId}`], + queryKey: [careTeamResourceType, careTeamId], queryFn: () => careTeamId ? new FHIRServiceClass(fhirBaseURL, FHIR_CARE_TEAM).read(careTeamId) : undefined, select: (res) => res, From 3b8cedc38f889915abfd5ffc39bfb4e3d894271d Mon Sep 17 00:00:00 2001 From: Peter Muriuki Date: Wed, 20 Apr 2022 13:04:45 +0300 Subject: [PATCH 3/4] Fix test regressions --- .../src/components/ListView/index.tsx | 35 +- .../__snapshots__/index-rtl.test.tsx.snap | 415 ++++++++++++++++++ .../tests/__snapshots__/index.test.tsx.snap | 414 ++++++++++++++++- .../components/ListView/tests/fixtures.tsx | 85 ++++ .../ListView/tests/index-rtl.test.tsx | 171 ++++++++ .../components/ListView/tests/index.test.tsx | 210 ++------- .../src/components/ViewDetails/index.tsx | 19 +- 7 files changed, 1122 insertions(+), 227 deletions(-) create mode 100644 packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index-rtl.test.tsx.snap create mode 100644 packages/fhir-care-team/src/components/ListView/tests/index-rtl.test.tsx diff --git a/packages/fhir-care-team/src/components/ListView/index.tsx b/packages/fhir-care-team/src/components/ListView/index.tsx index a5c52ad84..a03b63096 100644 --- a/packages/fhir-care-team/src/components/ListView/index.tsx +++ b/packages/fhir-care-team/src/components/ListView/index.tsx @@ -1,15 +1,16 @@ /* eslint-disable @typescript-eslint/naming-convention */ import React from 'react'; import { Helmet } from 'react-helmet'; -import { Row, Col, Table, PageHeader, Button, Divider, Dropdown, Menu, Popconfirm } from 'antd'; +import { Row, Col, PageHeader, Button, Divider, Dropdown, Menu, Popconfirm } from 'antd'; import { MoreOutlined, PlusOutlined } from '@ant-design/icons'; -import { RouteComponentProps, useHistory, useParams } from 'react-router'; +import { RouteComponentProps, useParams } from 'react-router'; import { Link } from 'react-router-dom'; import { FHIRServiceClass, useSimpleTabularView, BrokenPage, SearchForm, + TableLayout, } from '@opensrp/react-utils'; import lang from '../../lang'; import { @@ -58,19 +59,17 @@ export const CareTeamList: React.FC = (props: CareTeamLis fhirBaseURL, careTeamResourceType ); - const history = useHistory(); - const { data, isFetching, isLoading, error, refetch } = queryValues; if (error && !data) { return ; } - const tableData = data?.records.map((datum: Dictionary, index: number) => { + const tableData = (data?.records ?? []).map((datum: Dictionary) => { return { - key: `${index}`, - id: datum.resource.id, - name: datum.resource.name, + key: datum.id, + id: datum.id, + name: datum.name, }; }); type TableData = typeof tableData[0]; @@ -78,9 +77,8 @@ export const CareTeamList: React.FC = (props: CareTeamLis const columns = [ { title: lang.NAME, - dataIndex: 'name', + dataIndex: 'name' as const, editable: true, - sorter: (a: TableData, b: TableData) => a.name.localeCompare(b.name), }, { title: 'Actions', @@ -98,7 +96,7 @@ export const CareTeamList: React.FC = (props: CareTeamLis - + = (props: CareTeamLis - { - history.push(`${URL_CARE_TEAM}/${record.id}`); - }} - > - View Details + + View Details } @@ -127,7 +120,7 @@ export const CareTeamList: React.FC = (props: CareTeamLis arrow trigger={['click']} > - + ), @@ -158,9 +151,9 @@ export const CareTeamList: React.FC = (props: CareTeamLis -
+ - resourceId && + {resourceId && } ); diff --git a/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index-rtl.test.tsx.snap b/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index-rtl.test.tsx.snap new file mode 100644 index 000000000..dc049b280 --- /dev/null +++ b/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index-rtl.test.tsx.snap @@ -0,0 +1,415 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Care Teams list view renders correctly: Search 1 page 1 1`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 1 page 1 2`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 2 page 1 1`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 2 page 1 2`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 3 page 1 1`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 3 page 1 2`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 4 page 1 1`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 4 page 1 2`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 5 page 1 1`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 5 page 1 2`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 6 page 1 1`] = ` + +`; + +exports[`Care Teams list view renders correctly: Search 6 page 1 2`] = ` + +`; + +exports[`Care Teams list view renders correctly: view details display block 1`] = ` + + + Name + + +`; + +exports[`Care Teams list view renders correctly: view details display block 2`] = ` + + Peter Charlmers Care team + +`; + +exports[`Care Teams list view renders correctly: view details display block 3`] = ` + + + Identifier + + +`; + +exports[`Care Teams list view renders correctly: view details display block 4`] = ` + +`; + +exports[`Care Teams list view renders correctly: view details display block 5`] = ` + + + Status + + +`; + +exports[`Care Teams list view renders correctly: view details display block 6`] = ` + + active + +`; + +exports[`Care Teams list view renders correctly: view details display block 7`] = ` + + + Participant + + +`; + +exports[`Care Teams list view renders correctly: view details display block 8`] = ` + + + +`; + +exports[`Care Teams list view renders correctly: view details display block 9`] = ` + + + +`; diff --git a/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap index 0b43414a5..dc049b280 100644 --- a/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap +++ b/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap @@ -1,41 +1,415 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Patients list view renders correctly 1`] = `"FHIR Care TeamCreate Care TeamNameActionsCare Team OneEditCare Team ThreeEditCare Team FiveEdittest 33EditCare Team SixEdit125 / pageGo toPage"`; +exports[`Care Teams list view renders correctly: Search 1 page 1 1`] = ` + +`; -exports[`Patients list view renders correctly 3`] = `"FHIR Care TeamCreate Care TeamNameActionsCare Team FourEdit125 / pageGo toPage"`; +exports[`Care Teams list view renders correctly: Search 1 page 1 2`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - ascending 0 1`] = `"NameActions"`; +exports[`Care Teams list view renders correctly: Search 2 page 1 1`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - ascending 1 1`] = `"Care Team FiveEdit"`; +exports[`Care Teams list view renders correctly: Search 2 page 1 2`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - ascending 2 1`] = `"Care Team FourEdit"`; +exports[`Care Teams list view renders correctly: Search 3 page 1 1`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - ascending 3 1`] = `"Care Team OneEdit"`; +exports[`Care Teams list view renders correctly: Search 3 page 1 2`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - ascending 4 1`] = `"Care Team SixEdit"`; +exports[`Care Teams list view renders correctly: Search 4 page 1 1`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - ascending 5 1`] = `"Care Team ThreeEdit"`; +exports[`Care Teams list view renders correctly: Search 4 page 1 2`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - descending 0 1`] = `"NameActions"`; +exports[`Care Teams list view renders correctly: Search 5 page 1 1`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - descending 1 1`] = `"test 33Edit"`; +exports[`Care Teams list view renders correctly: Search 5 page 1 2`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - descending 2 1`] = `"Care Team ThreeEdit"`; +exports[`Care Teams list view renders correctly: Search 6 page 1 1`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - descending 3 1`] = `"Care Team SixEdit"`; +exports[`Care Teams list view renders correctly: Search 6 page 1 2`] = ` + +`; -exports[`Patients list view renders correctly: sorted table rows by name - descending 4 1`] = `"Care Team OneEdit"`; +exports[`Care Teams list view renders correctly: view details display block 1`] = ` + + + Name + + +`; -exports[`Patients list view renders correctly: sorted table rows by name - descending 5 1`] = `"Care Team FourEdit"`; +exports[`Care Teams list view renders correctly: view details display block 2`] = ` + + Peter Charlmers Care team + +`; -exports[`Patients list view renders correctly: table rows - default order 0 1`] = `"NameActions"`; +exports[`Care Teams list view renders correctly: view details display block 3`] = ` + + + Identifier + + +`; -exports[`Patients list view renders correctly: table rows - default order 1 1`] = `"Care Team OneEdit"`; +exports[`Care Teams list view renders correctly: view details display block 4`] = ` + +`; -exports[`Patients list view renders correctly: table rows - default order 2 1`] = `"Care Team ThreeEdit"`; +exports[`Care Teams list view renders correctly: view details display block 5`] = ` + + + Status + + +`; -exports[`Patients list view renders correctly: table rows - default order 3 1`] = `"Care Team FiveEdit"`; +exports[`Care Teams list view renders correctly: view details display block 6`] = ` + + active + +`; -exports[`Patients list view renders correctly: table rows - default order 4 1`] = `"test 33Edit"`; +exports[`Care Teams list view renders correctly: view details display block 7`] = ` + + + Participant + + +`; -exports[`Patients list view renders correctly: table rows - default order 5 1`] = `"Care Team SixEdit"`; +exports[`Care Teams list view renders correctly: view details display block 8`] = ` + + + +`; + +exports[`Care Teams list view renders correctly: view details display block 9`] = ` + + + +`; diff --git a/packages/fhir-care-team/src/components/ListView/tests/fixtures.tsx b/packages/fhir-care-team/src/components/ListView/tests/fixtures.tsx index ba38493ca..8e0e3a914 100644 --- a/packages/fhir-care-team/src/components/ListView/tests/fixtures.tsx +++ b/packages/fhir-care-team/src/components/ListView/tests/fixtures.tsx @@ -231,3 +231,88 @@ export const careTeams = { }, ], }; + +export const careTeam4214 = { + resourceType: 'CareTeam', + id: '4214', + meta: { + versionId: '2', + lastUpdated: '2021-11-01T12:46:15.815+00:00', + source: '#10e9551bdff81a82', + }, + text: { + status: 'generated', + div: '
Care Team
', + }, + contained: [ + { + resourceType: 'Practitioner', + id: '4206', + name: [ + { + family: 'Careful', + given: ['Adam'], + prefix: ['Dr'], + }, + ], + }, + ], + status: 'active', + category: [ + { + coding: [ + { + system: 'http://loinc.org', + code: 'LA27976-2', + display: 'Encounter-focused care team', + }, + ], + }, + ], + name: 'Peter Charlmers Care team', + subject: { + reference: 'Patient/4208', + display: 'Peter James Chalmers', + }, + encounter: { + reference: 'Encounter/4210', + }, + period: { + end: '2013-01-01', + }, + participant: [ + { + role: [ + { + text: 'responsiblePerson', + }, + ], + member: { + reference: 'Patient/4208', + display: 'Peter James Chalmers', + }, + }, + { + role: [ + { + text: 'responsiblePerson', + }, + ], + member: { + reference: '#pr1', + display: 'Dorothy Dietition', + }, + onBehalfOf: { + reference: 'Organization/f001', + }, + period: { + end: '2013-01-01', + }, + }, + ], + managingOrganization: [ + { + reference: 'Organization/4203', + }, + ], +}; diff --git a/packages/fhir-care-team/src/components/ListView/tests/index-rtl.test.tsx b/packages/fhir-care-team/src/components/ListView/tests/index-rtl.test.tsx new file mode 100644 index 000000000..c6e5f0c5a --- /dev/null +++ b/packages/fhir-care-team/src/components/ListView/tests/index-rtl.test.tsx @@ -0,0 +1,171 @@ +import React from 'react'; +import { Provider } from 'react-redux'; +import { authenticateUser } from '@onaio/session-reducer'; +import { CareTeamList } from '..'; +import { Route, Router, Switch } from 'react-router'; +import { createBrowserHistory } from 'history'; +import nock from 'nock'; +import * as reactQuery from 'react-query'; +import { waitForElementToBeRemoved, fireEvent, render, cleanup } from '@testing-library/react'; +import { store } from '@opensrp/store'; +import { careTeam4214, careTeams } from './fixtures'; +import { careTeamResourceType, URL_CARE_TEAM } from '../../../constants'; +import { createMemoryHistory } from 'history'; + +jest.mock('fhirclient', () => { + return jest.requireActual('fhirclient/lib/entry/browser'); +}); + +jest.mock('@opensrp/react-utils', () => { + const actual = jest.requireActual('@opensrp/react-utils'); + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const SearchForm = (props: any) => { + const { onChangeHandler } = props; + return ( +
+ +
+ ); + }; + return { + ...actual, + SearchForm, + }; +}); + +const { QueryClient, QueryClientProvider } = reactQuery; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: false, + cacheTime: 0, + }, + }, +}); + +jest.mock('@opensrp/notifications', () => ({ + __esModule: true, + ...Object.assign({}, jest.requireActual('@opensrp/notifications')), +})); + +const history = createBrowserHistory(); + +const props = { + fhirBaseURL: 'https://r4.smarthealthit.org/', + history, + careTeamPageSize: 5, + location: { + hash: '', + pathname: `${URL_CARE_TEAM}`, + search: '', + state: {}, + }, + match: { + isExact: true, + params: { careTeamId: undefined }, + path: `${URL_CARE_TEAM}`, + url: `${URL_CARE_TEAM}`, + }, +}; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const AppWrapper = (props: any) => { + return ( + + + + + {(routeProps) => } + + + {(routeProps) => } + + + + + ); +}; + +describe('Care Teams list view', () => { + beforeAll(() => { + nock.disableNetConnect(); + store.dispatch( + authenticateUser( + true, + { + email: 'bob@example.com', + name: 'Bobbie', + username: 'RobertBaratheon', + }, + // eslint-disable-next-line @typescript-eslint/naming-convention + { api_token: 'hunter2', oAuth2Data: { access_token: 'sometoken', state: 'abcde' } } + ) + ); + }); + afterAll(() => { + nock.enableNetConnect(); + }); + + afterEach(() => { + jest.resetAllMocks(); + jest.clearAllMocks(); + jest.restoreAllMocks(); + cleanup(); + }); + + it('renders correctly', async () => { + nock(props.fhirBaseURL) + .get(`/${careTeamResourceType}/_search`) + .query({ + _getpagesoffset: 0, + _count: 20, + }) + .reply(200, careTeams) + .persist(); + + const history = createMemoryHistory(); + history.push(URL_CARE_TEAM); + + const { getByText } = render( + + + + ); + + await waitForElementToBeRemoved(document.querySelector('.ant-spin')); + + document.querySelectorAll('tr').forEach((tr, idx) => { + tr.querySelectorAll('td').forEach((td) => { + expect(td).toMatchSnapshot(`Search ${idx} page 1`); + }); + }); + + // view details + nock(props.fhirBaseURL).get(`/${careTeamResourceType}/308`).reply(200, careTeam4214).persist(); + + // target the initial row view details + const dropdown = document.querySelector( + 'tbody tr:nth-child(1) [data-testid="action-dropdown"]' + ); + fireEvent.click(dropdown); + + const viewDetailsLink = getByText(/View Details/); + expect(viewDetailsLink).toMatchInlineSnapshot(` + + View Details + + `); + fireEvent.click(viewDetailsLink); + expect(history.location.pathname).toEqual('/admin/CareTeams/308'); + + await waitForElementToBeRemoved(document.querySelector('.ant-spin')); + // view details renders correctly + document + .querySelectorAll('.display-block') + .forEach((block) => expect(block).toMatchSnapshot('view details display block')); + }); +}); diff --git a/packages/fhir-care-team/src/components/ListView/tests/index.test.tsx b/packages/fhir-care-team/src/components/ListView/tests/index.test.tsx index 34126c909..f5a03d412 100644 --- a/packages/fhir-care-team/src/components/ListView/tests/index.test.tsx +++ b/packages/fhir-care-team/src/components/ListView/tests/index.test.tsx @@ -1,28 +1,30 @@ import React from 'react'; import { Provider } from 'react-redux'; import { authenticateUser } from '@onaio/session-reducer'; -import { CareTeamList, deleteCareTeam, useCareTeamsHook } from '..'; +import { CareTeamList, deleteCareTeam } from '..'; import { Router } from 'react-router'; import { createBrowserHistory } from 'history'; import nock from 'nock'; import flushPromises from 'flush-promises'; import * as reactQuery from 'react-query'; -import { renderHook } from '@testing-library/react-hooks'; -import { waitFor } from '@testing-library/react'; -import { act } from 'react-dom/test-utils'; +import { act } from '@testing-library/react'; import * as notifications from '@opensrp/notifications'; import { store } from '@opensrp/store'; import { careTeams } from './fixtures'; -import { mount, shallow } from 'enzyme'; -import * as fhirCient from 'fhirclient'; -import toJson from 'enzyme-to-json'; +import { mount } from 'enzyme'; +import * as fhirclient from 'fhirclient'; import { URL_CARE_TEAM } from '../../../constants'; -import { createWrapper, renderWithClient } from './utils'; -import Client from 'fhirclient/lib/Client'; const { QueryClient, QueryClientProvider } = reactQuery; -const queryClient = new QueryClient(); +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: false, + cacheTime: 0, + }, + }, +}); jest.mock('@opensrp/notifications', () => ({ __esModule: true, @@ -31,7 +33,8 @@ jest.mock('@opensrp/notifications', () => ({ const history = createBrowserHistory(); -const careTeamProps = { +const props = { + fhirBaseURL: 'https://r4.smarthealthit.org/', history, careTeamPageSize: 5, location: { @@ -48,8 +51,9 @@ const careTeamProps = { }, }; -describe('Patients list view', () => { +describe('Care Teams list view', () => { beforeAll(() => { + nock.disableNetConnect(); store.dispatch( authenticateUser( true, @@ -62,7 +66,9 @@ describe('Patients list view', () => { { api_token: 'hunter2', oAuth2Data: { access_token: 'sometoken', state: 'abcde' } } ) ); - nock('https://r4.smarthealthit.org').get('/CareTeam').reply(200, careTeams); + }); + afterAll(() => { + nock.enableNetConnect(); }); afterEach(() => { @@ -71,151 +77,8 @@ describe('Patients list view', () => { jest.restoreAllMocks(); }); - it('renders patients table without crashing', async () => { - shallow( - - - - - - ); - }); - - it('renders correctly', async () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const client = new Client({} as any, { - serverUrl: 'https://r4.smarthealthit.org/', - }); - - const result = await client.request({ - includeResponse: true, - url: 'CareTeam', - }); - - // expect(result.body).toEqual(''); - - const fhir = jest.spyOn(fhirCient, 'client'); - const requestMock = jest.fn(); - fhir.mockImplementation( - jest.fn().mockImplementation(() => { - return { - request: requestMock.mockResolvedValue(result.body), - }; - }) - ); - const wrapper = mount( - - - - - - - - ); - - expect(toJson(wrapper.find('.ant-spin'))).toBeTruthy(); - - await act(async () => { - await flushPromises(); - wrapper.update(); - }); - - expect(requestMock.mock.calls).toEqual([['CareTeam/_search?_count=5&_getpagesoffset=0']]); - expect(toJson(wrapper.find('.ant-spin'))).toBeFalsy(); - expect(wrapper.text()).toMatchSnapshot(); - - // test sorting - // find table (sorted by default order) - wrapper.find('tr').forEach((tr, index) => { - expect(tr.text()).toMatchSnapshot(`table rows - default order ${index}`); - }); - - // sort by username - // click on sort to change the order (ascending) - wrapper.find('thead tr th').first().simulate('click'); - wrapper.update(); - - // check new sort order by name (ascending) - wrapper.find('tr').forEach((tr, index) => { - expect(tr.text()).toMatchSnapshot(`sorted table rows by name - ascending ${index}`); - }); - - // click on sort to change the order (descending) - wrapper.find('thead tr th').first().simulate('click'); - wrapper.update(); - - // check new sort order by name (ascending) - wrapper.find('tr').forEach((tr, index) => { - expect(tr.text()).toMatchSnapshot(`sorted table rows by name - descending ${index}`); - }); - - // cancel sort - // click on sort to change the order (descending) - wrapper.find('thead tr th').first().simulate('click'); - - // look for pagination - expect(wrapper.find('Pagination').at(0).text()).toMatchInlineSnapshot(`"125 / pageGo toPage"`); - wrapper.find('.ant-pagination-item-2').simulate('click'); - await act(async () => { - await flushPromises(); - wrapper.update(); - }); - expect(wrapper.text()).toMatchSnapshot(); - - wrapper.unmount(); - }); - - it('correctly redirects to care team detail view url', async () => { - const fhir = jest.spyOn(fhirCient, 'client'); - fhir.mockImplementation( - jest.fn().mockImplementation(() => { - return { - request: jest.fn().mockResolvedValueOnce(careTeams), - }; - }) - ); - const wrapper = mount( - - - - - - - - ); - await act(async () => { - await flushPromises(); - }); - - wrapper.update(); - - wrapper.find('Dropdown').at(0).simulate('click'); - wrapper.update(); - wrapper.find('.viewdetails').at(0).simulate('click'); - wrapper.update(); - // Redirect to care team detail view - expect(history.location.pathname).toEqual('/admin/CareTeams/308'); - }); - - it('successful query component', async () => { - const fhir = jest.spyOn(fhirCient, 'client'); - fhir.mockImplementation( - jest.fn().mockImplementation(() => { - return { - request: jest.fn().mockResolvedValueOnce(careTeams), - }; - }) - ); - const result = renderWithClient( - - - - ); - await waitFor(() => result.getByText(/Care Team One/)); - }); - it('successfully deletes care team', async () => { - const fhir = jest.spyOn(fhirCient, 'client'); + const fhir = jest.spyOn(fhirclient, 'client'); const notificationSuccessMock = jest.spyOn(notifications, 'sendSuccessNotification'); fhir.mockImplementation( jest.fn().mockImplementation(() => { @@ -226,14 +89,18 @@ describe('Patients list view', () => { }) ); + const div = document.createElement('div'); + document.body.appendChild(div); + const wrapper = mount( - + - + , + { attachTo: div } ); await act(async () => { @@ -264,7 +131,7 @@ describe('Patients list view', () => { it('handles failed care team deletion', async () => { const notificationErrorsMock = jest.spyOn(notifications, 'sendErrorNotification'); - const fhir = jest.spyOn(fhirCient, 'client'); + const fhir = jest.spyOn(fhirclient, 'client'); fhir.mockImplementation( jest.fn().mockImplementation(() => { return { @@ -290,27 +157,6 @@ describe('hooks', () => { jest.resetModules(); }); - it('successful fetchCareTeams query hook', async () => { - const fhir = jest.spyOn(fhirCient, 'client'); - fhir.mockImplementation( - jest.fn().mockImplementation(() => { - return { - request: jest.fn().mockResolvedValueOnce(careTeams), - }; - }) - ); - const { result, waitFor } = renderHook( - () => useCareTeamsHook('https://r4.smarthealthit.org/', 20, 0, jest.fn()), - { - wrapper: createWrapper(), - } - ); - - await waitFor(() => result.current.isFetched); - - expect(result.current.data).toBe(careTeams); - }); - it('shows broken page if fhir api is down', async () => { const reactQueryMock = jest.spyOn(reactQuery, 'useQuery'); reactQueryMock.mockImplementation( @@ -326,7 +172,7 @@ describe('hooks', () => { - + diff --git a/packages/fhir-care-team/src/components/ViewDetails/index.tsx b/packages/fhir-care-team/src/components/ViewDetails/index.tsx index a289cd74e..aa7496e90 100644 --- a/packages/fhir-care-team/src/components/ViewDetails/index.tsx +++ b/packages/fhir-care-team/src/components/ViewDetails/index.tsx @@ -5,11 +5,18 @@ import { useHistory } from 'react-router'; import { Dictionary } from '@onaio/utils'; import { useQuery, useQueries } from 'react-query'; import { IfhirR4 } from '@smile-cdr/fhirts'; -import { Resource404, BrokenPage, FHIRServiceClass } from '@opensrp/react-utils'; +import { + Resource404, + BrokenPage, + FHIRServiceClass, + getObjLike, + IdentifierUseCodes, +} from '@opensrp/react-utils'; import lang from '../../lang'; import { careTeamResourceType, FHIR_CARE_TEAM, URL_CARE_TEAM } from '../../constants'; import { getPatientName } from '../CreateEditCareTeam/utils'; import { FHIR_GROUPS, FHIR_PRACTITIONERS } from '../../constants'; +import { Identifier } from '@smile-cdr/fhirts/dist/FHIR-R3'; const { Text } = Typography; /** typings for the view details component */ @@ -52,9 +59,9 @@ const ViewDetails = (props: ViewDetailsProps) => { ); const subject = useQuery({ - queryKey: [`CareTeam/${data && data.subject && data.subject.reference}`], + queryKey: [FHIR_GROUPS, data?.subject?.reference], queryFn: () => - data && data.subject && data.subject.reference + data?.subject?.reference ? new FHIRServiceClass(fhirBaseURL, FHIR_GROUPS).read(data.subject.reference.split('/')[1]) : undefined, select: (res) => res, @@ -68,6 +75,10 @@ const ViewDetails = (props: ViewDetailsProps) => { return ; } + const officialIdentifier = getObjLike(data?.identifier, 'use', IdentifierUseCodes.OFFICIAL)[0] as + | Identifier + | undefined; + return (
@@ -95,7 +106,7 @@ const ViewDetails = (props: ViewDetailsProps) => { {lang.IDENTIFIER} - {data?.identifier[0].value} + {officialIdentifier?.value} {lang.STATUS} From 156f164e2f2038ec67a19d4e73263fc54dce64aa Mon Sep 17 00:00:00 2001 From: Peter Muriuki Date: Wed, 20 Apr 2022 14:51:16 +0300 Subject: [PATCH 4/4] Remove surplus snapshot file --- .../tests/__snapshots__/index.test.tsx.snap | 415 ------------------ 1 file changed, 415 deletions(-) delete mode 100644 packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap diff --git a/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap deleted file mode 100644 index dc049b280..000000000 --- a/packages/fhir-care-team/src/components/ListView/tests/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,415 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Care Teams list view renders correctly: Search 1 page 1 1`] = ` -
-`; - -exports[`Care Teams list view renders correctly: Search 1 page 1 2`] = ` - -`; - -exports[`Care Teams list view renders correctly: Search 2 page 1 1`] = ` - -`; - -exports[`Care Teams list view renders correctly: Search 2 page 1 2`] = ` - -`; - -exports[`Care Teams list view renders correctly: Search 3 page 1 1`] = ` - -`; - -exports[`Care Teams list view renders correctly: Search 3 page 1 2`] = ` - -`; - -exports[`Care Teams list view renders correctly: Search 4 page 1 1`] = ` - -`; - -exports[`Care Teams list view renders correctly: Search 4 page 1 2`] = ` - -`; - -exports[`Care Teams list view renders correctly: Search 5 page 1 1`] = ` - -`; - -exports[`Care Teams list view renders correctly: Search 5 page 1 2`] = ` - -`; - -exports[`Care Teams list view renders correctly: Search 6 page 1 1`] = ` - -`; - -exports[`Care Teams list view renders correctly: Search 6 page 1 2`] = ` - -`; - -exports[`Care Teams list view renders correctly: view details display block 1`] = ` - - - Name - - -`; - -exports[`Care Teams list view renders correctly: view details display block 2`] = ` - - Peter Charlmers Care team - -`; - -exports[`Care Teams list view renders correctly: view details display block 3`] = ` - - - Identifier - - -`; - -exports[`Care Teams list view renders correctly: view details display block 4`] = ` - -`; - -exports[`Care Teams list view renders correctly: view details display block 5`] = ` - - - Status - - -`; - -exports[`Care Teams list view renders correctly: view details display block 6`] = ` - - active - -`; - -exports[`Care Teams list view renders correctly: view details display block 7`] = ` - - - Participant - - -`; - -exports[`Care Teams list view renders correctly: view details display block 8`] = ` - - - -`; - -exports[`Care Teams list view renders correctly: view details display block 9`] = ` - - - -`;
+ Care Team One + + + + + + + Care Team Three + + + + + + + Care Team Five + + + + + + + test 33 + + + + + + + Care Team Six + + + + + + + Care Team Four + + + + + + + Care Team One + + + + + + + Care Team Three + + + + + + + Care Team Five + + + + + + + test 33 + + + + + + + Care Team Six + + + + + + + Care Team Four + + + + + +
- Care Team One - - - - - - - Care Team Three - - - - - - - Care Team Five - - - - - - - test 33 - - - - - - - Care Team Six - - - - - - - Care Team Four - - - - - -