tdd-from-figma

TDD from Figma — Tests Before Components

Purpose

Write comprehensive test files for every component BEFORE writing implementation code. Tests use exact values from design-tokens.lock.json — text content, ARIA roles, component structure — so the implementation is constrained to match the design precisely. This eliminates label drift, missing accessibility attributes, and structural deviations.

When to Use

• Phase 3 of the /build-from-figma pipeline (after design-token-lock)
• Any time you're about to generate React components from Figma and want TDD discipline
• When adding new components to an existing Figma-derived codebase

Inputs

• Required: src/styles/design-tokens.lock.json (from design-token-lock skill)
• Required: .claude/plans/build-spec.json (from figma-intake skill)
• Optional: Figma MCP access for additional structural context

TDD Cycle (Per Component)

Red Phase: Write Failing Tests

For each component in build-spec.json, write a test file BEFORE any implementation exists.

Test file location: Mirror the component path with .test.tsx suffix:

• src/components/ui/Button.tsx → src/components/ui/Button.test.tsx
• src/components/sections/HeroSection.tsx → src/components/sections/HeroSection.test.tsx

Test categories to cover:

1. Rendering Tests

import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { Button } from "./Button";

describe("Button", () => {
  it("renders without crashing", () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole("button")).toBeInTheDocument();
  });
});

2. Text Content Tests (from lockfile)

// Values pulled directly from design-tokens.lock.json textContent
it("displays correct heading text", () => {
  render(<HeroSection />);
  expect(screen.getByText("Build faster with AI")).toBeInTheDocument();
});

it("displays correct subheading", () => {
  render(<HeroSection />);
  expect(screen.getByText("Ship production apps in days, not months")).toBeInTheDocument();
});

it("displays correct CTA text", () => {
  render(<HeroSection />);
  expect(screen.getByRole("button", { name: "Get Started" })).toBeInTheDocument();
});