import React from 'react'; import MockDate from 'mockdate'; import Descriptions from '..'; import { resetWarned } from '../../_util/warning'; import mountTest from '../../../tests/shared/mountTest'; import { render } from '../../../tests/utils'; import ConfigProvider from '../../config-provider'; 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 = render( Cloud Database Prepaid 18:00:00 $80.00 No-Label , ); expect(wrapper.container.querySelectorAll('tr')).toHaveLength(5); expect(wrapper.container.querySelectorAll('.ant-descriptions-item-label')).toHaveLength(4); wrapper.unmount(); }); it('when max-width: 575px, column=2', () => { // eslint-disable-next-line global-require const wrapper = render( Cloud Database Prepaid 18:00:00 $80.00 , ); expect(wrapper.container.querySelectorAll('tr')).toHaveLength(2); wrapper.unmount(); }); it('when max-width: 575px, column=2, span=2', () => { // eslint-disable-next-line global-require const { container } = render( , ); expect(container.querySelectorAll('.ant-descriptions-item')[0]).toHaveAttribute('colSpan', '2'); expect(container.querySelectorAll('.ant-descriptions-item')[1]).toHaveAttribute('colSpan', '1'); expect(container.querySelectorAll('.ant-descriptions-item')[2]).toHaveAttribute('colSpan', '1'); }); it('column is number', () => { // eslint-disable-next-line global-require const wrapper = render( Cloud Database Prepaid 18:00:00 $80.00 , ); expect(wrapper.container.firstChild).toMatchSnapshot(); wrapper.unmount(); }); it('when typeof column is object', () => { const wrapper = render( Cloud Database Prepaid 18:00:00 $80.00 , ); expect( Array.from(wrapper.container.querySelectorAll('td')) .map((i) => Number(i.getAttribute('colspan'))) .filter(Boolean) .reduce((total, cur) => total + cur, 0), ).toBe(8); wrapper.unmount(); }); it('warning if exceed the row span', () => { resetWarned(); render( 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 = render( Cloud Database Prepaid 18:00:00 $80.00 {hasDiscount && $20.00} , ); expect(wrapper.container.firstChild).toMatchSnapshot(); wrapper.unmount(); }); it('vertical layout', () => { // eslint-disable-next-line global-require const wrapper = render( Cloud Database Prepaid 18:00:00 $80.00 , ); expect(wrapper.container.firstChild).toMatchSnapshot(); wrapper.unmount(); }); it('Descriptions.Item support className', () => { const wrapper = render( Cloud Database , ); expect(wrapper.container.firstChild).toMatchSnapshot(); }); it('Descriptions support colon', () => { const wrapper = render( Cloud Database , ); expect(wrapper.container.firstChild).toMatchSnapshot(); }); it('Descriptions support style', () => { const wrapper = render( Cloud Database , ); expect(wrapper.container.firstChild).toMatchSnapshot(); }); it('Descriptions support id', () => { const wrapper = render( Cloud Database , ); const descriptionItemsElement = wrapper.container.querySelector('#descriptions'); expect(descriptionItemsElement).not.toBeNull(); }); it('keep key', () => { render( 1 , ); expect(jest.spyOn(document, 'createElement')).not.toHaveBeenCalled(); }); // https://github.com/ant-design/ant-design/issues/19887 it('should work with React Fragment', () => { if (!React.Fragment) { return; } const wrapper = render( bamboo <> bamboo bamboo , ); expect(wrapper.container.firstChild).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/20255 it('columns 5 with customize', () => { const wrapper = render( {/* 1 1 1 1 */} bamboo bamboo bamboo bamboo {/* 2 2 */} bamboo bamboo {/* 3 1 */} bamboo bamboo , ); function matchSpan(rowIndex: number, spans: number[]) { const trs = Array.from(wrapper.container.querySelectorAll('tr')).at(rowIndex); const tds = Array.from(trs?.querySelectorAll('th')!); expect(tds).toHaveLength(spans.length); tds.forEach((td, index) => { expect(Number(td.getAttribute('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 = render( 0 , ); expect(wrapper.container.querySelector('th')).toHaveClass('ant-descriptions-item-label'); expect(wrapper.container.querySelector('td')).toHaveClass('ant-descriptions-item-content'); }); it('Descriptions support extra', () => { const wrapper1 = render( Zhou Maomao , ); const wrapper2 = render( Zhou Maomao , ); expect(wrapper1.container.querySelector('.ant-descriptions-extra')).toBeTruthy(); expect(wrapper2.container.querySelector('.ant-descriptions-extra')).toBeFalsy(); }); it('number 0 should render correct', () => { const wrapper = render( {0} , ); expect(wrapper.container.firstChild).toMatchSnapshot(); }); it('should pass data-* and accessibility attributes', () => { const { getByTestId } = render( banana , ); const container = getByTestId('test-id'); expect(container).toHaveAttribute('data-id', '12345'); expect(container).toHaveAttribute('aria-describedby', 'some-label'); }); it('Descriptions should inherit the size from ConfigProvider if the componentSize is set', () => { const { container } = render( small , ); expect(container.querySelectorAll('.ant-descriptions-small')).toHaveLength(1); }); it('should items work', () => { const { container } = render( , ); expect(container.querySelector('.ant-descriptions-item')).toBeTruthy(); expect(container.querySelectorAll('.ant-descriptions-item')).toHaveLength(3); expect(container).toMatchSnapshot(); }); it('Descriptions nested within an Item are unaffected by the external borderless style', () => { const { container } = render( , ); const nestDesc = container.querySelectorAll('.ant-descriptions')[1]; const view = nestDesc.querySelector('.ant-descriptions-view'); expect(getComputedStyle(view!).border).toBeFalsy(); }); it('Should Descriptions not throw react key prop error in jsx mode', () => { render( Zhou Maomao 1810000000 , ); expect(errorSpy).not.toHaveBeenCalledWith( expect.stringContaining('`key` is not a prop'), expect.anything(), expect.anything(), ); }); // https://github.com/ant-design/ant-design/issues/47151 it('should has .ant-descriptions-item-content className when children is falsy', () => { const wrapper = render( , ); expect(wrapper.container.querySelectorAll('.ant-descriptions-item-label')).toHaveLength(1); expect(wrapper.container.querySelectorAll('.ant-descriptions-item-content')).toHaveLength(1); }); });