Merge pull request #2189 from HospitalRun/table-refactor

refactor: use Table component

.eslintrc.js

@@ -74,5 +74,7 @@ module.exports = {
       },
     ],
     curly: ['error', 'all'],
+    'react/require-default-props': ['warn'],
+    'react/default-props-match-prop-types': ['warn']
   },
 }

src/__tests__/incidents/list/ViewIncidents.test.tsx

@@ -1,5 +1,6 @@
+import { Table } from '@hospitalrun/components'
 import { act } from '@testing-library/react'
-import { mount } from 'enzyme'
+import { mount, ReactWrapper } from 'enzyme'
 import { createMemoryHistory } from 'history'
 import React from 'react'
 import { Provider } from 'react-redux'
@@ -70,7 +71,7 @@ describe('View Incidents', () => {
       )
     })
     wrapper.update()
-    return wrapper
+    return wrapper as ReactWrapper
   }
   it('should filter incidents by status=reported on first load ', async () => {
     await setup([Permissions.ViewIncidents])
@@ -88,36 +89,40 @@ describe('View Incidents', () => {
 
     it('should render a table with the incidents', async () => {
       const wrapper = await setup([Permissions.ViewIncidents])
+      const table = wrapper.find(Table)
+      const columns = table.prop('columns')
+      const actions = table.prop('actions') as any
+      expect(columns[0]).toEqual(
+        expect.objectContaining({ label: 'incidents.reports.code', key: 'code' }),
+      )
+      expect(columns[1]).toEqual(
+        expect.objectContaining({ label: 'incidents.reports.dateOfIncident', key: 'date' }),
+      )
+      expect(columns[2]).toEqual(
+        expect.objectContaining({ label: 'incidents.reports.reportedBy', key: 'reportedBy' }),
+      )
+      expect(columns[3]).toEqual(
+        expect.objectContaining({ label: 'incidents.reports.reportedOn', key: 'reportedOn' }),
+      )
+      expect(columns[4]).toEqual(
+        expect.objectContaining({ label: 'incidents.reports.status', key: 'status' }),
+      )
 
-      const table = wrapper.find('table')
-      const tableHeader = table.find('thead')
-      const tableBody = table.find('tbody')
-      const tableHeaders = tableHeader.find('th')
-      const tableColumns = tableBody.find('td')
-
-      expect(tableHeaders.at(0).text()).toEqual('incidents.reports.code')
-      expect(tableHeaders.at(1).text()).toEqual('incidents.reports.dateOfIncident')
-      expect(tableHeaders.at(2).text()).toEqual('incidents.reports.reportedBy')
-      expect(tableHeaders.at(3).text()).toEqual('incidents.reports.reportedOn')
-      expect(tableHeaders.at(4).text()).toEqual('incidents.reports.status')
-
-      expect(tableColumns.at(0).text()).toEqual(expectedIncidents[0].code)
-      expect(tableColumns.at(1).text()).toEqual('2020-06-03 07:48 PM')
-      expect(tableColumns.at(2).text()).toEqual(expectedIncidents[0].reportedBy)
-      expect(tableColumns.at(3).text()).toEqual('2020-06-03 07:48 PM')
-      expect(tableColumns.at(4).text()).toEqual(expectedIncidents[0].status)
+      expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' }))
+      expect(table.prop('actionsHeaderText')).toEqual('actions.label')
+      expect(table.prop('data')).toEqual(expectedIncidents)
     })
   })
 
-  describe('on table row click', () => {
+  describe('on view button click', () => {
     it('should navigate to the incident when the table row is clicked', async () => {
       const wrapper = await setup([Permissions.ViewIncidents])
 
       const tr = wrapper.find('tr').at(1)
 
       act(() => {
-        const onClick = tr.prop('onClick')
-        onClick()
+        const onClick = tr.find('button').prop('onClick') as any
+        onClick({ stopPropagation: jest.fn() })
       })
 
       expect(history.location.pathname).toEqual(`/incidents/${expectedIncidents[0].id}`)

src/__tests__/labs/ViewLabs.test.tsx

@@ -1,6 +1,5 @@
-import { TextInput, Select } from '@hospitalrun/components'
+import { TextInput, Select, Table } from '@hospitalrun/components'
 import { act } from '@testing-library/react'
-import format from 'date-fns/format'
 import { mount, ReactWrapper } from 'enzyme'
 import { createMemoryHistory } from 'history'
 import React from 'react'
@@ -102,7 +101,7 @@ describe('View Labs', () => {
       code: 'L-1234',
       id: '1234',
       type: 'lab type',
-      patientId: 'patientId',
+      patient: 'patientId',
       status: 'requested',
       requestedOn: '2020-03-30T04:43:20.102Z',
     } as Lab
@@ -130,45 +129,30 @@ describe('View Labs', () => {
     })
 
     it('should render a table with data', () => {
-      const table = wrapper.find('table')
-      const tableHeader = table.find('thead')
-      const tableBody = table.find('tbody')
-
-      const tableColumnHeaders = tableHeader.find('th')
-      const tableDataColumns = tableBody.find('td')
-
-      expect(table).toBeDefined()
-      expect(tableHeader).toBeDefined()
-      expect(tableBody).toBeDefined()
-      expect(tableColumnHeaders.at(0).text().trim()).toEqual('labs.lab.code')
-
-      expect(tableColumnHeaders.at(1).text().trim()).toEqual('labs.lab.type')
-
-      expect(tableColumnHeaders.at(2).text().trim()).toEqual('labs.lab.requestedOn')
-
-      expect(tableColumnHeaders.at(3).text().trim()).toEqual('labs.lab.status')
-
-      expect(tableDataColumns.at(0).text().trim()).toEqual(expectedLab.code)
-
-      expect(tableDataColumns.at(1).text().trim()).toEqual(expectedLab.type)
-
-      expect(tableDataColumns.at(2).text().trim()).toEqual(
-        format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'),
+      const table = wrapper.find(Table)
+      const columns = table.prop('columns')
+      const actions = table.prop('actions') as any
+      expect(columns[0]).toEqual(expect.objectContaining({ label: 'labs.lab.code', key: 'code' }))
+      expect(columns[1]).toEqual(expect.objectContaining({ label: 'labs.lab.type', key: 'type' }))
+      expect(columns[2]).toEqual(
+        expect.objectContaining({ label: 'labs.lab.requestedOn', key: 'requestedOn' }),
+      )
+      expect(columns[3]).toEqual(
+        expect.objectContaining({ label: 'labs.lab.status', key: 'status' }),
       )
 
-      expect(tableDataColumns.at(3).text().trim()).toEqual(expectedLab.status)
+      expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' }))
+      expect(table.prop('actionsHeaderText')).toEqual('actions.label')
+      expect(table.prop('data')).toEqual([expectedLab])
     })
 
-    it('should navigate to the lab when the row is clicked', () => {
-      const table = wrapper.find('table')
-      const tableBody = table.find('tbody')
-      const tableRow = tableBody.find('tr').at(0)
+    it('should navigate to the lab when the view button is clicked', () => {
+      const tr = wrapper.find('tr').at(1)
 
       act(() => {
-        const onClick = tableRow.prop('onClick') as any
-        onClick()
+        const onClick = tr.find('button').prop('onClick') as any
+        onClick({ stopPropagation: jest.fn() })
       })
-
       expect(history.location.pathname).toEqual(`/labs/${expectedLab.id}`)
     })
   })
@@ -181,7 +165,7 @@ describe('View Labs', () => {
       const expectedLab = {
         id: '1234',
         type: 'lab type',
-        patientId: 'patientId',
+        patient: 'patientId',
         status: 'requested',
         requestedOn: '2020-03-30T04:43:20.102Z',
       } as Lab
@@ -234,7 +218,7 @@ describe('View Labs', () => {
       const expectedLab = {
         id: '1234',
         type: 'lab type',
-        patientId: 'patientId',
+        patient: 'patientId',
         status: 'requested',
         requestedOn: '2020-03-30T04:43:20.102Z',
       } as Lab

src/__tests__/patients/care-plans/CarePlanTable.test.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@hospitalrun/components'
-import { mount } from 'enzyme'
+import { Table } from '@hospitalrun/components'
+import { mount, ReactWrapper } from 'enzyme'
 import { createMemoryHistory } from 'history'
 import React from 'react'
 import { act } from 'react-dom/test-utils'
@@ -46,41 +46,41 @@ describe('Care Plan Table', () => {
       </Provider>,
     )
 
-    return { wrapper, history }
+    return { wrapper: wrapper as ReactWrapper, history }
   }
 
   it('should render a table', () => {
     const { wrapper } = setup()
 
-    const table = wrapper.find('table')
-    const tableHeader = table.find('thead')
-    const headers = tableHeader.find('th')
-    const body = table.find('tbody')
-    const columns = body.find('tr').find('td')
-
-    expect(headers.at(0).text()).toEqual('patient.carePlan.title')
-    expect(headers.at(1).text()).toEqual('patient.carePlan.startDate')
-    expect(headers.at(2).text()).toEqual('patient.carePlan.endDate')
-    expect(headers.at(3).text()).toEqual('patient.carePlan.status')
-    expect(headers.at(4).text()).toEqual('actions.label')
+    const table = wrapper.find(Table)
+    const columns = table.prop('columns')
+    const actions = table.prop('actions') as any
+    expect(columns[0]).toEqual(
+      expect.objectContaining({ label: 'patient.carePlan.title', key: 'title' }),
+    )
+    expect(columns[1]).toEqual(
+      expect.objectContaining({ label: 'patient.carePlan.startDate', key: 'startDate' }),
+    )
+    expect(columns[2]).toEqual(
+      expect.objectContaining({ label: 'patient.carePlan.endDate', key: 'endDate' }),
+    )
+    expect(columns[3]).toEqual(
+      expect.objectContaining({ label: 'patient.carePlan.status', key: 'status' }),
+    )
 
-    expect(columns.at(0).text()).toEqual(carePlan.title)
-    expect(columns.at(1).text()).toEqual('2020-07-03')
-    expect(columns.at(2).text()).toEqual('2020-07-05')
-    expect(columns.at(3).text()).toEqual(carePlan.status)
-    expect(columns.at(4).find('button')).toHaveLength(1)
+    expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' }))
+    expect(table.prop('actionsHeaderText')).toEqual('actions.label')
+    expect(table.prop('data')).toEqual(patient.carePlans)
   })
 
   it('should navigate to the care plan view when the view details button is clicked', () => {
     const { wrapper, history } = setup()
 
-    const table = wrapper.find('table')
-    const body = table.find('tbody')
-    const columns = body.find('tr').find('td')
+    const tr = wrapper.find('tr').at(1)
 
     act(() => {
-      const onClick = columns.at(4).find(Button).prop('onClick') as any
-      onClick()
+      const onClick = tr.find('button').prop('onClick') as any
+      onClick({ stopPropagation: jest.fn() })
     })
 
     expect(history.location.pathname).toEqual(`/patients/${patient.id}/care-plans/${carePlan.id}`)

src/__tests__/patients/labs/LabsTab.test.tsx

@@ -1,5 +1,5 @@
 import * as components from '@hospitalrun/components'
-import format from 'date-fns/format'
+import { Table } from '@hospitalrun/components'
 import { mount, ReactWrapper } from 'enzyme'
 import { createMemoryHistory } from 'history'
 import React from 'react'
@@ -61,23 +61,23 @@ describe('Labs Tab', () => {
   it('should list the patients labs', async () => {
     const { wrapper } = await setup()
 
-    const table = wrapper.find('table')
-    const tableHeader = wrapper.find('thead')
-    const tableHeaders = wrapper.find('th')
-    const tableBody = wrapper.find('tbody')
-    const tableData = wrapper.find('td')
-
-    expect(table).toHaveLength(1)
-    expect(tableHeader).toHaveLength(1)
-    expect(tableBody).toHaveLength(1)
-    expect(tableHeaders.at(0).text()).toEqual('labs.lab.type')
-    expect(tableHeaders.at(1).text()).toEqual('labs.lab.requestedOn')
-    expect(tableHeaders.at(2).text()).toEqual('labs.lab.status')
-    expect(tableData.at(0).text()).toEqual(expectedLabs[0].type)
-    expect(tableData.at(1).text()).toEqual(
-      format(new Date(expectedLabs[0].requestedOn), 'yyyy-MM-dd hh:mm a'),
+    const table = wrapper.find(Table)
+    const columns = table.prop('columns')
+    const actions = table.prop('actions') as any
+    expect(columns[0]).toEqual(expect.objectContaining({ label: 'labs.lab.type', key: 'type' }))
+    expect(columns[1]).toEqual(
+      expect.objectContaining({ label: 'labs.lab.requestedOn', key: 'requestedOn' }),
+    )
+    expect(columns[2]).toEqual(
+      expect.objectContaining({
+        label: 'labs.lab.status',
+        key: 'status',
+      }),
     )
-    expect(tableData.at(2).text()).toEqual(expectedLabs[0].status)
+
+    expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' }))
+    expect(table.prop('actionsHeaderText')).toEqual('actions.label')
+    expect(table.prop('data')).toEqual(expectedLabs)
   })
 
   it('should render a warning message if the patient does not have any labs', async () => {

src/__tests__/patients/list/ViewPatients.test.tsx

@@ -1,5 +1,4 @@
-import { TextInput, Spinner } from '@hospitalrun/components'
-import format from 'date-fns/format'
+import { TextInput, Spinner, Table } from '@hospitalrun/components'
 import { mount } from 'enzyme'
 import React from 'react'
 import { act } from 'react-dom/test-utils'
@@ -84,26 +83,27 @@ describe('Patients', () => {
     it('should render a table of patients', () => {
       const wrapper = setup()
 
-      const table = wrapper.find('table')
-      const tableHeaders = table.find('th')
-      const tableColumns = table.find('td')
+      const table = wrapper.find(Table)
+      const columns = table.prop('columns')
+      const actions = table.prop('actions') as any
 
       expect(table).toHaveLength(1)
-      expect(tableHeaders).toHaveLength(5)
-      expect(tableColumns).toHaveLength(5)
-      expect(tableHeaders.at(0).text()).toEqual('patient.code')
-      expect(tableHeaders.at(1).text()).toEqual('patient.givenName')
-      expect(tableHeaders.at(2).text()).toEqual('patient.familyName')
-      expect(tableHeaders.at(3).text()).toEqual('patient.sex')
-      expect(tableHeaders.at(4).text()).toEqual('patient.dateOfBirth')
-
-      expect(tableColumns.at(0).text()).toEqual(patients[0].code)
-      expect(tableColumns.at(1).text()).toEqual(patients[0].givenName)
-      expect(tableColumns.at(2).text()).toEqual(patients[0].familyName)
-      expect(tableColumns.at(3).text()).toEqual(patients[0].sex)
-      expect(tableColumns.at(4).text()).toEqual(
-        format(new Date(patients[0].dateOfBirth), 'yyyy-MM-dd'),
+
+      expect(columns[0]).toEqual(expect.objectContaining({ label: 'patient.code', key: 'code' }))
+      expect(columns[1]).toEqual(
+        expect.objectContaining({ label: 'patient.givenName', key: 'givenName' }),
+      )
+      expect(columns[2]).toEqual(
+        expect.objectContaining({ label: 'patient.familyName', key: 'familyName' }),
       )
+      expect(columns[3]).toEqual(expect.objectContaining({ label: 'patient.sex', key: 'sex' }))
+      expect(columns[4]).toEqual(
+        expect.objectContaining({ label: 'patient.dateOfBirth', key: 'dateOfBirth' }),
+      )
+
+      expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' }))
+      expect(table.prop('data')).toEqual(patients)
+      expect(table.prop('actionsHeaderText')).toEqual('actions.label')
     })
 
     it('should add a "New Patient" button to the button tool bar', () => {