ant-design-vue/components/page-header/__tests__/index.test.js

import { createLocalVue, mount } from '@vue/test-utils';
import PageHeader from '..';
import ref from 'vue-ref';
const localVue = createLocalVue();
localVue.use(ref, { name: 'ant-ref' });

describe('PageHeader', () => {
  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({
      render() {
        return <PageHeader title="Page Title" breadcrumb={{ props: { routes } }} />;
      },
    });
    expect(wrapper.findAll('.ant-page-header-back')).toHaveLength(0);
  });

  it('pageHeader should have breadcrumb', () => {
    const routes = [
      {
        path: 'index',
        breadcrumbName: 'First-level Menu',
      },
    ];
    const wrapper = mount({
      render() {
        return <PageHeader title="Page Title" breadcrumb={{ props: { routes } }} />;
      },
    });
    expect(wrapper.findAll('.ant-breadcrumb')).toHaveLength(1);
    expect(wrapper.findAll('.ant-page-header-back')).toHaveLength(0);
  });

  it('pageHeader should no contain back', () => {
    const wrapper = mount({
      render() {
        return <PageHeader title="Page Title" backIcon={false} />;
      },
    });
    expect(wrapper.findAll('.ant-page-header-back')).toHaveLength(0);
  });

  it('pageHeader should contain back it back', () => {
    const callback = jest.fn(() => true);
    const wrapper = mount(
      {
        render() {
          return <PageHeader title="Page Title" onBack={callback} />;
        },
      },
      { localVue },
    );
    expect(wrapper.findAll('.ant-page-header-back')).toHaveLength(1);
  });

  it('pageHeader onBack transfer', () => {
    const callback = jest.fn(() => true);
    const wrapper = mount(
      {
        render() {
          return <PageHeader title="Page Title" onBack={callback} />;
        },
      },
      { localVue },
    );
    wrapper.find('div.ant-page-header-back-button').trigger('click');
    expect(callback).toHaveBeenCalled();
  });

  it('pageHeader should support class', () => {
    const wrapper = mount({
      render() {
        return <PageHeader title="Page Title" class="not-works" backIcon={false} />;
      },
    });
    expect(wrapper.element).toMatchSnapshot();
  });

  it('pageHeader should not render blank dom', () => {
    const wrapper = mount({
      render() {
        return <PageHeader title={false} />;
      },
    });
    expect(wrapper.element).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({
      render() {
        return <PageHeader title="Title" breadcrumb={{ props: { routes } }} />;
      },
    });
    expect(wrapper.findAll('.ant-breadcrumb')).toHaveLength(1);

    const wrapperBack = mount(
      {
        render() {
          return <PageHeader title="Title" breadcrumb={{ props: { routes } }} onBack={() => {}} />;
        },
      },
      { localVue },
    );
    expect(wrapperBack.findAll('.ant-breadcrumb')).toHaveLength(1);
  });
});