@dhis2-ui/table 10.16.1 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/table",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI Table",
     "repository": {
         "type": "git",
@@ -34,14 +34,15 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.1",
-        "@dhis2/ui-icons": "10.16.1",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
+        "@dhis2/ui-icons": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",

package/src/data-table/__tests__/data-table-cell.test.js

@@ -0,0 +1,168 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { DataTableCell } from '../data-table-cell.js'
+import { TableDataCell, TableHeaderCell } from '../table-elements/index.js'
+
+describe('<DataTableCell>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<DataTableCell>{children}</DataTableCell>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(
+            <table>
+                <tbody>
+                    <tr>
+                        <DataTableCell ref={ref} />
+                    </tr>
+                </tbody>
+            </table>
+        )
+
+        expect(wrapper.find('td').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts an active prop', () => {
+        const wrapper = shallow(<DataTableCell active />)
+
+        expect(wrapper.find(TableDataCell).prop('active')).toBe(true)
+    })
+    it('accepts an align prop', () => {
+        const right = 'right'
+        const wrapper = shallow(<DataTableCell align={right} />)
+
+        expect(wrapper.find(TableDataCell).prop('align')).toBe(right)
+    })
+    it('accepts a bordered prop', () => {
+        const wrapper = shallow(<DataTableCell bordered />)
+
+        expect(wrapper.find(TableDataCell).prop('bordered')).toBe(true)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<DataTableCell className={className} />)
+
+        expect(wrapper.find(TableDataCell).prop('className')).toBe(className)
+    })
+    it('accepts a colSpan prop', () => {
+        const colSpan = '3'
+        const wrapper = shallow(<DataTableCell colSpan={colSpan} />)
+
+        expect(wrapper.find(TableDataCell).prop('colSpan')).toBe(colSpan)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<DataTableCell dataTest={dataTest} />)
+
+        expect(wrapper.find(TableDataCell).prop('dataTest')).toBe(dataTest)
+    })
+    it('accepts an error prop', () => {
+        const wrapper = shallow(<DataTableCell error />)
+
+        expect(wrapper.find(TableDataCell).prop('error')).toBe(true)
+    })
+    it('accepts a fixed prop', () => {
+        const wrapper = shallow(<DataTableCell fixed />)
+
+        expect(wrapper.find(TableDataCell)).toHaveLength(0)
+        expect(wrapper.find(TableHeaderCell)).toHaveLength(1)
+        expect(wrapper.find(TableHeaderCell).dive().type()).toBe('th')
+        expect(wrapper.find(TableHeaderCell).prop('fixed')).toBe(true)
+    })
+    it('accepts a large prop', () => {
+        const wrapper = shallow(<DataTableCell large />)
+
+        expect(wrapper.find(TableDataCell).prop('large')).toBe(true)
+    })
+    it('accepts a left prop', () => {
+        const left = '200px'
+        const wrapper = shallow(<DataTableCell left={left} />)
+
+        expect(wrapper.find(TableDataCell).prop('left')).toBe(left)
+    })
+    it('accepts a muted prop', () => {
+        const wrapper = shallow(<DataTableCell muted />)
+
+        expect(wrapper.find(TableDataCell).prop('muted')).toBe(true)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<DataTableCell role={role} />)
+
+        expect(wrapper.find(TableDataCell).prop('role')).toBe(role)
+    })
+    it('accepts a rowSpan prop', () => {
+        const rowSpan = '3'
+        const wrapper = shallow(<DataTableCell rowSpan={rowSpan} />)
+
+        expect(wrapper.find(TableDataCell).prop('rowSpan')).toBe(rowSpan)
+    })
+    it('accepts a scope prop', () => {
+        const scope = 'row'
+        const wrapper = shallow(<DataTableCell scope={scope} />)
+
+        expect(wrapper.find(TableDataCell).prop('scope')).toBe(scope)
+    })
+    it('accepts a staticStyle prop', () => {
+        const wrapper = shallow(<DataTableCell staticStyle />)
+
+        expect(wrapper.find(TableDataCell).prop('staticStyle')).toBe(true)
+    })
+    it('can render either a td or th tag depending on the fixed and tag prop', () => {
+        // default
+        expect(
+            shallow(<DataTableCell />)
+                .dive()
+                .type()
+        ).toBe('td')
+        // using the tag prop
+        expect(
+            shallow(<DataTableCell tag="td" />)
+                .dive()
+                .type()
+        ).toBe('td')
+        expect(
+            shallow(<DataTableCell tag="th" />)
+                .dive()
+                .type()
+        ).toBe('th')
+        // with fixed prop
+        expect(
+            shallow(<DataTableCell fixed />)
+                .dive()
+                .type()
+        ).toBe('th')
+        // tag prop should take presedence over fixed prop
+        expect(
+            shallow(<DataTableCell fixed tag="td" />)
+                .dive()
+                .type()
+        ).toBe('td')
+        expect(
+            shallow(<DataTableCell fixed tag="th" />)
+                .dive()
+                .type()
+        ).toBe('th')
+    })
+    it('accepts a valid prop', () => {
+        const wrapper = shallow(<DataTableCell valid />)
+
+        expect(wrapper.find(TableDataCell).prop('valid')).toBe(true)
+    })
+    it('accepts a width prop', () => {
+        const width = '200px'
+        const wrapper = shallow(<DataTableCell width={width} />)
+
+        expect(wrapper.find(TableDataCell).prop('width')).toBe(width)
+    })
+    it('accepts an onClick prop', () => {
+        const onClick = jest.fn()
+        const wrapper = shallow(<DataTableCell onClick={onClick} />)
+
+        wrapper.simulate('click')
+
+        expect(onClick).toHaveBeenCalledTimes(1)
+    })
+})

