@dhis2-ui/table 10.16.2 → 10.16.3

package/src/data-table/features/can_scroll/index.js

@@ -0,0 +1,48 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a scrolling datatable is rendered', () => {
+    cy.visitStory('DataTable', 'Fixed Header And Columns')
+})
+When('the user scrolls down', () => {
+    cy.get('[data-test="dhis2-uicore-datatable-scrollbox"]').scrollTo(
+        'bottomLeft'
+    )
+})
+When('the user scrolls right', () => {
+    cy.get('[data-test="dhis2-uicore-datatable-scrollbox"]').scrollTo(
+        'topRight'
+    )
+})
+When('the user scrolls down and right', () => {
+    cy.get('[data-test="dhis2-uicore-datatable-scrollbox"]').scrollTo(
+        'bottomRight'
+    )
+})
+Then('the header row is visible', () => {
+    cy.get('thead > tr > th').should('be.visible')
+})
+Then('the first two datatable columns are visible', () => {
+    cy.get('tbody > tr > th:nth-child(1)').should('be.visible')
+    cy.get('tbody > tr > th:nth-child(2)').should('be.visible')
+})
+Then('the bottom right scrolling datatable cell is visible', () => {
+    cy.get('td').contains('scrolling bottom-right').should('be.visible')
+})
+Then('the top left scrolling datatable cell is not visible', () => {
+    cy.get('td').contains('scrolling top-left').should('not.be.visible')
+})
+Then('the bottom left scrolling datatable cell is not visible', () => {
+    cy.get('td').contains('scrolling bottom-left').should('not.be.visible')
+})
+Then('the top right scrolling datatable cell is not visible', () => {
+    cy.get('td').contains('scrolling top-right').should('not.be.visible')
+})
+Then('the top right scrolling datatable cell is visible', () => {
+    cy.get('td').contains('scrolling top-right').should('be.visible')
+})
+Then('the bottom left scrolling datatable cell is visible', () => {
+    cy.get('td').contains('scrolling bottom-left').should('be.visible')
+})
+Then('the bottom right scrolling datatable cell is not visible', () => {
+    cy.get('td').contains('scrolling bottom-right').should('not.be.visible')
+})

package/src/data-table/features/can_scroll.feature

@@ -0,0 +1,31 @@
+Feature: Scrolling a DataTable
+
+    Scenario: The user vertically scrolls the DataTable
+        Given a scrolling datatable is rendered
+        When the user scrolls down
+        Then the header row is visible
+        And the first two datatable columns are visible
+        And the bottom left scrolling datatable cell is visible
+        But the bottom right scrolling datatable cell is not visible
+        And the top left scrolling datatable cell is not visible
+        And the top right scrolling datatable cell is not visible
+
+    Scenario: The user horizontally scrolls the DataTable
+        Given a scrolling datatable is rendered
+        When the user scrolls right
+        Then the header row is visible
+        And the first two datatable columns are visible
+        And the top right scrolling datatable cell is visible
+        But the bottom right scrolling datatable cell is not visible
+        And the top left scrolling datatable cell is not visible
+        And the bottom left scrolling datatable cell is not visible
+
+    Scenario: The user vertically and horizontally scrolls the DataTable
+        Given a scrolling datatable is rendered
+        When the user scrolls down and right
+        Then the header row is visible
+        And the first two datatable columns are visible
+        And the bottom right scrolling datatable cell is visible
+        But the top left scrolling datatable cell is not visible
+        And the bottom left scrolling datatable cell is not visible
+        And the top right scrolling datatable cell is not visible

package/src/data-table/index.js

@@ -0,0 +1,8 @@
+export { DataTable } from './data-table.js'
+export { DataTableBody } from './data-table-body.js'
+export { DataTableCell } from './data-table-cell.js'
+export { DataTableColumnHeader } from './data-table-column-header/data-table-column-header.js'
+export { DataTableFoot } from './data-table-foot.js'
+export { DataTableHead } from './data-table-head.js'
+export { DataTableRow } from './data-table-row/data-table-row.js'
+export { DataTableToolbar } from './data-table-toolbar.js'

