31 lines
1.2 KiB
React
31 lines
1.2 KiB
React
import React from 'react'
|
|
import { describe, expect, it } from 'vitest'
|
|
import { render } from '@testing-library/react'
|
|
import { MemoryRouter } from 'react-router-dom'
|
|
import { readFileSync } from 'fs'
|
|
import { join } from 'path'
|
|
import BottomDock from './BottomDock'
|
|
|
|
describe('BottomDock', () => {
|
|
it('keeps secondary links available on desktop and marks them for mobile hiding', () => {
|
|
const { container } = render(
|
|
<MemoryRouter initialEntries={['/']}>
|
|
<BottomDock />
|
|
</MemoryRouter>,
|
|
)
|
|
|
|
expect(container.querySelectorAll('.dock-item')).toHaveLength(8)
|
|
expect(container.querySelectorAll('.dock-item-wrapper-secondary')).toHaveLength(3)
|
|
expect(container.querySelectorAll('.dock-item[aria-label]')).toHaveLength(8)
|
|
})
|
|
|
|
it('reserves mobile space and keeps touch targets at least 44 pixels', () => {
|
|
const css = readFileSync(join(process.cwd(), 'src', 'components', 'BottomDock.css'), 'utf-8')
|
|
const mobileRule = css.match(/@media \(max-width: 600px\) \{([\s\S]*)\}\s*$/)
|
|
|
|
expect(mobileRule?.[1]).toContain('dock-item-wrapper-secondary')
|
|
expect(mobileRule?.[1]).toMatch(/width: 44px/)
|
|
expect(mobileRule?.[1]).toMatch(/height: 44px/)
|
|
})
|
|
})
|