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

Merge pull request #123 from unix/test

Browse Source 
test: add test cases
This commit is contained in:
witt
2020-04-23 12:55:26 +08:00
committed by GitHub
parent edb1e87046 f377776c13
commit e7d10d21e0
11 changed files with 2207 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
components/radio/__tests__/__snapshots__/group.test.tsx.snap Normal file
View File

@@ -0,0 +1,265 @@
// 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>
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: .875rem;
width: .875rem;
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: .875rem;
width: .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: .875rem;
width: .875rem;
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: .875rem;
width: .875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
background-color: #000;
}
</style></div></div><style>
.radio-group {
display: flex;
flex-direction: column;
}
.radio-group :global(.radio) {
margin-top: 16pt;
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>
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: .875rem;
width: .875rem;
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: .875rem;
width: .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: .875rem;
width: .875rem;
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: .875rem;
width: .875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
background-color: #000;
}
</style></div></div><style>
.radio-group {
display: flex;
flex-direction: col;
}
.radio-group :global(.radio) {
margin-top: 0;
margin-left: 16pt;
}
.radio-group :global(.radio:first-of-type) {
margin: 0;
}
</style></div>"
`;

251
components/radio/__tests__/__snapshots__/index.test.tsx.snap Normal file
View File

@@ -0,0 +1,251 @@
// 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>
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: .875rem;
width: .875rem;
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: .875rem;
width: .875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
background-color: #000;
}
</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>
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: .875rem;
width: .875rem;
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: .875rem;
width: .875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
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>
span {
color: #999;
font-size: .875rem;
}
</style></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: .875rem;
width: .875rem;
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: .875rem;
width: .875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
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>
span {
color: #999;
font-size: .875rem;
}
</style></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: .875rem;
width: .875rem;
border-radius: 50%;
border: 1px solid #eaeaea;
transition: all 0.2s ease 0s;
}
.point:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
height: .875rem;
width: .875rem;
border-radius: 50%;
transform: scale(0);
transition: all 0.2s ease;
background-color: #000;
}
</style></div></div>"
`;

120
components/radio/__tests__/group.test.tsx Normal file
View File

@@ -0,0 +1,120 @@
import React from 'react'
import { mount } from 'enzyme'
import { Radio } from 'components'
import { nativeEvent } from 'tests/utils'
describe('Radio Group', () => {
it('should render correctly', () => {
const wrapper = mount(
<div>
<Radio.Group value="1">
<Radio value="1">1</Radio>
<Radio value="2">2</Radio>
</Radio.Group>
<Radio.Group value="1" useRow>
<Radio value="1">1</Radio>
<Radio value="2">2</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)
const wrapper = mount(
<Radio.Group onChange={changeHandler}>
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</Radio.Group>
)
wrapper.find('input').at(0)
.simulate('change', {
...nativeEvent,
target: { checked: true },
})
expect(changeHandler).toHaveBeenCalled()
expect(value).toEqual('1')
changeHandler.mockRestore()
})
it('should ignore events when disabled', () => {
const changeHandler = jest.fn()
const wrapper = mount(
<Radio.Group onChange={changeHandler} disabled>
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</Radio.Group>
)
wrapper.find('input').at(0)
.simulate('change', {
...nativeEvent,
target: { checked: true },
})
expect(changeHandler).not.toHaveBeenCalled()
changeHandler.mockRestore()
})
it('should render correctly with inital-value', () => {
const wrapper = mount(
<Radio.Group initialValue="2">
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</Radio.Group>
)
const input = wrapper.find('input').at(1).getDOMNode() as HTMLInputElement
expect(input.checked).toEqual(true)
})
it('should be warning when value unset', () => {
const errorSpy = jest.spyOn(console, 'error')
.mockImplementation(() => {})
mount(
<Radio.Group>
<Radio>Option 1</Radio>
<Radio value="2">Option 2</Radio>
</Radio.Group>
)
expect(errorSpy).toHaveBeenCalled()
errorSpy.mockRestore()
})
it('should be warning when checked is set', () => {
const errorSpy = jest.spyOn(console, 'error')
.mockImplementation(() => {})
mount(
<Radio.Group>
<Radio value="1" checked>Option 1</Radio>
<Radio value="2">Option 2</Radio>
</Radio.Group>
)
expect(errorSpy).toHaveBeenCalled()
errorSpy.mockRestore()
})
it('should set state through value prop', () => {
const wrapper = mount(
<Radio.Group>
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</Radio.Group>
)
let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
expect(input.checked).toEqual(false)
wrapper.setProps({ value: '1' })
input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
expect(input.checked).toEqual(true)
wrapper.setProps({ value: '2' })
input = wrapper.find('input').at(1).getDOMNode() as HTMLInputElement
expect(input.checked).toEqual(true)
})
})