package/src/data-table/table-elements/__tests__/table-body.test.js

@@ -0,0 +1,40 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { TableBody } from '../table-body.js'
+
+describe('<TableBody>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<TableBody>{children}</TableBody>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(
+            <table>
+                <TableBody ref={ref} />
+            </table>
+        )
+
+        expect(wrapper.find('tbody').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<TableBody className={className} />)
+
+        expect(wrapper.find('tbody').hasClass(className)).toBe(true)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<TableBody dataTest={dataTest} />)
+
+        expect(wrapper.find('tbody').prop('data-test')).toBe(dataTest)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<TableBody role={role} />)
+
+        expect(wrapper.find('tbody').prop('role')).toBe(role)
+    })
+})

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

@@ -0,0 +1,123 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { TableDataCell } from '../table-data-cell/table-data-cell.js'
+
+describe('<TableDataCell>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<TableDataCell>{children}</TableDataCell>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(
+            <table>
+                <tbody>
+                    <tr>
+                        <TableDataCell ref={ref} />
+                    </tr>
+                </tbody>
+            </table>
+        )
+
+        expect(wrapper.find('td').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts an active prop', () => {
+        const wrapper = shallow(<TableDataCell active />)
+
+        expect(wrapper.find('td').hasClass('active')).toBe(true)
+    })
+    it('accepts an align prop', () => {
+        const align = 'right'
+        const wrapper = shallow(<TableDataCell align={align} />)
+
+        expect(wrapper.html()).toContain(`text-align: ${align};`)
+    })
+    it('accepts a bordered prop', () => {
+        const wrapper = shallow(<TableDataCell bordered />)
+
+        expect(wrapper.find('td').hasClass('bordered')).toBe(true)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<TableDataCell className={className} />)
+
+        expect(wrapper.find('td').hasClass(className)).toBe(true)
+    })
+    it('accepts a colSpan prop', () => {
+        const colSpan = '3'
+        const wrapper = shallow(<TableDataCell colSpan={colSpan} />)
+
+        expect(wrapper.find('td').prop('colSpan')).toBe(colSpan)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<TableDataCell dataTest={dataTest} />)
+
+        expect(wrapper.find('td').prop('data-test')).toBe(dataTest)
+    })
+    it('accepts an error prop', () => {
+        const wrapper = shallow(<TableDataCell error />)
+
+        expect(wrapper.find('td').hasClass('error')).toBe(true)
+    })
+    it('accepts a large prop', () => {
+        const wrapper = shallow(<TableDataCell large />)
+
+        expect(wrapper.find('td').hasClass('large')).toBe(true)
+    })
+    it('accepts a left prop', () => {
+        const left = '200px'
+        const wrapper = shallow(<TableDataCell left={left} />)
+
+        expect(wrapper.html()).toContain(`inset-inline-start: ${left};`)
+    })
+    it('accepts a muted prop', () => {
+        const wrapper = shallow(<TableDataCell muted />)
+
+        expect(wrapper.find('td').hasClass('muted')).toBe(true)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<TableDataCell role={role} />)
+
+        expect(wrapper.find('td').prop('role')).toBe(role)
+    })
+    it('accepts a rowSpan prop', () => {
+        const rowSpan = '3'
+        const wrapper = shallow(<TableDataCell rowSpan={rowSpan} />)
+
+        expect(wrapper.find('td').prop('rowSpan')).toBe(rowSpan)
+    })
+    it('accepts a scope prop', () => {
+        const scope = 'row'
+        const wrapper = shallow(<TableDataCell scope={scope} />)
+
+        expect(wrapper.find('td').prop('scope')).toBe(scope)
+    })
+    it('accepts a staticStyle prop', () => {
+        const wrapper = shallow(<TableDataCell staticStyle />)
+
+        expect(wrapper.find('td').hasClass('staticStyle')).toBe(true)
+    })
+    it('accepts a valid prop', () => {
+        const wrapper = shallow(<TableDataCell valid />)
+
+        expect(wrapper.find('td').hasClass('valid')).toBe(true)
+    })
+    it('accepts a width prop', () => {
+        const width = '200px'
+        const wrapper = shallow(<TableDataCell width={width} />)
+
+        expect(wrapper.html()).toContain(`width: ${width};`)
+    })
+    it('accepts an onClick prop', () => {
+        const onClick = jest.fn()
+        const wrapper = shallow(<TableDataCell onClick={onClick} />)
+
+        wrapper.simulate('click')
+
+        expect(onClick).toHaveBeenCalledTimes(1)
+    })
+})

