mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-26 20:20:00 +08:00
060b7ded20
* #18237 add skeleton button * update snapshot * refactoring demo code * lint code * update test snapshots * add test * update snapshot * fix deps lint issue * set avatar siz and update test snapshots * fix lint issue * remove button and just keep skeleton * add active switch for button demo * add size and shape radio for skeleton button demo * add button tests * add skeleton tests * update doc * update test snapshots * omit avatar and button props * refactoring skeleton and update test snapshots
91 lines
3.2 KiB
JavaScript
91 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import { mount } from 'enzyme';
|
|
import Skeleton from '..';
|
|
import mountTest from '../../../tests/shared/mountTest';
|
|
|
|
describe('Skeleton', () => {
|
|
const genSkeleton = props =>
|
|
mount(
|
|
<Skeleton loading {...props}>
|
|
Bamboo
|
|
</Skeleton>,
|
|
);
|
|
const genSkeletonButton = props => mount(<Skeleton.Button {...props} />);
|
|
|
|
mountTest(Skeleton);
|
|
|
|
it('should without avatar and paragraph', () => {
|
|
const wrapperSmall = genSkeleton({ avatar: false, paragraph: false });
|
|
expect(wrapperSmall.render()).toMatchSnapshot();
|
|
});
|
|
|
|
it('should square avatar', () => {
|
|
const wrapperSmall = genSkeleton({ avatar: true, paragraph: false });
|
|
expect(wrapperSmall.render()).toMatchSnapshot();
|
|
});
|
|
|
|
describe('avatar', () => {
|
|
it('size', () => {
|
|
const wrapperSmall = genSkeleton({ avatar: { size: 'small' } });
|
|
expect(wrapperSmall.render()).toMatchSnapshot();
|
|
const wrapperDefault = genSkeleton({ avatar: { size: 'default' } });
|
|
expect(wrapperDefault.render()).toMatchSnapshot();
|
|
const wrapperLarge = genSkeleton({ avatar: { size: 'large' } });
|
|
expect(wrapperLarge.render()).toMatchSnapshot();
|
|
const wrapperNumber = genSkeleton({ avatar: { size: 20 } });
|
|
expect(wrapperNumber.render()).toMatchSnapshot();
|
|
});
|
|
|
|
it('shape', () => {
|
|
const wrapperCircle = genSkeleton({ avatar: { shape: 'circle' } });
|
|
expect(wrapperCircle.render()).toMatchSnapshot();
|
|
const wrapperSquare = genSkeleton({ avatar: { shape: 'square' } });
|
|
expect(wrapperSquare.render()).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('title', () => {
|
|
it('width', () => {
|
|
const wrapper = genSkeleton({ title: { width: '93%' } });
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('paragraph', () => {
|
|
it('rows', () => {
|
|
const wrapper = genSkeleton({ paragraph: { rows: 5 } });
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
});
|
|
|
|
it('width', () => {
|
|
const wrapperPure = genSkeleton({ paragraph: { width: '93%' } });
|
|
expect(wrapperPure.render()).toMatchSnapshot();
|
|
const wrapperList = genSkeleton({ paragraph: { width: ['28%', '93%'] } });
|
|
expect(wrapperList.render()).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('button', () => {
|
|
it('active', () => {
|
|
const wrapper = genSkeletonButton({ active: true });
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
});
|
|
it('size', () => {
|
|
const wrapperDefault = genSkeletonButton({ size: 'default' });
|
|
expect(wrapperDefault.render()).toMatchSnapshot();
|
|
const wrapperLarge = genSkeletonButton({ size: 'large' });
|
|
expect(wrapperLarge.render()).toMatchSnapshot();
|
|
const wrapperSmall = genSkeletonButton({ size: 'small' });
|
|
expect(wrapperSmall.render()).toMatchSnapshot();
|
|
});
|
|
it('shape', () => {
|
|
const wrapperDefault = genSkeletonButton({ shape: 'default' });
|
|
expect(wrapperDefault.render()).toMatchSnapshot();
|
|
const wrapperRound = genSkeletonButton({ shape: 'round' });
|
|
expect(wrapperRound.render()).toMatchSnapshot();
|
|
const wrapperCircle = genSkeletonButton({ shape: 'circle' });
|
|
expect(wrapperCircle.render()).toMatchSnapshot();
|
|
});
|
|
});
|
|
});
|