mirror of
https://github.com/zhigang1992/react.git
synced 2026-03-26 22:42:51 +08:00
test(row): add testcase
This commit is contained in:
unix
281
components/row/__tests__/__snapshots__/index.test.tsx.snap
Normal file
281
components/row/__tests__/__snapshots__/index.test.tsx.snap
Normal file
@@ -0,0 +1,281 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Row should render correctly 1`] = `
|
||||
"<div class=\\"row \\">row<style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div>"
|
||||
`;
|
||||
|
||||
exports[`Row should work with nested 1`] = `
|
||||
"<div class=\\"row \\"><div class=\\"row \\"><div class=\\"row \\"><div class=\\"col \\"><div class=\\"row \\">row<style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div>"
|
||||
`;
|
||||
|
||||
exports[`Row the children should be aligned correctly 1`] = `
|
||||
"<div><div class=\\"row \\"><div class=\\"col \\"><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: flex-end;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div><div class=\\"row \\"><div class=\\"col \\"><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: center;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div><div class=\\"row \\"><div class=\\"col \\"><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: space-around;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div><div class=\\"row \\"><div class=\\"col \\"><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: space-between;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div><div class=\\"row \\"><div class=\\"col \\"><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div><div class=\\"row \\"><div class=\\"col \\"><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: center;
|
||||
}
|
||||
</style></div><div class=\\"row \\"><div class=\\"col \\"><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(0 * 16pt / 2);
|
||||
margin-right: calc(0 * 16pt / 2);
|
||||
--row-gap: calc(0 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: flex-end;
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
|
||||
exports[`Row the children should have the correct spacing 1`] = `
|
||||
"<div><div class=\\"row \\"><div class=\\"col \\"><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(1 * 16pt / 2);
|
||||
margin-right: calc(1 * 16pt / 2);
|
||||
--row-gap: calc(1 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div><div class=\\"row \\"><div class=\\"col \\"><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(2 * 16pt / 2);
|
||||
margin-right: calc(2 * 16pt / 2);
|
||||
--row-gap: calc(2 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div><div class=\\"row \\"><div class=\\"col \\"><style>
|
||||
.col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: calc(var(--row-gap) / 2);
|
||||
padding-right: calc(var(--row-gap) / 2);
|
||||
width: 100%;
|
||||
margin-left: 0%;
|
||||
}
|
||||
</style></div><style>
|
||||
.row {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin-left: calc(10 * 16pt / 2);
|
||||
margin-right: calc(10 * 16pt / 2);
|
||||
--row-gap: calc(10 * 16pt);
|
||||
justify-content: normal;
|
||||
align-items: normal;
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
67
components/row/__tests__/index.test.tsx
Normal file
67
components/row/__tests__/index.test.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import React from 'react'
|
||||
import { mount } from 'enzyme'
|
||||
import { Row, Col } from 'components'
|
||||
|
||||
describe('Row', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(<Row>row</Row>)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should be render differnet components', () => {
|
||||
const wrapper = mount(<Row>row</Row>)
|
||||
wrapper.setProps({ component: 'span' })
|
||||
expect(wrapper.find('span').length).not.toBe(0)
|
||||
|
||||
wrapper.setProps({ component: 'p' })
|
||||
expect(wrapper.find('p').length).not.toBe(0)
|
||||
|
||||
wrapper.setProps({ component: 'details' })
|
||||
expect(wrapper.find('details').length).not.toBe(0)
|
||||
})
|
||||
|
||||
it('the children should be aligned correctly', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Row justify="end"><Col /></Row>
|
||||
<Row justify="center"><Col /></Row>
|
||||
<Row justify="space-around"><Col /></Row>
|
||||
<Row justify="space-between"><Col /></Row>
|
||||
<Row align="top"><Col /></Row>
|
||||
<Row align="middle"><Col /></Row>
|
||||
<Row align="bottom"><Col /></Row>
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('the children should have the correct spacing', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Row gap={1}><Col /></Row>
|
||||
<Row gap={2}><Col /></Row>
|
||||
<Row gap={10}><Col /></Row>
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should work with nested', () => {
|
||||
const wrapper = mount(
|
||||
<Row>
|
||||
<Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<Row>row</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Row>
|
||||
</Row>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user