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.
  9. Confirm the sandbox scope note is visible and readable in light and dark mode.
  10. Confirm the preview renders inside the iframe and resets after Clear, Reset, example load, and snippet load.

Comparison Drills

  1. Open /practice/compare.
  2. Switch between all preset cards.
  3. Confirm JavaScript and TypeScript panels stay side by side on desktop and stack on mobile.
  4. Copy both code panels and confirm the copy feedback updates independently.
  5. Confirm each preset shows handbook question ids in Q000 format.
  6. Use Open JS and confirm the JavaScript console receives the preset once.
  7. Return to /practice/compare, use Open TS, and confirm the TypeScript console receives the preset once.
  8. Confirm both transferred consoles show a return panel back to the originating comparison preset.

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.
  • Comparison drills expose JS and TS versions of handbook-linked output prompts.
  • Dark mode has no white-card regressions.
  • Mobile layout remains usable without overlapping buttons or unreadable text.
  • Storage failures do not break the page.