test(sbb-divider): add visual spec

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

@@ -1,23 +1,71 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-divider A11y tree Chrome"] = 
+snapshots["sbb-divider renders DOM"] = 
+`<sbb-divider
+  aria-orientation="horizontal"
+  orientation="horizontal"
+  role="separator"
+>
+</sbb-divider>
+`;
+/* end snapshot sbb-divider renders DOM */
+
+snapshots["sbb-divider renders Shadow DOM"] = 
+`<div class="sbb-divider">
+</div>
+`;
+/* end snapshot sbb-divider renders Shadow DOM */
+
+snapshots["sbb-divider renders A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
   "name": ""
 }
 </p>
 `;
-/* end snapshot sbb-divider A11y tree Chrome */
+/* end snapshot sbb-divider renders A11y tree Chrome */
+
+snapshots["sbb-divider renders horizontal DOM"] = 
+`<sbb-divider
+  aria-orientation="horizontal"
+  orientation="horizontal"
+  role="separator"
+>
+</sbb-divider>
+`;
+/* end snapshot sbb-divider renders horizontal DOM */
+
+snapshots["sbb-divider renders horizontal Shadow DOM"] = 
+`<div class="sbb-divider">
+</div>
+`;
+/* end snapshot sbb-divider renders horizontal Shadow DOM */
+
+snapshots["sbb-divider renders vertical DOM"] = 
+`<sbb-divider
+  aria-orientation="vertical"
+  orientation="vertical"
+  role="separator"
+>
+</sbb-divider>
+`;
+/* end snapshot sbb-divider renders vertical DOM */
+
+snapshots["sbb-divider renders vertical Shadow DOM"] = 
+`<div class="sbb-divider">
+</div>
+`;
+/* end snapshot sbb-divider renders vertical Shadow DOM */
 
-snapshots["sbb-divider A11y tree Firefox"] = 
+snapshots["sbb-divider renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
   "name": ""
 }
 </p>
 `;
-/* end snapshot sbb-divider A11y tree Firefox */
+/* end snapshot sbb-divider renders 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('renders', () => {
+    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('renders 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('renders 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,13 @@ 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>`);
+    expect(element).to.have.attribute('aria-orientation', 'horizontal');
+
+    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);
+        }),
+      );
+    });
+  });
+});