package/src/data-table/__tests__/data-table-column-header/filter-handle.test.js

@@ -0,0 +1,43 @@
+import { colors } from '@dhis2/ui-constants'
+import { IconSearch16 } from '@dhis2/ui-icons'
+import { shallow } from 'enzyme'
+import React from 'react'
+import { FilterHandle } from '../../data-table-column-header/filter-handle.js'
+import { TableHeaderCellAction } from '../../table-elements/index.js'
+
+describe('<FilterHandle>', () => {
+    it('accepts an active prop', () => {
+        const wrapper = shallow(<FilterHandle />)
+        const wrapperActive = shallow(<FilterHandle active />)
+
+        expect(wrapper.find(IconSearch16).prop('color')).toBe(colors.grey600)
+        expect(wrapperActive.find(IconSearch16).prop('color')).toBe(
+            colors.blue700
+        )
+    })
+    it('accepts a name and onClick prop', () => {
+        const name = 'test'
+        const fakeEvent = {
+            target: 'test',
+            value: 'test',
+        }
+        const onClick = jest.fn()
+        const wrapper = shallow(<FilterHandle onClick={onClick} name={name} />)
+
+        wrapper
+            .find(TableHeaderCellAction)
+            .dive()
+            .find('button')
+            .simulate('click', fakeEvent)
+
+        expect(onClick).toHaveBeenCalledTimes(1)
+        expect(onClick).toHaveBeenCalledWith(
+            {
+                name,
+                // toggled
+                show: true,
+            },
+            fakeEvent
+        )
+    })
+})

package/src/data-table/__tests__/data-table-column-header/sorter.test.js

@@ -0,0 +1,41 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import { Sorter, ASC, DESC } from '../../data-table-column-header/sorter.js'
+import { TableHeaderCellAction } from '../../table-elements/index.js'
+
+describe('<Sorter>', () => {
+    it('accepts a sortDirection prop', () => {
+        const wrapper = shallow(<Sorter sortDirection={ASC} />)
+
+        expect(
+            wrapper.find(TableHeaderCellAction).dive().find('svg').hasClass(ASC)
+        ).toBe(true)
+    })
+    it('accepts a name and onClick prop', () => {
+        const name = 'test'
+        const fakeEvent = {
+            target: 'test',
+            value: 'test',
+        }
+        const onClick = jest.fn()
+        const wrapper = shallow(
+            <Sorter sortDirection={ASC} onClick={onClick} name={name} />
+        )
+
+        wrapper
+            .find(TableHeaderCellAction)
+            .dive()
+            .find('button')
+            .simulate('click', fakeEvent)
+
+        expect(onClick).toHaveBeenCalledTimes(1)
+        expect(onClick).toHaveBeenCalledWith(
+            {
+                name,
+                // next sort direction
+                direction: DESC,
+            },
+            fakeEvent
+        )
+    })
+})

package/src/data-table/__tests__/data-table-column-header.test.js

