erikgh
0239d4ac15
El hilo pintaba encima del texto en las secciones sin position:relative (Dolores, Disciplinas, Estratega, ComoEmpezar) y detrás del texto en las que sí la tienen, por el orden de pintado del navegador. Se mueve a la banda vacía a la izquierda de la columna max-w-content (oculto bajo 2xl, donde no hay margen seguro) y gana un z-index explícito por debajo del header.
91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
import { render } from '@testing-library/react';
|
|
import { describe, it, expect, afterEach } from 'vitest';
|
|
import { HiloConductor } from '../HiloConductor';
|
|
|
|
describe('<HiloConductor />', () => {
|
|
const matchMediaOriginal = window.matchMedia;
|
|
afterEach(() => {
|
|
window.matchMedia = matchMediaOriginal;
|
|
});
|
|
|
|
it('is decorative: hidden from assistive tech', () => {
|
|
const { container } = render(<HiloConductor />);
|
|
const svg = container.querySelector('svg');
|
|
expect(svg).toHaveAttribute('aria-hidden', 'true');
|
|
expect(svg).toHaveAttribute('focusable', 'false');
|
|
});
|
|
|
|
it('draws a single continuous thread', () => {
|
|
const { container } = render(<HiloConductor />);
|
|
expect(container.querySelectorAll('path')).toHaveLength(1);
|
|
});
|
|
|
|
it('travels with the document instead of sticking to the viewport', () => {
|
|
const { container } = render(<HiloConductor />);
|
|
// `fixed` would read as an ornament pinned to the window; the thread
|
|
// belongs to the page and must scroll with it.
|
|
expect(container.firstElementChild?.className).toContain('absolute');
|
|
expect(container.firstElementChild?.className).not.toContain('fixed');
|
|
});
|
|
|
|
it('stays out of the way of pointer input', () => {
|
|
const { container } = render(<HiloConductor />);
|
|
expect(container.firstElementChild?.className).toContain('pointer-events-none');
|
|
});
|
|
|
|
it('sits in the margin band beside the column, never over it', () => {
|
|
const { container } = render(<HiloConductor />);
|
|
const svg = container.querySelector('svg');
|
|
// `right-full` (`right: 100%`) anchors the thread's right edge to the
|
|
// left edge of the `max-w-content` column it shares a parent with —
|
|
// structurally outside the column, not merely visually offset within it.
|
|
// Read via getAttribute: on an SVGElement, `.className` is an
|
|
// SVGAnimatedString, not a plain string.
|
|
expect(svg?.getAttribute('class')).toContain('right-full');
|
|
});
|
|
|
|
it('declares a stacking level that beats section roots but stays under the header', () => {
|
|
const { container } = render(<HiloConductor />);
|
|
const wrapperClass = container.firstElementChild?.className ?? '';
|
|
// Section roots never set z-index (auto), so any explicit positive value
|
|
// paints above them regardless of whether the section itself happens to
|
|
// be `position: relative` or `static` — that inconsistency was the bug.
|
|
// The sticky header is z-50 and must still win.
|
|
expect(wrapperClass).toMatch(/\bz-\d+\b/);
|
|
expect(wrapperClass).not.toContain('z-50');
|
|
});
|
|
|
|
it('is hidden below the breakpoint that guarantees a safe margin', () => {
|
|
const { container } = render(<HiloConductor />);
|
|
const wrapperClass = container.firstElementChild?.className ?? '';
|
|
// No safe band exists under the content column's own breakpoint; hiding
|
|
// it there is what keeps it from ever creeping over the text.
|
|
expect(wrapperClass).toContain('hidden');
|
|
expect(wrapperClass).toContain('2xl:block');
|
|
});
|
|
|
|
it('renders a genuine plain path under reduced motion, not a neutralised motion.path', () => {
|
|
window.matchMedia = (query: string) =>
|
|
({
|
|
matches: true,
|
|
media: query,
|
|
onchange: null,
|
|
addEventListener: () => {},
|
|
removeEventListener: () => {},
|
|
addListener: () => {},
|
|
removeListener: () => {},
|
|
dispatchEvent: () => false,
|
|
}) as unknown as MediaQueryList;
|
|
|
|
const { container } = render(<HiloConductor />);
|
|
const path = container.querySelector('path');
|
|
// motion.path stamps stroke-dasharray/stroke-dashoffset onto the DOM even
|
|
// without initial/animate — the dash-scaffolding trap that leaves the
|
|
// thread invisible for reduced-motion users. A real plain <path> never
|
|
// gets them, so their absence proves the branches weren't collapsed back
|
|
// into one.
|
|
expect(path).not.toHaveAttribute('stroke-dasharray');
|
|
expect(path).not.toHaveAttribute('stroke-dashoffset');
|
|
});
|
|
});
|