mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 17:19:11 +08:00
1e0c3b8c58
* feat: new component Flex * feat: new component Flex * fix: fix * test: add test case * fix: fix * update size-limit * test: update snap * fix: fix * test: update snap * chore: add use client * fix: lint * test: update snap * fix * docs: add docs * fix: fix demo * clear * demo: update demo * update demos * fix: fix * fix: fix * fix: fix * fix: fix * test: update snap * fix: fix * fix: fix * demo: update demo * feat: CP * fix: use token * fix: fix * fix: fix test case * test: update snap * Update components/flex/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/flex/demo/align.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * demo: update demo * fix: fix * docs * update cover * fix: fix * test: update case * fix: rerun CI * fix: fix * fix: fix * fix: fix * fix: fix * demo: update demo * fix: fix lint * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix test case * fix: fix * docs: update docs * fix: fix * chore: fix * chore: fix * docs: update docs * docs: update * fix: fix demo * type: update type * add debug demo --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: 栗嘉男 <mac@macdeMacBook-Pro.local> Co-authored-by: MadCcc <1075746765@qq.com>
71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import Flex from '..';
|
|
import mountTest from '../../../tests/shared/mountTest';
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
|
import { render } from '../../../tests/utils';
|
|
|
|
const FunCom = React.forwardRef<HTMLDivElement, { className?: string }>((props, ref) => (
|
|
<div className={props.className} ref={ref}>
|
|
test FC
|
|
</div>
|
|
));
|
|
|
|
class ClassCom extends React.PureComponent<{ className?: string }> {
|
|
render() {
|
|
return <div className={this.props.className}>test Class</div>;
|
|
}
|
|
}
|
|
|
|
describe('Flex', () => {
|
|
mountTest(() => (
|
|
<Flex>
|
|
<div>test1</div>
|
|
<div>test2</div>
|
|
</Flex>
|
|
));
|
|
rtlTest(() => (
|
|
<Flex>
|
|
<div>test1</div>
|
|
<div>test2</div>
|
|
</Flex>
|
|
));
|
|
it('Flex', () => {
|
|
const { container, rerender } = render(<Flex justify="center">test</Flex>);
|
|
expect(container.querySelector('.ant-flex')).toHaveStyle({ justifyContent: 'center' });
|
|
rerender(<Flex flex="0 1 auto">test</Flex>);
|
|
expect(container.querySelector('.ant-flex')).toHaveStyle({ flex: '0 1 auto' });
|
|
rerender(<Flex gap={100}>test</Flex>);
|
|
expect(container.querySelector('.ant-flex')).toHaveStyle({ gap: '100px' });
|
|
});
|
|
it('Component work', () => {
|
|
const testFcRef = React.createRef<HTMLDivElement>();
|
|
const testClsRef = React.createRef<ClassCom>();
|
|
const { container, rerender } = render(<Flex>test</Flex>);
|
|
expect(container.querySelector<HTMLDivElement>('.ant-flex')?.tagName).toBe('DIV');
|
|
rerender(<Flex component="span">test</Flex>);
|
|
expect(container.querySelector<HTMLSpanElement>('.ant-flex')?.tagName).toBe('SPAN');
|
|
rerender(<Flex component={(props) => <FunCom {...props} ref={testFcRef} />}>test</Flex>);
|
|
expect(container.querySelector<HTMLDivElement>('.ant-flex')?.textContent).toBe('test FC');
|
|
expect(testFcRef.current).toBeTruthy();
|
|
rerender(<Flex component={(props) => <ClassCom {...props} ref={testClsRef} />}>test</Flex>);
|
|
expect(container.querySelector<HTMLDivElement>('.ant-flex')?.textContent).toBe('test Class');
|
|
expect(testClsRef.current).toBeTruthy();
|
|
});
|
|
|
|
it('when vertical=true should stretch work', () => {
|
|
const { container, rerender } = render(<Flex vertical>test</Flex>);
|
|
expect(container.querySelector<HTMLDivElement>('.ant-flex')).toHaveClass(
|
|
'ant-flex-align-stretch',
|
|
);
|
|
rerender(
|
|
<Flex vertical align="center">
|
|
test
|
|
</Flex>,
|
|
);
|
|
expect(container.querySelector<HTMLDivElement>('.ant-flex')).toHaveClass(
|
|
'ant-flex-align-center',
|
|
);
|
|
});
|
|
});
|