From b35a07917e7edbfce02a781cd90082406e2c5326 Mon Sep 17 00:00:00 2001 From: ishaan Date: Fri, 1 Nov 2024 14:20:02 -0700 Subject: [PATCH] perf: wrap Link component in NextLink Wrap the Link component with Next.js Link for performance and native support. Remove logic allowing Link to act as a button without href, enforcing href as required. Update tests to reflect these changes, removing button-specific checks. --- src/components/atoms/Link.tsx | 33 ++++++++++--------- tests/components/atoms/Link.test.tsx | 48 +--------------------------- 2 files changed, 17 insertions(+), 64 deletions(-) diff --git a/src/components/atoms/Link.tsx b/src/components/atoms/Link.tsx index cc8aeb9..e84a622 100644 --- a/src/components/atoms/Link.tsx +++ b/src/components/atoms/Link.tsx @@ -2,6 +2,7 @@ import { LinkProps } from '@components/atoms/Link'; import { Link as MuiLink } from '@mui/material'; +import NextLink from 'next/link'; import React from 'react'; const Link: React.FC = ({ @@ -17,13 +18,10 @@ const Link: React.FC = ({ children, ariaLabel, role, - component, ...props }) => { - if (!href && component !== 'button') { - throw new Error( - 'The `href` prop is required unless `component="button"` is used.' - ); + if (!href) { + throw new Error('The `href` prop is required for the `Link` component.'); } const computedRel = @@ -34,27 +32,28 @@ const Link: React.FC = ({ : rel; const linkProps = { - ...(component !== 'button' && { href }), + href, target, rel: computedRel, onClick, 'aria-label': ariaLabel, role, tabIndex, - component, }; return ( - - {children} - + + + {children} + + ); }; diff --git a/tests/components/atoms/Link.test.tsx b/tests/components/atoms/Link.test.tsx index 8ebd7d4..bd85b18 100644 --- a/tests/components/atoms/Link.test.tsx +++ b/tests/components/atoms/Link.test.tsx @@ -47,20 +47,6 @@ describe('Link component', () => { expect(handleClick).toHaveBeenCalledTimes(1); }); - it('renders as a button when component="button"', () => { - const handleClick = jest.fn(); - render( - - Button Link - - ); - const buttonElement = screen.getByRole('button', { name: 'Button Link' }); - expect(buttonElement.tagName).toBe('BUTTON'); - expect(buttonElement).not.toHaveAttribute('href'); - fireEvent.click(buttonElement); - expect(handleClick).toHaveBeenCalledTimes(1); - }); - it('applies aria-label when provided', () => { render(); const linkElement = screen.getByLabelText('Custom Aria Label'); @@ -80,39 +66,7 @@ describe('Link component', () => { expect(linkElement).toBeInTheDocument(); }); - it('supports custom components via the "component" prop', () => { - const CustomComponent = React.forwardRef< - HTMLAnchorElement, - React.AnchorHTMLAttributes - >((props, ref) => ( - - )); - - CustomComponent.displayName = 'CustomComponent'; - - render( - - Custom Component Link - - ); - - const customElement = screen.getByTestId('custom-component'); - expect(customElement).toBeInTheDocument(); - expect(customElement).toHaveAttribute('href', '/custom'); - expect(customElement).toHaveTextContent('Custom Component Link'); - }); - - it('handles missing href when component is "button"', () => { - render(Button without href); - const buttonElement = screen.getByRole('button', { - name: 'Button without href', - }); - expect(buttonElement).toBeInTheDocument(); - expect(buttonElement.tagName).toBe('BUTTON'); - expect(buttonElement).not.toHaveAttribute('href'); - }); - - it('throws an error when href is missing and component is not "button"', () => { + it('throws an error when href is missing', () => { console.error = jest.fn(); expect(() => { render(Link without href);