From 32688ffee7c79e9b5f8ab18a2db720e7a115312b Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Mon, 8 Jul 2024 09:35:53 +0200
Subject: [PATCH 1/3] test: add visual tests

---
 src/elements/teaser/teaser.visual.spec.ts | 133 ++++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 src/elements/teaser/teaser.visual.spec.ts

diff --git a/src/elements/teaser/teaser.visual.spec.ts b/src/elements/teaser/teaser.visual.spec.ts
new file mode 100644
index 0000000000..0e3456be01
--- /dev/null
+++ b/src/elements/teaser/teaser.visual.spec.ts
@@ -0,0 +1,133 @@
+import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffStandardStates,
+} from '../core/testing/private.js';
+import { waitForImageReady } from '../core/testing.js';
+
+import './teaser.js';
+
+const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
+
+describe(`sbb-teaser`, () => {
+  const loremIpsum: string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, ultricies in tincidunt
+    quis, mattis eu quam. Nulla sit amet lorem fermentum, molestie nunc ut, hendrerit risus. Vestibulum rutrum elit et
+    lacus sollicitudin, quis malesuada lorem vehicula. Suspendisse at augue quis tellus vulputate tempor. Vivamus urna
+    velit, varius nec est ac, mollis efficitur lorem. Quisque non nisl eget massa interdum tempus. Praesent vel feugiat
+    metus. Donec pharetra odio at turpis bibendum, vel commodo dui vulputate. Aenean congue nec nisl vel bibendum.
+    Praesent sit amet lorem augue. Suspendisse ornare a justo sagittis fermentum.`;
+  const longChip: string =
+    'This is a chip which has a very long content and should receive ellipsis.';
+
+  const visualStates = {
+    hasChip: [false, true],
+    withLongContent: [false, true],
+  };
+
+  const screenCombinations = [
+    { viewport: 'micro' as const, alignments: ['below'] },
+    { viewport: 'medium' as const, alignments: ['after-centered', 'after', 'below'] },
+  ];
+
+  for (const screenCombination of screenCombinations) {
+    describeViewports({ viewports: [screenCombination.viewport] }, () => {
+      for (const alignment of screenCombination.alignments) {
+        for (const visualDiffStandardState of visualDiffStandardStates) {
+          it(
+            `alignment=${alignment} ${visualDiffStandardState.name}`,
+            visualDiffStandardState.with(async (setup) => {
+              await setup.withFixture(
+                html`
+                  <sbb-teaser title-content="This is a title" href="#" alignment=${alignment}>
+                    <img slot="image" src=${imageUrl} alt="400x300" />
+                    This is a paragraph
+                  </sbb-teaser>
+                `,
+                { maxWidth: '760px' },
+              );
+              await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+            }),
+          );
+        }
+
+        describeEach(visualStates, ({ hasChip, withLongContent }) => {
+          it(
+            `alignment=${alignment}`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                html`
+                  <sbb-teaser
+                    title-content="This is a title"
+                    href="#"
+                    alignment=${alignment}
+                    chip-content=${hasChip ? 'This is a chip.' : nothing}
+                  >
+                    <img slot="image" src=${imageUrl} alt="400x300" />
+                    ${withLongContent ? loremIpsum : 'This is a paragraph'}
+                  </sbb-teaser>
+                `,
+                { maxWidth: '760px' },
+              );
+              await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+            }),
+          );
+        });
+
+        it(
+          `longChip=true ${alignment}`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(
+              html`
+                <sbb-teaser
+                  style="width: 400px;"
+                  title-content="This is a title"
+                  href="#"
+                  alignment=${alignment}
+                  chip-content=${longChip}
+                >
+                  <img slot="image" src=${imageUrl} alt="400x300" />
+                  This is a paragraph
+                </sbb-teaser>
+              `,
+              { maxWidth: '760px' },
+            );
+            await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+          }),
+        );
+
+        it(
+          `list=true ${alignment}`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(
+              html`
+                <ul style="list-style: none;">
+                  ${repeat(
+                    new Array(5),
+                    (_, i) => html`
+                      <li style="margin-block: 1rem;">
+                        <sbb-teaser
+                          title-content="This is title n.${i + 1}"
+                          href="#"
+                          alignment=${alignment}
+                        >
+                          <img slot="image" src=${imageUrl} alt="400x300" />
+                          This is the paragraph n.${i + 1}
+                        </sbb-teaser>
+                      </li>
+                    `,
+                  )}
+                </ul>
+              `,
+              { maxWidth: '760px' },
+            );
+            await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+          }),
+        );
+      }
+    });
+  }
+});

From 2fccf2b91ba4f012a02efe146bd9299ceb2b4c3f Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Mon, 8 Jul 2024 12:47:18 +0200
Subject: [PATCH 2/3] fix: review

---
 src/elements/teaser/teaser.visual.spec.ts | 122 +++++++++++-----------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/src/elements/teaser/teaser.visual.spec.ts b/src/elements/teaser/teaser.visual.spec.ts
index 0e3456be01..e58b238a19 100644
--- a/src/elements/teaser/teaser.visual.spec.ts
+++ b/src/elements/teaser/teaser.visual.spec.ts
@@ -5,7 +5,8 @@ import {
   describeEach,
   describeViewports,
   visualDiffDefault,
-  visualDiffStandardStates,
+  visualDiffFocus,
+  visualDiffHover,
 } from '../core/testing/private.js';
 import { waitForImageReady } from '../core/testing.js';
 
@@ -36,38 +37,66 @@ describe(`sbb-teaser`, () => {
   for (const screenCombination of screenCombinations) {
     describeViewports({ viewports: [screenCombination.viewport] }, () => {
       for (const alignment of screenCombination.alignments) {
-        for (const visualDiffStandardState of visualDiffStandardStates) {
-          it(
-            `alignment=${alignment} ${visualDiffStandardState.name}`,
-            visualDiffStandardState.with(async (setup) => {
-              await setup.withFixture(
-                html`
-                  <sbb-teaser title-content="This is a title" href="#" alignment=${alignment}>
-                    <img slot="image" src=${imageUrl} alt="400x300" />
-                    This is a paragraph
-                  </sbb-teaser>
-                `,
-                { maxWidth: '760px' },
-              );
-              await waitForImageReady(setup.snapshotElement.querySelector('img')!);
-            }),
-          );
-        }
+        describe(`alignment=${alignment}`, () => {
+          for (const visualDiffStandardState of [
+            visualDiffDefault,
+            visualDiffFocus,
+            visualDiffHover,
+          ]) {
+            it(
+              `state=${visualDiffStandardState.name}`,
+              visualDiffStandardState.with(async (setup) => {
+                await setup.withFixture(
+                  html`
+                    <sbb-teaser title-content="This is a title" href="#" alignment=${alignment}>
+                      <img slot="image" src=${imageUrl} />
+                      This is a paragraph
+                    </sbb-teaser>
+                  `,
+                  { maxWidth: '760px' },
+                );
+                await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+              }),
+            );
+          }
+
+          describeEach(visualStates, ({ hasChip, withLongContent }) => {
+            it(
+              '',
+              visualDiffDefault.with(async (setup) => {
+                await setup.withFixture(
+                  html`
+                    <sbb-teaser
+                      title-content="This is a title"
+                      href="#"
+                      alignment=${alignment}
+                      chip-content=${hasChip ? 'This is a chip.' : nothing}
+                    >
+                      <img slot="image" src=${imageUrl} />
+                      ${withLongContent ? loremIpsum : 'This is a paragraph'}
+                    </sbb-teaser>
+                  `,
+                  { maxWidth: '760px' },
+                );
+                await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+              }),
+            );
+          });
 
-        describeEach(visualStates, ({ hasChip, withLongContent }) => {
           it(
-            `alignment=${alignment}`,
+            `longChip=true`,
             visualDiffDefault.with(async (setup) => {
               await setup.withFixture(
                 html`
                   <sbb-teaser
+                    style="width: 400px;"
                     title-content="This is a title"
                     href="#"
                     alignment=${alignment}
-                    chip-content=${hasChip ? 'This is a chip.' : nothing}
+                    chip-content=${longChip}
                   >
-                    <img slot="image" src=${imageUrl} alt="400x300" />
-                    ${withLongContent ? loremIpsum : 'This is a paragraph'}
+                    <img slot="image" src=${imageUrl} />
+                    This is a paragraph
                   </sbb-teaser>
                 `,
                 { maxWidth: '760px' },
@@ -75,36 +104,12 @@ describe(`sbb-teaser`, () => {
               await waitForImageReady(setup.snapshotElement.querySelector('img')!);
             }),
           );
-        });
 
-        it(
-          `longChip=true ${alignment}`,
-          visualDiffDefault.with(async (setup) => {
-            await setup.withFixture(
-              html`
-                <sbb-teaser
-                  style="width: 400px;"
-                  title-content="This is a title"
-                  href="#"
-                  alignment=${alignment}
-                  chip-content=${longChip}
-                >
-                  <img slot="image" src=${imageUrl} alt="400x300" />
-                  This is a paragraph
-                </sbb-teaser>
-              `,
-              { maxWidth: '760px' },
-            );
-            await waitForImageReady(setup.snapshotElement.querySelector('img')!);
-          }),
-        );
-
-        it(
-          `list=true ${alignment}`,
-          visualDiffDefault.with(async (setup) => {
-            await setup.withFixture(
-              html`
-                <ul style="list-style: none;">
+          it(
+            `list=true`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(html`
+                <ul style="list-style: none; padding: 0;">
                   ${repeat(
                     new Array(5),
                     (_, i) => html`
@@ -114,19 +119,18 @@ describe(`sbb-teaser`, () => {
                           href="#"
                           alignment=${alignment}
                         >
-                          <img slot="image" src=${imageUrl} alt="400x300" />
+                          <img slot="image" src=${imageUrl} />
                           This is the paragraph n.${i + 1}
                         </sbb-teaser>
                       </li>
                     `,
                   )}
                 </ul>
-              `,
-              { maxWidth: '760px' },
-            );
-            await waitForImageReady(setup.snapshotElement.querySelector('img')!);
-          }),
-        );
+              `);
+              await waitForImageReady(setup.snapshotElement.querySelector('img')!);
+            }),
+          );
+        });
       }
     });
   }

From 7c8138fce5b1087b7d6091f4cba03a4920d73a9f Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Tue, 9 Jul 2024 09:15:04 +0200
Subject: [PATCH 3/3] fix: visual

---
 src/elements/teaser/teaser.visual.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/teaser/teaser.visual.spec.ts b/src/elements/teaser/teaser.visual.spec.ts
index e58b238a19..333707296d 100644
--- a/src/elements/teaser/teaser.visual.spec.ts
+++ b/src/elements/teaser/teaser.visual.spec.ts
@@ -89,7 +89,7 @@ describe(`sbb-teaser`, () => {
               await setup.withFixture(
                 html`
                   <sbb-teaser
-                    style="width: 400px;"
+                    style="width: ${screenCombination.viewport === 'micro' ? '300px' : '400px'};"
                     title-content="This is a title"
                     href="#"
                     alignment=${alignment}