@@ -0,0 +1,227 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { DataTableColumnHeader } from '../data-table-column-header/data-table-column-header.js'
+import { FilterHandle } from '../data-table-column-header/filter-handle.js'
+import { Sorter } from '../data-table-column-header/sorter.js'
+import {
+    TableHeaderCell,
+    TableHeaderCellAction,
+} from '../table-elements/index.js'
+
+describe('<DataTableColumnHeader>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(
+            <DataTableColumnHeader>{children}</DataTableColumnHeader>
+        )
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(
+            <table>
+                <thead>
+                    <tr>
+                        <DataTableColumnHeader ref={ref} />
+                    </tr>
+                </thead>
+            </table>
+        )
+
+        expect(wrapper.find('th').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts an align prop', () => {
+        const right = 'right'
+        const wrapper = shallow(<DataTableColumnHeader align={right} />)
+
+        expect(wrapper.find(TableHeaderCell).prop('align')).toBe(right)
+    })
+    it('accepts a className prop', () => {
+        const wrapper = shallow(<DataTableColumnHeader className="test" />)
+
+        expect(wrapper.find(TableHeaderCell).prop('className')).toBe(
+            'test DataTableColumnHeader'
+        )
+    })
+    it('accepts a colSpan prop', () => {
+        const colSpan = '3'
+        const wrapper = shallow(<DataTableColumnHeader colSpan={colSpan} />)
+
+        expect(wrapper.find(TableHeaderCell).prop('colSpan')).toBe(colSpan)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<DataTableColumnHeader dataTest={dataTest} />)
+
+        expect(wrapper.find(TableHeaderCell).prop('dataTest')).toBe(dataTest)
+    })
+    it('accepts filter, name, showFilter and onFilterIconClick props', () => {
+        //
+        const name = 'test'
+        const fakeEvent = {
+            target: 'test',
+            value: 'test',
+        }
+        const onClickOpen = jest.fn()
+        const onClickClosed = jest.fn()
+        const wrapperOpen = shallow(
+            <DataTableColumnHeader
+                name={name}
+                onFilterIconClick={onClickOpen}
+                filter={<input />}
+                showFilter={true}
+            />
+        )
+        const wrapperClosed = shallow(
+            <DataTableColumnHeader
+                name={name}
+                onFilterIconClick={onClickClosed}
+                filter={<input />}
+                showFilter={false}
+            />
+        )
+        // Showing/hiding the filter
+        expect(wrapperOpen.find('input')).toHaveLength(1)
+        expect(wrapperClosed.find('input')).toHaveLength(0)
+
+        // Clicking the filter icon on
+        wrapperOpen
+            .find(FilterHandle)
+            .dive()
+            .find(TableHeaderCellAction)
+            .dive()
+            .find('button')
+            .simulate('click', fakeEvent)
+
+        expect(onClickOpen).toHaveBeenCalledTimes(1)
+        expect(onClickOpen).toHaveBeenCalledWith(
+            {
+                name,
+                // toggled
+                show: false,
+            },
+            fakeEvent
+        )
+        wrapperClosed
+            .find(FilterHandle)
+            .dive()
+            .find(TableHeaderCellAction)
+            .dive()
+            .find('button')
+            .simulate('click', fakeEvent)
+
+        expect(onClickClosed).toHaveBeenCalledTimes(1)
+        expect(onClickClosed).toHaveBeenCalledWith(
+            {
+                name,
+                // toggled
+                show: true,
+            },
+            fakeEvent
+        )
+    })
+    it('accepts a fixed prop', () => {
+        const wrapper = shallow(<DataTableColumnHeader fixed left="200px" />)
+
+        expect(wrapper.find(TableHeaderCell).prop('fixed')).toBe(true)
+    })
+    it('accepts a large prop', () => {
+        const wrapper = shallow(<DataTableColumnHeader large />)
+
+        expect(wrapper.find(TableHeaderCell).prop('large')).toBe(true)
+    })
+    it('accepts a left prop', () => {
+        const left = '200px'
+        const wrapper = shallow(<DataTableColumnHeader left={left} />)
+
+        expect(wrapper.find(TableHeaderCell).prop('left')).toBe(left)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<DataTableColumnHeader role={role} />)
+
+        expect(wrapper.find(TableHeaderCell).prop('role')).toBe(role)
+    })
+    it('accepts a rowSpan prop', () => {
+        const rowSpan = '3'
+        const wrapper = shallow(<DataTableColumnHeader rowSpan={rowSpan} />)
+
+        expect(wrapper.find(TableHeaderCell).prop('rowSpan')).toBe(rowSpan)
+    })
+    it('accepts a scope prop', () => {
+        const scope = 'row'
+        const wrapper = shallow(<DataTableColumnHeader scope={scope} />)
+
+        expect(wrapper.find(TableHeaderCell).prop('scope')).toBe(scope)
+    })
+    describe('column header sorting', () => {
+        it('accepts sortDirection, sortIconTitle, and onSortIconClick props', () => {
+            const name = 'test'
+            const title = 'Custom title'
+            const fakeEvent = {
+                target: 'test',
+                value: 'test',
+            }
+            const onClick = jest.fn()
+            const wrapper = shallow(
+                <DataTableColumnHeader
+                    name={name}
+                    onSortIconClick={onClick}
+                    sortDirection={'asc'}
+                    sortIconTitle={title}
+                />
+            )
+
+            const button = wrapper
+                .find(Sorter)
+                .dive()
+                .find(TableHeaderCellAction)
+                .dive()
+                .find('button')
+
+            button.simulate('click', fakeEvent)
+
+            expect(onClick).toHaveBeenCalledTimes(1)
+            expect(onClick).toHaveBeenCalledWith(
+                {
+                    name,
+                    // next sort direction
+                    direction: 'desc',
+                },
+                fakeEvent
+            )
+            expect(button.prop('title')).toBe(title)
+        })
+        it('has a default sort icon title', () => {
+            const wrapper = shallow(
+                <DataTableColumnHeader
+                    name={'test'}
+                    onSortIconClick={() => {}}
+                    sortDirection={'asc'}
+                />
+            )
+
+            const button = wrapper
+                .find(Sorter)
+                .dive()
+                .find(TableHeaderCellAction)
+                .dive()
+                .find('button')
+
+            expect(button.prop('title')).toBe('Sort items')
+        })
+    })
+    it('accepts a top prop', () => {
+        const top = '200px'
+        const wrapper = shallow(<DataTableColumnHeader top={top} />)
+
+        expect(wrapper.find(TableHeaderCell).prop('top')).toBe(top)
+    })
+    it('accepts a width prop', () => {
+        const width = '200px'
+        const wrapper = shallow(<DataTableColumnHeader width={width} />)
+
+        expect(wrapper.find(TableHeaderCell).prop('width')).toBe(width)
+    })
+})

