Setup Storybook and Visual Regression Testing environment

[kyasbal]

Context

As the frontend application grows, ensuring UI consistency and preventing visual regressions across components is becoming critical. We need a dedicated environment for developing components in isolation and a mechanism to verify visual changes locally.

Objectives

• Integrate Storybook: To allow developers to build and test Angular components in isolation.
• Establish Visual Regression Testing (VRT): To automatically detect visual changes by comparing screenshots against "Golden" images stored in the repository.

Tasks

1. Storybook Setup

• Install Storybook for Angular (npx storybook@latest init).
• Configure Storybook to load global styles, SCSS variables, and Angular Material theme.
• Configure tsconfig.json and build scripts if necessary.
• Add a few example stories for existing dumb components.

2. VRT Environment Setup (Storycap + reg-suit/reg-cli)

• Install Storycap to capture screenshots from Storybook.
• Configure the VRT tool (e.g., reg-cli or reg-suit with local backend) to compare captured screenshots with existing "Golden" images stored in the repository.
• Set the Golden Image directory to web/vrt-golden.
• Add rules to Makefile for the VRT workflow:
  • make watch-storybook: Start the Storybook development server.
  • make test-web-vrt: Capture screenshots and verify against Golden images.
  • make test-web-vrt-update: Capture screenshots and update/overwrite the Golden images (approve changes).

Acceptance Criteria

• make watch-storybook starts the Storybook server successfully with correct styling.
• make test-web-vrt correctly reports differences when UI changes are made compared to the committed Golden images in web/vrt-golden.
• make test-web-vrt-update updates the Golden images in web/vrt-golden.