teqo-backup/tests/unit/activityAgendaSwipePreview.unit.spec.tsx
Francisco Solla 9cb8fef98d feat(C110+): preview do arrasto — indicadores ancorados ao frame, gradiente deduplicado, e2e do direction prev
- scene posicionado único (.activity-agenda-swipe-scene) envolve frame + dots/bars:
  percentuais resolvem contra o box do frame, não o content (chevron/label inclusos)
- width: 100% no scene (fix do /simplify: align-items flex-end do prev colapsava a 1px)
- --swipe-frame-columns deduplica o gradiente de 14.285% (2 call sites)
- unit test estrutural do preview (month/day/week/list, chevron por direção)
- e2e novo: direction prev com frame visível (pina o fix do colapso)
2026-08-10 20:38:04 -03:00

104 lines
3.9 KiB
TypeScript

import { cleanup, render } from '@testing-library/react'
import { afterEach, describe, expect, it } from 'vitest'
import { ActivityAgendaSwipePreview } from '@/components/campaign/activity/ActivityAgendaSwipePreview'
import type { ActivityAgendaEvent } from '@/utilities/activityViewModels'
afterEach(() => {
cleanup()
})
const event = (overrides: Partial<ActivityAgendaEvent> = {}): ActivityAgendaEvent => ({
id: 1,
title: 'Caminhada',
href: '/campanha/atividades/caminhada',
tags: [],
status: 'confirmado',
deputyPresent: false,
allDay: false,
startAt: '2026-08-10T09:00:00-03:00',
endAt: null,
municipality: null,
locality: null,
canReschedule: true,
...overrides,
})
const range = {
start: '2026-08-03T00:00:00-03:00',
end: '2026-08-10T00:00:00-03:00',
anchorDate: '2026-08-03T00:00:00-03:00',
}
describe('ActivityAgendaSwipePreview', () => {
it('ancora os dots do mês dentro da cena posicionada junto ao frame (C110+)', () => {
const { container } = render(
<ActivityAgendaSwipePreview view="month" direction="next" range={range} events={[event()]} />,
)
const scene = container.querySelector('.activity-agenda-swipe-scene')
expect(scene).not.toBeNull()
expect(scene!.querySelector('.activity-agenda-swipe-frame')).not.toBeNull()
expect(scene!.querySelector('.activity-agenda-swipe-dot')).not.toBeNull()
})
it('ancora as barras de dia dentro da cena posicionada junto ao frame (C110+)', () => {
const { container } = render(
<ActivityAgendaSwipePreview view="day" direction="next" range={range} events={[event()]} />,
)
const scene = container.querySelector('.activity-agenda-swipe-scene')
expect(scene).not.toBeNull()
expect(scene!.querySelector('.activity-agenda-swipe-frame')).not.toBeNull()
expect(scene!.querySelector('.activity-agenda-swipe-event')).not.toBeNull()
})
it('mantém o cabeçalho de iniciais na semana dentro da cena (C110+)', () => {
const { container } = render(
<ActivityAgendaSwipePreview view="week" direction="next" range={range} events={[event()]} />,
)
const scene = container.querySelector('.activity-agenda-swipe-scene')
expect(scene).not.toBeNull()
expect(scene!.querySelector('.activity-agenda-swipe-frame-head')).not.toBeNull()
expect(scene!.querySelector('.activity-agenda-swipe-event')).not.toBeNull()
})
it('deixa as linhas da lista no fluxo do conteúdo, fora da cena (C110+)', () => {
const { container } = render(
<ActivityAgendaSwipePreview view="list" direction="next" range={range} events={[event()]} />,
)
expect(container.querySelector('.activity-agenda-swipe-scene')).toBeNull()
const row = container.querySelector('.activity-agenda-swipe-list-row')
expect(row).not.toBeNull()
expect(row!.textContent).toContain('Caminhada')
})
it('não desenha dot para evento fora do range de 42 dias do mês', () => {
const { container } = render(
<ActivityAgendaSwipePreview
view="month"
direction="next"
range={range}
events={[event({ startAt: '2026-10-01T09:00:00-03:00' })]}
/>,
)
expect(container.querySelector('.activity-agenda-swipe-dot')).toBeNull()
})
it('aponta o chevron para o lado revelado: direita no próximo, esquerda no anterior', () => {
const { container: nextContainer } = render(
<ActivityAgendaSwipePreview view="month" direction="next" range={range} events={[]} />,
)
expect(nextContainer.querySelector('svg.lucide-chevron-right')).not.toBeNull()
expect(nextContainer.querySelector('svg.lucide-chevron-left')).toBeNull()
const { container: prevContainer } = render(
<ActivityAgendaSwipePreview view="month" direction="prev" range={range} events={[]} />,
)
expect(prevContainer.querySelector('svg.lucide-chevron-left')).not.toBeNull()
expect(prevContainer.querySelector('svg.lucide-chevron-right')).toBeNull()
})
})