Move the export crop math into a module and test it directly

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

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
84/100
Issue type
Refactor
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, node.js
Domain
devtools, testing

Research direction

Read public/sections.mjs for the module pattern, then inspect public/demo.mjs:227-230 and test/export-crop.test.js. Move the crop calculation into public/export-geometry.mjs and have the test import it directly; retain the vertical and wide cases and add matching-ratio and zero-size cases. Done means the test has no readFile or new Function, npm test and npm run check pass, and a Chrome showcase export looks unchanged.

Written by the indexing model from the issue text.

Description

good first issue tests

test/export-crop.test.js doesn't import the code it tests. It reads public/demo.mjs as text, finds drawExportFrame by searching for strings (lines 8-12), and rebuilds the crop lines with new Function(...) (lines 15-22). A harmless refactor breaks the test: renaming scaleToCover, moving context.save(), or reformatting the drawImage call (line 33 splits its arguments on commas).

Fix direction: follow the pattern of public/sections.mjs. Create public/export-geometry.mjs with a pure function:

export function coverCrop(sourceWidth, sourceHeight, box) // -> { sourceX, sourceY, sourceW, sourceH }

Then use it in drawExportFrame (public/demo.mjs:227-230). Rewrite test/export-crop.test.js to import coverCrop and keep the existing vertical and wide cases. Add a case where the source already matches the box ratio (no crop) and one with a zero-size box.

Don't change the visual output.

Done when the test has no readFile/new Function, npm test and npm run check pass, and a Chrome export of a showcase reference looks the same as before.

Dominant language
HTML
Stars
1.2k
Forks
109
No merged PRs in 30d

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 blixvip/NullMotion

All issues in blixvip/NullMotion

Similar issues

More DevTools issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.