mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-13 06:43:06 +00:00
84 lines
3.5 KiB
TypeScript
84 lines
3.5 KiB
TypeScript
import { render, screen } from '@testing-library/react'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
import { CampaignHomeLayout } from '@/components/campaign/dashboard/CampaignHomeLayout'
|
|
|
|
describe('CampaignHomeLayout', () => {
|
|
it('fills the scrollport height on mobile', () => {
|
|
const { container } = render(<CampaignHomeLayout actions={<p>Actions block</p>} />)
|
|
|
|
expect(container.firstElementChild).not.toBeNull()
|
|
expect(container.querySelector('[data-slot="home-dock"]')).not.toBeNull()
|
|
})
|
|
|
|
it('renders actions in the home-actions slot inside home-dock', () => {
|
|
const { container } = render(<CampaignHomeLayout actions={<p>Actions block</p>} />)
|
|
|
|
const actions = container.querySelector('[data-slot="home-actions"]')
|
|
expect(actions).not.toBeNull()
|
|
expect(actions?.closest('[data-slot="home-dock"]')).not.toBeNull()
|
|
})
|
|
|
|
it('does not bleed home-actions on mobile (B122 grid uses page gutter)', () => {
|
|
const { container } = render(<CampaignHomeLayout actions={<p>Actions block</p>} />)
|
|
|
|
const actions = container.querySelector('[data-slot="home-actions"]')
|
|
expect(actions).not.toBeNull()
|
|
expect(actions?.className).not.toMatch(/-mx-4/)
|
|
expect(actions?.className).not.toMatch(/calc\(100%\+2rem\)/)
|
|
})
|
|
|
|
it('renders search slot inside home-dock when provided', () => {
|
|
render(
|
|
<CampaignHomeLayout
|
|
actions={<p>Actions block</p>}
|
|
searchSlot={<p data-testid="home-search-stub">Search stub</p>}
|
|
/>,
|
|
)
|
|
|
|
const search = screen.getByTestId('home-search-stub').closest('[data-slot="home-search"]')
|
|
expect(search).not.toBeNull()
|
|
expect(search?.closest('[data-slot="home-dock"]')).not.toBeNull()
|
|
})
|
|
|
|
it('omits search slot when not provided', () => {
|
|
const { container } = render(<CampaignHomeLayout actions={<p>Actions block</p>} />)
|
|
|
|
expect(container.querySelector('[data-slot="home-search"]')).toBeNull()
|
|
expect(container.querySelector('[data-slot="home-dock"]')).not.toBeNull()
|
|
})
|
|
|
|
it('renders mobile thumb-zone spacer inside home-chrome above home-dock', () => {
|
|
const { container } = render(<CampaignHomeLayout actions={<p>Actions block</p>} />)
|
|
|
|
const chrome = container.querySelector('[data-slot="home-chrome"]')
|
|
const spacer = chrome?.querySelector('[data-slot="home-thumb-spacer"]')
|
|
expect(chrome).not.toBeNull()
|
|
expect(spacer).not.toBeNull()
|
|
expect(spacer?.getAttribute('aria-hidden')).toBe('true')
|
|
expect(chrome?.nextElementSibling?.getAttribute('data-slot')).toBe('home-dock')
|
|
})
|
|
|
|
it('retracts spacer, summary, and actions when focused but keeps search', () => {
|
|
const { container } = render(
|
|
<CampaignHomeLayout
|
|
actions={<p>Actions block</p>}
|
|
focused
|
|
searchSlot={<p data-testid="home-search-stub">Search stub</p>}
|
|
summarySlot={<p data-testid="home-summary-stub">Summary stub</p>}
|
|
/>,
|
|
)
|
|
|
|
const homeChrome = container.querySelector('[data-slot="home-chrome"]')
|
|
expect(homeChrome?.getAttribute('data-retracted')).toBe('true')
|
|
|
|
const actionsChrome = container.querySelector('[data-slot="home-actions-chrome"]')
|
|
expect(actionsChrome?.getAttribute('data-retracted')).toBe('true')
|
|
|
|
expect(container.querySelector('[data-slot="home-thumb-spacer"]')).not.toBeNull()
|
|
expect(container.querySelector('[data-slot="home-summary"]')).not.toBeNull()
|
|
expect(container.querySelector('[data-slot="home-actions"]')).not.toBeNull()
|
|
expect(container.querySelector('[data-slot="home-search"]')).not.toBeNull()
|
|
expect(container.querySelector('[data-slot="home-dock"]')).not.toBeNull()
|
|
})
|
|
})
|