mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-09 22:50:06 +08:00
witt
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()
|
||||
})
|
||||
})
|
||||
72
components/tabs/__tests__/__snapshots__/index.test.tsx.snap
Normal file
72
components/tabs/__tests__/__snapshots__/index.test.tsx.snap
Normal file
@@ -0,0 +1,72 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Tabs should render correctly 1`] = `
|
||||
"<div class=\\"tabs \\"><header><div class=\\"tab \\">label1</div><div class=\\"tab \\">label2</div></header><div class=\\"content\\"></div><style>
|
||||
.tabs {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: .625rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 4pt calc(0.65 * 4pt);
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
transition: all 200ms ease;
|
||||
text-transform: capitalize;
|
||||
font-size: 1rem;
|
||||
margin: 0 calc(.8 * 8pt);
|
||||
color: #444;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
transform: scaleX(.85);
|
||||
background-color: transparent;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.tab.active:after {
|
||||
background-color: #000;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.tab :global(svg) {
|
||||
max-height: 1em;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tab:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tab.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style></div>"
|
||||
`;
|
||||
95
components/tabs/__tests__/index.test.tsx
Normal file
95
components/tabs/__tests__/index.test.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import React from 'react'
|
||||
import { mount } from 'enzyme'
|
||||
import { Tabs } from 'components'
|
||||
import { nativeEvent, updateWrapper } from 'tests/utils'
|
||||
|
||||
describe('Tabs', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(
|
||||
<Tabs>
|
||||
<Tabs.Item label="label1" value="1">1</Tabs.Item>
|
||||
<Tabs.Item label="label2" value="2">2</Tabs.Item>
|
||||
</Tabs>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should trigger events when tab changed', () => {
|
||||
let value = ''
|
||||
const changeHandler = jest.fn()
|
||||
.mockImplementation(val => value = val)
|
||||
const wrapper = mount(
|
||||
<Tabs initialValue="1" onChange={changeHandler}>
|
||||
<Tabs.Item label="label1" value="1">1</Tabs.Item>
|
||||
<Tabs.Item label="label2" value="2">2</Tabs.Item>
|
||||
</Tabs>
|
||||
)
|
||||
|
||||
wrapper.find('header').find('.tab').at(1)
|
||||
.simulate('click', nativeEvent)
|
||||
expect(changeHandler).toHaveBeenCalled()
|
||||
expect(value).toBe('2')
|
||||
})
|
||||
|
||||
it('should ignore events when tab disabled', () => {
|
||||
const changeHandler = jest.fn()
|
||||
const wrapper = mount(
|
||||
<Tabs initialValue="1" onChange={changeHandler}>
|
||||
<Tabs.Item label="label1" value="1">1</Tabs.Item>
|
||||
<Tabs.Item label="label2" value="2" disabled>2</Tabs.Item>
|
||||
</Tabs>
|
||||
)
|
||||
|
||||
wrapper.find('header').find('.tab').at(1)
|
||||
.simulate('click', nativeEvent)
|
||||
expect(changeHandler).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should be activate the specified tab', async () => {
|
||||
const wrapper = mount(
|
||||
<Tabs value="1">
|
||||
<Tabs.Item label="label1" value="1">test-1</Tabs.Item>
|
||||
<Tabs.Item label="label2" value="2">test-2</Tabs.Item>
|
||||
</Tabs>
|
||||
)
|
||||
let active = wrapper.find('header').find('.active')
|
||||
expect(active.text()).toContain('label1')
|
||||
|
||||
wrapper.setProps({ value: '2' })
|
||||
await updateWrapper(wrapper, 350)
|
||||
active = wrapper.find('header').find('.active')
|
||||
expect(active.text()).toContain('label2')
|
||||
})
|
||||
|
||||
it('should warning when label duplicated', () => {
|
||||
const errorSpy = jest.spyOn(console, 'error')
|
||||
.mockImplementation(() => {})
|
||||
mount(
|
||||
<Tabs>
|
||||
<Tabs.Item label="label1" value="1">test-1</Tabs.Item>
|
||||
<Tabs.Item label="label2" value="1">test-2</Tabs.Item>
|
||||
</Tabs>
|
||||
)
|
||||
expect(errorSpy).toHaveBeenCalled()
|
||||
errorSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('should use label as key when value is missing', async () => {
|
||||
const errorSpy = jest.spyOn(console, 'error')
|
||||
.mockImplementation(() => {})
|
||||
const wrapper = mount(
|
||||
<Tabs>
|
||||
<Tabs.Item label="label1">test-1</Tabs.Item>
|
||||
<Tabs.Item label="label2">test-2</Tabs.Item>
|
||||
</Tabs>
|
||||
)
|
||||
expect(errorSpy).not.toHaveBeenCalled()
|
||||
|
||||
wrapper.setProps({ value: 'label2' })
|
||||
await updateWrapper(wrapper, 350)
|
||||
const active = wrapper.find('header').find('.active')
|
||||
expect(active.text()).toContain('label2')
|
||||
errorSpy.mockRestore()
|
||||
})
|
||||
})
|
||||
34
components/tabs/__tests__/use-tabs.test.tsx
Normal file
34
components/tabs/__tests__/use-tabs.test.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { mount } from 'enzyme'
|
||||
import { Tabs, useTabs } from 'components'
|
||||
import { nativeEvent, updateWrapper } from 'tests/utils'
|
||||
|
||||
describe('UseTabs', () => {
|
||||
it('should follow changes with use-tabs', async () => {
|
||||
const MockTabs: React.FC<{ value?: string }> = ({ value }) => {
|
||||
const { setState, bindings } = useTabs('1')
|
||||
useEffect(() => {
|
||||
if (value) setState(value)
|
||||
}, [value])
|
||||
return (
|
||||
<Tabs {...bindings}>
|
||||
<Tabs.Item label="label1" value="1">1</Tabs.Item>
|
||||
<Tabs.Item label="label2" value="2">2</Tabs.Item>
|
||||
</Tabs>
|
||||
)
|
||||
}
|
||||
const wrapper = mount(<MockTabs />)
|
||||
let active = wrapper.find('header').find('.active')
|
||||
expect(active.text()).toContain('label1')
|
||||
|
||||
wrapper.setProps({ value: '2' })
|
||||
await updateWrapper(wrapper, 350)
|
||||
active = wrapper.find('header').find('.active')
|
||||
expect(active.text()).toContain('label2')
|
||||
|
||||
wrapper.find('header').find('.tab').at(0)
|
||||
.simulate('click', nativeEvent)
|
||||
active = wrapper.find('header').find('.active')
|
||||
expect(active.text()).toContain('label1')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user