Skip to content

qa-guide.md

Latest commit

 

History

History
114 lines (82 loc) · 4.16 KB

qa-guide.md

File metadata and controls

114 lines (82 loc) · 4.16 KB
Raw

GoodWidget QA Guide

Use this guide for pre-deployment QA with Storybook being the main review environment. Follow the QA-Checklist

Setup

Make sure you are on the branch where you are QA'ing for. Most of the time this is the branch where a pull-request is created on. If not, a specific branch will be defined by the QA bounty

pnpm install
pnpm build
pnpm storybook

Open http://localhost:6006.

If you need to refresh the automated evidence:

pnpm test:storybook
pnpm test:demo <what tests to run>

pnpm test:demo tests <-- run all tests pnpm test:demo tests/design-system <-- run all design system, primitives and theme tests pnpm test:demo tests/widgets <-- run all widgets tests pnpm test:demo tests/widgets/ <-- only run tests for a specific widget.

Storybook Structure

  • Start Here/: orientation pages.
  • Integrators/: embedding and theming guides.
  • Design System/: primitives plus theming references.
  • Widgets/: widget showcase stories and guides.
  • QA/: deterministic fixture stories used for automation and hard-to-reach states.

Fixture / State Meanings

  • InjectedWallet: uses the browser wallet (window.ethereum). Use this to verify real injected-wallet behavior in the browser, human-testing.
  • CustodialLocalFixture: uses the local test private key fixture. Use this for deterministic manual QA and Playwright coverage.

Design-system stories

  • Design System/Primitives/*: verify layout, text, spacing, and visible interactions.
  • Design System/Theming/*: verify overrides still apply correctly and do not break readability or hierarchy.

Playwright Test Structure Alignment

  • tests/design-system/: tests for stories under stories/design-system/.
  • tests/widgets/<widget-name>/: tests for stories under stories/<widget-name>/.
  • Screenshot evidence files:
  • tests/design-system/test-results/
  • tests/widgets/<widget-name>/test-results/

QA Checklist

When applying for a QA bounty, make sure the bounty includes well defined test cases/states and flows. if any of them are not clear, please discuss and ask questions before starting testing.

The expected test flow:

  1. Open the PR.
  2. Read the issue / acceptance criteria.
  3. Confirm the PR includes the latest Playwright screenshots.
  4. Confirm the PR includes playwright tests when new widgets are added, or existing widgets are updated with new state and flows.

Automated screenshots alone are just evidence, not a replacement for manual checking. Therefor, we expect QA as part of the bounty to:

  1. load locally the branch of the pull-request and run storybook to test the widget/states and flows.
  2. once everything is manually confirmed verify if the tests include accurately the expected flows and states
  3. QA role is not fixing things, its producing a report on your findings. QA Report Template

For manual testing verify sure each changed story/widget:

  • Confirm the story opens without console/runtime errors.
  • Compare the rendered state to the PR screenshots.
  • Verify the expected CTA, copy, and visible state.
  • Check basic layout at a narrow (mobile) width and a normal desktop width.
  • If the story is interactive, follow the primary action flow and test the different states and confirm the result is sensible.
  • Note anything that is visually broken, misleading, stuck, or inconsistent with the PR evidence or original bounty specification.

QA Report Template

PR: Tester: Date:

Findings

  • QA Report
    Env: [Browser / OS / Wallet / Network]
    Branch: [name or commit]
  • Tests Scenario's to test are provided by the QA bounty instructions. Any additional flows that you think are missing, or bugs you find outside of the scenarios described. please follow the QA bug-report
| Scenario | Expected | Actual | ✅/❌ |
| -------- | -------- | ------ | --- |
|          |          |        |     |
  • Bugs: [# / None]
  • Verdict: Pass / Fail / Minor issues
  • Evidence: [links,screenshots,screen-recordings etc]