47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
|
import { describe, it, expect, vi } from 'vitest'
|
||
|
|
import { render, screen } from '@testing-library/react'
|
||
|
|
import userEvent from '@testing-library/user-event'
|
||
|
|
import { MobileNav } from './MobileNav'
|
||
|
|
import type { NavItem } from '../model/types'
|
||
|
|
|
||
|
|
const ITEMS: NavItem[] = [{ id: 'about', label: 'About', number: '01' }]
|
||
|
|
|
||
|
|
describe('MobileNav', () => {
|
||
|
|
describe('rendering', () => {
|
||
|
|
it('renders title "allmy.work"', () => {
|
||
|
|
render(<MobileNav items={ITEMS} />)
|
||
|
|
expect(screen.getByText('allmy.work')).toBeInTheDocument()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('renders toggle button with text "Menu" initially', () => {
|
||
|
|
render(<MobileNav items={ITEMS} />)
|
||
|
|
expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('menu items are hidden initially', () => {
|
||
|
|
render(<MobileNav items={ITEMS} />)
|
||
|
|
expect(screen.queryByRole('button', { name: /about/i })).not.toBeInTheDocument()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
describe('interactions', () => {
|
||
|
|
it('click toggle shows item buttons and changes label to "Close"', async () => {
|
||
|
|
render(<MobileNav items={ITEMS} />)
|
||
|
|
await userEvent.click(screen.getByRole('button', { name: 'Menu' }))
|
||
|
|
expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
|
||
|
|
expect(screen.getByText('About')).toBeInTheDocument()
|
||
|
|
})
|
||
|
|
|
||
|
|
it('click item button closes the menu', async () => {
|
||
|
|
render(<MobileNav items={ITEMS} />)
|
||
|
|
await userEvent.click(screen.getByRole('button', { name: 'Menu' }))
|
||
|
|
// item button label contains number + label text; find by accessible name fragment
|
||
|
|
const itemBtn = screen.getAllByRole('button').find(b => b.textContent?.includes('About'))
|
||
|
|
expect(itemBtn).toBeDefined()
|
||
|
|
await userEvent.click(itemBtn!)
|
||
|
|
expect(screen.queryByText('Close')).not.toBeInTheDocument()
|
||
|
|
expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|