Q397: QA Verification Drill Testing The Learning Studio Practice Workflow

What Interviewers Want To Evaluate

This drill tests whether you can verify a workflow end to end after implementing UI and editor behavior.

Senior frontend engineers do not stop at "it compiles."

They check the real user path across desktop, mobile, keyboard, theme, errors, and persistence.

Short Interview Answer

For the practice workflow, I would verify that a learner can open JS or TS practice, write code, use editor shortcuts, run the code, inspect console output, copy code and output, clear results, recover from errors, switch themes, and return later with drafts preserved. I would cover this with a mix of unit tests for transforms, component tests for controls, and manual or E2E checks for the full workflow.

Workflow To Verify

Core path:

open practice page
type code
indent code
duplicate line
run code
read output
copy code
copy output
clear console
switch theme
return later

This is the product loop.

QA should follow it directly.

Desktop Checks

Verify:

editor and console are side by side
both panels have enough height
toolbar does not wrap awkwardly
copy buttons are visible
console output scrolls
long code lines remain readable
theme toggle remains reachable

Desktop is where the practice ground should feel most powerful.

Mobile Checks

Verify:

editor stacks above console
buttons remain tappable
text does not overflow controls
keyboard does not hide important actions
console can be reached without confusion
read-more cards remain clear
sidebar navigation remains usable

Mobile may not be the primary coding surface, but it should not feel broken.

Keyboard Checks

Verify:

focus order
Tab behavior inside editor
Shift Tab behavior
Alt Down behavior
Ctrl Enter run
Ctrl L clear
copy buttons reachable
focus ring visible

Keyboard behavior is part of the feature, not an extra.

Error Checks

Use snippets that cause:

syntax error
runtime throw
promise rejection
infinite loop
large console output
empty editor run
clipboard failure
invalid saved snippet storage

Good QA includes unfriendly inputs.

Learning tools should help users recover from mistakes.

Theme Checks

Verify both themes:

editor contrast
console contrast
error color contrast
button contrast
card action contrast
status pill contrast
focus ring contrast

The new theme system makes this especially important.

A beautiful dark mode that hides errors is not good enough.

Test Layer Plan

Use:

unit tests for text transforms
component tests for copy buttons and feedback
integration tests for run and console capture
E2E smoke test for JS practice
E2E smoke test for TS practice
manual visual checks for responsive layout

Do not put every keyboard edge in E2E.

Put deterministic string behavior in unit tests.

Regression Checklist

Before release:

npm run typecheck
npm run build
open JS practice
open TS practice
run one happy path
run one error path
toggle theme
check mobile width
check latest batch card

This is a practical release checklist.

It is short enough to actually use.

Common Mistakes

• Treating build success as workflow success.
• Testing only desktop.
• Testing only happy-path code.
• Forgetting keyboard shortcuts after UI changes.
• Not testing dark theme contrast.
• Not checking clipboard failure.
• Testing transform behavior only manually.
• Missing localStorage migration edge cases.

Final Mental Model

Practice workflow QA is:

real learner loop
desktop and mobile
keyboard behavior
errors and recovery
theme contrast
right test layer
repeatable release checklist

Verification should make shipping feel calmer.