Project Docs

Practice Labs QA

Goal

Verify the JavaScript, TypeScript, and React practice labs as one learning workflow across editor behavior, execution output, snippets, themes, and responsive layouts.

JavaScript Lab

  1. Open /practice/javascript.
  2. Run the starter code and confirm console output appears with a completed run line.
  3. Use Tab, Shift + Tab, Alt + ArrowDown, Ctrl/Command + Enter, and Ctrl/Command + L.
  4. Copy code and console output, including the empty-console state.
  5. Trigger noisy output and confirm caps/truncation remain readable.
  6. Save, load, and delete a JavaScript snippet.

TypeScript Lab

  1. Open /practice/typescript.
  2. Run valid TypeScript and confirm compile feedback appears before runtime output.
  3. Run invalid TypeScript and confirm runtime execution is blocked.
  4. Copy code, TypeScript feedback, and console output separately.
  5. Save, load, and delete a TypeScript snippet.
  6. Confirm JavaScript and React snippets do not appear in the TypeScript list.

React Lab

  1. Open /practice/react.
  2. Load each starter example and render it.
  3. Interact with preview controls for state, events, filters, conditionals, and lists.
  4. Confirm console output updates during preview interactions.
  5. Save, load, and delete a React snippet.
  6. Edit the editor, try loading another snippet, cancel once, then accept once.
  7. Paste a long snippet over the source cap and confirm the error is clear.
  8. Trigger many logs and confirm the console cap notice appears once.

Theme And Responsive

  1. Toggle light and dark mode from the sidebar.
  2. Confirm the toggle is compact, icon-only, animated, and still keyboard reachable.
  3. Check laptop, tablet, and mobile widths.
  4. Confirm editor, console, preview, snippet cards, inputs, and buttons stay readable in both themes.
  5. Confirm action buttons wrap without text overlap.

Storage Recovery

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

  1. Clear the key and reload each lab.
  2. Set the key to invalid JSON and reload.
  3. Set the key to a wrong version and reload.
  4. Set a mixed list with valid JavaScript, TypeScript, React, and invalid snippets.
  5. Confirm each lab only renders snippets for its own language.

Regression Commands

npm run typecheck
npm run test
npm run build

Pass Criteria

  • All three labs can write, run or render, inspect output, copy, save, load, and delete.
  • Dark mode has no white-card regressions.
  • Mobile layout remains usable without overlapping buttons or unreadable text.
  • Storage failures do not break the page.