test(sbb-container, sbb-sticky-bar): add visual spec (#2798)

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

@@ -31,3 +31,39 @@ snapshots["sbb-container A11y tree Firefox"] =
 `;
 /* end snapshot sbb-container A11y tree Firefox */
 
+snapshots["sbb-container renders DOM"] = 
+`<sbb-container color="white">
+</sbb-container>
+`;
+/* end snapshot sbb-container renders DOM */
+
+snapshots["sbb-container renders Shadow DOM"] = 
+`<div class="sbb-container">
+  <slot>
+  </slot>
+</div>
+<slot name="sticky-bar">
+</slot>
+`;
+/* end snapshot sbb-container renders Shadow DOM */
+
+snapshots["sbb-container renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-container renders A11y tree Chrome */
+
+snapshots["sbb-container renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-container renders A11y tree Firefox */
+

src/elements/container/container/container.snapshot.spec.ts

@@ -2,16 +2,26 @@ import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbContainerElement } from './container.js';
 import './container.js';
 
 describe(`sbb-container`, () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-container></sbb-container>`);
+  describe('renders', () => {
+    let element: SbbContainerElement;
 
-    expect(root).dom.to.be.equal(`<sbb-container color="white"></sbb-container>`);
+    beforeEach(async () => {
+      element = await fixture(html` <sbb-container></sbb-container> `);
+    });
 
-    await expect(root).shadowDom.to.be.equalSnapshot();
-  });
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot(html`<sbb-container></sbb-container>`);
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });

src/elements/container/container/container.visual.spec.ts

