mirror of
https://github.com/zhigang1992/react.git
synced 2026-03-26 22:42:51 +08:00
test(checkbox): add testcase
This commit is contained in:
unix
1851
components/checkbox/__tests__/__snapshots__/group.test.tsx.snap
Normal file
1851
components/checkbox/__tests__/__snapshots__/group.test.tsx.snap
Normal file
File diff suppressed because it is too large
Load Diff
907
components/checkbox/__tests__/__snapshots__/index.test.tsx.snap
Normal file
907
components/checkbox/__tests__/__snapshots__/index.test.tsx.snap
Normal file
@@ -0,0 +1,907 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Checkbox should render correctly 1`] = `
|
||||
initialize {
|
||||
"0": Object {
|
||||
"attribs": Object {
|
||||
"class": "",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"attribs": Object {
|
||||
"fill": "none",
|
||||
"height": "12px",
|
||||
"viewBox": "0 0 12 12",
|
||||
"width": "12px",
|
||||
"xmlns": "http://www.w3.org/2000/svg",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"attribs": Object {
|
||||
"d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
|
||||
"stroke": "#666",
|
||||
},
|
||||
"children": Array [],
|
||||
"name": "path",
|
||||
"namespace": "http://www.w3.org/2000/svg",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"d": undefined,
|
||||
"stroke": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"d": undefined,
|
||||
"stroke": undefined,
|
||||
},
|
||||
},
|
||||
],
|
||||
"name": "svg",
|
||||
"namespace": "http://www.w3.org/2000/svg",
|
||||
"next": Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "
|
||||
svg {
|
||||
display: inline-flex;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
user-select: none;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "style",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": Object {
|
||||
"attribs": Object {
|
||||
"type": "checkbox",
|
||||
},
|
||||
"children": Array [],
|
||||
"name": "input",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": Object {
|
||||
"attribs": Object {
|
||||
"class": "text",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "Sydney",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "span",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "
|
||||
label {
|
||||
height: .875rem;
|
||||
line-height: .875rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
opacity: 1;;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: .875rem;
|
||||
line-height: .875rem;
|
||||
padding-left: .5rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: -1;
|
||||
background-color: transparent;
|
||||
}
|
||||
",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "style",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": [Circular],
|
||||
"type": "style",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
"parent": [Circular],
|
||||
"prev": [Circular],
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
},
|
||||
"parent": [Circular],
|
||||
"prev": [Circular],
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"type": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"type": undefined,
|
||||
},
|
||||
},
|
||||
"parent": [Circular],
|
||||
"prev": [Circular],
|
||||
"type": "style",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"fill": undefined,
|
||||
"height": undefined,
|
||||
"viewBox": undefined,
|
||||
"width": undefined,
|
||||
"xmlns": "http://www.w3.org/2000/xmlns/",
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"fill": undefined,
|
||||
"height": undefined,
|
||||
"viewBox": undefined,
|
||||
"width": undefined,
|
||||
"xmlns": "",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "
|
||||
svg {
|
||||
display: inline-flex;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
user-select: none;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "style",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": Object {
|
||||
"attribs": Object {
|
||||
"type": "checkbox",
|
||||
},
|
||||
"children": Array [],
|
||||
"name": "input",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": Object {
|
||||
"attribs": Object {
|
||||
"class": "text",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "Sydney",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "span",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "
|
||||
label {
|
||||
height: .875rem;
|
||||
line-height: .875rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
opacity: 1;;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: .875rem;
|
||||
line-height: .875rem;
|
||||
padding-left: .5rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: -1;
|
||||
background-color: transparent;
|
||||
}
|
||||
",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "style",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": [Circular],
|
||||
"type": "style",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
"parent": [Circular],
|
||||
"prev": [Circular],
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
},
|
||||
"parent": [Circular],
|
||||
"prev": [Circular],
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"type": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"type": undefined,
|
||||
},
|
||||
},
|
||||
"parent": [Circular],
|
||||
"prev": Object {
|
||||
"attribs": Object {
|
||||
"fill": "none",
|
||||
"height": "12px",
|
||||
"viewBox": "0 0 12 12",
|
||||
"width": "12px",
|
||||
"xmlns": "http://www.w3.org/2000/svg",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"attribs": Object {
|
||||
"d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
|
||||
"stroke": "#666",
|
||||
},
|
||||
"children": Array [],
|
||||
"name": "path",
|
||||
"namespace": "http://www.w3.org/2000/svg",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"d": undefined,
|
||||
"stroke": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"d": undefined,
|
||||
"stroke": undefined,
|
||||
},
|
||||
},
|
||||
],
|
||||
"name": "svg",
|
||||
"namespace": "http://www.w3.org/2000/svg",
|
||||
"next": [Circular],
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"fill": undefined,
|
||||
"height": undefined,
|
||||
"viewBox": undefined,
|
||||
"width": undefined,
|
||||
"xmlns": "http://www.w3.org/2000/xmlns/",
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"fill": undefined,
|
||||
"height": undefined,
|
||||
"viewBox": undefined,
|
||||
"width": undefined,
|
||||
"xmlns": "",
|
||||
},
|
||||
},
|
||||
"type": "style",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
Object {
|
||||
"attribs": Object {
|
||||
"type": "checkbox",
|
||||
},
|
||||
"children": Array [],
|
||||
"name": "input",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": Object {
|
||||
"attribs": Object {
|
||||
"class": "text",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "Sydney",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "span",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "
|
||||
label {
|
||||
height: .875rem;
|
||||
line-height: .875rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
opacity: 1;;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: .875rem;
|
||||
line-height: .875rem;
|
||||
padding-left: .5rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: -1;
|
||||
background-color: transparent;
|
||||
}
|
||||
",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "style",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": [Circular],
|
||||
"type": "style",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
"parent": [Circular],
|
||||
"prev": [Circular],
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
},
|
||||
"parent": [Circular],
|
||||
"prev": Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "
|
||||
svg {
|
||||
display: inline-flex;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
user-select: none;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "style",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": [Circular],
|
||||
"parent": [Circular],
|
||||
"prev": Object {
|
||||
"attribs": Object {
|
||||
"fill": "none",
|
||||
"height": "12px",
|
||||
"viewBox": "0 0 12 12",
|
||||
"width": "12px",
|
||||
"xmlns": "http://www.w3.org/2000/svg",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"attribs": Object {
|
||||
"d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
|
||||
"stroke": "#666",
|
||||
},
|
||||
"children": Array [],
|
||||
"name": "path",
|
||||
"namespace": "http://www.w3.org/2000/svg",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"d": undefined,
|
||||
"stroke": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"d": undefined,
|
||||
"stroke": undefined,
|
||||
},
|
||||
},
|
||||
],
|
||||
"name": "svg",
|
||||
"namespace": "http://www.w3.org/2000/svg",
|
||||
"next": [Circular],
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"fill": undefined,
|
||||
"height": undefined,
|
||||
"viewBox": undefined,
|
||||
"width": undefined,
|
||||
"xmlns": "http://www.w3.org/2000/xmlns/",
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"fill": undefined,
|
||||
"height": undefined,
|
||||
"viewBox": undefined,
|
||||
"width": undefined,
|
||||
"xmlns": "",
|
||||
},
|
||||
},
|
||||
"type": "style",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"type": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"type": undefined,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"attribs": Object {
|
||||
"class": "text",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "Sydney",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "span",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "
|
||||
label {
|
||||
height: .875rem;
|
||||
line-height: .875rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
opacity: 1;;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: .875rem;
|
||||
line-height: .875rem;
|
||||
padding-left: .5rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: -1;
|
||||
background-color: transparent;
|
||||
}
|
||||
",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "style",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": [Circular],
|
||||
"type": "style",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
"parent": [Circular],
|
||||
"prev": Object {
|
||||
"attribs": Object {
|
||||
"type": "checkbox",
|
||||
},
|
||||
"children": Array [],
|
||||
"name": "input",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": [Circular],
|
||||
"parent": [Circular],
|
||||
"prev": Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "
|
||||
svg {
|
||||
display: inline-flex;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
user-select: none;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "style",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": [Circular],
|
||||
"parent": [Circular],
|
||||
"prev": Object {
|
||||
"attribs": Object {
|
||||
"fill": "none",
|
||||
"height": "12px",
|
||||
"viewBox": "0 0 12 12",
|
||||
"width": "12px",
|
||||
"xmlns": "http://www.w3.org/2000/svg",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"attribs": Object {
|
||||
"d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
|
||||
"stroke": "#666",
|
||||
},
|
||||
"children": Array [],
|
||||
"name": "path",
|
||||
"namespace": "http://www.w3.org/2000/svg",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"d": undefined,
|
||||
"stroke": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"d": undefined,
|
||||
"stroke": undefined,
|
||||
},
|
||||
},
|
||||
],
|
||||
"name": "svg",
|
||||
"namespace": "http://www.w3.org/2000/svg",
|
||||
"next": [Circular],
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"fill": undefined,
|
||||
"height": undefined,
|
||||
"viewBox": undefined,
|
||||
"width": undefined,
|
||||
"xmlns": "http://www.w3.org/2000/xmlns/",
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"fill": undefined,
|
||||
"height": undefined,
|
||||
"viewBox": undefined,
|
||||
"width": undefined,
|
||||
"xmlns": "",
|
||||
},
|
||||
},
|
||||
"type": "style",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"type": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"type": undefined,
|
||||
},
|
||||
},
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "
|
||||
label {
|
||||
height: .875rem;
|
||||
line-height: .875rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
opacity: 1;;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: .875rem;
|
||||
line-height: .875rem;
|
||||
padding-left: .5rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: -1;
|
||||
background-color: transparent;
|
||||
}
|
||||
",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "style",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": Object {
|
||||
"attribs": Object {
|
||||
"class": "text",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "Sydney",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "span",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": [Circular],
|
||||
"parent": [Circular],
|
||||
"prev": Object {
|
||||
"attribs": Object {
|
||||
"type": "checkbox",
|
||||
},
|
||||
"children": Array [],
|
||||
"name": "input",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": [Circular],
|
||||
"parent": [Circular],
|
||||
"prev": Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
Object {
|
||||
"data": "
|
||||
svg {
|
||||
display: inline-flex;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
user-select: none;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "text",
|
||||
},
|
||||
],
|
||||
"name": "style",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": [Circular],
|
||||
"parent": [Circular],
|
||||
"prev": Object {
|
||||
"attribs": Object {
|
||||
"fill": "none",
|
||||
"height": "12px",
|
||||
"viewBox": "0 0 12 12",
|
||||
"width": "12px",
|
||||
"xmlns": "http://www.w3.org/2000/svg",
|
||||
},
|
||||
"children": Array [
|
||||
Object {
|
||||
"attribs": Object {
|
||||
"d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
|
||||
"stroke": "#666",
|
||||
},
|
||||
"children": Array [],
|
||||
"name": "path",
|
||||
"namespace": "http://www.w3.org/2000/svg",
|
||||
"next": null,
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"d": undefined,
|
||||
"stroke": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"d": undefined,
|
||||
"stroke": undefined,
|
||||
},
|
||||
},
|
||||
],
|
||||
"name": "svg",
|
||||
"namespace": "http://www.w3.org/2000/svg",
|
||||
"next": [Circular],
|
||||
"parent": [Circular],
|
||||
"prev": null,
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"fill": undefined,
|
||||
"height": undefined,
|
||||
"viewBox": undefined,
|
||||
"width": undefined,
|
||||
"xmlns": "http://www.w3.org/2000/xmlns/",
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"fill": undefined,
|
||||
"height": undefined,
|
||||
"viewBox": undefined,
|
||||
"width": undefined,
|
||||
"xmlns": "",
|
||||
},
|
||||
},
|
||||
"type": "style",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"type": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"type": undefined,
|
||||
},
|
||||
},
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
},
|
||||
"type": "style",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
],
|
||||
"name": "label",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": null,
|
||||
"parent": null,
|
||||
"prev": null,
|
||||
"root": Object {
|
||||
"attribs": Object {},
|
||||
"children": Array [
|
||||
[Circular],
|
||||
],
|
||||
"name": "root",
|
||||
"namespace": "http://www.w3.org/1999/xhtml",
|
||||
"next": null,
|
||||
"parent": null,
|
||||
"prev": null,
|
||||
"type": "root",
|
||||
"x-attribsNamespace": Object {},
|
||||
"x-attribsPrefix": Object {},
|
||||
},
|
||||
"type": "tag",
|
||||
"x-attribsNamespace": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
"x-attribsPrefix": Object {
|
||||
"class": undefined,
|
||||
},
|
||||
},
|
||||
"_root": [Circular],
|
||||
"length": 1,
|
||||
"options": Object {
|
||||
"decodeEntities": true,
|
||||
"normalizeWhitespace": false,
|
||||
"withDomLvl1": true,
|
||||
"xml": false,
|
||||
},
|
||||
}
|
||||
`;
|
||||
102
components/checkbox/__tests__/group.test.tsx
Normal file
102
components/checkbox/__tests__/group.test.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import React from 'react'
|
||||
import { mount, render } from 'enzyme'
|
||||
import { Checkbox } from '../../index'
|
||||
|
||||
describe('Checkbox Group', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(
|
||||
<Checkbox.Group value={[]}>
|
||||
<Checkbox value="sydney">Sydney</Checkbox>
|
||||
</Checkbox.Group>
|
||||
)
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
const rendered = render(
|
||||
<Checkbox.Group value={[]}>
|
||||
<Checkbox value="sydney">Sydney</Checkbox>
|
||||
</Checkbox.Group>
|
||||
)
|
||||
expect(rendered).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('should work correctly with initial value', () => {
|
||||
let wrapper = mount(
|
||||
<Checkbox.Group value={['sydney']}>
|
||||
<Checkbox value="sydney">Sydney</Checkbox>
|
||||
<Checkbox value="beijing">BeiJing</Checkbox>
|
||||
</Checkbox.Group>
|
||||
)
|
||||
const sydney = wrapper.find('input').at(0).getDOMNode()
|
||||
expect((sydney as HTMLInputElement).checked).toBeTruthy()
|
||||
const beijing = wrapper.find('input').at(1).getDOMNode()
|
||||
expect((beijing as HTMLInputElement).checked).not.toBeTruthy()
|
||||
})
|
||||
|
||||
it('should change value after click', () => {
|
||||
let value = ['sydney']
|
||||
const wrapper = mount(
|
||||
<Checkbox.Group value={['sydney']} onChange={(val) => value = val}>
|
||||
<Checkbox value="sydney">Sydney</Checkbox>
|
||||
<Checkbox value="beijing">BeiJing</Checkbox>
|
||||
</Checkbox.Group>
|
||||
)
|
||||
const sydney = wrapper.find('input').at(0)
|
||||
sydney.simulate('change')
|
||||
expect(value.length).toBe(0)
|
||||
|
||||
const beijing = wrapper.find('input').at(1)
|
||||
beijing.simulate('change')
|
||||
expect(value).toEqual(
|
||||
expect.arrayContaining(['beijing'])
|
||||
)
|
||||
})
|
||||
|
||||
it('should ignore events when disabled', () => {
|
||||
let value = ['sydney']
|
||||
const wrapper = mount(
|
||||
<Checkbox.Group disabled value={['sydney']} onChange={(val) => value = val}>
|
||||
<Checkbox value="sydney">Sydney</Checkbox>
|
||||
<Checkbox value="beijing">BeiJing</Checkbox>
|
||||
</Checkbox.Group>
|
||||
)
|
||||
const sydney = wrapper.find('input').at(0)
|
||||
sydney.simulate('change')
|
||||
expect(value.length).not.toBe(0)
|
||||
|
||||
const beijing = wrapper.find('input').at(1)
|
||||
beijing.simulate('change')
|
||||
expect(value).not.toEqual(
|
||||
expect.arrayContaining(['beijing'])
|
||||
)
|
||||
})
|
||||
|
||||
it('should throw error when value missing', () => {
|
||||
let errorMessage = ''
|
||||
const Group = Checkbox.Group as any
|
||||
const errorSpy = jest.spyOn(console, 'error')
|
||||
.mockImplementation(msg => errorMessage = msg)
|
||||
mount(
|
||||
<Group>
|
||||
<Checkbox value="sydney">Sydney</Checkbox>
|
||||
<Checkbox value="beijing">BeiJing</Checkbox>
|
||||
</Group>
|
||||
)
|
||||
|
||||
expect(errorMessage).toContain('required')
|
||||
errorSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('should throw error when set check prop in group', () => {
|
||||
let errorMessage = ''
|
||||
const errorSpy = jest.spyOn(console, 'error')
|
||||
.mockImplementation(msg => errorMessage = msg)
|
||||
mount(
|
||||
<Checkbox.Group value={[]}>
|
||||
<Checkbox value="sydney" checked>Sydney</Checkbox>
|
||||
<Checkbox value="beijing">BeiJing</Checkbox>
|
||||
</Checkbox.Group>
|
||||
)
|
||||
|
||||
expect(errorMessage.toLowerCase()).toContain('remove props')
|
||||
errorSpy.mockRestore()
|
||||
})
|
||||
})
|
||||
64
components/checkbox/__tests__/index.test.tsx
Normal file
64
components/checkbox/__tests__/index.test.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import React from 'react'
|
||||
import { mount, render } from 'enzyme'
|
||||
import { Checkbox } from '../../index'
|
||||
|
||||
describe('Checkbox', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(
|
||||
<Checkbox checked={true}>Sydney</Checkbox>
|
||||
)
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
const rendered = render(<Checkbox>Sydney</Checkbox>)
|
||||
expect(rendered).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('should work correctly with initial value', () => {
|
||||
let wrapper = mount(<Checkbox checked={true}>Sydney</Checkbox>)
|
||||
let input = wrapper.find('input').getDOMNode()
|
||||
expect((input as HTMLInputElement).checked).toBeTruthy()
|
||||
|
||||
wrapper = mount(<Checkbox checked={false}>Sydney</Checkbox>)
|
||||
input = wrapper.find('input').getDOMNode()
|
||||
expect((input as HTMLInputElement).checked).not.toBeTruthy()
|
||||
|
||||
wrapper = mount(<Checkbox initialChecked>Sydney</Checkbox>)
|
||||
input = wrapper.find('input').getDOMNode()
|
||||
expect((input as HTMLInputElement).checked).toBeTruthy()
|
||||
|
||||
wrapper = mount(<Checkbox initialChecked={false}>Sydney</Checkbox>)
|
||||
input = wrapper.find('input').getDOMNode()
|
||||
expect((input as HTMLInputElement).checked).not.toBeTruthy()
|
||||
})
|
||||
|
||||
it('should change value after click', () => {
|
||||
const Wrapper = () => {
|
||||
const [state, setState] = React.useState<string>('state1')
|
||||
|
||||
return (
|
||||
<Checkbox initialChecked onChange={() => setState('state2')}>
|
||||
{state}
|
||||
</Checkbox>
|
||||
)
|
||||
}
|
||||
const wrapper = mount(<Wrapper />)
|
||||
const input = wrapper.find('input').at(0)
|
||||
input.simulate('change')
|
||||
expect(wrapper.find('.text').text()).toContain('state2')
|
||||
})
|
||||
|
||||
it('should ignore events when disabled', () => {
|
||||
const Wrapper = () => {
|
||||
const [state, setState] = React.useState<string>('state1')
|
||||
|
||||
return (
|
||||
<Checkbox disabled onChange={() => setState('state2')}>
|
||||
{state}
|
||||
</Checkbox>
|
||||
)
|
||||
}
|
||||
const wrapper = mount(<Wrapper />)
|
||||
const input = wrapper.find('input').at(0)
|
||||
input.simulate('change')
|
||||
expect(wrapper.find('.text').text()).not.toContain('state2')
|
||||
})
|
||||
})
|
||||
@@ -41,13 +41,6 @@ const Checkbox: React.FC<CheckboxProps> = React.memo(({
|
||||
const { updateState, inGroup, disabledAll, values } = useCheckbox()
|
||||
const isDisabled = inGroup ? disabledAll || disabled : disabled
|
||||
|
||||
if (inGroup && !value) {
|
||||
useWarning(
|
||||
'Props "value" must be set when [Checkbox] component is in the group.',
|
||||
'Checkbox',
|
||||
)
|
||||
}
|
||||
|
||||
if (inGroup && checked) {
|
||||
useWarning(
|
||||
'Remove props "checked" when [Checkbox] component is in the group.',
|
||||
|
||||
Reference in New Issue
Block a user