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();
});
});