import React, { useEffect } from 'react'; import List from '..'; import { pureRender, render } from '../../../tests/utils'; import ConfigProvider from '../../config-provider'; describe('List Item Layout', () => { const data = [ { key: 1, href: 'https://ant.design', title: `ant design`, avatar: 'https://joeschmoe.io/api/v1/random', description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.', content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.', extra: 'extra', }, ]; it('horizontal itemLayout List which contains string nodes should not be flex container', () => { const { container: wrapper } = render( ( I am ant design list item )} />, ); expect( wrapper.querySelectorAll('.ant-list-item')[0].classList.contains('ant-list-item-no-flex'), ).toBe(true); }); it('horizontal itemLayout List should be flex container by default', () => { const { container: wrapper } = render( ( {item.title}} description={item.description} /> )} />, ); expect( wrapper.querySelector('.ant-list-item')?.classList.contains('ant-list-item-no-flex'), ).toBe(false); }); it('vertical itemLayout List should be flex container when there is extra node', () => { const { container: wrapper } = render( ( {item.title}} description={item.description} /> )} />, ); expect( wrapper.querySelectorAll('.ant-list-item')[0].classList.contains('ant-list-item-no-flex'), ).toBe(false); }); it('vertical itemLayout List should not be flex container when there is not extra node', () => { const { container: wrapper } = render( ( {item.title}} description={item.description} /> )} />, ); expect( wrapper.querySelectorAll('.ant-list-item')[0].classList.contains('ant-list-item-no-flex'), ).toBe(true); }); it('horizontal itemLayout List should accept extra node', () => { const { container: wrapper } = render( ( Action]} extra={{item.extra}} > {item.title}} description={item.description} /> )} />, ); expect(wrapper.firstChild).toMatchSnapshot(); }); it('should render in RTL direction', () => { const { container: wrapper } = render( ( Action]} extra={{item.extra}} > {item.title}} description={item.description} /> )} /> , ); expect(wrapper.firstChild).toMatchSnapshot(); }); it('rowKey could be string', () => { const dataWithId = [ { id: 1, title: `ant design`, }, { id: 2, title: `ant design`, }, { id: 3, title: `ant design`, }, ]; const { container: wrapper } = render( {item.title}} />, ); expect(wrapper.firstChild).toMatchSnapshot(); }); it('rowKey could be function', () => { const dataWithId = [ { id: 1, title: `ant design`, }, { id: 2, title: `ant design`, }, { id: 3, title: `ant design`, }, ]; const { container: wrapper } = render( item.id} renderItem={(item) => {item.title}} />, ); expect(wrapper.firstChild).toMatchSnapshot(); }); it('should ref', () => { const ref = React.createRef(); render(Item); expect(ref.current).toHaveClass('ant-list-item'); }); it('should grid ref', () => { const ref = React.createRef(); render( Item, , ); expect(ref.current).toHaveClass('ant-col'); }); it('react key', () => { const loadId: number[] = []; const Demo = ({ id }: { id: number }) => { useEffect(() => { loadId.push(id); }, []); return
{id}
; }; const getDom = (id = 1) => ( item.id} renderItem={(item) => ( )} /> ); const { rerender } = pureRender(getDom(1)); rerender(getDom(3)); rerender(getDom(5)); expect(loadId).toEqual([1, 3, 5]); }); });