package/src/data-table/table-elements/__tests__/table-foot.test.js

@@ -0,0 +1,40 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { TableFoot } from '../table-foot.js'
+
+describe('<TableFoot>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<TableFoot>{children}</TableFoot>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(
+            <table>
+                <TableFoot ref={ref} />
+            </table>
+        )
+
+        expect(wrapper.find('tfoot').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<TableFoot className={className} />)
+
+        expect(wrapper.find('tfoot').hasClass(className)).toBe(true)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<TableFoot dataTest={dataTest} />)
+
+        expect(wrapper.find('tfoot').prop('data-test')).toBe(dataTest)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<TableFoot role={role} />)
+
+        expect(wrapper.find('tfoot').prop('role')).toBe(role)
+    })
+})

package/src/data-table/table-elements/__tests__/table-head.test.js

@@ -0,0 +1,40 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { TableHead } from '../table-head.js'
+
+describe('<TableHead>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<TableHead>{children}</TableHead>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(
+            <table>
+                <TableHead ref={ref} />
+            </table>
+        )
+
+        expect(wrapper.find('thead').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<TableHead className={className} />)
+
+        expect(wrapper.find('thead').hasClass(className)).toBe(true)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<TableHead dataTest={dataTest} />)
+
+        expect(wrapper.find('thead').prop('data-test')).toBe(dataTest)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<TableHead role={role} />)
+
+        expect(wrapper.find('thead').prop('role')).toBe(role)
+    })
+})

package/src/data-table/table-elements/__tests__/table-header-cell-action.test.js

@@ -0,0 +1,46 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { TableHeaderCellAction } from '../table-header-cell-action.js'
+
+describe('<TableHeaderCellAction>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(
+            <TableHeaderCellAction>{children}</TableHeaderCellAction>
+        )
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(<TableHeaderCellAction ref={ref} />)
+
+        expect(wrapper.find('button').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<TableHeaderCellAction className={className} />)
+
+        expect(wrapper.find('button').hasClass(className)).toBe(true)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<TableHeaderCellAction dataTest={dataTest} />)
+
+        expect(wrapper.find('button').prop('data-test')).toBe(dataTest)
+    })
+    it('accepts a title prop', () => {
+        const title = 'test'
+        const wrapper = shallow(<TableHeaderCellAction title={title} />)
+
+        expect(wrapper.find('button').prop('title')).toBe(title)
+    })
+    it('accepts an onClick prop', () => {
+        const onClick = jest.fn()
+        const wrapper = shallow(<TableHeaderCellAction onClick={onClick} />)
+
+        wrapper.simulate('click')
+
+        expect(onClick).toHaveBeenCalledTimes(1)
+    })
+})

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

