test(sbb-teaser-hero, sbb-teaser-paid): add visual spec

src/elements-experimental/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js

@@ -154,3 +154,156 @@ snapshots["sbb-teaser-hero should render all properties A11y tree Firefox"] =
 `;
 /* end snapshot sbb-teaser-hero should render all properties A11y tree Firefox */
 
+snapshots["sbb-teaser-hero renders DOM"] = 
+`<sbb-teaser-hero
+  accessibility-label="label"
+  data-action=""
+  data-link=""
+  dir="ltr"
+  href="https://www.sbb.ch"
+  image-alt="SBB CFF FFS Employee"
+  link-content="Find out more"
+  rel="external"
+  target="_blank"
+>
+  Break out and explore castles and palaces.
+</sbb-teaser-hero>
+`;
+/* end snapshot sbb-teaser-hero renders DOM */
+
+snapshots["sbb-teaser-hero renders Shadow DOM"] = 
+`<a
+  aria-label="label"
+  class="sbb-action-base sbb-teaser-hero"
+  href="https://www.sbb.ch"
+  rel="external"
+  target="_blank"
+>
+  <span class="sbb-teaser-hero__panel">
+    <p class="sbb-teaser-hero__panel-text">
+      <slot>
+      </slot>
+    </p>
+    <sbb-block-link-static
+      class="sbb-teaser-hero__panel-link"
+      data-action=""
+      data-sbb-link=""
+      data-slot-names="unnamed"
+      dir="ltr"
+      icon-name="chevron-small-right-small"
+      icon-placement="end"
+      negative=""
+      size="m"
+    >
+      <slot name="link-content">
+        Find out more
+      </slot>
+    </sbb-block-link-static>
+  </span>
+  <slot name="image">
+    <sbb-image
+      alt="SBB CFF FFS Employee"
+      aspect-ratio="16-9"
+      border-radius="default"
+      data-loaded=""
+      data-teaser=""
+    >
+    </sbb-image>
+  </slot>
+  <sbb-screen-reader-only>
+    . Link target opens in a new window.
+  </sbb-screen-reader-only>
+</a>
+`;
+/* end snapshot sbb-teaser-hero renders Shadow DOM */
+
+snapshots["sbb-teaser-hero renders with slots DOM"] = 
+`<sbb-teaser-hero
+  accessibility-label="label"
+  data-action=""
+  data-link=""
+  dir="ltr"
+  href="https://www.sbb.ch"
+>
+  Break out and explore castles and palaces.
+  <span slot="link-content">
+    Find out more
+  </span>
+  <sbb-image
+    alt="SBB CFF FFS Employee"
+    aspect-ratio="16-9"
+    border-radius="default"
+    data-loaded=""
+    data-teaser=""
+    slot="image"
+  >
+  </sbb-image>
+</sbb-teaser-hero>
+`;
+/* end snapshot sbb-teaser-hero renders with slots DOM */
+
+snapshots["sbb-teaser-hero renders with slots Shadow DOM"] = 
+`<a
+  aria-label="label"
+  class="sbb-action-base sbb-teaser-hero"
+  href="https://www.sbb.ch"
+>
+  <span class="sbb-teaser-hero__panel">
+    <p class="sbb-teaser-hero__panel-text">
+      <slot>
+      </slot>
+    </p>
+    <sbb-block-link-static
+      class="sbb-teaser-hero__panel-link"
+      data-action=""
+      data-sbb-link=""
+      data-slot-names="link-content unnamed"
+      dir="ltr"
+      icon-name="chevron-small-right-small"
+      icon-placement="end"
+      negative=""
+      size="m"
+    >
+      <slot name="link-content">
+      </slot>
+    </sbb-block-link-static>
+  </span>
+  <slot name="image">
+  </slot>
+</a>
+`;
+/* end snapshot sbb-teaser-hero renders with slots Shadow DOM */
+
+snapshots["sbb-teaser-hero renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser-hero renders A11y tree Chrome */
+
+snapshots["sbb-teaser-hero renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "label",
+      "value": "https://www.sbb.ch/"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser-hero renders A11y tree Firefox */
+

src/elements-experimental/teaser-hero/teaser-hero.snapshot.spec.ts

@@ -13,7 +13,7 @@ const imageUrl = import.meta.resolve('../../elements/core/testing/assets/lucerne
 describe(`sbb-teaser-hero`, () => {
   let element: SbbTeaserHeroElement;
 
-  describe('should render all properties', () => {
+  describe('renders', () => {
     beforeEach(async () => {
       element = await fixture(
         html`<sbb-teaser-hero
@@ -42,7 +42,7 @@ describe(`sbb-teaser-hero`, () => {
     testA11yTreeSnapshot();
   });
 
