import React from 'react';
import accessibilityTest from '../../../tests/shared/accessibilityTest';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { render } from '../../../tests/utils';
import type { Route } from '../Breadcrumb';
import Breadcrumb from '../index';
describe('Breadcrumb', () => {
mountTest(Breadcrumb);
rtlTest(Breadcrumb);
accessibilityTest(Breadcrumb);
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
afterEach(() => {
errorSpy.mockReset();
});
afterAll(() => {
errorSpy.mockRestore();
});
it('warns on non-Breadcrumb.Item and non-Breadcrumb.Separator children', () => {
const MyCom: React.FC = () =>
foo
;
render(
,
);
expect(errorSpy).toHaveBeenCalledWith(
"Warning: [antd: Breadcrumb] Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
);
});
it('overlay deprecation warning', () => {
render(
menu}>
General
,
);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Breadcrumb.Item] `overlay` is deprecated. Please use `menu` instead.',
);
});
// https://github.com/ant-design/ant-design/issues/5015
it('should allow Breadcrumb.Item is null or undefined', () => {
const { asFragment } = render(
{null}
Home
{undefined}
,
);
expect(errorSpy).not.toHaveBeenCalled();
expect(asFragment().firstChild).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/5542
it('should not display Breadcrumb Item when its children is falsy', () => {
const { asFragment } = render(
xxx
yyy
,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/18260
it('filter React.Fragment', () => {
const { asFragment } = render(
Location
:
<>
Application Center
>
,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should render a menu', () => {
const routes: Route[] = [
{
path: 'index',
breadcrumbName: 'home',
},
{
path: 'first',
breadcrumbName: 'first',
children: [
{
path: '/general',
breadcrumbName: 'General',
},
{
path: '/layout',
breadcrumbName: 'Layout',
},
{
path: '/navigation',
breadcrumbName: 'Navigation',
},
],
},
{
path: 'second',
breadcrumbName: 'second',
},
{
path: 'third',
breadcrumbName: '',
},
];
const { asFragment } = render();
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should accept undefined routes', () => {
const { asFragment } = render();
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should support custom attribute', () => {
const { asFragment } = render(
xxx
yyy
,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should support React.Fragment and falsy children', () => {
const { asFragment } = render(
<>
yyy
yyy
>
yyy
{0}
{null}
{undefined}
,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/25975
it('should support Breadcrumb.Item default separator', () => {
const MockComponent: React.FC = () => (
Mock Node
);
const { asFragment } = render(
Location
Application Center
,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should support string `0` and number `0`', () => {
const { container } = render(
{0}
0
,
);
expect(container.querySelectorAll('.ant-breadcrumb-link')[0].textContent).toBe('0');
expect(container.querySelectorAll('.ant-breadcrumb-link')[1].textContent).toBe('0');
expect(container.firstChild).toMatchSnapshot();
});
});