generated from CDCgov/template
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(RV-420): Add home page first time UX (#444)
- Loading branch information
1 parent
7d130c2
commit e2c2ce4
Showing
5 changed files
with
247 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { render, screen, fireEvent } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom'; | ||
| import { describe, it, expect, vi, beforeEach } from 'vitest'; | ||
| import { BrowserRouter } from 'react-router-dom'; | ||
| import App from './App'; | ||
|
|
||
| // Mock the imports | ||
| vi.mock('./components/AppHeader/AppHeader.tsx', () => ({ | ||
| AppHeader: () => <div data-testid="app-header">AppHeader</div>, | ||
| })); | ||
|
|
||
| vi.mock('./components/TemplatesIndex/TemplatesIndex.tsx', () => ({ | ||
| TemplatesIndex: () => <div data-testid="templates-index">TemplatesIndex</div>, | ||
| })); | ||
|
|
||
| vi.mock('./assets/comment.svg', () => ({ | ||
| default: 'comment.svg', | ||
| })); | ||
|
|
||
| vi.mock('./assets/csv.svg', () => ({ | ||
| default: 'csv.svg', | ||
| })); | ||
|
|
||
| describe('App component', () => { | ||
| beforeEach(() => { | ||
| localStorage.clear(); | ||
| }); | ||
|
|
||
| const renderComponent = () => { | ||
| render( | ||
| <BrowserRouter> | ||
| <App /> | ||
| </BrowserRouter> | ||
| ); | ||
| }; | ||
|
|
||
| it('renders the AppHeader component', () => { | ||
| renderComponent(); | ||
| expect(screen.getByTestId('app-header')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('displays first-time experience content on initial visit', () => { | ||
| renderComponent(); | ||
| expect(screen.getByTestId('first-time-exp')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('displays regular content on subsequent visits', () => { | ||
| localStorage.setItem('hasVisited', 'true'); | ||
| renderComponent(); | ||
| expect(screen.queryByTestId('first-time-exp')).not.toBeInTheDocument(); | ||
| expect(screen.getByTestId('templates-index')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('navigates to the correct URL when a navigation link is clicked (0)', () => { | ||
| renderComponent(); | ||
| const navLink = screen.getByTestId('nav-link-0'); | ||
| fireEvent.click(navLink); | ||
| expect(navLink).toHaveAttribute('href', '/'); | ||
| }); | ||
|
|
||
| it('navigates to the correct URL when a navigation link is clicked (1)', () => { | ||
| renderComponent(); | ||
| const navLink = screen.getByTestId('nav-link-1'); | ||
| fireEvent.click(navLink); | ||
| expect(navLink).toHaveAttribute('href', '/labels'); | ||
| }); | ||
|
|
||
| it('navigates to the correct URL when a navigation link is clicked (2)', () => { | ||
| renderComponent(); | ||
| const navLink = screen.getByTestId('nav-link-2'); | ||
| fireEvent.click(navLink); | ||
| expect(navLink).toHaveAttribute('href', '/dashboard'); | ||
| }); | ||
|
|
||
| it('navigates to the new template upload page when the button is clicked', () => { | ||
| renderComponent(); | ||
| const newTemplateButton = screen.getByTestId('new-template-button'); | ||
| fireEvent.click(newTemplateButton); | ||
| expect(window.location.pathname).toBe('/new-template/upload'); | ||
| }); | ||
|
|
||
| it('renders navigation links correctly', () => { | ||
| renderComponent(); | ||
| const navLinks = ['Annotate and Extract', 'Label Management', 'Dashboard']; | ||
| navLinks.forEach((_, idx) => { | ||
| expect(screen.getByTestId(`nav-link-${idx}`)).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.