Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

提交 ac5a7e64 编写于 作者: O oasis-cloud
浏览文件
操作

Merge remote-tracking branch 'origin/main'

上级 90200501 afd3e182
隐藏空白更改
内联 并排
Showing with 459 addition and 3 deletion
package.json
浏览文件 @ ac5a7e64
......@@ -56,7 +56,8 @@
"lint:fix": "eslint --fix .",
"publish:beta": "npm publish --tag beta",
"prepare": "husky install",
"test": "jest"
"test": "jest",
"test:demo": "jest --testNamePattern=^should match snapshot$ --runTestsByPath ./src/packages/collapse/__test__/collapse.spec.tsx"
},
"engines": {
"node": "^14.18.0 || >=15.0.0"
......
src/packages/collapse/__test__/__snapshots__/collapse.spec.tsx.snap 0 → 100644
浏览文件 @ ac5a7e64
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should match snapshot 1`] = `
<DocumentFragment>
<div
class="nut-collapse"
>
<div
class="nut-collapse-item"
>
<div
class="nut-collapse-item__header"
>
<div
class="nut-collapse-item__title"
>
标题1
</div>
<div
class="nut-collapse-item__sub-title"
/>
<div
class="nut-collapse-item__icon-box"
>
<div
class="nut-collapse-item__icon"
style="transform: translateY(-50%) rotate(180deg);"
>
<i
class=" nut-icon nutui-iconfont nut-icon-arrow-down "
style="color: rgb(153, 153, 153); font-size: 16px; width: 16px; height: 16px;"
/>
</div>
</div>
</div>
<div
class="nut-collapse-item__content"
style="height: 0px;"
>
<div
class="nut-collapse-item__content-text"
>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</div>
</div>
</div>
<div
class="nut-collapse-item"
>
<div
class="nut-collapse-item__header"
>
<div
class="nut-collapse-item__title"
>
标题2
</div>
<div
class="nut-collapse-item__sub-title"
/>
<div
class="nut-collapse-item__icon-box"
>
<div
class="nut-collapse-item__icon"
style="transform: translateY(-50%) rotate(180deg);"
>
<i
class=" nut-icon nutui-iconfont nut-icon-arrow-down "
style="color: rgb(153, 153, 153); font-size: 16px; width: 16px; height: 16px;"
/>
</div>
</div>
</div>
<div
class="nut-collapse-item__content"
style="height: 0px;"
>
<div
class="nut-collapse-item__content-text"
>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</div>
</div>
</div>
<div
class="nut-collapse-item"
>
<div
class="nut-collapse-item__header nut-collapse-item__header--disabled"
>
<div
class="nut-collapse-item__title"
>
标题3
</div>
<div
class="nut-collapse-item__sub-title"
/>
<div
class="nut-collapse-item__icon-box"
>
<div
class="nut-collapse-item__icon"
style="transform: translateY(-50%);"
>
<i
class=" nut-icon nutui-iconfont nut-icon-arrow-down "
style="color: rgb(194, 194, 194); font-size: 16px; width: 16px; height: 16px;"
/>
</div>
</div>
</div>
<div
class="nut-collapse-item__content"
style="height: 0px;"
>
<div
class="nut-collapse-item__content-text"
>
京东“厂直优品计划”首推“政府优品馆”
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
src/packages/collapse/__test__/collapse.spec.tsx 0 → 100644
浏览文件 @ ac5a7e64
import * as React from 'react'
// import * as renderer from 'react-test-renderer'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { Collapse } from '../collapse'
import { CollapseItem } from '../../collapseitem/collapseitem'
test('should match snapshot', () => {
const { asFragment } = render(
<>
<Collapse activeName={['1', '2']} icon="arrow-down" iconSize="16" iconColor="#999">
<CollapseItem title="标题1" name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题2" name="2">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" disabled>
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
</>
)
expect(asFragment()).toMatchSnapshot()
})
test('prop icon iconSize iconColor', () => {
const { getByTestId, container } = render(
<>
<Collapse activeName={['1', '2']} icon="arrow-down" iconSize="16" iconColor="#999">
<CollapseItem title="标题1" name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题2" name="2">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" disabled>
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
</>
)
expect(container.querySelector('.nut-collapse .nutui-iconfont')).toHaveClass(
'nut-icon-arrow-down'
)
expect(container.querySelector('.nut-collapse .nutui-iconfont')).toHaveStyle('width: 16px')
expect(container.querySelector('.nut-collapse .nutui-iconfont')).toHaveStyle(
'color: rgb(153, 153, 153)'
)
})
test('prop activeName', () => {
const { container } = render(
<>
<Collapse activeName={['1', '2']} icon="arrow-down" iconSize="16" iconColor="#999">
<CollapseItem title="标题1" name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题2" name="2">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" disabled>
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
</>
)
setTimeout(() => {
expect(container.querySelector('.nut-collapse-item__content')).toHaveStyle('height: 66px')
}, 100)
})
test('prop accordion', () => {
const { getByTestId, container } = render(
<>
<Collapse activeName={['1']} accordion icon="arrow-down">
<CollapseItem title="标题1" name="1" subTitle="文本内容" data-testid="collapse-one">
第一个内容
</CollapseItem>
<CollapseItem title="标题2" name="2" data-testid="collapse-item">
第二个内容
</CollapseItem>
<CollapseItem title="标题3" name="3">
第三个内容
</CollapseItem>
</Collapse>
</>
)
fireEvent.click(getByTestId('collapse-item'))
setTimeout(() => {
expect(getByTestId('collapse-one').querySelector('.nut-collapse-item__content')).toHaveStyle(
'height: 0px'
)
expect(getByTestId('collapse-item').querySelector('.nut-collapse-item__content')).toHaveStyle(
'height: 45px'
)
}, 100)
})
test('prop rotate', () => {
const { getByTestId, container } = render(
<>
<Collapse activeName={['1']} accordion icon="arrow-right2" rotate={180}>
<CollapseItem title="标题1" name="1" icon="arrow-down" data-testid="collapse-one">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题2" name="2" icon="arrow-down">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" icon="arrow-down">
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
</>
)
fireEvent.click(getByTestId('collapse-one'))
setTimeout(() => {
expect(getByTestId('collapse-one').querySelector('.nut-collapse-item__icon')).toHaveStyle(
'transform: translateY(-50%) rotate(180deg);'
)
}, 100)
})
test('prop title subTitle titleIconColor titleIconSize titleIconPosition', () => {
const { getByTestId, container } = render(
<>
<Collapse activeName={['1']} accordion icon="arrow-right2">
<CollapseItem
title="标题1"
subTitle="副标题"
name="1"
icon="arrow-down"
titleIcon="checked"
data-testid="collapse-one"
titleIconColor="red"
titleIconPosition="left"
titleIconSize="16"
>
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题2" name="2" icon="arrow-down">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</CollapseItem>
<CollapseItem title="标题3" name="3" icon="arrow-down">
京东“厂直优品计划”首推“政府优品馆”
</CollapseItem>
</Collapse>
</>
)
expect(getByTestId('collapse-one').querySelector('.nut-collapse-item__title')).toHaveTextContent(
'标题1'
)
expect(
getByTestId('collapse-one').querySelector('.nut-collapse-item__sub-title')
).toHaveTextContent('副标题')
expect(getByTestId('collapse-one').querySelector('.nut-collapse-item__title b')).toHaveClass(
'nut-collapse-item__title-icon-left'
)
expect(getByTestId('collapse-one').querySelector('.nutui-iconfont')).toHaveStyle(
'color: red; font-size: 16px; width: 16px; height: 16px;'
)
})
src/packages/collapseitem/collapseitem.tsx
浏览文件 @ ac5a7e64
......@@ -34,7 +34,9 @@ const defaultProps = {
titleIconPosition: '',
titleIconSize: '',
} as CollapseItemProps
export const CollapseItem: FunctionComponent<Partial<CollapseItemProps>> = (props) => {
export const CollapseItem: FunctionComponent<
Partial<CollapseItemProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
const {
children,
title,
......@@ -51,6 +53,7 @@ export const CollapseItem: FunctionComponent<Partial<CollapseItemProps>> = (prop
titleIconSize,
iconSize,
iconColor,
...rest
} = {
...defaultProps,
...props,
......@@ -90,7 +93,7 @@ export const CollapseItem: FunctionComponent<Partial<CollapseItemProps>> = (prop
}, [isOpen, domHeight])
return (
<div className={colBem()}>
<div className={colBem()} {...rest}>
<div
className={colBem('header', { disabled })}
onClick={() => {
......
src/packages/switch/__test__/switch.spec.tsx 0 → 100644
浏览文件 @ ac5a7e64
import * as React from 'react'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { Switch } from '../switch'
test('activeColor && inactiveColor && activeText && checked && change && inactiveText && isAsync && className && style test', () => {
const state: any = {
activeColor: 'rgb(124, 88, 33)',
inactiveColor: 'rgb(250, 104, 93)',
activeText: '开',
inactiveText: '关',
checked: false,
className: 'switch-test',
style: { fontSize: '12px' },
}
const { activeColor, inactiveColor, activeText, inactiveText, className, style } = state
const testFn = jest.fn()
const { container } = render(
<Switch
className={className}
style={style}
isAsync
activeColor={activeColor}
inactiveColor={inactiveColor}
activeText={activeText}
checked={false}
change={testFn}
inactiveText={inactiveText}
/>
)
const el: Element | null = container.querySelector('.nut-switch-base')
if (el) {
expect(el).toHaveAttribute('class', `nut-switch switch-close nut-switch-base switch-test`)
expect(el).toHaveAttribute('style', `background-color: ${inactiveColor}; font-size: 12px;`)
expect(el).toHaveTextContent(inactiveText)
fireEvent.click(el)
setTimeout(() => {
//异步
expect(el).toHaveAttribute('style', `background-color: ${activeColor};`)
expect(el).toHaveTextContent(activeText)
expect(testFn).toBeCalled()
}, 100)
}
})
test('disable test', () => {
render(<Switch disable />)
const el = document.getElementsByClassName('nut-switch-disable')
expect(el.length > 0).toBe(true)
})
src/packages/tag/__test__/__snapshots__/tag.spec.tsx.snap 0 → 100644
浏览文件 @ ac5a7e64
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`type test 1`] = `
<div>
<div>
<div
class="nut-tag
nut-tag--primary
"
>
<span
class="text"
>
TEST
</span>
</div>
</div>
</div>
`;
src/packages/tag/__test__/tag.spec.tsx 0 → 100644
浏览文件 @ ac5a7e64
import * as React from 'react'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { Tag, TagType } from '../tag'
test('color test', () => {
const state = {
color: 'rgb(250, 104, 93)',
}
const { getByTestId, container } = render(<Tag color={state.color}>TEST</Tag>)
expect(container.querySelector('.nut-tag--default')).toHaveAttribute(
'style',
'color: rgb(255, 255, 255); background: rgb(250, 104, 93);'
)
})
test('type test', () => {
const state: {
type: TagType
} = {
type: 'primary',
}
const { container } = render(<Tag type={state.type}>TEST</Tag>)
if (container.firstChild) {
expect(container).toMatchSnapshot()
}
})
test('plain test', () => {
const state = {
plain: true,
}
const { container } = render(<Tag plain={state.plain}>TEST</Tag>)
const el = container.querySelectorAll('.nut-tag--plain').length
expect(el > 0).toBe(true)
})
test('round test', () => {
const state = {
round: true,
}
const { container } = render(<Tag round={state.round}>TEST</Tag>)
const el: any = container.querySelectorAll('.nut-tag--round').length
expect(el > 0).toBe(true)
})
test('mark test', () => {
const state = {
mark: true,
}
const { container } = render(<Tag mark={state.mark}>TEST</Tag>)
const el: any = container.querySelectorAll('.nut-tag--mark')
expect(el.length > 0).toBe(true)
})
test('closeable && isShow test', () => {
const state = {
closeable: true,
isShow: true,
}
const { container } = render(
<Tag closeable={state.closeable} isShow={state.isShow}>
TEST
</Tag>
)
const el: any = container.querySelectorAll('.nut-tag--close')[0]
const icon: any = el.childNodes[1]
fireEvent.click(icon)
expect(el && el.length > 0).toBe(false)
})
test('emit click event', () => {
const testClick = jest.fn()
function tree() {
return render(
<Tag data-testid="tag-click" onClick={() => testClick()} prefixCls="test">
TEST
</Tag>
)
}
const { container } = tree()
const el: any = container.querySelector('test')
if (el) {
fireEvent.click(el)
expect(testClick).toBeCalled()
}
})
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或