-  describe('should render with slots', async () => {
+  describe('renders with slots', async () => {
     beforeEach(async () => {
       element = await fixture(
         html`<sbb-teaser-hero accessibility-label="label" href="https://www.sbb.ch">

src/elements-experimental/teaser-hero/teaser-hero.visual.spec.ts

@@ -0,0 +1,42 @@
+import {
+  describeViewports,
+  visualDiffDefault,
+  visualDiffFocus,
+  visualDiffHover,
+} from '@sbb-esta/lyne-elements/core/testing/private.js';
+import { html } from 'lit';
+
+import './teaser-hero.js';
+import '@sbb-esta/lyne-elements/image.js';
+
+const imageUrl = import.meta.resolve('../../elements/core/testing/assets/placeholder-image.png');
+
+describe(`sbb-teaser-hero`, () => {
+  describeViewports({ viewports: ['zero', 'micro', 'small', 'medium', 'wide'] }, () => {
+    for (const state of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
+      it(
+        state.name,
+        state.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-teaser-hero href="#" link-content="Find out more" image-src=${imageUrl}>
+              Break out and explore castles and palaces.
+            </sbb-teaser-hero>
+          `);
+        }),
+      );
+
+      it(
+        `slotted ${state.name}`,
+        state.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-teaser-hero href="#">
+              Break out and explore castles and palaces.
+              <span slot="link-content">Find out more</span>
+              <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
+            </sbb-teaser-hero>
+          `);
+        }),
+      );
+    }
+  });
+});

src/elements-experimental/teaser-paid/__snapshots__/teaser-paid.snapshot.spec.snap.js

@@ -67,3 +67,69 @@ snapshots["sbb-teaser-paid A11y tree Firefox"] =
 `;
 /* end snapshot sbb-teaser-paid A11y tree Firefox */
 
+snapshots["sbb-teaser-paid renders DOM"] = 
+`<sbb-teaser-paid
+  accessibility-label="label"
+  data-action=""
+  data-link=""
+  dir="ltr"
+  href="https://www.sbb.ch"
+  rel="external"
+  target="_blank"
+>
+</sbb-teaser-paid>
+`;
+/* end snapshot sbb-teaser-paid renders DOM */
+
+snapshots["sbb-teaser-paid renders Shadow DOM"] = 
+`<a
+  aria-label="label"
+  class="sbb-action-base sbb-teaser-paid"
+  href="https://www.sbb.ch"
+  rel="external"
+  target="_blank"
+>
+  <slot name="chip">
+  </slot>
+  <slot name="image">
+  </slot>
+  <sbb-screen-reader-only>
+    . Link target opens in a new window.
+  </sbb-screen-reader-only>
+</a>
+`;
+/* end snapshot sbb-teaser-paid renders Shadow DOM */
+
+snapshots["sbb-teaser-paid renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser-paid renders A11y tree Chrome */
+
+snapshots["sbb-teaser-paid renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "link",
+      "name": "label",
+      "value": "https://www.sbb.ch/"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-teaser-paid renders A11y tree Firefox */
+

src/elements-experimental/teaser-paid/teaser-paid.snapshot.spec.ts

@@ -9,24 +9,26 @@ import type { SbbTeaserPaidElement } from './teaser-paid.js';
 describe(`sbb-teaser-paid`, () => {
   let element: SbbTeaserPaidElement;
 
-  beforeEach(async () => {
-    element = await fixture(
-      html`<sbb-teaser-paid
-        accessibility-label="label"
-        href="https://www.sbb.ch"
-        rel="external"
-        target="_blank"
-      ></sbb-teaser-paid>`,
-    );
-  });
+  describe('renders', () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-teaser-paid
+          accessibility-label="label"
+          href="https://www.sbb.ch"
+          rel="external"
+          target="_blank"
+        ></sbb-teaser-paid>`,
+      );
+    });
 
-  it('DOM', async () => {
-    await expect(element).dom.to.be.equalSnapshot();
-  });
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-  it('Shadow DOM', async () => {
-    await expect(element).shadowDom.to.be.equalSnapshot();
-  });
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot();
+    testA11yTreeSnapshot();
+  });
 });

src/elements-experimental/teaser-paid/teaser-paid.visual.spec.ts

@@ -0,0 +1,31 @@
+import {
+  describeViewports,
+  visualDiffDefault,
+  visualDiffFocus,
+  visualDiffHover,
+} from '@sbb-esta/lyne-elements/core/testing/private.js';
+import { html } from 'lit';
+
+import './teaser-paid.js';
+import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/image.js';
+
+const imageUrl = import.meta.resolve('../../elements/core/testing/assets/placeholder-image.png');
+
+describe(`sbb-teaser-paid`, () => {
+  describeViewports({ viewports: ['zero', 'micro', 'small', 'medium', 'wide'] }, () => {
+    for (const state of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
+      it(
+        state.name,
+        state.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-teaser-paid href="#">
+              <sbb-chip slot="chip">Label</sbb-chip>
+              <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
+            </sbb-teaser-paid>
+          `);
+        }),
+      );
+    }
+  });
+});