import React from 'react'; import { mount } from 'enzyme'; import PageHeader from '..'; import Breadcrumb from '../../breadcrumb'; import ConfigProvider from '../../config-provider'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; describe('PageHeader', () => { mountTest(PageHeader); rtlTest(PageHeader); const mockGetBoundingClientRect = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect'); beforeAll(() => { mockGetBoundingClientRect.mockReturnValue({ width: 100 }); }); afterAll(() => { mockGetBoundingClientRect.mockRestore(); }); it('pageHeader should not contain back it back', () => { const routes = [ { path: 'index', breadcrumbName: 'First-level Menu', }, { path: 'first', breadcrumbName: 'Second-level Menu', }, { path: 'second', breadcrumbName: 'Third-level Menu', }, ]; const wrapper = mount(); expect(wrapper.find('.ant-page-header-back')).toHaveLength(0); }); it('pageHeader should have breadcrumb', () => { const routes = [ { path: 'index', breadcrumbName: 'First-level Menu', }, ]; const wrapper = mount(); expect(wrapper.find('.ant-breadcrumb')).toHaveLength(1); expect(wrapper.find('.ant-page-header-back')).toHaveLength(0); }); it('pageHeader should have breadcrumb (component)', () => { const routes = [ { path: 'index', breadcrumbName: 'First-level Menu', }, ]; const wrapper = mount( } />, ); expect(wrapper.find('.ant-breadcrumb')).toHaveLength(1); expect(wrapper.find('.ant-page-header-back')).toHaveLength(0); }); it('pageHeader support breadcrumbRender', () => { const wrapper = mount(
test
} />, ); expect(wrapper.find('#test')).toHaveLength(1); expect(wrapper.find('.ant-page-header-back')).toHaveLength(0); }); it('pageHeader support breadcrumbRender return false', () => { const wrapper = mount( false} />); expect(wrapper.find('.ant-page-header-back')).toHaveLength(0); }); it('pageHeader do not has title', () => { const routes = [ { path: 'index', breadcrumbName: 'First-level Menu', }, ]; const wrapper = mount(test); expect(wrapper.find('.ant-page-header-heading-lef').exists()).toBeFalsy(); expect(wrapper.find('.ant-page-header-heading').exists()).toBeFalsy(); }); it('pageHeader should no contain back', () => { const wrapper = mount(); expect(wrapper.find('.ant-page-header-back')).toHaveLength(0); }); it('pageHeader should contain back it back', () => { const callback = jest.fn(() => true); const wrapper = mount(); expect(wrapper.find('.ant-page-header-back')).toHaveLength(1); }); it('pageHeader onBack transfer', () => { const callback = jest.fn(() => true); const wrapper = mount(); wrapper.find('div.ant-page-header-back-button').simulate('click'); expect(callback).toHaveBeenCalled(); }); it('pageHeader should support className', () => { const wrapper = mount(); expect(wrapper.render()).toMatchSnapshot(); }); it('pageHeader should not render blank dom', () => { const wrapper = mount(); expect(wrapper.render()).toMatchSnapshot(); }); it('breadcrumbs and back icon can coexist', () => { const routes = [ { path: 'index', breadcrumbName: 'First-level Menu', }, { path: 'first', breadcrumbName: 'Second-level Menu', }, { path: 'second', breadcrumbName: 'Third-level Menu', }, ]; const wrapper = mount(); expect(wrapper.find('.ant-breadcrumb')).toHaveLength(1); wrapper.setProps({ onBack: () => {} }); expect(wrapper.find('.ant-breadcrumb')).toHaveLength(1); }); it('pageHeader should render correctly int RTL direction', () => { const wrapper = mount( , ); expect(wrapper.render()).toMatchSnapshot(); }); it('change container width', async () => { const wrapper = mount(); wrapper.triggerResize(); await Promise.resolve(); wrapper.update(); expect(wrapper.find('.ant-page-header').hasClass('ant-page-header-compact')).toBeTruthy(); }); });