test(sbb-divider): add visual spec

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

@@ -21,3 +21,71 @@ snapshots["sbb-divider A11y tree Firefox"] =
 `;
 /* end snapshot sbb-divider A11y tree Firefox */
 
+snapshots["sbb-divider should render with default values DOM"] = 
+`<sbb-divider
+  aria-orientation="horizontal"
+  orientation="horizontal"
+  role="separator"
+>
+</sbb-divider>
+`;
+/* end snapshot sbb-divider should render with default values DOM */
+
+snapshots["sbb-divider should render with default values Shadow DOM"] = 
+`<div class="sbb-divider">
+</div>
+`;
+/* end snapshot sbb-divider should render with default values Shadow DOM */
+
+snapshots["sbb-divider should render with default values A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-divider should render with default values A11y tree Chrome */
+
+snapshots["sbb-divider should render with orientation horizontal DOM"] = 
+`<sbb-divider
+  aria-orientation="horizontal"
+  orientation="horizontal"
+  role="separator"
+>
+</sbb-divider>
+`;
+/* end snapshot sbb-divider should render with orientation horizontal DOM */
+
+snapshots["sbb-divider should render with orientation horizontal Shadow DOM"] = 
+`<div class="sbb-divider">
+</div>
+`;
+/* end snapshot sbb-divider should render with orientation horizontal Shadow DOM */
+
+snapshots["sbb-divider should render with orientation vertical DOM"] = 
+`<sbb-divider
+  aria-orientation="vertical"
+  orientation="vertical"
+  role="separator"
+>
+</sbb-divider>
+`;
+/* end snapshot sbb-divider should render with orientation vertical DOM */
+
+snapshots["sbb-divider should render with orientation vertical Shadow DOM"] = 
+`<div class="sbb-divider">
+</div>
+`;
+/* end snapshot sbb-divider should render with orientation vertical Shadow DOM */
+
+snapshots["sbb-divider should render with default values A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-divider should render with default values A11y tree Firefox */
+

src/elements/divider/divider.snapshot.spec.ts

@@ -2,48 +2,58 @@ import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
-import { waitForLitRender } from '../core/testing.js';
 
 import type { SbbDividerElement } from './divider.js';
-
 import './divider.js';
 
 describe(`sbb-divider`, () => {
-  it('should render with default values', async () => {
-    const element: SbbDividerElement = await fixture(html`<sbb-divider></sbb-divider>`);
-    expect(element).dom.to.be.equal(
-      `<sbb-divider orientation='horizontal' aria-orientation='horizontal' role='separator'></sbb-divider>`,
-    );
-    expect(element).shadowDom.to.be.equal(`<div class='sbb-divider'></div>`);
-  });
+  describe('should render with default values', () => {
+    let element: SbbDividerElement;
 
-  it('should render with orientation horizontal', async () => {
-    const element: SbbDividerElement = await fixture(
-      html`<sbb-divider orientation="horizontal"></sbb-divider>`,
-    );
-    expect(element).dom.to.be.equal(
-      `<sbb-divider orientation='horizontal' aria-orientation='horizontal' role='separator'></sbb-divider>`,
-    );
-    expect(element).shadowDom.to.be.equal(`<div class='sbb-divider'></div>`);
-  });
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-divider></sbb-divider>`);
+    });
 
-  it('should render with orientation vertical', async () => {
-    const element: SbbDividerElement = await fixture(
-      html`<sbb-divider orientation="vertical"></sbb-divider>`,
-    );
-    expect(element).dom.to.be.equal(
-      `<sbb-divider orientation='vertical' aria-orientation='vertical' role='separator'></sbb-divider>`,
-    );
-    expect(element).shadowDom.to.be.equal(`<div class='sbb-divider'></div>`);
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
   });
 
-  it('should react to change of orientation', async () => {
-    const element: SbbDividerElement = await fixture(html`<sbb-divider></sbb-divider>`);
+  describe('should render with orientation horizontal', () => {
+    let element: SbbDividerElement;
+
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-divider orientation="horizontal"></sbb-divider>`);
+    });
 
-    element.orientation = 'vertical';
-    await waitForLitRender(element);
-    expect(element).to.have.attribute('aria-orientation', 'vertical');
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
   });
 
-  testA11yTreeSnapshot(html`<sbb-divider></sbb-divider>`);
+  describe('should render with orientation vertical', () => {
+    let element: SbbDividerElement;
+
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-divider orientation="vertical"></sbb-divider>`);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+  });
 });

src/elements/divider/divider.spec.ts

@@ -1,7 +1,8 @@
-import { assert } from '@open-wc/testing';
+import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
 
 import { SbbDividerElement } from './divider.js';
 
@@ -10,4 +11,12 @@ describe(`sbb-divider`, () => {
     const element: SbbDividerElement = await fixture(html`<sbb-divider></sbb-divider>`);
     assert.instanceOf(element, SbbDividerElement);
   });
+
+  it('should react to change of orientation', async () => {
+    const element: SbbDividerElement = await fixture(html`<sbb-divider></sbb-divider>`);
+
+    element.orientation = 'vertical';
+    await waitForLitRender(element);
+    expect(element).to.have.attribute('aria-orientation', 'vertical');
+  });
 });

src/elements/divider/divider.visual.spec.ts

@@ -0,0 +1,41 @@
+import { html, nothing } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualRegressionFixture,
+} from '../core/testing/private.js';
+
+import './divider.js';
+
+describe(`sbb-divider`, () => {
+  let root: HTMLElement;
+
+  const cases = {
+    orientation: ['horizontal', 'vertical'],
+    negative: [false, true],
+  };
+
+  describeViewports({ viewports: ['zero'] }, () => {
+    describeEach(cases, ({ negative, orientation }) => {
+      beforeEach(async function () {
+        root = await visualRegressionFixture(
+          html`
+            <div style=${orientation === 'vertical' ? 'height: 340px' : nothing}>
+              <sbb-divider ?negative=${negative} orientation=${orientation}></sbb-divider>
+            </div>
+          `,
+          { backgroundColor: negative ? 'var(--sbb-color-charcoal)' : undefined },
+        );
+      });
+
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with((setup) => {
+          setup.withSnapshotElement(root);
+        }),
+      );
+    });
+  });
+});