Add unit tests for renderKenBurnsFrame pan/zoom maths

Open Beginner friendly
  • Is something wrong?
#52 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
frontend, testing-qa

Research direction

Start with frontend/src/engine/ken-burns.ts, especially renderKenBurnsFrame at lines 32-76 and the preset definitions at lines 100-125. Add frontend/src/engine/ken-burns.test.ts using a fake context and fake image, then run cd frontend && npx vitest run src/engine/ken-burns.test.ts. Done means the specified drawImage and clearRect assertions pass, including clamping and the wide-image case, and a changelog fragment is added under changelog.d/.

Written by the indexing model from the issue text.

Description

good first issue level: 1 testing

What is wrong / what to do
renderKenBurnsFrame decides where every slideshow image is drawn in an exported video, and it has no tests. It is a pure function of its arguments, so it can be tested without a real canvas: pass a fake context object with clearRect and drawImage as vi.fn(), and a fake image { width, height }. Add ken-burns.test.ts that checks the drawImage arguments for known inputs.

Where in the code

  • frontend/src/engine/ken-burns.ts:32-76 — renderKenBurnsFrame
  • frontend/src/engine/ken-burns.ts:41 — t is clamped to [0, 1] before easing
  • frontend/src/engine/ken-burns.ts:100-125 — KB_PRESETS

How to reproduce, or the test command

cd frontend && npx vitest run src/engine/ken-burns.test.ts

Done when

  • With a 1000x1000 canvas and a 1000x1000 image, KB_PRESETS['zoom-in'] at t = 0 calls drawImage(img, 0, 0, 1000, 1000), and at t = 1 calls drawImage(img, -100, -100, 1200, 1200)
  • t = -0.5 produces the same drawImage arguments as t = 0, and t = 1.5 the same as t = 1 (clamping)
  • clearRect(0, 0, canvasWidth, canvasHeight) is called once per frame
  • A wide image (e.g. 2000x1000) on a square canvas fills the canvas height (drawH === canvasHeight * scale)
  • Tests added or updated, and the command above passes
  • Changelog fragment in changelog.d/
Dominant language
TypeScript
Stars
0
Forks
3
Avg merge
1d 4h
Merged PRs (30d)
5

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from BeyondITL/contentine-create

All issues in BeyondITL/contentine-create

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.