diff --git a/src/elements-experimental/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js b/src/elements-experimental/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js
index a52ca65098..3509a6242f 100644
--- a/src/elements-experimental/teaser-hero/__snapshots__/teaser-hero.snapshot.spec.snap.js
+++ b/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"] =
+`
+ Break out and explore castles and palaces.
+
+`;
+/* end snapshot sbb-teaser-hero renders DOM */
+
+snapshots["sbb-teaser-hero renders Shadow DOM"] =
+`
+
+
+
+
+
+
+
+ Find out more
+
+
+
+
+
+
+
+
+ . Link target opens in a new window.
+
+
+`;
+/* end snapshot sbb-teaser-hero renders Shadow DOM */
+
+snapshots["sbb-teaser-hero renders with slots DOM"] =
+`
+ Break out and explore castles and palaces.
+
+ Find out more
+
+
+
+
+`;
+/* end snapshot sbb-teaser-hero renders with slots DOM */
+
+snapshots["sbb-teaser-hero renders with slots Shadow DOM"] =
+`
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+/* end snapshot sbb-teaser-hero renders with slots Shadow DOM */
+
+snapshots["sbb-teaser-hero renders A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "link",
+ "name": "label"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-teaser-hero renders A11y tree Chrome */
+
+snapshots["sbb-teaser-hero renders A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "link",
+ "name": "label",
+ "value": "https://www.sbb.ch/"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-teaser-hero renders A11y tree Firefox */
+
diff --git a/src/elements-experimental/teaser-hero/teaser-hero.snapshot.spec.ts b/src/elements-experimental/teaser-hero/teaser-hero.snapshot.spec.ts
index 075228ad84..015d55f235 100644
--- a/src/elements-experimental/teaser-hero/teaser-hero.snapshot.spec.ts
+++ b/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` {
testA11yTreeSnapshot();
});
- describe('should render with slots', async () => {
+ describe('renders with slots', async () => {
beforeEach(async () => {
element = await fixture(
html`
diff --git a/src/elements-experimental/teaser-hero/teaser-hero.visual.spec.ts b/src/elements-experimental/teaser-hero/teaser-hero.visual.spec.ts
new file mode 100644
index 0000000000..355a191274
--- /dev/null
+++ b/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`
+
+ Break out and explore castles and palaces.
+
+ `);
+ }),
+ );
+
+ it(
+ `slotted ${state.name}`,
+ state.with(async (setup) => {
+ await setup.withFixture(html`
+
+ Break out and explore castles and palaces.
+ Find out more
+
+
+ `);
+ }),
+ );
+ }
+ });
+});
diff --git a/src/elements-experimental/teaser-paid/__snapshots__/teaser-paid.snapshot.spec.snap.js b/src/elements-experimental/teaser-paid/__snapshots__/teaser-paid.snapshot.spec.snap.js
index 53d2024265..1972843779 100644
--- a/src/elements-experimental/teaser-paid/__snapshots__/teaser-paid.snapshot.spec.snap.js
+++ b/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"] =
+`
+
+`;
+/* end snapshot sbb-teaser-paid renders DOM */
+
+snapshots["sbb-teaser-paid renders Shadow DOM"] =
+`
+
+
+
+
+
+ . Link target opens in a new window.
+
+
+`;
+/* end snapshot sbb-teaser-paid renders Shadow DOM */
+
+snapshots["sbb-teaser-paid renders A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "link",
+ "name": "label"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-teaser-paid renders A11y tree Chrome */
+
+snapshots["sbb-teaser-paid renders A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "link",
+ "name": "label",
+ "value": "https://www.sbb.ch/"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-teaser-paid renders A11y tree Firefox */
+
diff --git a/src/elements-experimental/teaser-paid/teaser-paid.snapshot.spec.ts b/src/elements-experimental/teaser-paid/teaser-paid.snapshot.spec.ts
index 642fd54827..12813d899a 100644
--- a/src/elements-experimental/teaser-paid/teaser-paid.snapshot.spec.ts
+++ b/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``,
- );
- });
+ describe('renders', () => {
+ beforeEach(async () => {
+ element = await fixture(
+ html``,
+ );
+ });
- 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();
+ });
});
diff --git a/src/elements-experimental/teaser-paid/teaser-paid.visual.spec.ts b/src/elements-experimental/teaser-paid/teaser-paid.visual.spec.ts
new file mode 100644
index 0000000000..19065998a8
--- /dev/null
+++ b/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`
+
+ Label
+
+
+ `);
+ }),
+ );
+ }
+ });
+});