kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 06:55:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(badge): add testcase for anchor

Browse Source
This commit is contained in:
unix
2020-04-30 22:44:13 +08:00
parent 3fa7eb1422
commit 6b9f839452
4 changed files with 357 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
components/badge/__tests__/__snapshots__/anchor.test.tsx.snap Normal file
View File

@@ -0,0 +1,124 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`BadgeAnchor should be support multiple position 1`] = `
"<div class=\\"anchor\\"><button>btn</button><sup><span class=\\" \\">test<style>
span {
display: inline-block;
padding: 4px 7px;
border-radius: 16px;
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #000;
color: #fff;
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
</style></span></sup><style>
.anchor {
position: relative;
display: inline-flex;
vertical-align: middle;
flex-shrink: 0;
box-sizing: border-box;
}
sup {
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: auto;
transform: translate(50%, -50%);
transform-origin: 100% 0%;
z-index: 1;
}
</style></div>"
`;
exports[`BadgeAnchor should be support multiple position 2`] = `
"<div class=\\"anchor\\"><button>btn</button><sup><span class=\\" \\">test<style>
span {
display: inline-block;
padding: 4px 7px;
border-radius: 16px;
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #000;
color: #fff;
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
</style></span></sup><style>
.anchor {
position: relative;
display: inline-flex;
vertical-align: middle;
flex-shrink: 0;
box-sizing: border-box;
}
sup {
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
transform-origin: 0% 0%;
z-index: 1;
}
</style></div>"
`;
exports[`BadgeAnchor should be support multiple position 3`] = `
"<div class=\\"anchor\\"><button>btn</button><sup><span class=\\" \\">test<style>
span {
display: inline-block;
padding: 4px 7px;
border-radius: 16px;
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #000;
color: #fff;
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
</style></span></sup><style>
.anchor {
position: relative;
display: inline-flex;
vertical-align: middle;
flex-shrink: 0;
box-sizing: border-box;
}
sup {
position: absolute;
top: auto;
left: auto;
right: 0;
bottom: 0;
transform: translate(50%, 50%);
transform-origin: 100% 100%;
z-index: 1;
}
</style></div>"
`;

204
components/badge/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -11,7 +11,7 @@ initialize {
"children": Array [
Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -33,6 +33,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -70,6 +75,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -97,7 +107,7 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -119,6 +129,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -156,6 +171,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -183,7 +203,7 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -205,6 +225,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -242,6 +267,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -269,7 +299,7 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -291,6 +321,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -328,6 +363,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -396,7 +436,7 @@ initialize {
},
Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -418,6 +458,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -455,6 +500,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -482,7 +532,7 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -504,6 +554,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -541,6 +596,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -568,7 +628,7 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -590,6 +650,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -627,6 +692,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -676,7 +746,7 @@ initialize {
"parent": [Circular],
"prev": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -698,6 +768,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -735,6 +810,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -781,7 +861,7 @@ initialize {
},
Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -803,6 +883,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -840,6 +925,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -867,7 +957,7 @@ initialize {
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -889,6 +979,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -926,6 +1021,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -965,7 +1065,7 @@ initialize {
"parent": [Circular],
"prev": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -987,6 +1087,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1024,6 +1129,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1053,7 +1163,7 @@ initialize {
"parent": [Circular],
"prev": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -1075,6 +1185,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1112,6 +1227,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1166,7 +1286,7 @@ initialize {
},
Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -1188,6 +1308,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1225,6 +1350,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1254,7 +1384,7 @@ initialize {
"parent": [Circular],
"prev": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -1276,6 +1406,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1313,6 +1448,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1342,7 +1482,7 @@ initialize {
"parent": [Circular],
"prev": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -1364,6 +1504,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1401,6 +1546,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1430,7 +1580,7 @@ initialize {
"parent": [Circular],
"prev": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -1452,6 +1602,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1489,6 +1644,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1588,7 +1748,7 @@ exports[`Badge should supoort text 1`] = `
initialize {
"0": Object {
"attribs": Object {
"class": "",
"class": " ",
},
"children": Array [
Object {
@@ -1610,6 +1770,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],
@@ -1647,6 +1812,11 @@ initialize {
font-size: .875rem;
border: 0;
}
.dot {
padding: 4px;
border-radius: 50%;
}
",
"next": null,
"parent": [Circular],

40
components/badge/__tests__/anchor.test.tsx Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react'
import { mount } from 'enzyme'
import { Badge } from 'components'
describe('BadgeAnchor', () => {
it('should render correctly', () => {
const wrapper = mount(
<Badge.Anchor>
<Badge>test</Badge>
<a>link</a>
</Badge.Anchor>
)
expect(() => wrapper.unmount()).not.toThrow()
})
it('should be work without Badge', () => {
const wrapper = mount(
<Badge.Anchor>
<a>link</a>
</Badge.Anchor>
)
expect(() => wrapper.unmount()).not.toThrow()
})
it('should be support multiple position', () => {
const wrapper = mount(
<Badge.Anchor>
<Badge>test</Badge>
<button>btn</button>
</Badge.Anchor>
)
expect(wrapper.html()).toMatchSnapshot()
wrapper.setProps({ placement: 'topLeft' })
expect(wrapper.html()).toMatchSnapshot()
wrapper.setProps({ placement: 'bottomRight' })
expect(wrapper.html()).toMatchSnapshot()
})
})

6
components/badge/__tests__/index.test.tsx
View File

@@ -52,4 +52,10 @@ describe('Badge', () => {
expect(span.props().style).not.toBeUndefined()
expect((span.props().style as any).background).toBe('white')
})
it('should hide content when in dot mode', () => {
const wrapper = mount(<Badge dot>test-value</Badge>)
expect(wrapper.html()).not.toContain('test-value')
expect(() => wrapper.unmount()).not.toThrow()
})
})