Q441: Implementation Drill Saved Snippets Manual QA Script

What Interviewers Want To Evaluate

This drill tests whether you can verify a persistence feature through real learner workflows.

Saved snippets touch editor state, localStorage, copy flows, loading, deletion, theme styling, and mobile layout.

Automated tests cover the storage utility.

Manual QA should prove the browser workflow still feels trustworthy.

Short Interview Answer

I would write a saved-snippets QA script that covers JavaScript saves, TypeScript saves, generated titles, custom titles, load confirmation, delete confirmation, empty states, invalid localStorage recovery, dark mode, mobile layout, and existing editor shortcuts.

The script should be repeatable and specific enough that another developer can run it before a release.

JavaScript Save Flow

Check:

open /practice/javascript
edit starter code
enter title
save current
verify card appears
verify code preview appears
verify status message appears

Then save without a title.

Expected:

generated JavaScript snippet title
newest snippet appears first
no console behavior changes

This proves the basic save flow.

JavaScript Load Flow

Check:

load snippet with unchanged editor
edit editor
load another snippet
cancel confirmation
load again
accept confirmation

Expected:

cancel keeps current code
accept replaces editor
status says snippet loaded
editor receives focus if practical
snippet does not auto-run

Loading should recall code, not execute it.

Delete Flow

Check:

delete snippet
cancel confirmation
delete again
accept confirmation
delete final snippet

Expected:

cancel keeps snippet
accept removes snippet
status says deleted
empty state returns after last item

Deletion is permanent in the first local slice.

The confirmation must be specific.

TypeScript Flow

Check:

open /practice/typescript
save valid TypeScript snippet
load it
run it
save invalid TypeScript snippet
load it
run it

Expected:

TypeScript snippets list is separate
valid snippet compiles and logs
invalid snippet shows TypeScript feedback error
runtime console stays separate
copy feedback still works

This verifies snippets do not break the TypeScript feedback panel.

Storage Recovery Flow

Use DevTools Application storage.

Check:

clear snippet key
set invalid JSON
set wrong version
set mixed valid and invalid snippets
reload page after each step

Expected:

page does not crash
empty state appears when data is unusable
valid snippets survive mixed data
editor remains usable

localStorage is untrusted data.

Recovery is part of the feature.

Existing Workflow Regression

Verify:

copy code
copy console
copy TypeScript feedback
Tab indent
Shift Tab outdent
Alt Down duplicate
Ctrl Enter run
Ctrl L clear console
console cap truncation notice

Saved snippets should not regress existing practice behavior.

Common Mistakes

• Testing only save and not load conflicts.
• Ignoring generated titles.
• Forgetting TypeScript snippets.
• Not testing invalid localStorage.
• Skipping mobile layout.
• Not checking old editor shortcuts after snippets ship.

Final Mental Model

Saved-snippets QA should prove:

save works
load protects current work
delete is clear
storage recovers
themes hold
practice loop still works

That is the right confidence level before final volume polish.