mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 08:59:40 +08:00
3e32364dc0
* add new component: DescriptionList * add warning message * docs: fix doc typo * feat: implement the size attribute * docs: fix doc typo * refactor: use new name Descriptions * test: snapshots updated * feat: support react15 * style: fix code style warring * style: better var name * style: better code style * style: merge css class * feat: add responsive config * fix: fix error title * style: use @border-radius-base * update snapshot * feat: set default column * test: add test script * style: fix property defaultProps is useless error * style: more robust code * style: fix codereview warning * style: fix review warning * use responsiveObserveserve * fix review warning * bug: add childrenArray copy,prevent changes to incoming parameters * fix dom error * fix typo * fix test * don't use this * snapshot updated * prettier md * remove descriptions md text * new rendering method * doc :add dot * style: add right border
87 lines
2.7 KiB
JavaScript
87 lines
2.7 KiB
JavaScript
import React from 'react';
|
||
import { mount } from 'enzyme';
|
||
import Descriptions from '..';
|
||
|
||
const DescriptionsItem = Descriptions.Item;
|
||
|
||
jest.mock('enquire.js', () => {
|
||
let that;
|
||
let unmatchFun;
|
||
return {
|
||
unregister: jest.fn(),
|
||
register: (media, options) => {
|
||
if (media === '(max-width: 575px)') {
|
||
that = this;
|
||
options.match.call(that);
|
||
unmatchFun = options.unmatch;
|
||
}
|
||
},
|
||
callunmatch() {
|
||
unmatchFun.call(that);
|
||
},
|
||
};
|
||
});
|
||
|
||
describe('Descriptions', () => {
|
||
it('when max-width: 575px，column=1', () => {
|
||
// eslint-disable-next-line global-require
|
||
const enquire = require('enquire.js');
|
||
const wrapper = mount(
|
||
<Descriptions>
|
||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||
<DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
|
||
<DescriptionsItem label="time">18:00:00</DescriptionsItem>
|
||
<DescriptionsItem label="Amount">$80.00</DescriptionsItem>
|
||
</Descriptions>,
|
||
);
|
||
expect(wrapper.find('tr')).toHaveLength(4);
|
||
|
||
enquire.callunmatch();
|
||
wrapper.unmount();
|
||
});
|
||
|
||
it('when max-width: 575px，column=2', () => {
|
||
// eslint-disable-next-line global-require
|
||
const enquire = require('enquire.js');
|
||
const wrapper = mount(
|
||
<Descriptions column={{ xs: 2 }}>
|
||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||
<DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
|
||
<DescriptionsItem label="time">18:00:00</DescriptionsItem>
|
||
<DescriptionsItem label="Amount">$80.00</DescriptionsItem>
|
||
</Descriptions>,
|
||
);
|
||
expect(wrapper.find('tr')).toHaveLength(2);
|
||
|
||
enquire.callunmatch();
|
||
wrapper.unmount();
|
||
});
|
||
|
||
it('column is number', () => {
|
||
// eslint-disable-next-line global-require
|
||
const wrapper = mount(
|
||
<Descriptions column="3">
|
||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||
<DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
|
||
<DescriptionsItem label="time">18:00:00</DescriptionsItem>
|
||
<DescriptionsItem label="Amount">$80.00</DescriptionsItem>
|
||
</Descriptions>,
|
||
);
|
||
expect(wrapper).toMatchSnapshot();
|
||
wrapper.unmount();
|
||
});
|
||
|
||
it('when typeof column is object', () => {
|
||
const wrapper = mount(
|
||
<Descriptions column={{ xs: 8, sm: 16, md: 24 }}>
|
||
<DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
|
||
<DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
|
||
<DescriptionsItem label="time">18:00:00</DescriptionsItem>
|
||
<DescriptionsItem label="Amount">$80.00</DescriptionsItem>
|
||
</Descriptions>,
|
||
);
|
||
expect(wrapper.instance().getColumn()).toBe(8);
|
||
wrapper.unmount();
|
||
});
|
||
});
|