Component Driven Development and the QA Process

By admin
Documentation Verification

Since documentation is typically written for each component, it can serve as a roadmap which guides the

QA
LAW

process. This can also work in reverse, where the

QA
LAW

process helps to round-out existing documentation and fill in any gaps. This provides further opportunities for things like documenting admin or editor help text and conducting efficient handoffs to client teams.


Issues Identified & Resolved
ORG

Earlier

Components can be iteratively tested as they are being built. They can also be incrementally tested throughout a sprint or project, instead of waiting until the end. This often leads to identifying issues earlier in the development process, fewer bugs, and a higher quality product in the end.

Less Time Required for Visual QA

Visual regression testing, particularly at the component level, can help to identify any inconsistencies in components when introducing new features, enhancements, or bug fixes.

Chromatic
ORG

offers automated visual testing for codebases using

Storybook
WORK_OF_ART

, and there’s a new Visual Tests add-on (currently in private alpha) which brings this right into

Storybook
WORK_OF_ART

itself. Additionally, BackstopJS is an open source option which we recently used to quickly identify any breaking visual changes during a Craft 4 upgrade of

the Human Rights Campaign
ORG

website.

Improved Collaboration

Component driven development, enhanced by an iterative process, can significantly improve collaboration across teams. Working at the component level allows for parallel work streams across

UX
LOC

, design, and development by creating shorter feedback loops and quicker identification of implementation feedback. This allows for rapid iterations on things like data models or design, particularly when looking to address stakeholder feedback or concerns.

Adopting a component driven development mindset across our project teams has greatly benefited our ability to produce manageable sites that simplify long-term maintenance and scalability. This approach has also helped us to decrease the amount of time we spend on

QA
LOC

and increase our internal collaboration. The efficiencies gained in this process ultimately save time and enable accomplishing more at a higher quality in a given timeline; and that’s a good thing for any project team!