@@ -0,0 +1,130 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { TableHeaderCell } from '../table-header-cell/table-header-cell.js'
+
+describe('<TableHeaderCell>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<TableHeaderCell>{children}</TableHeaderCell>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(
+            <table>
+                <thead>
+                    <tr>
+                        <TableHeaderCell ref={ref} />
+                    </tr>
+                </thead>
+            </table>
+        )
+
+        expect(wrapper.find('th').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts an active prop', () => {
+        const wrapper = shallow(<TableHeaderCell active />)
+
+        expect(wrapper.find('th').hasClass('active')).toBe(true)
+    })
+    it('accepts an align prop', () => {
+        const align = 'right'
+        const wrapper = shallow(<TableHeaderCell align={align} />)
+
+        expect(wrapper.html()).toContain(`text-align: ${align};`)
+    })
+    it('accepts a bordered prop', () => {
+        const wrapper = shallow(<TableHeaderCell bordered />)
+
+        expect(wrapper.find('th').hasClass('bordered')).toBe(true)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<TableHeaderCell className={className} />)
+
+        expect(wrapper.find('th').hasClass(className)).toBe(true)
+    })
+    it('accepts a colSpan prop', () => {
+        const colSpan = '3'
+        const wrapper = shallow(<TableHeaderCell colSpan={colSpan} />)
+
+        expect(wrapper.find('th').prop('colSpan')).toBe(colSpan)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<TableHeaderCell dataTest={dataTest} />)
+
+        expect(wrapper.find('th').prop('data-test')).toBe(dataTest)
+    })
+    it('accepts an error prop', () => {
+        const wrapper = shallow(<TableHeaderCell error />)
+
+        expect(wrapper.find('th').hasClass('error')).toBe(true)
+    })
+    it('accepts a fixed prop', () => {
+        const wrapper = shallow(<TableHeaderCell fixed />)
+
+        expect(wrapper.type()).toBe('th')
+        expect(wrapper.find('th').hasClass('fixed')).toBe(true)
+    })
+    it('accepts a large prop', () => {
+        const wrapper = shallow(<TableHeaderCell large />)
+
+        expect(wrapper.find('th').hasClass('large')).toBe(true)
+    })
+    it('accepts a left prop', () => {
+        const left = '200px'
+        const wrapper = shallow(<TableHeaderCell left={left} />)
+
+        expect(wrapper.html()).toContain(`inset-inline-start: ${left};`)
+    })
+    it('accepts an muted prop', () => {
+        const wrapper = shallow(<TableHeaderCell muted />)
+
+        expect(wrapper.find('th').hasClass('muted')).toBe(true)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<TableHeaderCell role={role} />)
+
+        expect(wrapper.find('th').prop('role')).toBe(role)
+    })
+    it('accepts a rowSpan prop', () => {
+        const rowSpan = '3'
+        const wrapper = shallow(<TableHeaderCell rowSpan={rowSpan} />)
+
+        expect(wrapper.find('th').prop('rowSpan')).toBe(rowSpan)
+    })
+    it('accepts a scope prop', () => {
+        const scope = 'row'
+        const wrapper = shallow(<TableHeaderCell scope={scope} />)
+
+        expect(wrapper.find('th').prop('scope')).toBe(scope)
+    })
+    it('accepts a top prop', () => {
+        const top = '200px'
+        const wrapper = shallow(<TableHeaderCell top={top} />)
+
+        expect(wrapper.html()).toContain(`top: ${top};`)
+    })
+    it('accepts a valid prop', () => {
+        const wrapper = shallow(<TableHeaderCell valid />)
+
+        expect(wrapper.find('th').hasClass('valid')).toBe(true)
+    })
+    it('accepts a width prop', () => {
+        const width = '200px'
+        const wrapper = shallow(<TableHeaderCell width={width} />)
+
+        expect(wrapper.html()).toContain(`width: ${width};`)
+    })
+    it('accepts an onClick prop', () => {
+        const onClick = jest.fn()
+        const wrapper = shallow(<TableHeaderCell onClick={onClick} />)
+
+        wrapper.simulate('click')
+
+        expect(onClick).toHaveBeenCalledTimes(1)
+    })
+})

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

