Corey Johnson
6e22ec9d76
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
60 lines
2.7 KiB
TypeScript
60 lines
2.7 KiB
TypeScript
import { test, expect } from "bun:test"
|
|
import { Sprite } from "./sprite"
|
|
|
|
test("Sprite renders div with correct dimensions", () => {
|
|
const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} />).toString()
|
|
expect(html).toContain('width:32px')
|
|
expect(html).toContain('height:32px')
|
|
})
|
|
|
|
test("Sprite sets background-image", () => {
|
|
const html = (<Sprite src="/warrior.png" width={32} height={32} frames={4} frameDuration={100} />).toString()
|
|
expect(html).toContain("background-image:url('/warrior.png')")
|
|
})
|
|
|
|
test("Sprite calculates background-size for horizontal strip", () => {
|
|
const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} />).toString()
|
|
expect(html).toContain('background-size:128px 32px')
|
|
})
|
|
|
|
test("Sprite generates keyframes animation", () => {
|
|
const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} />).toString()
|
|
expect(html).toContain('@keyframes sprite-')
|
|
expect(html).toContain('steps(4)')
|
|
expect(html).toContain('400ms')
|
|
})
|
|
|
|
test("Sprite keyframes animate background-position", () => {
|
|
const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} />).toString()
|
|
expect(html).toContain('from{background-position:0 0}')
|
|
expect(html).toContain('to{background-position:-128px 0}')
|
|
})
|
|
|
|
test("Sprite with columns calculates grid background-size", () => {
|
|
const html = (<Sprite src="/test.png" width={32} height={32} frames={8} frameDuration={100} columns={4} />).toString()
|
|
expect(html).toContain('background-size:128px 64px')
|
|
})
|
|
|
|
test("Sprite with columns generates grid keyframes", () => {
|
|
const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} columns={2} />).toString()
|
|
expect(html).toContain('0%{background-position:0px 0px}')
|
|
expect(html).toContain('25%{background-position:-32px 0px}')
|
|
expect(html).toContain('50%{background-position:0px -32px}')
|
|
expect(html).toContain('75%{background-position:-32px -32px}')
|
|
})
|
|
|
|
test("Sprite passes through class", () => {
|
|
const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} class="my-sprite" />).toString()
|
|
expect(html).toContain('class="my-sprite"')
|
|
})
|
|
|
|
test("Sprite passes through style", () => {
|
|
const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} style="opacity:0.5" />).toString()
|
|
expect(html).toContain('opacity:0.5')
|
|
})
|
|
|
|
test("Sprite pauses when playing is false", () => {
|
|
const html = (<Sprite src="/test.png" width={32} height={32} frames={4} frameDuration={100} playing={false} />).toString()
|
|
expect(html).toContain('animation-play-state:paused')
|
|
})
|