@@ -0,0 +1,70 @@
+import { SbbBreakpointUltraMin } from '@sbb-esta/lyne-design-tokens';
+import { setViewport } from '@web/test-runner-commands';
+import { html, type TemplateResult } from 'lit';
+
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import './container.js';
+import '../../title.js';
+import '../../button.js';
+
+describe(`sbb-container`, () => {
+  const colorCases = ['transparent', 'white', 'milk'];
+
+  const backgroundExpandedCases = [false, true];
+
+  const containerContent = (): TemplateResult => html`
+    <sbb-title level="4">Example title</sbb-title>
+    <p class="sbb-text-s">The container component will give its content the correct spacing.</p>
+    <p class="sbb-text-s">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+    <sbb-secondary-button style="margin-block-end: 3rem;">See more</sbb-secondary-button>
+  `;
+
+  describeViewports({ viewportHeight: 600 }, () => {
+    for (const color of colorCases) {
+      it(
+        `color=${color}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html` <sbb-container color=${color}> ${containerContent()} </sbb-container> `,
+            { backgroundColor: 'var(--sbb-color-silver)', padding: '0' },
+          );
+        }),
+      );
+    }
+
+    it(
+      `expanded`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html` <sbb-container expanded> ${containerContent()} </sbb-container> `,
+          { backgroundColor: 'var(--sbb-color-silver)', padding: '0' },
+        );
+      }),
+    );
+  });
+
+  // Test very large screens
+  for (const backgroundExpanded of backgroundExpandedCases) {
+    it(
+      `viewport=custom_background-expanded=${backgroundExpanded}`,
+      visualDiffDefault.with(async (setup) => {
+        await setViewport({ width: SbbBreakpointUltraMin + 300, height: 600 });
+
+        await setup.withFixture(
+          html`
+            <sbb-container ?background-expanded=${backgroundExpanded}>
+              ${containerContent()}
+            </sbb-container>
+          `,
+          { backgroundColor: 'var(--sbb-color-silver)', padding: '0' },
+        );
+      }),
+    );
+  }
+});

src/elements/container/sticky-bar/__snapshots__/sticky-bar.snapshot.spec.snap.js

@@ -33,3 +33,41 @@ snapshots["sbb-sticky-bar A11y tree Firefox"] =
 `;
 /* end snapshot sbb-sticky-bar A11y tree Firefox */
 
+snapshots["sbb-sticky-bar renders DOM"] = 
+`<sbb-sticky-bar slot="sticky-bar">
+</sbb-sticky-bar>
+`;
+/* end snapshot sbb-sticky-bar renders DOM */
+
+snapshots["sbb-sticky-bar renders Shadow DOM"] = 
+`<div class="sbb-sticky-bar__wrapper">
+  <div class="sbb-sticky-bar">
+    <slot>
+    </slot>
+  </div>
+</div>
+<div class="sbb-sticky-bar__intersector">
+</div>
+`;
+/* end snapshot sbb-sticky-bar renders Shadow DOM */
+
+snapshots["sbb-sticky-bar renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-sticky-bar renders A11y tree Chrome */
+
+snapshots["sbb-sticky-bar renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-sticky-bar renders A11y tree Firefox */
+

src/elements/container/sticky-bar/sticky-bar.snapshot.spec.ts

@@ -2,16 +2,26 @@ import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbStickyBarElement } from './sticky-bar.js';
 import './sticky-bar.js';
 
 describe(`sbb-sticky-bar`, () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-sticky-bar></sbb-sticky-bar>`);
+  describe('renders', () => {
+    let element: SbbStickyBarElement;
 
-    expect(root).dom.to.be.equal(`<sbb-sticky-bar slot="sticky-bar"></sbb-sticky-bar>`);
+    beforeEach(async () => {
+      element = await fixture(html` <sbb-sticky-bar></sbb-sticky-bar> `);
+    });
 
-    await expect(root).shadowDom.to.be.equalSnapshot();
-  });
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
 
-  testA11yTreeSnapshot(html`<sbb-sticky-bar></sbb-sticky-bar>`);
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
 });

src/elements/container/sticky-bar/sticky-bar.stories.ts

@@ -210,7 +210,7 @@ export const Default: StoryObj = {
 export const Expanded: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, expanded: true },
+  args: { ...defaultArgs, containerExpanded: true },
 };
 
 export const White: StoryObj = {

src/elements/container/sticky-bar/sticky-bar.visual.spec.ts

@@ -0,0 +1,95 @@
+import { SbbBreakpointMediumMin } from '@sbb-esta/lyne-design-tokens';
+import { setViewport } from '@web/test-runner-commands';
+import { html, type TemplateResult } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualRegressionFixture,
+} from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
+
+import './sticky-bar.js';
+import '../container.js';
+import '../../action-group.js';
+import '../../button.js';
+import '../../link.js';
+import '../../title.js';
+
+describe(`sbb-sticky-bar`, () => {
+  let root: HTMLElement;
+
+  const cases = {
+    color: [undefined, 'white', 'milk'],
+    containerExpanded: [false, true],
+    scrolled: [false, true],
+  };
+
+  const containerContent = (): TemplateResult => html`
+    <sbb-title level="4">Example title</sbb-title>
+    <p class="sbb-text-s">The container component will give its content the correct spacing.</p>
+    <sbb-secondary-button style="margin-block-end: 0.75rem;" size="m"
+      >See more</sbb-secondary-button
+    >
+  `;
+
+  const actionGroup = (): TemplateResult => html`
+    <sbb-action-group align-group="stretch" orientation="vertical" style="width:100%;">
+      <sbb-block-link align-self="start" icon-name="chevron-small-left-small">
+        Link
+      </sbb-block-link>
+      <sbb-button>Confirm</sbb-button>
+    </sbb-action-group>
+  `;
+
+  describeViewports(() => {
+    describeEach(cases, ({ color, containerExpanded, scrolled }) => {
+      beforeEach(async function () {
+        const element = await visualRegressionFixture(
+          html`
+            <div id="scroll-container" style="overflow: auto; height: 400px;">
+              <sbb-container
+                ?expanded=${containerExpanded}
+                style="--sbb-container-background-color: var(--sbb-color-cloud)"
+              >
+                ${containerContent()} ${containerContent()} ${containerContent()}
+                <p>Content end</p>
+                <sbb-sticky-bar .color=${color}> ${actionGroup()} </sbb-sticky-bar>
+              </sbb-container>
+            </div>
+          `,
+          { padding: '0' },
+        );
+
+        root = element.querySelector('#scroll-container')!;
+
+        if (scrolled) {
+          root.scrollTop = root.scrollHeight;
+          await waitForLitRender(root);
+        }
+      });
+
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with((setup) => {
+          setup.withSnapshotElement(root);
+        }),
+      );
+    });
+  });
+
+  it(
+    `viewport=medium_short content`,
+    visualDiffDefault.with(async (setup) => {
+      await setup.withFixture(
+        html` <sbb-container>
+          ${containerContent()}
+          <sbb-sticky-bar color="milk"> ${actionGroup()} </sbb-sticky-bar>
+        </sbb-container>`,
+        { padding: '0' },
+      );
+      await setViewport({ width: SbbBreakpointMediumMin, height: 400 });
+    }),
+  );
+});