TehRiehlDeal
8d0b7f39ee
Gold is the primary in both themes, Bricolage Grotesque carries the wordmark, titles and the score, and Movie A / Movie B wear the blue and magenta of three-strip Technicolor on their posters instead of colouring whole rows. The loop closes on screen - connectors light, a gold line draws back to Movie A, the row glows, then the result arrives - in place of confetti, on every play mode, scaled to the chain's length. Every page shares one header and hairline lists; copy is sentence case with one verb per flow, and the Home hero shows a real finished loop. Also clamps link counts at zero: an opponent who had not moved yet showed "-1 links".
46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { describe, expect, it } from 'vitest';
|
|
import HowToPlayDialog from './HowToPlayDialog';
|
|
|
|
describe('HowToPlayDialog', () => {
|
|
it('is closed until the help button is clicked', () => {
|
|
render(<HowToPlayDialog />);
|
|
expect(screen.queryByRole('dialog')).toBeNull();
|
|
});
|
|
|
|
it('opens the how-to-play dialog from the help button', async () => {
|
|
render(<HowToPlayDialog />);
|
|
await userEvent.click(screen.getByRole('button', { name: 'How to play' }));
|
|
|
|
expect(
|
|
screen.getByRole('dialog', { name: 'How to play' }),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByText(/Build a chain of actor-movie connections and bring it back/),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it('describes the goal, connections, scoring, modes and tips', async () => {
|
|
render(<HowToPlayDialog />);
|
|
await userEvent.click(screen.getByRole('button', { name: 'How to play' }));
|
|
|
|
expect(screen.getByRole('heading', { name: 'The goal' })).toBeInTheDocument();
|
|
expect(
|
|
screen.getByRole('heading', { name: 'How connections work' }),
|
|
).toBeInTheDocument();
|
|
expect(screen.getByRole('heading', { name: 'Scoring' })).toBeInTheDocument();
|
|
expect(screen.getByRole('heading', { name: 'Ways to play' })).toBeInTheDocument();
|
|
expect(screen.getByRole('heading', { name: 'Tips' })).toBeInTheDocument();
|
|
});
|
|
|
|
it('closes via its own close control', async () => {
|
|
render(<HowToPlayDialog />);
|
|
await userEvent.click(screen.getByRole('button', { name: 'How to play' }));
|
|
expect(screen.getByRole('dialog')).toBeInTheDocument();
|
|
|
|
await userEvent.click(screen.getByRole('button', { name: 'Close' }));
|
|
expect(screen.queryByRole('dialog')).toBeNull();
|
|
});
|
|
});
|