kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-26 13:25:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(text): add testcase for size

Browse Source
This commit is contained in:
unix
2020-04-29 01:02:57 +08:00
parent cbfb8b1694
commit d651c609e8
2 changed files with 142 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
components/text/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -1,109 +1,221 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Text should render P element in the default 1`] = `
"<p class=\\"\\">test-value</p><style>
exports[`Text should be able to specify the size of text 1`] = `
"<p class=\\"custom-size \\">test-value</p><style>
p {
color: inherit;
}
.custom-size {
font-size: 14px;
}
</style>"
`;
exports[`Text should be able to specify the size of text 2`] = `
"<p class=\\"custom-size \\">test-value</p><style>
p {
color: inherit;
}
.custom-size {
font-size: 12rem;
}
</style>"
`;
exports[`Text should render P element in the default 1`] = `
"<p class=\\" \\">test-value</p><style>
p {
color: inherit;
}
.custom-size {
font-size: inherit;
}
</style>"
`;
exports[`Text should render default color when type missing 1`] = `
"<p class=\\"\\">test-value</p><style>
"<p class=\\" \\">test-value</p><style>
p {
color: inherit;
}
.custom-size {
font-size: inherit;
}
</style>"
`;
exports[`Text should work with different styles 1`] = `
"<div><p class=\\"\\">test-value</p><style>
"<div><p class=\\" \\">test-value</p><style>
p {
color: #666;
}
</style><p class=\\"\\">test-value</p><style>
.custom-size {
font-size: inherit;
}
</style><p class=\\" \\">test-value</p><style>
p {
color: #0070f3;
}
</style><p class=\\"\\">test-value</p><style>
.custom-size {
font-size: inherit;
}
</style><p class=\\" \\">test-value</p><style>
p {
color: #f5a623;
}
</style><p class=\\"\\">test-value</p><style>
.custom-size {
font-size: inherit;
}
</style><p class=\\" \\">test-value</p><style>
p {
color: #ff0000;
}
.custom-size {
font-size: inherit;
}
</style></div>"
`;
exports[`Text the combined style should be rendered 1`] = `
"<p class=\\"\\"><b class=\\"\\"><del class=\\"\\">test-value</del><style>
"<p class=\\" \\"><b class=\\" \\"><del class=\\" \\">test-value</del><style>
del {
color: inherit;
}
.custom-size {
font-size: inherit;
}
</style></b><style>
b {
color: inherit;
}
.custom-size {
font-size: inherit;
}
</style></p><style>
p {
color: inherit;
}
.custom-size {
font-size: inherit;
}
</style>"
`;
exports[`Text the specified element should be rendered 1`] = `
"<div><h1 class=\\"\\">test-value</h1><style>
"<div><h1 class=\\" \\">test-value</h1><style>
h1 {
color: inherit;
}
</style><h2 class=\\"\\">test-value</h2><style>
.custom-size {
font-size: inherit;
}
</style><h2 class=\\" \\">test-value</h2><style>
h2 {
color: inherit;
}
</style><h3 class=\\"\\">test-value</h3><style>
.custom-size {
font-size: inherit;
}
</style><h3 class=\\" \\">test-value</h3><style>
h3 {
color: inherit;
}
</style><h4 class=\\"\\">test-value</h4><style>
.custom-size {
font-size: inherit;
}
</style><h4 class=\\" \\">test-value</h4><style>
h4 {
color: inherit;
}
</style><h5 class=\\"\\">test-value</h5><style>
.custom-size {
font-size: inherit;
}
</style><h5 class=\\" \\">test-value</h5><style>
h5 {
color: inherit;
}
</style><h6 class=\\"\\">test-value</h6><style>
.custom-size {
font-size: inherit;
}
</style><h6 class=\\" \\">test-value</h6><style>
h6 {
color: inherit;
}
</style><p class=\\"\\">test-value</p><style>
.custom-size {
font-size: inherit;
}
</style><p class=\\" \\">test-value</p><style>
p {
color: inherit;
}
</style><small class=\\"\\">test-value</small><style>
.custom-size {
font-size: inherit;
}
</style><small class=\\" \\">test-value</small><style>
small {
color: inherit;
}
</style><span class=\\"\\">test-value</span><style>
.custom-size {
font-size: inherit;
}
</style><span class=\\" \\">test-value</span><style>
span {
color: inherit;
}
</style><del class=\\"\\">test-value</del><style>
.custom-size {
font-size: inherit;
}
</style><del class=\\" \\">test-value</del><style>
del {
color: inherit;
}
</style><i class=\\"\\">test-value</i><style>
.custom-size {
font-size: inherit;
}
</style><i class=\\" \\">test-value</i><style>
i {
color: inherit;
}
</style><em class=\\"\\">test-value</em><style>
.custom-size {
font-size: inherit;
}
</style><em class=\\" \\">test-value</em><style>
em {
color: inherit;
}
</style><b class=\\"\\">test-value</b><style>
.custom-size {
font-size: inherit;
}
</style><b class=\\" \\">test-value</b><style>
b {
color: inherit;
}
.custom-size {
font-size: inherit;
}
</style></div>"
`;

9
components/text/__tests__/index.test.tsx
View File

@@ -54,4 +54,13 @@ describe('Text', () => {
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should be able to specify the size of text', () => {
let wrapper = mount(<Text size={14}>test-value</Text>)
expect(wrapper.html()).toMatchSnapshot()
wrapper = mount(<Text size="12rem">test-value</Text>)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
})