Q416: Implementation Drill Editor Transform Regression Tests

What Interviewers Want To Evaluate

This drill tests whether you can protect editor behavior with focused regression checks.

The practice ground already supports indentation, outdent, and line duplication.

Those shortcuts look small, but they are selection-sensitive.

A senior frontend answer should explain how to test the behavior without relying only on manual typing.

Short Interview Answer

I would test editor transforms as pure functions.

Each transform should receive the current text, the current selection start, and the current selection end.

It should return the next text plus the next selection range.

The component can then stay responsible for keyboard events and textarea focus.

The tests should cover single-line, multi-line, empty, mixed indentation, selected block, and cursor-at-boundary cases.

Why These Tests Matter

Editor bugs are often quiet.

The UI may still render.

The shortcut may still appear to work.

But a user can lose selection, duplicate the wrong block, or outdent too much.

That creates a poor practice experience.

For a learning tool, trust matters.

If a learner is practicing output prediction or TypeScript narrowing, the editor should not become the distraction.

Test Shape

Use a small table style:

name
input text
selection start
selection end
expected text
expected start
expected end

This makes cases easy to scan.

The important part is that tests assert cursor movement, not only resulting text.

Indent Cases

Cover:

empty editor
single line cursor
single selected line
multi-line selected block
selection beginning in the middle of a line
selection ending before newline
selection ending at file end

Indent should add two spaces to each selected line.

The selection should still point to the intended edited block.

Outdent Cases

Cover:

line with two spaces
line with one tab
line without indentation
mixed selected lines
blank line in selected block
cursor inside an indented line
selection across partial lines

Outdent should remove only one indentation unit per line.

It should not delete meaningful characters.

It should not move the cursor before the selected line start.

Duplicate Cases

Cover:

duplicate current line
duplicate first line
duplicate last line
duplicate selected block
duplicate block with blank line
duplicate block without trailing newline

For a selected block, the duplicated copy should become the selected range.

For a cursor-only duplicate, the cursor should land on the duplicated line.

Component Boundary

The React component should be tested differently.

It should verify that:

Tab calls indent
Shift Tab calls outdent
Alt Down calls duplicate
Ctrl Enter runs
Ctrl L clears console
selection is restored after state update

The heavy string behavior does not need to live in component tests.

Keep unit tests small and component tests behavioral.

Manual QA Still Matters

Manual checks should include:

keyboard only editing
copy after transform
run after transform
theme switch after transform
mobile stacked layout
TypeScript page using the same shortcuts

Unit tests prove transform logic.

Manual QA proves the user workflow.

Both are useful.

Common Mistakes

• Testing only the happy path.
• Forgetting selection assertions.
• Mixing keyboard-event tests with pure string tests.
• Assuming cursor behavior is obvious.
• Ignoring selected multi-line blocks.
• Treating JavaScript and TypeScript editors as separate implementations.

Final Mental Model

Editor transform tests should protect:

text correctness
selection correctness
shared behavior
keyboard workflow
future snippet safety

The goal is a boring editor core that learners can rely on.