package/src/data-table/__tests__/data-table-row/expand-handle-cell.js

@@ -0,0 +1,32 @@
+import { IconChevronDown24, IconChevronUp24 } from '@dhis2/ui-icons'
+import { shallow } from 'enzyme'
+import React from 'react'
+import { ExpandHandleCell } from '../../data-table-row/expand-handle-cell.js'
+
+describe('<ExpandHandleCell>', () => {
+    it('renders an <IconChevronUp24> when expanded is true', () => {
+        const wrapper = shallow(<ExpandHandleCell expanded />)
+
+        expect(wrapper.find(IconChevronUp24)).toHaveLength(1)
+        expect(wrapper.find(IconChevronDown24)).toHaveLength(0)
+    })
+    it('renders an <IconChevronDown24> when expanded is falsy', () => {
+        const wrapper = shallow(<ExpandHandleCell />)
+
+        expect(wrapper.find(IconChevronUp24)).toHaveLength(0)
+        expect(wrapper.find(IconChevronDown24)).toHaveLength(1)
+    })
+    it('responds to clicks', () => {
+        const onClick = jest.fn()
+        const wrapper = shallow(
+            <ExpandHandleCell expanded={false} onClick={onClick} />
+        )
+
+        wrapper.simulate('click')
+
+        expect(onClick).toHaveBeenCalledTimes(1)
+        expect(onClick).toHaveBeenCalledWith({
+            expanded: true,
+        })
+    })
+})

package/src/data-table/__tests__/data-table-row/expanded-row.test.js

@@ -0,0 +1,57 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import { ExpandedRow } from '../../data-table-row/expanded-row.js'
+import { TableRow, TableDataCell } from '../../table-elements/index.js'
+
+describe('<ExpandedRow>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<ExpandedRow>{children}</ExpandedRow>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a colSpan prop', () => {
+        const colSpan = '4'
+        const wrapper = shallow(<ExpandedRow colSpan={colSpan} />)
+
+        expect(wrapper.find(TableDataCell).prop('colSpan')).toBe(colSpan)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<ExpandedRow className={className} />)
+
+        expect(wrapper.find(TableRow).prop('className')).toBe(
+            `${className}-expandedrow`
+        )
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<ExpandedRow dataTest={dataTest} />)
+
+        expect(wrapper.find(TableRow).prop('dataTest')).toBe(
+            `${dataTest}-expandedrow`
+        )
+    })
+    it('accepts a selected prop', () => {
+        const wrapper = shallow(<ExpandedRow selected />)
+
+        expect(wrapper.find(TableRow).prop('selected')).toBe(true)
+    })
+    it('accepts a setIsHoveringExpandedContent prop', () => {
+        const cb = jest.fn()
+        const wrapper = shallow(
+            <ExpandedRow setIsHoveringExpandedContent={cb} />
+        )
+        const tr = wrapper.find(TableRow).dive().find('tr')
+
+        tr.simulate('mouseover')
+
+        expect(cb).toHaveBeenCalledTimes(1)
+        expect(cb).toHaveBeenLastCalledWith(true)
+
+        tr.simulate('mouseout')
+
+        expect(cb).toHaveBeenCalledTimes(2)
+        expect(cb).toHaveBeenLastCalledWith(false)
+    })
+})