From a8b26ffe1c80f6635f0a74abdfed8e720d0670d9 Mon Sep 17 00:00:00 2001
From: Davide Mininni
 <101575400+DavideMininni-Fincons@users.noreply.github.com>
Date: Mon, 8 Jul 2024 15:25:13 +0200
Subject: [PATCH] test(sbb-tag): add visual tests (#2898)

---
 .../tag/tag-group/tag-group.visual.spec.ts    | 34 ++++++++++
 src/elements/tag/tag/tag.visual.spec.ts       | 63 +++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 src/elements/tag/tag-group/tag-group.visual.spec.ts
 create mode 100644 src/elements/tag/tag/tag.visual.spec.ts

diff --git a/src/elements/tag/tag-group/tag-group.visual.spec.ts b/src/elements/tag/tag-group/tag-group.visual.spec.ts
new file mode 100644
index 0000000000..0a0b0600dd
--- /dev/null
+++ b/src/elements/tag/tag-group/tag-group.visual.spec.ts
@@ -0,0 +1,34 @@
+import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../tag.js';
+import './tag-group.js';
+
+describe(`sbb-tag-group`, () => {
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const size of ['s', 'm']) {
+      it(
+        `size=${size}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-tag-group size=${size}>
+              <sbb-tag checked amount="123" icon-name="pie-small">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit,
+                ultricies in tincidunt quis, mattis eu quam.
+              </sbb-tag>
+              ${repeat(
+                new Array(5),
+                (_, i) =>
+                  html`<sbb-tag ?checked="${i === 0}" amount="123" icon-name="pie-small">
+                    Label ${i}
+                  </sbb-tag>`,
+              )}
+            </sbb-tag-group>
+          `);
+        }),
+      );
+    }
+  });
+});
diff --git a/src/elements/tag/tag/tag.visual.spec.ts b/src/elements/tag/tag/tag.visual.spec.ts
new file mode 100644
index 0000000000..1a60569f7d
--- /dev/null
+++ b/src/elements/tag/tag/tag.visual.spec.ts
@@ -0,0 +1,63 @@
+import { html, nothing } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffStandardStates,
+} from '../../core/testing/private.js';
+
+import './tag.js';
+
+describe(`sbb-tag`, () => {
+  const cases = {
+    checked: [false, true],
+    disabled: [false, true],
+  };
+
+  const visualCases = {
+    size: ['s', 'm'],
+    icon: [undefined, 'pie-small'],
+    amount: [undefined, 123],
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const visualDiffStandardState of visualDiffStandardStates) {
+      it(
+        `state=${visualDiffStandardState.name}`,
+        visualDiffStandardState.with(async (setup) => {
+          await setup.withFixture(html`<sbb-tag>Tag label</sbb-tag>`);
+        }),
+      );
+    }
+
+    describeEach(cases, ({ checked, disabled }) => {
+      it(
+        '',
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-tag ?checked=${checked} ?disabled=${disabled} icon-name="pie-small" amount="123"
+              >Tag label</sbb-tag
+            >
+          `);
+        }),
+      );
+    });
+
+    describeEach(visualCases, ({ icon, amount, size }) => {
+      it(
+        '',
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-tag
+              icon-name=${icon ? icon : nothing}
+              amount=${amount ? amount : nothing}
+              size=${size}
+              >Tag label</sbb-tag
+            >
+          `);
+        }),
+      );
+    });
+  });
+});