Browse Source

improve breadcrumb test coverage (#22719)

pull/22723/head
偏右 5 years ago
committed by GitHub
parent
commit
2a9d6cd106
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 12
      components/breadcrumb/Breadcrumb.tsx
  2. 24
      components/breadcrumb/__tests__/Breadcrumb.test.js
  3. 68
      components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap

12
components/breadcrumb/Breadcrumb.tsx

@ -48,16 +48,6 @@ function defaultItemRender(route: Route, params: any, routes: Route[], paths: st
return isLastItem ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>; return isLastItem ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>;
} }
function filterFragment(children: any) {
return toArray(children).map((element: any) => {
if (React.isValidElement(element) && element.type === React.Fragment) {
const props: any = element.props;
return props.children;
}
return element;
});
}
export default class Breadcrumb extends React.Component<BreadcrumbProps, any> { export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
static Item: typeof BreadcrumbItem; static Item: typeof BreadcrumbItem;
@ -135,7 +125,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
// generated by route // generated by route
crumbs = this.genForRoutes(this.props); crumbs = this.genForRoutes(this.props);
} else if (children) { } else if (children) {
crumbs = React.Children.map(filterFragment(children), (element: any, index) => { crumbs = toArray(children).map((element: any, index) => {
if (!element) { if (!element) {
return element; return element;
} }

24
components/breadcrumb/__tests__/Breadcrumb.test.js

@ -100,11 +100,19 @@ describe('Breadcrumb', () => {
path: 'second', path: 'second',
breadcrumbName: 'second', breadcrumbName: 'second',
}, },
{
path: 'third',
},
]; ];
const wrapper = render(<Breadcrumb routes={routes} />); const wrapper = render(<Breadcrumb routes={routes} />);
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
it('should accept undefined routes', () => {
const wrapper = render(<Breadcrumb routes={undefined} />);
expect(wrapper).toMatchSnapshot();
})
it('props#linkRender and props#nameRender do not warn anymore', () => { it('props#linkRender and props#nameRender do not warn anymore', () => {
const linkRender = jest.fn(); const linkRender = jest.fn();
const nameRender = jest.fn(); const nameRender = jest.fn();
@ -129,4 +137,20 @@ describe('Breadcrumb', () => {
); );
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
it('should support React.Fragment and falsy children', () => {
const wrapper = render(
<Breadcrumb>
<>
<Breadcrumb.Item>yyy</Breadcrumb.Item>
<Breadcrumb.Item>yyy</Breadcrumb.Item>
</>
<Breadcrumb.Item>yyy</Breadcrumb.Item>
{0}
{null}
{undefined}
</Breadcrumb>,
);
expect(wrapper).toMatchSnapshot();
});
}); });

68
components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap

@ -38,6 +38,12 @@ exports[`Breadcrumb rtl render component should be rendered correctly in RTL dir
/> />
`; `;
exports[`Breadcrumb should accept undefined routes 1`] = `
<div
class="ant-breadcrumb"
/>
`;
exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = ` exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
<div <div
class="ant-breadcrumb" class="ant-breadcrumb"
@ -152,9 +158,66 @@ exports[`Breadcrumb should render a menu 1`] = `
<span <span
class="ant-breadcrumb-link" class="ant-breadcrumb-link"
> >
<span> <a
href="#/index/first/second"
>
second second
</span> </a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span />
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span> </span>
<span <span
class="ant-breadcrumb-separator" class="ant-breadcrumb-separator"
@ -162,6 +225,7 @@ exports[`Breadcrumb should render a menu 1`] = `
/ /
</span> </span>
</span> </span>
0
</div> </div>
`; `;

Loading…
Cancel
Save