65
components/radio/__tests__/index.test.tsx Normal file
View File

@@ -0,0 +1,65 @@
import React from 'react'
import { mount } from 'enzyme'
import { Radio } from 'components'
import { nativeEvent } from 'tests/utils'
describe('Radio', () => {
it('should render correctly', () => {
const wrapper = mount(<Radio checked={false}>Option</Radio>)
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 })
let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
expect(input.checked).toEqual(false)
wrapper.setProps({ checked: true })
input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
expect(input.checked).toEqual(true)
})
it('should trigger events when use alone', () => {
const changeHandler = jest.fn()
const wrapper = mount(<Radio onChange={changeHandler}>Option</Radio>)
wrapper.find('input').at(0)
.simulate('change', {
...nativeEvent,
target: { checked: true },
})
expect(changeHandler).toHaveBeenCalled()
changeHandler.mockRestore()
})
it('should ignore events when disabled', () => {
const changeHandler = jest.fn()
const wrapper = mount(<Radio onChange={changeHandler} disabled>Option</Radio>)
wrapper.find('input').at(0)
.simulate('change', {
...nativeEvent,
target: { checked: true },
})
expect(changeHandler).not.toHaveBeenCalled()
changeHandler.mockRestore()
})
it('should support react-node in description', () => {
const wrapper = mount(
<div>
<Radio>Option</Radio>
<Radio>
Option 1
<Radio.Desc>Description for Option1</Radio.Desc>
</Radio>
<Radio>
Option 1
<Radio.Desc><b>Description</b> for Option1</Radio.Desc>
</Radio>
</div>
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
})

3
components/radio/radio-group.tsx
View File

@@ -4,7 +4,7 @@ import useTheme from '../styles/use-theme'
import { RadioContext } from './radio-context' import { RadioContext } from './radio-context'
interface Props { interface Props {
value: string value?: string
initialValue?: string initialValue?: string
disabled?: boolean disabled?: boolean
onChange?: (value: string) => void onChange?: (value: string) => void
@@ -42,6 +42,7 @@ const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = React.mem
},[disabled, selfVal]) },[disabled, selfVal])
useEffect(() => { useEffect(() => {
if (value === undefined) return
setSelfVal(value) setSelfVal(value)
}, [value]) }, [value])

21
components/radio/radio.tsx
View File