@@ -0,0 +1,52 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { TableRow } from '../table-row.js'
+
+describe('<TableRow>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<TableRow>{children}</TableRow>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(
+            <table>
+                <thead>
+                    <TableRow ref={ref} />
+                </thead>
+            </table>
+        )
+
+        expect(wrapper.find('tr').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<TableRow className={className} />)
+
+        expect(wrapper.find('tr').hasClass(className)).toBe(true)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<TableRow dataTest={dataTest} />)
+
+        expect(wrapper.find('tr').prop('data-test')).toBe(dataTest)
+    })
+    it('accepts a draggable prop', () => {
+        const wrapper = shallow(<TableRow draggable />)
+
+        expect(wrapper.find('tr').hasClass('draggable')).toBe(true)
+    })
+    it('accepts a role prop', () => {
+        const role = 'test'
+        const wrapper = shallow(<TableRow role={role} />)
+
+        expect(wrapper.find('tr').prop('role')).toBe(role)
+    })
+    it('accepts a selected prop', () => {
+        const wrapper = shallow(<TableRow selected />)
+
+        expect(wrapper.find('tr').hasClass('selected')).toBe(true)
+    })
+})

package/src/data-table/table-elements/__tests__/table-scroll-box.test.js

@@ -0,0 +1,40 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { TableScrollBox } from '../table-scroll-box.js'
+
+describe('<TableScrollBox>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<TableScrollBox>{children}</TableScrollBox>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(<TableScrollBox ref={ref} />)
+
+        expect(wrapper.find('div').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<TableScrollBox className={className} />)
+
+        expect(wrapper.find('div').hasClass(className)).toBe(true)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<TableScrollBox dataTest={dataTest} />)
+
+        expect(wrapper.find('div').prop('data-test')).toBe(dataTest)
+    })
+    it('accepts a maxHeight prop', () => {
+        const maxHeight = '200px'
+        const wrapper = shallow(<TableScrollBox maxHeight={maxHeight} />)
+        expect(wrapper.html()).toContain('max-height: 200px;')
+    })
+    it('accepts a maxWidth prop', () => {
+        const maxWidth = '200px'
+        const wrapper = shallow(<TableScrollBox maxWidth={maxWidth} />)
+        expect(wrapper.html()).toContain('max-width: 200px;')
+    })
+})

package/src/data-table/table-elements/__tests__/table-toolbar.test.js

@@ -0,0 +1,44 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import { TableToolbar } from '../table-toolbar.js'
+
+describe('<TableToolbar>', () => {
+    it('renders children', () => {
+        const children = 'children'
+        const wrapper = shallow(<TableToolbar>{children}</TableToolbar>)
+
+        expect(wrapper.containsMatchingElement(children)).toBe(true)
+    })
+    it('accepts a ref', () => {
+        const ref = React.createRef()
+        const wrapper = mount(<TableToolbar ref={ref} />)
+
+        expect(wrapper.find('div').getDOMNode()).toBe(ref.current)
+    })
+    it('accepts a className prop', () => {
+        const className = 'test'
+        const wrapper = shallow(<TableToolbar className={className} />)
+
+        expect(wrapper.find('div').hasClass(className)).toBe(true)
+    })
+    it('accepts a dataTest prop', () => {
+        const dataTest = 'test'
+        const wrapper = shallow(<TableToolbar dataTest={dataTest} />)
+
+        expect(wrapper.find('div').prop('data-test')).toBe(dataTest)
+    })
+    it('accepts a position prop', () => {
+        const wrapperDefault = shallow(<TableToolbar />)
+        const wrapperTop = shallow(<TableToolbar position="top" />)
+        const wrapperBottom = shallow(<TableToolbar position="bottom" />)
+
+        expect(wrapperDefault.find('div').hasClass('top')).toBe(true)
+        expect(wrapperDefault.find('div').hasClass('bottom')).toBe(false)
+
+        expect(wrapperTop.find('div').hasClass('top')).toBe(true)
+        expect(wrapperTop.find('div').hasClass('bottom')).toBe(false)
+
+        expect(wrapperBottom.find('div').hasClass('top')).toBe(false)
+        expect(wrapperBottom.find('div').hasClass('bottom')).toBe(true)
+    })
+})