Project Docs

Saved Snippets QA

Goal

Verify that saved snippets support the practice loop without risking user code, breaking mobile layout, or weakening dark-mode readability.

JavaScript Checks

  1. Open /practice/javascript.
  2. Edit the starter code and save it with a custom title.
  3. Confirm the snippet appears in the JavaScript snippets list.
  4. Save another snippet without a title and confirm a generated JavaScript title appears.
  5. Load a snippet when the editor has no unsaved changes.
  6. Edit the editor, load a different snippet, cancel the confirmation, and confirm current code remains.
  7. Load again and accept the confirmation.
  8. Delete a snippet, cancel once, then delete again and confirm.
  9. Delete all JavaScript snippets and confirm the empty state returns.

TypeScript Checks

  1. Open /practice/typescript.
  2. Save a valid TypeScript example.
  3. Confirm JavaScript snippets do not appear in the TypeScript list.
  4. Load the TypeScript snippet and run it.
  5. Confirm the TypeScript feedback panel still separates compiled feedback from runtime console output.
  6. Save an invalid TypeScript example as a snippet, load it, run it, and confirm feedback shows an error before runtime output.
  7. Delete the TypeScript snippets and confirm the empty state returns.

Storage Recovery Checks

Use DevTools Application storage for learning-studio.practice-snippets.v1.

  1. Clear the key and reload a practice page.
  2. Set the key to invalid JSON and reload.
  3. Set the key to a wrong version and reload.
  4. Set the key to a mixed list with one valid snippet and one invalid snippet.
  5. Confirm the page stays usable and only valid snippets render.

Responsive Checks

Check laptop, tablet, and mobile widths.

  • The editor and console remain usable.
  • The snippets panel stays secondary.
  • The title input is full width on mobile.
  • Save, load, and delete buttons wrap cleanly.
  • Long snippet titles do not overflow cards.
  • Code previews remain compact.

Theme Checks

Check light, dark, and system themes.

  • Snippet panel background uses app tokens.
  • Input text and placeholder remain readable.
  • Empty state border is visible.
  • Code previews remain readable.
  • Status messages remain readable.
  • Delete and load buttons keep contrast.

Regression Checks

Run:

npm run test
npm run typecheck
npm run build

Manual smoke:

  • Copy code still works.
  • Copy console still works.
  • Copy TypeScript feedback still works.
  • Tab and Shift Tab still edit code correctly.
  • Alt Down still duplicates line or selected block.
  • Console caps still show truncation notice.