@@ -20,10 +20,9 @@ export interface RadioEvent {
interface Props { interface Props {
checked?: boolean checked?: boolean
value?: string value?: string
id?: string
className?: string className?: string
disabled?: boolean disabled?: boolean
onChange: (e: RadioEvent) => void onChange?: (e: RadioEvent) => void
} }
const defaultProps = { const defaultProps = {
@@ -35,8 +34,8 @@ type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>
export type RadioProps = Props & typeof defaultProps & NativeAttrs export type RadioProps = Props & typeof defaultProps & NativeAttrs
const Radio: React.FC<React.PropsWithChildren<RadioProps>> = React.memo(({ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = React.memo(({
className, id: customId, checked, onChange, disabled, className, checked, onChange, disabled, value: radioValue,
value: radioValue, children, ...props children, ...props
}) => { }) => {
const theme = useTheme() const theme = useTheme()
const [selfChecked, setSelfChecked] = useState<boolean>(!!checked) const [selfChecked, setSelfChecked] = useState<boolean>(!!checked)
@@ -50,10 +49,11 @@ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = React.memo(({
if (radioValue === undefined) { if (radioValue === undefined) {
useWarning('Props "value" must be deinfed if in the Radio.Group.', 'Radio') useWarning('Props "value" must be deinfed if in the Radio.Group.', 'Radio')
} }
useEffect(() => setSelfChecked(groupValue === radioValue), [groupValue, radioValue]) useEffect(() => {
setSelfChecked(groupValue === radioValue)
}, [groupValue, radioValue])
} }
// const id = useMemo(() => customId || `zeit-ui-radio-${label}`, [customId, label])
const isDisabled = useMemo(() => disabled || disabledAll, [disabled, disabledAll]) const isDisabled = useMemo(() => disabled || disabledAll, [disabled, disabledAll])
const changeHandler = (event: React.ChangeEvent) => { const changeHandler = (event: React.ChangeEvent) => {
if (isDisabled) return if (isDisabled) return
@@ -72,12 +72,15 @@ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = React.memo(({
onChange && onChange(selfEvent) onChange && onChange(selfEvent)
} }
useEffect(() => setSelfChecked(!!checked), [checked]) useEffect(() => {
if (checked === undefined) return
setSelfChecked(!!checked)
}, [checked])
return ( return (
<div className={`radio ${className}`}> <div className={`radio ${className}`}>
<label htmlFor={customId}> <label>
<input type="radio" value={radioValue} id={customId} <input type="radio" value={radioValue}
checked={selfChecked} checked={selfChecked}
onChange={changeHandler} onChange={changeHandler}
{...props} /> {...props} />

281
components/row/__tests__/__snapshots__/index.test.tsx.snap Normal file
View 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
View 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()
})
})

1014
components/select/__tests__/__snapshots__/index.test.tsx.snap Normal file
View File

File diff suppressed because it is too large Load Diff

125
components/select/__tests__/index.test.tsx Normal file
View File

@@ -0,0 +1,125 @@
import React from 'react'
import { mount, render } from 'enzyme'
import { Select } from 'components'
import { nativeEvent, updateWrapper } from 'tests/utils'
describe('Select', () => {
it('should render correctly', () => {
const wrapper = mount(
<div>
<Select />
<Select size="mini" />
<Select size="small" />
<Select size="large" />
</div>
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work with different icons', () => {
const MockIcon = () => <span>icon</span>
const pure = render(<Select pure />)
expect(pure).toMatchSnapshot()
const icon = render(<Select icon={MockIcon} />)
expect(icon).toMatchSnapshot()
})
it('should render value with initial-value', () => {
const wrapper = mount(
<Select initialValue="2">
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select>
)
expect(wrapper.find('.value').text())
.toContain('Option 2')
})
it('should trigger events when option changed', async () => {
let value = ''
const changeHandler = jest.fn()
.mockImplementation(val => value = val)
const wrapper = mount(
<Select onChange={changeHandler}>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select>
)
wrapper.find('.select').simulate('click', nativeEvent)
wrapper.find('.select-dropdown')
.find('.option')
.at(0)
.simulate('click', nativeEvent)
await updateWrapper(wrapper, 350)
expect(changeHandler).toHaveBeenCalled()
expect(value).toEqual('1')
changeHandler.mockRestore()
})
it('should ignore events when disabled', async () => {
const changeHandler = jest.fn()
const wrapper = mount(
<Select onChange={changeHandler} disabled>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select>
)
wrapper.find('.select').simulate('click', nativeEvent)
expect(wrapper.find('.select-dropdown').length).toBe(0)
changeHandler.mockRestore()
})
it('should ignore option when option disabled', async () => {
let value = ''
const changeHandler = jest.fn()
.mockImplementation(val => value = val)
const wrapper = mount(
<Select onChange={changeHandler}>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2" disabled>Option 2</Select.Option>
</Select>
)
wrapper.find('.select').simulate('click', nativeEvent)
wrapper.find('.select-dropdown')
.find('.option')
.at(1)
.simulate('click', nativeEvent)
await updateWrapper(wrapper, 350)
expect(changeHandler).not.toHaveBeenCalled()
expect(value).not.toEqual('2')
changeHandler.mockRestore()
})
it('should be change when value changed', async () => {
const wrapper = mount(
<Select>
<Select.Option value="1">Option 1</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select>
)
wrapper.setProps({ value: '2' })
await updateWrapper(wrapper, 300)
expect(wrapper.find('.value').text())
.toContain('Option 2')
wrapper.setProps({ value: '1' })
await updateWrapper(wrapper, 300)
expect(wrapper.find('.value').text())
.toContain('Option 1')
})
it('should be wraning when ident value missing', () => {
let errorMessage = ''
const errorSpy = jest.spyOn(console, 'error')
.mockImplementation(msg => errorMessage = msg)
const SelectOption = Select.Option as any
const wrapper = mount(<Select><SelectOption>1</SelectOption></Select>)
wrapper.find('.select').simulate('click', nativeEvent)
expect(errorMessage).toContain('required')
errorSpy.mockRestore()
})
})

10
components/select/select-option.tsx
View File

@@ -53,10 +53,10 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
return ( return (
<> <>
<div className={className} onClick={clickHandler} {...props}>{children}</div> <div className={`option ${className}`} onClick={clickHandler} {...props}>{children}</div>
<style jsx>{` <style jsx>{`
div { .option {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@@ -73,17 +73,17 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
transition: background 0.2s ease 0s, border-color 0.2s ease 0s; transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
} }
div:first-of-type { .option:first-of-type {
border-top-left-radius: ${theme.layout.radius}; border-top-left-radius: ${theme.layout.radius};
border-top-right-radius: ${theme.layout.radius}; border-top-right-radius: ${theme.layout.radius};
} }
div:last-of-type { .option:last-of-type {
border-bottom-left-radius: ${theme.layout.radius}; border-bottom-left-radius: ${theme.layout.radius};
border-bottom-right-radius: ${theme.layout.radius}; border-bottom-right-radius: ${theme.layout.radius};
} }
div:hover { .option:hover {
background-color: ${theme.palette.accents_1}; background-color: ${theme.palette.accents_1};
} }
`}</style> `}</style>