test: add visual tests

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

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