Testing

IntentCSS uses automated testing to ensure prompts generate predictable, stable, and correct output across releases.

Overview

Testing is a core part of IntentCSS.

Every feature should be covered by tests before being released.

The goal is simple:

The same prompt should always generate the same output.

For example:

BASH
intentcss generate --prompt "large red button"

should consistently return:

TEXT
rounded-lg bg-red-600 px-6 py-3 text-lg text-white hover:bg-red-700

regardless of platform or environment.

Test Framework

IntentCSS uses:

TEXT
Vitest

Vitest provides:

  • Fast execution
  • TypeScript support
  • Watch mode
  • Snapshot support
  • Modern ESM compatibility

Running Tests

Run all tests:

BASH
npm test

Example:

TEXT
✓ tests/button.test.ts
✓ tests/typo.test.ts
✓ tests/engine.test.ts

Test Files  3 passed
Tests       16 passed

Watch Mode

Vitest automatically enters watch mode during development.

BASH
npm test

Example:

TEXT
PASS  Waiting for file changes...
press h to show help
press q to quit

Whenever a file changes, affected tests are rerun automatically.

Current Test Structure

TEXT
tests/
├── button.test.ts
├── typo.test.ts
└── engine.test.ts

Button Tests

File:

TEXT
tests/button.test.ts

Purpose:

  • Verify button generation
  • Verify modifiers
  • Verify color handling

Example:

TS
it("generates a red button", () => {
    const result =
        ButtonIntent.generate({
            prompt: "red button",
            target: "tailwind"
        });

    expect(result).toContain(
        "bg-red-600"
    );
});

Current coverage:

  • Default buttons
  • Color modifiers
  • Large buttons
  • Pill buttons
  • Shadow buttons

Typo Tests

File:

TEXT
tests/typo.test.ts

Purpose:

  • Verify typo correction
  • Verify prompt normalization

Example:

TS
expect(
    correctTypo("purpl buton")
).toBe("purple button");

Current coverage:

  • Common misspellings
  • Color corrections
  • Component corrections

Engine Tests

File:

TEXT
tests/engine.test.ts

Purpose:

  • Verify intent detection
  • Verify generation pipeline
  • Verify prompt matching

Example:

TS
expect(
    generate("green button")
).toContain("bg-green-600");

Current coverage:

  • Intent matching
  • Prompt parsing
  • Generation flow

Example Test Run

Current output:

TEXT
✓ tests/button.test.ts (6 tests)
✓ tests/typo.test.ts (5 tests)
✓ tests/engine.test.ts (5 tests)

Test Files  3 passed (3)
Tests       16 passed (16)

This verifies that all currently implemented features behave as expected.

Writing New Tests

Whenever a new intent is added:

TEXT
hero.ts
sidebar.ts
modal.ts
footer.ts

a matching test file should also be added.

Example:

TEXT
tests/hero.test.ts
tests/sidebar.test.ts
tests/modal.test.ts

Testing New Modifiers

Whenever a modifier is introduced:

TEXT
glass
shadow
rounded
dark
responsive

add dedicated test coverage.

Example:

TS
it("supports glass cards", () => {
    const result =
        CardIntent.generate({
            prompt: "glass card",
            target: "tailwind"
        });

    expect(result).toContain(
        "backdrop-blur-md"
    );
});

Testing Philosophy

IntentCSS follows a simple testing philosophy:

Test Behavior

Focus on outputs rather than implementation details.

Good:

TS
expect(result).toContain(
    "bg-red-600"
);

Avoid:

TS
expect(internalVariable)

Test Public APIs

Tests should verify what users experience.

Example:

BASH
intentcss generate --prompt "red button"

instead of testing unrelated internal implementation details.

Keep Tests Predictable

Tests should:

  • Never depend on external services
  • Never depend on network access
  • Never depend on environment state

This ensures reliable execution across all machines.

Coverage Goals

Future releases aim to provide coverage for:

AreaStatus
Button Intent✅
Typo Correction✅
Engine✅
Card Intent⏳
Form Intent⏳
Navbar Intent⏳
Modal Intent⏳
Sidebar Intent⏳
Hero Intent⏳
Footer Intent⏳

Continuous Integration

Future releases may automatically run tests through GitHub Actions.

Example workflow:

TEXT
Push
  ↓
Install Dependencies
  ↓
Run Tests
  ↓
Report Results

This ensures broken code never reaches production releases.

Best Practices

Before submitting a pull request:

BASH
npm test

Verify:

  • All tests pass
  • No regressions exist
  • New features include test coverage

Contributions that include tests are strongly encouraged.

Next Steps

Continue with:

  • Contributing
  • Development Guide
  • Architecture
  • Supported Intents