import React from 'react';
import MockDate from 'mockdate';
import { mount } from 'enzyme';
import Descriptions from '..';
import mountTest from '../../../tests/shared/mountTest';
import { resetWarned } from '../../_util/devWarning';
describe('Descriptions', () => {
mountTest(Descriptions);
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
afterEach(() => {
MockDate.reset();
errorSpy.mockReset();
});
afterAll(() => {
errorSpy.mockRestore();
});
it('when max-width: 575px,column=1', () => {
const wrapper = mount(
Cloud Database
Prepaid
18:00:00
$80.00
No-Label
,
);
expect(wrapper.find('tr')).toHaveLength(5);
expect(wrapper.find('.ant-descriptions-item-label')).toHaveLength(4);
wrapper.unmount();
});
it('when max-width: 575px,column=2', () => {
// eslint-disable-next-line global-require
const wrapper = mount(
Cloud Database
Prepaid
18:00:00
$80.00
,
);
expect(wrapper.find('tr')).toHaveLength(2);
wrapper.unmount();
});
it('column is number', () => {
// eslint-disable-next-line global-require
const wrapper = mount(
Cloud Database
Prepaid
18:00:00
$80.00
,
);
expect(wrapper.render()).toMatchSnapshot();
wrapper.unmount();
});
it('when typeof column is object', () => {
const wrapper = mount(
Cloud Database
Prepaid
18:00:00
$80.00
,
);
expect(wrapper.find('td').reduce((total, td) => total + td.props().colSpan, 0)).toBe(8);
wrapper.unmount();
});
it('warning if ecceed the row span', () => {
resetWarned();
mount(
Cloud Database
Prepaid
,
);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Descriptions] Sum of column `span` in a line not match `column` of Descriptions.',
);
});
it('when item is rendered conditionally', () => {
const hasDiscount = false;
const wrapper = mount(
Cloud Database
Prepaid
18:00:00
$80.00
{hasDiscount && $20.00}
,
);
expect(wrapper.render()).toMatchSnapshot();
wrapper.unmount();
});
it('vertical layout', () => {
// eslint-disable-next-line global-require
const wrapper = mount(
Cloud Database
Prepaid
18:00:00
$80.00
,
);
expect(wrapper.render()).toMatchSnapshot();
wrapper.unmount();
});
it('Descriptions.Item support className', () => {
const wrapper = mount(
Cloud Database
,
);
expect(wrapper.render()).toMatchSnapshot();
});
it('Descriptions support colon', () => {
const wrapper = mount(
Cloud Database
,
);
expect(wrapper.render()).toMatchSnapshot();
});
it('Descriptions support style', () => {
const wrapper = mount(
Cloud Database
,
);
expect(wrapper.render()).toMatchSnapshot();
});
it('keep key', () => {
const wrapper = mount(
,
);
expect(wrapper.find('Cell').key()).toBe('item-bamboo');
});
// https://github.com/ant-design/ant-design/issues/19887
it('should work with React Fragment', () => {
if (!React.Fragment) {
return;
}
const wrapper = mount(
bamboo
<>
bamboo
bamboo
>
,
);
expect(wrapper.render()).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/20255
it('columns 5 with customize', () => {
const wrapper = mount(
{/* 1 1 1 1 */}
bamboo
bamboo
bamboo
bamboo
{/* 2 2 */}
bamboo
bamboo
{/* 3 1 */}
bamboo
bamboo
,
);
function matchSpan(rowIndex, spans) {
const tr = wrapper.find('tr').at(rowIndex);
const tds = tr.find('th');
expect(tds).toHaveLength(spans.length);
tds.forEach((td, index) => {
expect(td.props().colSpan).toEqual(spans[index]);
});
}
matchSpan(0, [1, 1, 1, 1]);
matchSpan(2, [2, 2]);
matchSpan(4, [3, 1]);
});
it('number value should render correct', () => {
const wrapper = mount(
{0}
,
);
expect(wrapper.find('th').hasClass('ant-descriptions-item-label')).toBeTruthy();
expect(wrapper.find('td').hasClass('ant-descriptions-item-content')).toBeTruthy();
});
});