diff --git a/docs/mdx-components.tsx b/docs/mdx-components.tsx index d28e0d330..073a93347 100644 --- a/docs/mdx-components.tsx +++ b/docs/mdx-components.tsx @@ -39,7 +39,10 @@ function Heading({ level, children, ...props }: HeadingProps) { ); } -function Link({ href, ...props }: React.LinkHTMLAttributes) { +function Link({ + href, + ...props +}: React.AnchorHTMLAttributes) { const external = href.indexOf('://') > 0 || href.indexOf('//') === 0; return external ? ( diff --git a/docs/pages/components/Breadcrumb.mdx b/docs/pages/components/Breadcrumb.mdx index d4ca44f22..feff21c36 100644 --- a/docs/pages/components/Breadcrumb.mdx +++ b/docs/pages/components/Breadcrumb.mdx @@ -58,7 +58,7 @@ import { ### BreadcrumbItem diff --git a/packages/react/src/components/Breadcrumb/index.test.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx similarity index 100% rename from packages/react/src/components/Breadcrumb/index.test.tsx rename to packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbLink.test.tsx b/packages/react/src/components/Breadcrumb/BreadcrumbLink.test.tsx new file mode 100644 index 000000000..87d557b60 --- /dev/null +++ b/packages/react/src/components/Breadcrumb/BreadcrumbLink.test.tsx @@ -0,0 +1,55 @@ +import React, { createRef } from 'react'; +import { render, screen } from '@testing-library/react'; +import { BreadcrumbLink } from './'; +import axe from '../../axe'; + +const CustomLinkComponent = ( + props: React.AnchorHTMLAttributes +): JSX.Element => ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + +); + +test('should render breadcrumb link', () => { + render(link); + expect(screen.getByRole('link', { name: 'link' })).toBeInTheDocument(); +}); + +test('should support className prop', () => { + render( + + link + + ); + expect(screen.getByRole('link')).toHaveClass( + 'Link', + 'Breadcrumb__Link', + 'banana' + ); +}); + +test('should support as prop', () => { + render( + + link + + ); + expect(screen.getByTestId('custom')).toBeInTheDocument(); +}); + +test('should support ref prop', () => { + const anchorRef = createRef(); + render( + + link + + ); + expect(anchorRef.current).toBeTruthy(); + expect(anchorRef.current).toEqual(screen.getByRole('link')); +}); + +test('should return no axe violations', async () => { + render(link); + const results = await axe(screen.getByRole('link', { name: 'link' })); + expect(results).toHaveNoViolations(); +}); diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbLink.tsx b/packages/react/src/components/Breadcrumb/BreadcrumbLink.tsx index 74f44044d..badcc92e2 100644 --- a/packages/react/src/components/Breadcrumb/BreadcrumbLink.tsx +++ b/packages/react/src/components/Breadcrumb/BreadcrumbLink.tsx @@ -6,7 +6,7 @@ import type { } from '../../utils/polymorphicComponent'; type BreadcrumbLinkProps = PolymorphicProps< - React.LinkHTMLAttributes + React.AnchorHTMLAttributes >; const BreadcrumbLink = forwardRef(