test(sbb-tag): add visual tests (#2898)

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>
+          `);
+        }),
+      );
+    }
+  });
+});

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
+            >
+          `);
+        }),
+      );
+    });
+  });
+});