test: add visual tests

src/elements/link/block-link-button/block-link-button.visual.spec.ts

@@ -0,0 +1,78 @@
+import { html, nothing } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffStandardStates,
+} from '../../core/testing/private.js';
+
+import './block-link-button.js';
+
+describe(`sbb-block-link-button`, () => {
+  const iconState = {
+    iconPlacement: ['start', 'end'],
+    slotted: [false, true],
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const negative of [true, false]) {
+      for (const state of visualDiffStandardStates) {
+        it(
+          state.name,
+          state.with((setup) => {
+            setup.withFixture(
+              html`<sbb-block-link-button ?negative=${negative}
+                >Travelcards & tickets</sbb-block-link-button
+              >`,
+              {
+                backgroundColor: negative ? 'var(--sbb-color-charcoal)' : undefined,
+              },
+            );
+          }),
+        );
+      }
+    }
+
+    describeEach(iconState, ({ iconPlacement, slotted }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with((setup) => {
+          setup.withFixture(html`
+            <sbb-block-link-button
+              icon-name=${slotted ? nothing : 'chevron-small-right-small'}
+              icon-placement=${iconPlacement}
+            >
+              ${slotted
+                ? html`<sbb-icon slot="icon" name="chevron-small-left-small"></sbb-icon>`
+                : nothing}
+              Travelcards & tickets
+            </sbb-block-link-button>
+          `);
+        }),
+      );
+    });
+
+    for (const size of ['xs', 's', 'm']) {
+      it(
+        `size=${size} ${visualDiffDefault.name}`,
+        visualDiffDefault.with((setup) => {
+          setup.withFixture(
+            html`<sbb-block-link-button size=${size}>Travelcards & tickets</sbb-block-link-button>`,
+          );
+        }),
+      );
+    }
+
+    it(
+      `width=fixed ${visualDiffDefault.name}`,
+      visualDiffDefault.with((setup) => {
+        setup.withFixture(
+          html`<sbb-block-link-button icon-name="chevron-small-right-small" style="width: 200px;">
+            A lot of link text to show what happens if there is not enough space.
+          </sbb-block-link-button>`,
+        );
+      }),
+    );
+  });
+});

src/elements/link/block-link-static/block-link-static.visual.spec.ts

@@ -0,0 +1,81 @@
+import { html, nothing } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffActive,
+  visualDiffDefault,
+  visualDiffHover,
+} from '../../core/testing/private.js';
+
+import './block-link-static.js';
+
+describe(`sbb-block-link-static`, () => {
+  const iconState = {
+    iconPlacement: ['start', 'end'],
+    slotted: [false, true],
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const negative of [true, false]) {
+      for (const state of [visualDiffDefault, visualDiffActive, visualDiffHover]) {
+        it(
+          state.name,
+          state.with((setup) => {
+            setup.withFixture(
+              html` <sbb-block-link-static ?negative="${negative}"
+                >Travelcards & tickets</sbb-block-link-static
+              >`,
+              {
+                backgroundColor: negative ? 'var(--sbb-color-charcoal)' : undefined,
+              },
+            );
+          }),
+        );
+      }
+    }
+
+    describeEach(iconState, ({ iconPlacement, slotted }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with((setup) => {
+          setup.withFixture(html`
+            <sbb-block-link-static
+              icon-name="${slotted ? nothing : 'chevron-small-right-small'}"
+              icon-placement="${iconPlacement}"
+            >
+              ${slotted
+                ? html` <sbb-icon slot="icon" name="chevron-small-left-small"></sbb-icon>`
+                : nothing}
+              Travelcards & tickets
+            </sbb-block-link-static>
+          `);
+        }),
+      );
+    });
+
+    for (const size of ['xs', 's', 'm']) {
+      it(
+        `size=${size} ${visualDiffDefault.name}`,
+        visualDiffDefault.with((setup) => {
+          setup.withFixture(
+            html` <sbb-block-link-static size="${size}"
+              >Travelcards & tickets</sbb-block-link-static
+            >`,
+          );
+        }),
+      );
+    }
+
+    it(
+      `width=fixed ${visualDiffDefault.name}`,
+      visualDiffDefault.with((setup) => {
+        setup.withFixture(
+          html` <sbb-block-link-static icon-name="chevron-small-right-small" style="width: 200px;">
+            A lot of link text to show what happens if there is not enough space.
+          </sbb-block-link-static>`,
+        );
+      }),
+    );
+  });
+});

src/elements/link/block-link/block-link.visual.spec.ts

@@ -0,0 +1,79 @@
+import { html, nothing } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffStandardStates,
+} from '../../core/testing/private.js';
+
+import './block-link.js';
+
+describe(`sbb-block-link`, () => {
+  const iconState = {
+    iconPlacement: ['start', 'end'],
+    slotted: [false, true],
+  };
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const negative of [true, false]) {
+      for (const state of visualDiffStandardStates) {
+        it(
+          state.name,
+          state.with((setup) => {
+            setup.withFixture(
+              html`<sbb-block-link href="#" ?negative=${negative}
+                >Travelcards & tickets</sbb-block-link
+              >`,
+              {
+                backgroundColor: negative ? 'var(--sbb-color-charcoal)' : undefined,
+              },
+            );
+          }),
+        );
+      }
+    }
+
+    describeEach(iconState, ({ iconPlacement, slotted }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with((setup) => {
+          setup.withFixture(html`
+            <sbb-block-link
+              href="#"
+              icon-name=${slotted ? nothing : 'chevron-small-right-small'}
+              icon-placement=${iconPlacement}
+            >
+              ${slotted
+                ? html`<sbb-icon slot="icon" name="chevron-small-left-small"></sbb-icon>`
+                : nothing}
+              Travelcards & tickets
+            </sbb-block-link>
+          `);
+        }),
+      );
+    });
+
+    for (const size of ['xs', 's', 'm']) {
+      it(
+        `size=${size} ${visualDiffDefault.name}`,
+        visualDiffDefault.with((setup) => {
+          setup.withFixture(
+            html`<sbb-block-link href="#" size=${size}>Travelcards & tickets</sbb-block-link>`,
+          );
+        }),
+      );
+    }
+
+    it(
+      `width=fixed ${visualDiffDefault.name}`,
+      visualDiffDefault.with((setup) => {
+        setup.withFixture(
+          html`<sbb-block-link href="#" icon-name="chevron-small-right-small" style="width: 200px;">
+            A lot of link text to show what happens if there is not enough space.
+          </sbb-block-link>`,
+        );
+      }),
+    );
+  });
+});