From 09c96b6eb3be6c90205cef7fd8620ba475ce2cbb Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Fri, 5 Jul 2024 15:28:41 +0200
Subject: [PATCH 1/3] test: add visual tests

---
 .../tag/tag-group/tag-group.visual.spec.ts    | 44 +++++++++++++
 src/elements/tag/tag/tag.visual.spec.ts       | 63 +++++++++++++++++++
 2 files changed, 107 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..f057e5882e
--- /dev/null
+++ b/src/elements/tag/tag-group/tag-group.visual.spec.ts
@@ -0,0 +1,44 @@
+import { html, nothing, type TemplateResult } 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`, () => {
+  const longLabel = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, ultricies in tincidunt quis, mattis eu quam.`;
+  const template = (size: string, hasLongLabel = false): TemplateResult => html`
+    <sbb-tag-group size="${size}">
+      ${hasLongLabel
+        ? html`<sbb-tag checked amount="123" icon-name="pie-small">Label ${longLabel}</sbb-tag>`
+        : nothing}
+      ${repeat(
+        new Array(5),
+        (_, i) => html`
+          <sbb-tag ?checked="${!hasLongLabel && i === 0}" amount="123" icon-name="pie-small">
+            Label ${i}
+          </sbb-tag>
+        `,
+      )}
+    </sbb-tag-group>
+  `;
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const size of ['s', 'm']) {
+      it(
+        `size=${size} ${visualDiffDefault.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template(size));
+        }),
+      );
+
+      it(
+        `size=${size} label=ellipsis`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template(size, true));
+        }),
+      );
+    }
+  });
+});
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
+            >
+          `);
+        }),
+      );
+    });
+  });
+});

From a9a4766c7d1d0f9e54f605262282181d988bbcbc Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Mon, 8 Jul 2024 12:30:33 +0200
Subject: [PATCH 2/3] fix: review

---
 .../tag/tag-group/tag-group.visual.spec.ts    | 44 +++++++------------
 1 file changed, 17 insertions(+), 27 deletions(-)

diff --git a/src/elements/tag/tag-group/tag-group.visual.spec.ts b/src/elements/tag/tag-group/tag-group.visual.spec.ts
index f057e5882e..3d27759e13 100644
--- a/src/elements/tag/tag-group/tag-group.visual.spec.ts
+++ b/src/elements/tag/tag-group/tag-group.visual.spec.ts
@@ -1,4 +1,4 @@
-import { html, nothing, type TemplateResult } from 'lit';
+import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
@@ -7,36 +7,26 @@ import '../tag.js';
 import './tag-group.js';
 
 describe(`sbb-tag-group`, () => {
-  const longLabel = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, ultricies in tincidunt quis, mattis eu quam.`;
-  const template = (size: string, hasLongLabel = false): TemplateResult => html`
-    <sbb-tag-group size="${size}">
-      ${hasLongLabel
-        ? html`<sbb-tag checked amount="123" icon-name="pie-small">Label ${longLabel}</sbb-tag>`
-        : nothing}
-      ${repeat(
-        new Array(5),
-        (_, i) => html`
-          <sbb-tag ?checked="${!hasLongLabel && i === 0}" amount="123" icon-name="pie-small">
-            Label ${i}
-          </sbb-tag>
-        `,
-      )}
-    </sbb-tag-group>
-  `;
-
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
     for (const size of ['s', 'm']) {
       it(
-        `size=${size} ${visualDiffDefault.name}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template(size));
-        }),
-      );
-
-      it(
-        `size=${size} label=ellipsis`,
+        `size=${size}`,
         visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template(size, true));
+          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>
+          `);
         }),
       );
     }

From 5fc99ae79e448d260cb6e01f8f4685dc52a73dcf Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Mon, 8 Jul 2024 12:48:30 +0200
Subject: [PATCH 3/3] fix: typo

---
 src/elements/tag/tag-group/tag-group.visual.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/tag/tag-group/tag-group.visual.spec.ts b/src/elements/tag/tag-group/tag-group.visual.spec.ts
index 3d27759e13..0a0b0600dd 100644
--- a/src/elements/tag/tag-group/tag-group.visual.spec.ts
+++ b/src/elements/tag/tag-group/tag-group.visual.spec.ts
@@ -13,7 +13,7 @@ describe(`sbb-tag-group`, () => {
         `size=${size}`,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(html`
-            <sbb-tag-group size="${size}">
+            <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.