erikghandClaude Opus 5
a9d1f44df2
Las dos voces se distinguen por tres cosas a la vez —etiqueta de quien habla, columna y regla lateral—, nunca solo por color. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { ParDialogo } from '../ParDialogo';
|
|
|
|
const par = {
|
|
n: 1,
|
|
name: 'Crecer',
|
|
situacion: 'El siguiente salto no tiene mapa.',
|
|
respuesta: 'Me sumerjo hasta entender tu empresa desde dentro.',
|
|
};
|
|
|
|
describe('<ParDialogo />', () => {
|
|
it('renders both voices of the exchange', () => {
|
|
render(<ul><ParDialogo {...par} /></ul>);
|
|
expect(screen.getByText(/El siguiente salto no tiene mapa/)).toBeInTheDocument();
|
|
expect(screen.getByText(/Me sumerjo hasta entender tu empresa desde dentro/)).toBeInTheDocument();
|
|
});
|
|
|
|
it('attributes the answer to creeer, not to the reader', () => {
|
|
render(<ul><ParDialogo {...par} /></ul>);
|
|
// Without a speaker label the answer reads as more description of the
|
|
// problem. The wordmark is that label — and <Wordmark /> is the only thing
|
|
// allowed to draw cre≡er, never hand-typed in the JSX.
|
|
expect(screen.getByLabelText('creeer')).toBeInTheDocument();
|
|
});
|
|
|
|
it('labels the situation with its inflection point', () => {
|
|
render(<ul><ParDialogo {...par} /></ul>);
|
|
expect(screen.getByText(/01 · Crecer/)).toBeInTheDocument();
|
|
});
|
|
|
|
it('tells the two voices apart by more than colour', () => {
|
|
const { container } = render(<ul><ParDialogo {...par} /></ul>);
|
|
// A reader who cannot separate gold from navy still has the speaker label,
|
|
// the column, and the rule hanging off each block. Colour alone would fail
|
|
// the spec's accessibility criterion.
|
|
const bloques = container.querySelectorAll('li > div');
|
|
expect(bloques).toHaveLength(2);
|
|
bloques.forEach((b) => expect(b.className).toMatch(/border-l-2/));
|
|
});
|
|
|
|
it('is a list item, so the section can mount six of them as a list', () => {
|
|
render(<ul><ParDialogo {...par} /></ul>);
|
|
expect(screen.getAllByRole('listitem')).toHaveLength(1);
|
|
});
|
|
});
|