test(sbb-title): implement visual regression tests (#2869)

src/elements/title/__snapshots__/title.snapshot.spec.snap.js

@@ -1,6 +1,29 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
+snapshots["sbb-title renders DOM"] = 
+`<sbb-title
+  aria-level="1"
+  level="1"
+  role="heading"
+  visual-level="2"
+>
+  Sample Title Text
+</sbb-title>
+`;
+/* end snapshot sbb-title renders DOM */
+
+snapshots["sbb-title renders Shadow DOM"] = 
+`<h1
+  class="sbb-title"
+  role="presentation"
+>
+  <slot>
+  </slot>
+</h1>
+`;
+/* end snapshot sbb-title renders Shadow DOM */
+
 snapshots["sbb-title A11y tree Chrome"] = 
 `<p>
   {

src/elements/title/title.snapshot.spec.ts

@@ -3,22 +3,27 @@ import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
+import type { SbbTitleElement } from './title.js';
+
 import './title.js';
 
 describe(`sbb-title`, () => {
-  it('renders', async () => {
-    const root = await fixture(
-      html`<sbb-title level="1" visual-level="2">Sample Title Text</sbb-title>`,
-    );
-
-    expect(root).dom.to.be.equal(`
-      <sbb-title level="1" visual-level="2" aria-level="1" role="heading">
-        Sample Title Text
-      </sbb-title>
-    `);
-    expect(root).shadowDom.to.be.equal(`
-      <h1 class="sbb-title" role="presentation"><slot></slot></h1>
-    `);
+  describe('renders', async () => {
+    let element: SbbTitleElement;
+
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-title level="1" visual-level="2">Sample Title Text</sbb-title>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 
   testA11yTreeSnapshot(html`<sbb-title level="1" visual-level="2">Sample Title Text</sbb-title>`);

src/elements/title/title.visual.spec.ts

@@ -0,0 +1,42 @@
+import { html } from 'lit';
+
+import { describeViewports, visualDiffDefault } from '../core/testing/private.js';
+
+import '../title.js';
+
+describe(`sbb-title`, () => {
+  describeViewports({ viewports: ['zero', 'small', 'medium', 'large', 'ultra'] }, () => {
+    for (const level of ['1', '2', '3', '4', '5', '6']) {
+      it(
+        `level=${level}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`<sbb-title level=${level}>
+                Data without insights are trivial, and insights without action are pointless
+              </sbb-title>
+              <article>
+                Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean
+                euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl
+                rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui sapien eget mi
+                proin sed libero enim sed faucibus turpis in eu mi bibendum neque egestas congue.
+              </article> `,
+          );
+        }),
+      );
+    }
+
+    it(
+      'negative',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`
+            <sbb-title negative>
+              Data without insights are trivial, and insights without action are pointless
+            </sbb-title>
+          `,
+          { backgroundColor: 'var(--sbb-color-charcoal)' },
+        );
+      }),
+    );
+  });
+});