mirror of
https://github.com/zhigang1992/react.git
synced 2026-03-26 06:55:07 +08:00
test(table): add testcase
This commit is contained in:
unix
469
components/table/__tests__/__snapshots__/index.test.tsx.snap
Normal file
469
components/table/__tests__/__snapshots__/index.test.tsx.snap
Normal file
@@ -0,0 +1,469 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table should be no erros when width is too large 1`] = `
|
||||
"<table class=\\"\\"><colgroup></colgroup><thead><tr><th><div class=\\"thead-box\\">property</div></th><th><div class=\\"thead-box\\">description</div></th><th><div class=\\"thead-box\\">default</div></th></tr></thead><style>
|
||||
thead {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0 8pt;
|
||||
font-size: .75rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
letter-spacing: 0;
|
||||
vertical-align: center;
|
||||
min-height: 2.5rem;
|
||||
color: #666;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
th:nth-child(1) {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-left: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-right: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.thead-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-box-align: center;
|
||||
min-height: 2.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
|
||||
tr {
|
||||
transition: background-color .25s ease;
|
||||
}
|
||||
|
||||
tr.hover:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
tr :global(td) {
|
||||
padding: 0 8pt;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
color: #444;
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr :global(.cell) {
|
||||
min-height: 3.125rem;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
</style></tbody><style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style></table>"
|
||||
`;
|
||||
|
||||
exports[`Table should render children for table head 1`] = `
|
||||
"<table class=\\"\\"><colgroup></colgroup><thead><tr><th><div class=\\"thead-box\\"><code>property</code></div></th></tr></thead><style>
|
||||
thead {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0 8pt;
|
||||
font-size: .75rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
letter-spacing: 0;
|
||||
vertical-align: center;
|
||||
min-height: 2.5rem;
|
||||
color: #666;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
th:nth-child(1) {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-left: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-right: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.thead-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-box-align: center;
|
||||
min-height: 2.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td></tr><style>
|
||||
tr {
|
||||
transition: background-color .25s ease;
|
||||
}
|
||||
|
||||
tr.hover:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
tr :global(td) {
|
||||
padding: 0 8pt;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
color: #444;
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr :global(.cell) {
|
||||
min-height: 3.125rem;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
</style></tbody><style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style></table>"
|
||||
`;
|
||||
|
||||
exports[`Table should render correctly 1`] = `
|
||||
"<table class=\\"\\"><colgroup></colgroup><thead><tr><th><div class=\\"thead-box\\">property</div></th><th><div class=\\"thead-box\\">description</div></th><th><div class=\\"thead-box\\">default</div></th></tr></thead><style>
|
||||
thead {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0 8pt;
|
||||
font-size: .75rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
letter-spacing: 0;
|
||||
vertical-align: center;
|
||||
min-height: 2.5rem;
|
||||
color: #666;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
th:nth-child(1) {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-left: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-right: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.thead-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-box-align: center;
|
||||
min-height: 2.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
|
||||
tr {
|
||||
transition: background-color .25s ease;
|
||||
}
|
||||
|
||||
tr.hover:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
tr :global(td) {
|
||||
padding: 0 8pt;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
color: #444;
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr :global(.cell) {
|
||||
min-height: 3.125rem;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
</style></tbody><style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style></table>"
|
||||
`;
|
||||
|
||||
exports[`Table should set width automatically 1`] = `
|
||||
"<table class=\\"\\"><colgroup><col width=\\"25\\"><col width=\\"25\\"><col width=\\"50\\"></colgroup><thead><tr><th><div class=\\"thead-box\\">property</div></th><th><div class=\\"thead-box\\">description</div></th><th><div class=\\"thead-box\\">default</div></th></tr></thead><style>
|
||||
thead {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0 8pt;
|
||||
font-size: .75rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
letter-spacing: 0;
|
||||
vertical-align: center;
|
||||
min-height: 2.5rem;
|
||||
color: #666;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
th:nth-child(1) {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-left: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-right: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.thead-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-box-align: center;
|
||||
min-height: 2.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
|
||||
tr {
|
||||
transition: background-color .25s ease;
|
||||
}
|
||||
|
||||
tr.hover:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
tr :global(td) {
|
||||
padding: 0 8pt;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
color: #444;
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr :global(.cell) {
|
||||
min-height: 3.125rem;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
</style></tbody><style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style></table>"
|
||||
`;
|
||||
|
||||
exports[`Table should work with other components 1`] = `
|
||||
"<table class=\\"\\"><colgroup></colgroup><thead><tr><th><div class=\\"thead-box\\">property</div></th><th><div class=\\"thead-box\\">description</div></th><th><div class=\\"thead-box\\">default</div></th></tr></thead><style>
|
||||
thead {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0 8pt;
|
||||
font-size: .75rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
letter-spacing: 0;
|
||||
vertical-align: center;
|
||||
min-height: 2.5rem;
|
||||
color: #666;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
th:nth-child(1) {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-left: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-right: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.thead-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-box-align: center;
|
||||
min-height: 2.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\"><code>boolean</code></div></td><td><div class=\\"cell\\">true</div></td></tr><style>
|
||||
tr {
|
||||
transition: background-color .25s ease;
|
||||
}
|
||||
|
||||
tr.hover:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
tr :global(td) {
|
||||
padding: 0 8pt;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
color: #444;
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr :global(.cell) {
|
||||
min-height: 3.125rem;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
</style></tbody><style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style></table>"
|
||||
`;
|
||||
|
||||
exports[`Table should work without hover effect 1`] = `
|
||||
"<table class=\\"\\"><colgroup></colgroup><thead><tr><th><div class=\\"thead-box\\">property</div></th><th><div class=\\"thead-box\\">description</div></th><th><div class=\\"thead-box\\">default</div></th></tr></thead><style>
|
||||
thead {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0 8pt;
|
||||
font-size: .75rem;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
letter-spacing: 0;
|
||||
vertical-align: center;
|
||||
min-height: 2.5rem;
|
||||
color: #666;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
th:nth-child(1) {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-left: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
border-right: 1px solid #eaeaea;
|
||||
border-top: 1px solid #eaeaea;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.thead-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-box-align: center;
|
||||
min-height: 2.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style><tbody><tr class=\\"\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
|
||||
tr {
|
||||
transition: background-color .25s ease;
|
||||
}
|
||||
|
||||
tr.hover:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
tr :global(td) {
|
||||
padding: 0 8pt;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
color: #444;
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr :global(.cell) {
|
||||
min-height: 3.125rem;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
</style></tbody><style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style></table>"
|
||||
`;
|
||||
183
components/table/__tests__/index.test.tsx
Normal file
183
components/table/__tests__/index.test.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import React from 'react'
|
||||
import { mount } from 'enzyme'
|
||||
import { Table, Code } from 'components'
|
||||
import { cellActions } from 'components/table/table-cell'
|
||||
import { nativeEvent, updateWrapper } from 'tests/utils'
|
||||
|
||||
const data = [
|
||||
{ property: 'type', description: 'Content type', default: '-' },
|
||||
{ property: 'Component', description: 'DOM element to use', default: '-' },
|
||||
{ property: 'bold', description: 'Bold style', default: 'true' },
|
||||
]
|
||||
|
||||
describe('Table', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(
|
||||
<Table data={data}>
|
||||
<Table.Column prop="property" label="property" />
|
||||
<Table.Column prop="description" label="description" />
|
||||
<Table.Column prop="default" label="default" />
|
||||
</Table>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should re-render when data changed', async () => {
|
||||
const wrapper = mount(
|
||||
<Table data={data}>
|
||||
<Table.Column prop="property" label="property" />
|
||||
<Table.Column prop="description" label="description" />
|
||||
<Table.Column prop="default" label="default" />
|
||||
</Table>
|
||||
)
|
||||
expect(wrapper.find('tbody').find('tr').length).toBe(data.length)
|
||||
wrapper.setProps({ data: [] })
|
||||
await updateWrapper(wrapper, 350)
|
||||
expect(wrapper.find('tbody').find('tr').length).toBe(0)
|
||||
|
||||
})
|
||||
|
||||
it('should set width automatically', () => {
|
||||
window.getComputedStyle = jest.fn()
|
||||
.mockImplementation(() => ({
|
||||
width: '100px',
|
||||
}))
|
||||
const wrapper = mount(
|
||||
<Table data={data}>
|
||||
<Table.Column prop="property" label="property" />
|
||||
<Table.Column prop="description" label="description" />
|
||||
<Table.Column prop="default" label="default" width={50} />
|
||||
</Table>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
;(window.getComputedStyle as jest.Mock).mockClear()
|
||||
})
|
||||
|
||||
it('should be no erros when width is too large', () => {
|
||||
window.getComputedStyle = jest.fn()
|
||||
.mockImplementation(() => ({
|
||||
width: '10px',
|
||||
}))
|
||||
const wrapper = mount(
|
||||
<Table data={data}>
|
||||
<Table.Column prop="property" label="property" />
|
||||
<Table.Column prop="description" label="description" />
|
||||
<Table.Column prop="default" label="default" width={50} />
|
||||
</Table>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
;(window.getComputedStyle as jest.Mock).mockClear()
|
||||
})
|
||||
|
||||
it('should work with other components', () => {
|
||||
const dataWithNodes = [
|
||||
...data,
|
||||
{ property: 'bold', description: <Code>boolean</Code>, default: 'true' },
|
||||
]
|
||||
const wrapper = mount(
|
||||
<Table data={dataWithNodes}>
|
||||
<Table.Column prop="property" label="property" />
|
||||
<Table.Column prop="description" label="description" />
|
||||
<Table.Column prop="default" label="default"/>
|
||||
</Table>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(wrapper.find('code').length).not.toBe(0)
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should work without hover effect', () => {
|
||||
const wrapper = mount(
|
||||
<Table data={data} hover={false}>
|
||||
<Table.Column prop="property" label="property" />
|
||||
<Table.Column prop="description" label="description" />
|
||||
<Table.Column prop="default" label="default"/>
|
||||
</Table>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should be possible to remove the row', () => {
|
||||
const operation = (actions: cellActions) => {
|
||||
return <button onClick={() => actions.remove()}>Remove</button>
|
||||
}
|
||||
const data = [
|
||||
{ property: 'bold', description: 'boolean', operation },
|
||||
]
|
||||
const wrapper = mount(
|
||||
<Table data={data}>
|
||||
<Table.Column prop="property" label="property" />
|
||||
<Table.Column prop="description" label="description" />
|
||||
<Table.Column prop="operation" label="operation"/>
|
||||
</Table>
|
||||
)
|
||||
expect(wrapper.find('tbody').find('tr').length).toBe(1)
|
||||
wrapper.find('tbody').find('button')
|
||||
.simulate('click')
|
||||
expect(wrapper.find('tbody').find('tr').length).toBe(0)
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should render emptyText when data missing', () => {
|
||||
const data = [
|
||||
{ property: 'bold', description: 'boolean' },
|
||||
]
|
||||
const wrapper = mount(
|
||||
<Table data={data} emptyText="test-not-found">
|
||||
<Table.Column prop="property" label="property" />
|
||||
<Table.Column prop="description" label="description" />
|
||||
<Table.Column prop="operation" label="operation"/>
|
||||
</Table>
|
||||
)
|
||||
expect(wrapper.find('tbody').text()).toContain('test-not-found')
|
||||
})
|
||||
|
||||
it('should trigger events when cell clicked', () => {
|
||||
const rowHandler = jest.fn()
|
||||
const cellHandler = jest.fn()
|
||||
const data = [
|
||||
{ property: 'bold', description: 'boolean' },
|
||||
]
|
||||
const wrapper = mount(
|
||||
<Table data={data} emptyText="test-not-found"
|
||||
onRow={rowHandler} onCell={cellHandler}>
|
||||
<Table.Column prop="property" label="property" />
|
||||
<Table.Column prop="description" label="description" />
|
||||
</Table>
|
||||
)
|
||||
wrapper.find('tbody').find('tr').find('td').at(0)
|
||||
.simulate('click', nativeEvent)
|
||||
expect(rowHandler).toHaveBeenCalled()
|
||||
expect(cellHandler).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should wraning when prop missing', () => {
|
||||
const errorSpy = jest.spyOn(console, 'error')
|
||||
.mockImplementation(() => {})
|
||||
mount(
|
||||
<Table data={data}>
|
||||
<Table.Column prop="" label="property" />
|
||||
<Table.Column prop="description" label="description" />
|
||||
</Table>
|
||||
)
|
||||
expect(errorSpy).toHaveBeenCalled()
|
||||
errorSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('should render children for table head', () => {
|
||||
const wrapper = mount(
|
||||
<Table data={data}>
|
||||
<Table.Column prop="property">
|
||||
<Code>property</Code>
|
||||
</Table.Column>
|
||||
</Table>
|
||||
)
|
||||
expect(wrapper.find('thead').find('code').length)
|
||||
.not.toBe(0)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user