test: Add comprehensive tests for NotFound page component
- Created unit tests for NotFound page rendering - Mocked translation hook and Lottie animation component - Verified page content, title, description, and back button - Ensured correct routing to home page
This commit is contained in:
parent
909cbd0321
commit
9c5121b743
63
src/pages/__tests__/notFound.test.tsx
Normal file
63
src/pages/__tests__/notFound.test.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import { ChakraProvider } from '@chakra-ui/react';
|
||||
|
||||
import NotFound from '../notFound/notFound';
|
||||
|
||||
// Mock the translation hook
|
||||
jest.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => {
|
||||
const translations = {
|
||||
'notFound.title': 'Page Not Found',
|
||||
'notFound.description': 'The page you are looking for does not exist',
|
||||
'notFound.button.back': 'Back to Home'
|
||||
};
|
||||
return translations[key] || key;
|
||||
}
|
||||
})
|
||||
}));
|
||||
|
||||
// Mock the Lottie Player component
|
||||
jest.mock('@lottiefiles/react-lottie-player', () => ({
|
||||
Player: () => <div data-testid="lottie-animation">Animation Mock</div>
|
||||
}));
|
||||
|
||||
describe('NotFound Component', () => {
|
||||
const renderNotFound = () => {
|
||||
return render(
|
||||
<ChakraProvider>
|
||||
<BrowserRouter>
|
||||
<NotFound />
|
||||
</BrowserRouter>
|
||||
</ChakraProvider>
|
||||
);
|
||||
};
|
||||
|
||||
it('renders without crashing', () => {
|
||||
renderNotFound();
|
||||
});
|
||||
|
||||
it('displays the correct content', () => {
|
||||
renderNotFound();
|
||||
|
||||
// Check if title is present
|
||||
expect(screen.getByText('Page Not Found')).toBeInTheDocument();
|
||||
|
||||
// Check if description is present
|
||||
expect(screen.getByText('The page you are looking for does not exist')).toBeInTheDocument();
|
||||
|
||||
// Check if back button is present
|
||||
expect(screen.getByText('Back to Home')).toBeInTheDocument();
|
||||
|
||||
// Check if Lottie animation is rendered
|
||||
expect(screen.getByTestId('lottie-animation')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('contains a link to the dry-wash page', () => {
|
||||
renderNotFound();
|
||||
const backButton = screen.getByText('Back to Home');
|
||||
expect(backButton.closest('a')).toHaveAttribute('href', '/dry-wash');
|
||||
});
|
||||
});
|
Loading…
x
Reference in New Issue
Block a user