Volume 9

Q431: Implementation Drill Shipping Editor Transform Tests

Difficulty: SeniorFrequency: MediumAnswer time: 20-24 minutes

What Interviewers Want To Evaluate

This drill tests whether you can turn a testing plan into a practical project improvement.

The editor transform utilities are now extracted from the React component.

That makes them testable without a DOM.

The senior skill is choosing the right level of test: not too shallow, not too heavy, and directly tied to user risk.

Short Interview Answer

I would ship focused tests for the pure editor transform utilities using the project’s lightest reliable test runner.

The tests should cover indentation, outdent, duplicate-line behavior, selected blocks, and cursor positions.

I would add a normal npm run test script so future batches can verify editor behavior before shipping snippets or deeper practice-ground changes.

Why This Test Slice Matters

The practice editor supports shortcuts:

Tab
Shift Tab
Alt Down

These shortcuts alter user code.

If they break, a learner can lose time or corrupt an example.

Once saved snippets arrive, bad editor behavior becomes more expensive because it can be persisted.

Tests are a small guardrail before persistence.

Test Runner Choice

Use a low-friction runner first.

Node’s built-in test runner is enough for pure utilities:

node --test
node:assert
node:test

No browser is required.

No React testing library is required.

No snapshot is required.

The behavior is text in and text out.

What To Assert

Assert both:

result.value
result.start
result.end

Text-only tests are incomplete.

The cursor or selection position is part of the user experience.

If the transformed text is correct but the cursor jumps to the wrong place, the shortcut still feels broken.

Cases To Cover First

Start with:

single-line indent
multi-line indent
space outdent
tab outdent
unindented outdent
duplicate current line
duplicate selected block

These cover the highest-value behavior.

More cases can be added when a bug appears or snippets increase the risk.

What Not To Test Yet

Skip for now:

textarea event dispatch
browser clipboard
worker execution
visual layout
full Playwright route tests

Those are useful later.

They are not necessary for proving pure transform functions.

Keep this slice focused.

Script Contract

Add:

npm run test

The script should be fast enough that it can run alongside:

npm run typecheck
npm run build

If tests become slow, developers skip them.

The first testing habit should feel easy.

Review Criteria

A reviewer should check:

tests are deterministic
tests do not need a browser
tests assert cursor positions
tests cover selected blocks
test script is documented
typecheck still passes
build still passes

This proves the test slice is useful and low-maintenance.

Common Mistakes

  • Adding a heavy framework for three pure functions.
  • Testing only output text.
  • Forgetting selected-block duplication.
  • Forgetting tab outdent.
  • Not adding a package script.
  • Treating tests as separate from the user workflow.

Final Mental Model

Editor transform tests should be:

fast
focused
selection-aware
runner-light
ready for snippets

This is the right kind of test before persistence.