From 6eba53852257030109900427706ed7755ac366e0 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Mon, 12 Aug 2024 11:02:27 +0200
Subject: [PATCH] fix: add visual regression tests for states

---
 .../link-list-anchor.visual.spec.ts           | 36 +++++++++++++++----
 .../fullscreen-diff/fullscreen-diff.scss      |  4 +--
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/elements/link-list/link-list-anchor/link-list-anchor.visual.spec.ts b/src/elements/link-list/link-list-anchor/link-list-anchor.visual.spec.ts
index 95bb5ef401..a8bc3abbb4 100644
--- a/src/elements/link-list/link-list-anchor/link-list-anchor.visual.spec.ts
+++ b/src/elements/link-list/link-list-anchor/link-list-anchor.visual.spec.ts
@@ -1,6 +1,14 @@
 import { html, nothing, type TemplateResult } from 'lit';
 
-import { describeEach, describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+import {
+  describeEach,
+  describeViewports,
+  visualDiffActive,
+  visualDiffDefault,
+  visualDiffFocus,
+  visualDiffHover,
+  visualRegressionFixture,
+} from '../../core/testing/private.js';
 
 import './link-list-anchor.js';
 import '../../link/block-link.js';
@@ -24,13 +32,29 @@ const listAnchor = (
 `;
 
 describe(`sbb-link-list-anchor`, () => {
-  const cases = {
-    negative: [false, true],
-    size: ['xs', 's', 'm'],
-  };
+  const cases = { negative: [false, true] };
 
   describeViewports({ viewports: ['zero', 'medium', 'wide'] }, () => {
-    describeEach(cases, ({ negative, size }) => {
+    describeEach(cases, ({ negative }) => {
+      let root: HTMLElement;
+
+      beforeEach(async function () {
+        root = await visualRegressionFixture(listAnchor(negative, 's', true), {
+          backgroundColor: negative ? 'var(--sbb-color-charcoal)' : undefined,
+        });
+      });
+
+      for (const state of [visualDiffActive, visualDiffHover, visualDiffFocus]) {
+        it(
+          state.name,
+          state.with((setup) => {
+            setup.withSnapshotElement(root);
+          }),
+        );
+      }
+    });
+
+    describeEach({ ...cases, size: ['xs', 's', 'm'] }, ({ negative, size }) => {
       it(
         'title',
         visualDiffDefault.with(async (setup) => {
diff --git a/src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.scss b/src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.scss
index ded25e8815..3de9ddf855 100644
--- a/src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.scss
+++ b/src/visual-regression-app/src/components/test-case/image-diff/fullscreen-diff/fullscreen-diff.scss
@@ -15,7 +15,7 @@
 }
 
 .app-scroll-container {
-  @include sbb.scrollbar;
-
   overflow: auto;
+
+  @include sbb.scrollbar;
 }