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

test(radio): add testcases for size

Browse Source
This commit is contained in:
unix
2020-05-23 07:31:48 +08:00
parent cbc4b521d5
commit c1dceeccb5
4 changed files with 779 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

550
components/radio/__tests__/__snapshots__/group.test.tsx.snap
View File

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Radio Group should render correctly 1`] = `
"<div><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\">1</span><span class=\\"point\\"></span></label><style>
"<div><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\"><span class=\\"point active\\"></span>1</span></label><style>
input {
opacity: 0;
visibility: hidden;
@@ -17,34 +17,36 @@ exports[`Radio Group should render correctly 1`] = `
display: flex;
width: initial;
align-items: flex-start;
line-height: 1.5rem;
position: relative;
--radio-size: 1rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 1.375rem;
color: #000;
cursor: pointer;
}
.name {
font-size: 1rem;
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
position: absolute;
left: 0;
top: 6px;
height: 0.875rem;
width: 0.875rem;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
@@ -52,71 +54,81 @@ exports[`Radio Group should render correctly 1`] = `
position: absolute;
left: -1px;
top: -1px;
height: 0.875rem;
width: 0.875rem;
border-radius: 50%;
transform: scale(1);
transition: all 0.2s ease;
background-color: #000;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"2\\"><span class=\\"name\\">2</span><span class=\\"point\\"></span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
line-height: 1.5rem;
position: relative;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 1.375rem;
color: #000;
cursor: pointer;
}
.name {
font-size: 1rem;
font-weight: bold;
user-select: none;
}
.point {
position: absolute;
left: 0;
top: 6px;
height: 0.875rem;
width: 0.875rem;
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: 0.875rem;
width: 0.875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"2\\"><span class=\\"name\\"><span class=\\"point \\"></span>2</span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
position: relative;
--radio-size: 1rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
color: #000;
cursor: pointer;
}
.name {
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
transform: scale(0);
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div></div><style>
.radio-group {
display: flex;
@@ -124,14 +136,14 @@ exports[`Radio Group should render correctly 1`] = `
}
.radio-group :global(.radio) {
margin-top: 16pt;
margin-top: calc(1rem * 1);
margin-left: 0;
}
.radio-group :global(.radio:first-of-type) {
margin: 0;
}
</style><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\">1</span><span class=\\"point\\"></span></label><style>
</style><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\"><span class=\\"point active\\"></span>1</span></label><style>
input {
opacity: 0;
visibility: hidden;
@@ -147,34 +159,36 @@ exports[`Radio Group should render correctly 1`] = `
display: flex;
width: initial;
align-items: flex-start;
line-height: 1.5rem;
position: relative;
--radio-size: 1rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 1.375rem;
color: #000;
cursor: pointer;
}
.name {
font-size: 1rem;
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
position: absolute;
left: 0;
top: 6px;
height: 0.875rem;
width: 0.875rem;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
@@ -182,71 +196,81 @@ exports[`Radio Group should render correctly 1`] = `
position: absolute;
left: -1px;
top: -1px;
height: 0.875rem;
width: 0.875rem;
border-radius: 50%;
transform: scale(1);
transition: all 0.2s ease;
background-color: #000;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"2\\"><span class=\\"name\\">2</span><span class=\\"point\\"></span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
line-height: 1.5rem;
position: relative;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 1.375rem;
color: #000;
cursor: pointer;
}
.name {
font-size: 1rem;
font-weight: bold;
user-select: none;
}
.point {
position: absolute;
left: 0;
top: 6px;
height: 0.875rem;
width: 0.875rem;
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: 0.875rem;
width: 0.875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"2\\"><span class=\\"name\\"><span class=\\"point \\"></span>2</span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
position: relative;
--radio-size: 1rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
color: #000;
cursor: pointer;
}
.name {
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
transform: scale(0);
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div></div><style>
.radio-group {
display: flex;
@@ -255,7 +279,245 @@ exports[`Radio Group should render correctly 1`] = `
.radio-group :global(.radio) {
margin-top: 0;
margin-left: 16pt;
margin-left: calc(1rem * 1);
}
.radio-group :global(.radio:first-of-type) {
margin: 0;
}
</style></div>"
`;
exports[`Radio Group should work correctly with different sizes 1`] = `
"<div><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\"><span class=\\"point active\\"></span>1</span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
position: relative;
--radio-size: .75rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
color: #000;
cursor: pointer;
}
.name {
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
transform: scale(0);
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div></div><style>
.radio-group {
display: flex;
flex-direction: column;
}
.radio-group :global(.radio) {
margin-top: calc(.75rem * 1);
margin-left: 0;
}
.radio-group :global(.radio:first-of-type) {
margin: 0;
}
</style><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\"><span class=\\"point active\\"></span>1</span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
position: relative;
--radio-size: .875rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
color: #000;
cursor: pointer;
}
.name {
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
transform: scale(0);
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div></div><style>
.radio-group {
display: flex;
flex-direction: column;
}
.radio-group :global(.radio) {
margin-top: calc(.875rem * 1);
margin-left: 0;
}
.radio-group :global(.radio:first-of-type) {
margin: 0;
}
</style><div class=\\"radio-group \\"><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"1\\"><span class=\\"name\\"><span class=\\"point active\\"></span>1</span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
position: relative;
--radio-size: 1.125rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
color: #000;
cursor: pointer;
}
.name {
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
transform: scale(0);
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div></div><style>
.radio-group {
display: flex;
flex-direction: column;
}
.radio-group :global(.radio) {
margin-top: calc(1.125rem * 1);
margin-left: 0;
}
.radio-group :global(.radio:first-of-type) {

398
components/radio/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Radio should render correctly 1`] = `
"<div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\">Option</span><span class=\\"point\\"></span></label><style>
"<div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option</span></label><style>
input {
opacity: 0;
visibility: hidden;
@@ -17,34 +17,36 @@ exports[`Radio should render correctly 1`] = `
display: flex;
width: initial;
align-items: flex-start;
line-height: 1.5rem;
position: relative;
--radio-size: 1rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 1.375rem;
color: #000;
cursor: pointer;
}
.name {
font-size: 1rem;
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
position: absolute;
left: 0;
top: 6px;
height: 0.875rem;
width: 0.875rem;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
@@ -52,18 +54,22 @@ exports[`Radio should render correctly 1`] = `
position: absolute;
left: -1px;
top: -1px;
height: 0.875rem;
width: 0.875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div>"
`;
exports[`Radio should support react-node in description 1`] = `
"<div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\">Option</span><span class=\\"point\\"></span></label><style>
"<div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option</span></label><style>
input {
opacity: 0;
visibility: hidden;
@@ -79,34 +85,36 @@ exports[`Radio should support react-node in description 1`] = `
display: flex;
width: initial;
align-items: flex-start;
line-height: 1.5rem;
position: relative;
--radio-size: 1rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 1.375rem;
color: #000;
cursor: pointer;
}
.name {
font-size: 1rem;
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
position: absolute;
left: 0;
top: 6px;
height: 0.875rem;
width: 0.875rem;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
@@ -114,19 +122,24 @@ exports[`Radio should support react-node in description 1`] = `
position: absolute;
left: -1px;
top: -1px;
height: 0.875rem;
width: 0.875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\">Option 1</span><span class=\\"\\">Description for Option1<style>
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option 1</span><span class=\\"\\">Description for Option1<style>
span {
color: #999;
font-size: 0.875rem;
font-size: calc(var(--radio-size) * 0.85);
padding-left: calc(var(--radio-size) + var(--radio-size) * 0.375);
}
</style></span><span class=\\"point\\"></span></label><style>
</style></span></label><style>
input {
opacity: 0;
visibility: hidden;
@@ -142,34 +155,36 @@ exports[`Radio should support react-node in description 1`] = `
display: flex;
width: initial;
align-items: flex-start;
line-height: 1.5rem;
position: relative;
--radio-size: 1rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 1.375rem;
color: #000;
cursor: pointer;
}
.name {
font-size: 1rem;
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
position: absolute;
left: 0;
top: 6px;
height: 0.875rem;
width: 0.875rem;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
@@ -177,19 +192,24 @@ exports[`Radio should support react-node in description 1`] = `
position: absolute;
left: -1px;
top: -1px;
height: 0.875rem;
width: 0.875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\">Option 1</span><span class=\\"\\"><b>Description</b> for Option1<style>
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>Option 1</span><span class=\\"\\"><b>Description</b> for Option1<style>
span {
color: #999;
font-size: 0.875rem;
font-size: calc(var(--radio-size) * 0.85);
padding-left: calc(var(--radio-size) + var(--radio-size) * 0.375);
}
</style></span><span class=\\"point\\"></span></label><style>
</style></span></label><style>
input {
opacity: 0;
visibility: hidden;
@@ -205,34 +225,36 @@ exports[`Radio should support react-node in description 1`] = `
display: flex;
width: initial;
align-items: flex-start;
line-height: 1.5rem;
position: relative;
--radio-size: 1rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 1.375rem;
color: #000;
cursor: pointer;
}
.name {
font-size: 1rem;
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
position: absolute;
left: 0;
top: 6px;
height: 0.875rem;
width: 0.875rem;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
@@ -240,12 +262,276 @@ exports[`Radio should support react-node in description 1`] = `
position: absolute;
left: -1px;
top: -1px;
height: 0.875rem;
width: 0.875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div></div>"
`;
exports[`Radio should work correctly with different sizes 1`] = `
"<div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>mini</span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
position: relative;
--radio-size: .75rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
color: #000;
cursor: pointer;
}
.name {
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
transform: scale(0);
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>small</span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
position: relative;
--radio-size: .875rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
color: #000;
cursor: pointer;
}
.name {
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
transform: scale(0);
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>medium</span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
position: relative;
--radio-size: 1rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
color: #000;
cursor: pointer;
}
.name {
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
transform: scale(0);
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div><div class=\\"radio \\"><label><input type=\\"radio\\" value=\\"\\"><span class=\\"name\\"><span class=\\"point \\"></span>large</span></label><style>
input {
opacity: 0;
visibility: hidden;
overflow: hidden;
width: 1px;
height: 1px;
top: -1000px;
right: -1000px;
position: fixed;
}
.radio {
display: flex;
width: initial;
align-items: flex-start;
position: relative;
--radio-size: 1.125rem;
}
label {
display: flex;
flex-direction: column;
justify-content: flex-start;
color: #000;
cursor: pointer;
}
.name {
font-size: var(--radio-size);
font-weight: bold;
user-select: none;
display: inline-flex;
align-items: center;
}
.point {
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
position: relative;
display: inline-block;
transform: scale(0.875);
margin-right: calc(var(--radio-size) * 0.375);
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
transform: scale(0);
height: var(--radio-size);
width: var(--radio-size);
border-radius: 50%;
background-color: #000;
}
.point.active:before {
transform: scale(0.875);
transition: all 0.2s ease 0s;
}
</style></div></div>"
`;

18
components/radio/__tests__/group.test.tsx
View File

@@ -21,6 +21,24 @@ describe('Radio Group', () => {
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work correctly with different sizes', () => {
const wrapper = mount(
<div>
<Radio.Group value="1" size="mini">
<Radio value="1">1</Radio>
</Radio.Group>
<Radio.Group value="1" size="small">
<Radio value="1">1</Radio>
</Radio.Group>
<Radio.Group value="1" size="large">
<Radio value="1">1</Radio>
</Radio.Group>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should trigger events in group', () => {
let value = ''
const changeHandler = jest.fn().mockImplementation(val => (value = val))

13
components/radio/__tests__/index.test.tsx
View File

@@ -10,6 +10,19 @@ describe('Radio', () => {
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work correctly with different sizes', () => {
const wrapper = mount(
<div>
<Radio size="mini">mini</Radio>
<Radio size="small">small</Radio>
<Radio size="medium">medium</Radio>
<Radio size="large">large</Radio>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should render correctly with checked prop', () => {
const wrapper = mount(<Radio>Option</Radio>)
wrapper.setProps({ checked: false })