This document provides a comprehensive, practical guide for managing quality assurance (QA) of an AI‑assisted React application when automated testing is out of scope due to project size and budget. It establishes a specification‑anchored, evidence‑driven QA philosophy that treats the live reference application as the ground‑truth and the functional specification as the authority on intent. A detailed build‑test cycle is defined for each feature module: pre‑build spec review, AI code generation, developer self‑review, manual test execution, side‑by‑side reference app comparison, defect logging, and re‑testing before moving on. Non‑negotiable human review checkpoints are enumerated (business‑logic gates, API integration, authentication/session handling, error‑state handling, reference‑app parity, and developer architectural review). The guide catalogs the most common AI‑generated React failure modes—state‑management bugs, hook rule violations, async handling errors, null/boundary blindness, hallucinated dependencies, responsive layout failures, missing error states, and convention inconsistencies—and maps them to targeted test cases. Three structured manual testing passes are prescribed per feature: functional parity (spec‑driven), reference‑app comparison (behaviour‑driven), and exploratory testing (experience‑driven). For government‑funded projects, a full suite of documentation artefacts is required to demonstrate process transparency: test strategy, requirements traceability matrix (RTM), test execution log, defect register, QA decision record, test completion/sign‑off report, and a data‑integrity attestation for each data‑display component. The guide then focuses on the NVT Long Term Yield Reporter (LTYR), outlining its high‑risk feature areas (colour‑coded yield tables, MET prediction matrix, multi‑location averaging, filter combinations, report‑type toggles, align‑graph, sliders, and tab navigation). It defines precise QA focus points such as colour‑threshold boundary testing, prediction‑toggle integrity, percentage‑of‑site‑mean‑yield calculations, dynamic ranking, and consistent data display across views. A reference‑app comparison protocol using a fixed, reproducible dataset is provided to eliminate variability. For the migration to React, the document prescribes an audit‑first approach, a component hierarchy (including a pure `YieldCell` component), and state‑management strategies (URL‑query‑string state, Zustand store, TanStack Query for server data). It details implementation of the colour‑coded cell, multi‑location averaging using Sets and `useMemo`, and a sequenced migration plan (static table → filters → derived state → chart). The Strangler Fig pattern is presented as the preferred incremental migration strategy, with phases (intercept, strangle, retire), an anti‑corruption layer, and feature‑flag usage to control rollout and provide rollback paths, all of which support the required audit trail for government transparency. The document concludes with a curated list of external references on AI‑generated code quality, manual testing best practices, and migration patterns.
Topics
Specification‑Anchored QA Philosophy for AI‑Assisted React
Establishes a QA mindset that treats the functional spec as the authority and the live reference app as ground‑truth, emphasizing human reviewer judgment over automated tools.
Feature‑Module Build‑Test Cycle
Step‑by‑step workflow for each feature: pre‑build spec review, AI code generation, developer self‑review, manual test execution, reference comparison, defect logging, and re‑test before proceeding.
Non‑Negotiable Human Review Checkpoints
Critical gates where expert human validation is mandatory: business‑logic, API integration, authentication/session, error handling, reference parity, and developer architectural review.
Common AI‑Generated React Failure Modes
Catalog of typical defects in AI‑produced code—state bugs, hook violations, async mishandling, null edge cases, hallucinated imports, responsive layout errors, missing error states, and convention drift.
Three‑Pass Manual Testing Framework
Defines functional parity (spec‑driven), reference‑app comparison (behaviour‑driven), and exploratory testing (experience‑driven) as sequential testing passes per module.
Government Transparency Documentation Suite
Required artefacts for GRDC/Australian government projects: test strategy, RTM, execution log, defect register, QA decision record, sign‑off report, and data‑integrity attestation.
NVT Long Term Yield Reporter QA Risk Matrix
Breakdown of high‑risk feature areas (colour‑coded tables, prediction matrix, multi‑location averaging, filters, toggles, charts, sliders, tabs) with associated QA focus points.