Browse Source

Merge branch 'master' into next-merge-master

pull/35798/head
afc163 3 years ago
parent
commit
7ee32705f8
  1. 4
      components/back-top/demo/custom.md
  2. 0
      components/card/__tests__/__snapshots__/index.test.tsx.snap
  3. 26
      components/card/__tests__/index.test.tsx
  4. 2
      package.json

4
components/back-top/demo/custom.md

@ -10,10 +10,14 @@ title:
可以自定义回到顶部按钮的样式,限制宽高:`40px * 40px`。 可以自定义回到顶部按钮的样式,限制宽高:`40px * 40px`。
> 注意:`BackTop` 需要一个可接受 `onClick` 事件的元素作为 `children`。 如果您直接将文本作为子项放置,则该组件将无法正常运行。
## en-US ## en-US
You can customize the style of the button, just note the size limit: no more than `40px * 40px`. You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
> Note: `BackTop` expects a element could accept `onClick` propety as children. If you put a text directly as children the component will not function properly.
```tsx ```tsx
import { BackTop } from 'antd'; import { BackTop } from 'antd';
import React from 'react'; import React from 'react';

0
components/card/__tests__/__snapshots__/index.test.js.snap → components/card/__tests__/__snapshots__/index.test.tsx.snap

26
components/card/__tests__/index.test.js → components/card/__tests__/index.test.tsx

@ -1,10 +1,9 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme';
import Card from '../index'; import Card from '../index';
import Button from '../../button/index'; import Button from '../../button/index';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
import { render } from '../../../tests/utils'; import { render, fireEvent } from '../../../tests/utils';
describe('Card', () => { describe('Card', () => {
mountTest(Card); mountTest(Card);
@ -19,21 +18,21 @@ describe('Card', () => {
}); });
it('should still have padding when card which set padding to 0 is loading', () => { it('should still have padding when card which set padding to 0 is loading', () => {
const wrapper = mount( const { container } = render(
<Card loading bodyStyle={{ padding: 0 }}> <Card loading bodyStyle={{ padding: 0 }}>
xxx xxx
</Card>, </Card>,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('title should be vertically aligned', () => { it('title should be vertically aligned', () => {
const wrapper = mount( const { container } = render(
<Card title="Card title" extra={<Button>Button</Button>} style={{ width: 300 }}> <Card title="Card title" extra={<Button>Button</Button>} style={{ width: 300 }}>
<p>Card content</p> <p>Card content</p>
</Card>, </Card>,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('onTabChange should work', () => { it('onTabChange should work', () => {
@ -48,26 +47,27 @@ describe('Card', () => {
}, },
]; ];
const onTabChange = jest.fn(); const onTabChange = jest.fn();
const wrapper = mount( const { container } = render(
<Card onTabChange={onTabChange} tabList={tabList}> <Card onTabChange={onTabChange} tabList={tabList}>
xxx xxx
</Card>, </Card>,
); );
wrapper.find('.ant-tabs-tab').at(1).simulate('click'); fireEvent.click(container.querySelectorAll('.ant-tabs-tab')[1]);
expect(onTabChange).toHaveBeenCalledWith('tab2'); expect(onTabChange).toHaveBeenCalledWith('tab2');
}); });
it('should not render when actions is number', () => { it('should not render when actions is number', () => {
const wrapper = mount( const { container } = render(
// @ts-ignore ingnore for the wrong action value
<Card title="Card title" actions={11}> <Card title="Card title" actions={11}>
<p>Card content</p> <p>Card content</p>
</Card>, </Card>,
); );
expect(wrapper.find('.ant-card-actions').length).toBe(0); expect(container.querySelectorAll('.ant-card-actions').length).toBe(0);
}); });
it('with tab props', () => { it('with tab props', () => {
const wrapper = mount( const { container } = render(
<Card <Card
title="Card title" title="Card title"
tabList={[ tabList={[
@ -81,11 +81,11 @@ describe('Card', () => {
<p>Card content</p> <p>Card content</p>
</Card>, </Card>,
); );
expect(wrapper.find('Tabs').get(0).props.size).toBe('small'); expect(container.querySelectorAll('.ant-tabs-small').length === 0).toBeFalsy();
}); });
it('get ref of card', () => { it('get ref of card', () => {
const cardRef = React.createRef(); const cardRef = React.createRef<HTMLDivElement>();
render( render(
<Card ref={cardRef} title="Card title"> <Card ref={cardRef} title="Card title">

2
package.json

@ -220,7 +220,7 @@
"eslint-plugin-babel": "^5.3.0", "eslint-plugin-babel": "^5.3.0",
"eslint-plugin-compat": "^4.0.0", "eslint-plugin-compat": "^4.0.0",
"eslint-plugin-import": "^2.21.1", "eslint-plugin-import": "^2.21.1",
"eslint-plugin-jest": "^26.0.0", "eslint-plugin-jest": "~26.3.0",
"eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-markdown": "^2.0.0", "eslint-plugin-markdown": "^2.0.0",
"eslint-plugin-react": "^7.28.0", "eslint-plugin-react": "^7.28.0",

Loading…
Cancel
Save