@otto-de/b2b-core-components 1.30.0 → 1.31.0

package/dist/collection/components/required-separator/required-separator.e2e.js

@@ -0,0 +1,17 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B Required Separator', () => {
+    let page;
+    it('should render', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-required-separator></b2b-required-separator>`);
+        const element = await page.find('b2b-required-separator');
+        expect(element).not.toBeNull();
+    });
+    it('should change the label', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-required-separator label="Required"></b2b-required-separator>`);
+        const element = await page.find({ text: 'Required' });
+        const label = element.textContent;
+        expect(label).toEqualText('Required');
+    });
+});

package/dist/collection/components/required-separator/required-separator.js

@@ -1,11 +1,10 @@
 import { h, Host } from "@stencil/core";
 export class B2BRequiredSeparator {
     constructor() {
-        /** The required label. Per default it is the german 'Pflichtfeld', but can be altered. */
         this.label = 'Pflichtfeld';
     }
     render() {
-        return (h(Host, { key: '543aa56fb5a54538c9b6d2a6305f353b03d23a6c' }, h("div", { key: 'ff211d200d0cd73e439174f306fa54007c8e6eeb', class: "b2b-required-separator__label" }, h("span", { key: '5553b4692018d3cb9dab485398664e253424c6a5', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: 'fca69421f5f7e0af37aa4672de7b0facc2e26530' }, this.label)), h("b2b-separator", { key: 'fe5d74ae9242b1a9775efa7ca2ccf720fd8cf180' })));
+        return (h(Host, { key: '989e81600d0748d74b57f59df342bdb8ea1646ef' }, h("div", { key: '558b14f88f32f0b21c423554290fbe72c4fa9696', class: "b2b-required-separator__label" }, h("span", { key: '65a8ed5c4af4d0e3aee00785727aad0a74eb0323', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: 'e170084c3b0d4447a9d151b17422479f78a3f6b7' }, this.label)), h("b2b-separator", { key: '42b320e566f4f7594d87f930438b3b0ba8662b7f' })));
     }
     static get is() { return "b2b-required-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -23,7 +22,6 @@ export class B2BRequiredSeparator {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -36,8 +34,7 @@ export class B2BRequiredSeparator {
                     "tags": [],
                     "text": "The required label. Per default it is the german 'Pflichtfeld', but can be altered."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "'Pflichtfeld'"
             }

package/dist/collection/components/rounded-icon/rounded-icon.js

@@ -1,26 +1,21 @@
 import { h, Host } from "@stencil/core";
 export class RoundedIconComponent {
     constructor() {
-        /** The color of the circle around the icon or text.
-         * Use any type including hex, rgb or css custom properties
-         * as long as you pass it as a string */
         this.color = 'var(--b2b-color-info-50)';
-        /** The color of the text or icon within the circle.
-         * Use any type including hex, rgb or css custom properties
-         * as long as you pass it as a string */
+        this.borderColor = undefined;
         this.contentColor = 'var(--b2b-color-copy-default)';
     }
     render() {
-        return (h(Host, { key: 'cf14b575963a7f6e8f3e27e915c34d21d2979dcc' }, h("div", { key: 'cee5f5281d942a6994fab7b06519274838190e61', style: {
+        return (h(Host, { key: 'cd603c194ebc3a9d6aad8e16b126ac40e47e4715' }, h("div", { key: '102c49254d5e135173553379ce5ced7022dddaa7', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: 'cf5e0a1b312a03225193d11a0d1f8bad97ac6580', style: {
+            } }, h("div", { key: '447ece59e96780c6c6e0ddccc878354756e46ff7', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: 'e0c7fa8ef1dadebf34de91d88fdfa5c8f662fa5d', name: "icon" })), h("div", { key: 'dbe1ed9128cf8ab39d26eb4d2f9a2e1878e4f6a9', style: {
+            } }, h("slot", { key: 'a25891a5262400e671243fd8716f72d3b0035520', name: "icon" })), h("div", { key: 'b08770631a2ca349d90e0a9e7dd445aecf9135d9', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '93d1863ed7842528321a7939ea7eb757ba2ef2a8', name: "text" })))));
+            } }, h("slot", { key: '64619abcebfc3d8e80e9edc26c9808876860de8d', name: "text" })))));
     }
     static get is() { return "b2b-rounded-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -38,7 +33,6 @@ export class RoundedIconComponent {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -51,14 +45,12 @@ export class RoundedIconComponent {
                     "tags": [],
                     "text": "The color of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'var(--b2b-color-info-50)'"
             },
             "borderColor": {
                 "type": "string",
-                "attribute": "border-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -71,13 +63,11 @@ export class RoundedIconComponent {
                     "tags": [],
                     "text": "The color of the border of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "border-color",
                 "reflect": false
             },
             "contentColor": {
                 "type": "string",
-                "attribute": "content-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -90,8 +80,7 @@ export class RoundedIconComponent {
                     "tags": [],
                     "text": "The color of the text or icon within the circle.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "content-color",
                 "reflect": false,
                 "defaultValue": "'var(--b2b-color-copy-default)'"
             }

package/dist/collection/components/scrollable-container/scrollable-container.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ScrollableContainerComponent {
     render() {
-        return (h(Host, { key: 'bf490cf1e64cf4e7af0827d09a23eac325c71790' }, h("slot", { key: '45a4ca6fb2a43bcb43be2b558ddd53631fcccf6b' })));
+        return (h(Host, { key: '234c8e341e9dc85b7c8d7fc742445f61045b9cf6' }, h("slot", { key: 'd67a95c9c3a1a9f7ac75924d639c095578fcb2f1' })));
     }
     static get is() { return "b2b-scrollable-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/search/search.e2e.js

@@ -0,0 +1,97 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Search', () => {
+    let page;
+    const optionsList = ['option1', 'option2', 'option3'];
+    const setOptionsList = async () => {
+        const search = await page.find('b2b-search');
+        search.setProperty('optionsList', optionsList);
+        await page.waitForChanges();
+    };
+    const typeInput = async (key = '8') => {
+        let input = await page.find('b2b-search >>> b2b-input-list');
+        // focus on input element, focus method did not work
+        await input.click();
+        await input.press(key);
+        await page.waitForChanges();
+    };
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+      <b2b-search placeholder='search here'></b2b-search>
+    `);
+    });
+    it('should register input text when enabled', async () => {
+        const search = await page.find('b2b-search');
+        await typeInput('8');
+        let inputValue = search.getAttribute('value');
+        expect(inputValue).toBe('8');
+    });
+    it('should not receive input text when disabled', async () => {
+        const search = await page.find('b2b-search');
+        search.setAttribute('disabled', true);
+        await page.waitForChanges();
+        await typeInput();
+        let inputValue = search.getAttribute('value');
+        expect(inputValue).toBe(null);
+    });
+    it('should emit search event when clicking search button', async () => {
+        const searchEventSpy = await page.spyOnEvent('b2b-search');
+        const button = await page.find('b2b-search >>> b2b-button');
+        await button.click();
+        expect(searchEventSpy).toHaveReceivedEvent();
+    });
+    it('should emit search event with search input data', async () => {
+        const searchString = 'some search value';
+        const searchEventSpy = await page.spyOnEvent('b2b-search');
+        const searchInputEventSpy = await page.spyOnEvent('b2b-input');
+        const input = await page.find('b2b-search >>> b2b-input-list');
+        await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+        await page.waitForChanges();
+        const button = await page.find('b2b-search >>> b2b-button');
+        await button.click();
+        expect(searchInputEventSpy).toHaveReceivedEvent();
+        expect(searchEventSpy).toHaveReceivedEventDetail({
+            searchTerm: searchString,
+        });
+    });
+    it('should emit search event on enter press', async () => {
+        const searchString = 'some search value';
+        const searchEventSpy = await page.spyOnEvent('b2b-search');
+        const searchInputEventSpy = await page.spyOnEvent('b2b-input');
+        const input = await page.find('b2b-search >>> b2b-input-list');
+        await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+        await page.waitForChanges();
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Enter');
+        expect(searchInputEventSpy).toHaveReceivedEvent();
+        expect(searchEventSpy).toHaveReceivedEventDetail({
+            searchTerm: searchString,
+        });
+    });
+    it('should emit input event when typing on input', async () => {
+        const searchString = 'some search value';
+        const inputEventSpy = await page.spyOnEvent('b2b-input');
+        const input = await page.find('b2b-search >>> b2b-input-list');
+        await input.triggerEvent('b2b-input', { detail: { value: searchString } });
+        await page.waitForChanges();
+        expect(inputEventSpy).toHaveReceivedEvent();
+        expect(inputEventSpy).toHaveReceivedEventDetail({ value: searchString });
+    });
+    it('should emit selected option when clicking search button', async () => {
+        await setOptionsList();
+        const searchEventSpy = await page.spyOnEvent('b2b-search');
+        const input = await page.find('b2b-search >>> b2b-input-list');
+        // focus on input element, focus method did not work
+        await input.click();
+        await input.press('8');
+        await page.waitForChanges();
+        // Click first option on the list
+        const option = await page.find({ text: optionsList[0] });
+        await option.click();
+        const button = await page.find('b2b-search >>> b2b-button');
+        await button.click();
+        expect(searchEventSpy).toHaveReceivedEventDetail({
+            searchTerm: optionsList[0],
+        });
+    });
+});

package/dist/collection/components/search/search.js

@@ -1,12 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class SearchComponent {
     constructor() {
-        /** The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. */
-        this.optionsList = [];
-        /** The default value of the search input field. If defined, it will prefill the input. */
-        this.value = null;
-        /** Whether or not the input is disabled. Default is false. */
-        this.disabled = false;
         this.onSearchClicked = () => {
             this.b2bSearch.emit({ searchTerm: this.value });
         };
@@ -16,6 +10,11 @@ export class SearchComponent {
         this.onOptionSelected = event => {
             this.value = event.detail.selectedOption;
         };
+        this.placeholder = undefined;
+        this.optionsList = [];
+        this.value = null;
+        this.disabled = false;
+        this.closed = undefined;
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {
@@ -23,7 +22,7 @@ export class SearchComponent {
         }
     }
     render() {
-        return (h(Host, { key: '8f692ad48f58ebb6105e4c415a36e51d9a73d78f' }, h("b2b-input-group", { key: '2618c0422e473dd4ab44e4fef69ad2a4a655b5cc', disabled: this.disabled }, h("b2b-input-list", { key: 'a629516828a1b65395d55c7832c52a66a1c7f080', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '44001f52f0fc5a6992ed91fc694c313251e52d89' })), h("b2b-button", { key: '291e6dc3f0a3b747fe1b108532a1a0b07ce46847', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: '38e71cfde358087f38f4732fa85484cf509bd736', icon: "b2b_icon-search", clickable: true })))));
+        return (h(Host, { key: '08be0d3238571d8a4e268d7a54d382114cd05ab4' }, h("b2b-input-group", { key: 'dbba9867d3b05f80edbf79973ca51cd9d7c9ec73', disabled: this.disabled }, h("b2b-input-list", { key: 'fec8bfb0012836b4ff458569130a016d36bbef2b', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '04bdd57ddbbde6f5f41f4704a2bbfa048df32aed' })), h("b2b-button", { key: '7e4d662ed1fd9423e77ee8e89beda95367f0a4a2', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: '44d5ac8b006f1fabf6d81735d6d626e0dcbbc339', icon: "b2b_icon-search", clickable: true })))));
     }
     static get is() { return "b2b-search"; }
     static get encapsulation() { return "shadow"; }
@@ -31,7 +30,6 @@ export class SearchComponent {
         return {
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -44,13 +42,11 @@ export class SearchComponent {
                     "tags": [],
                     "text": "The placeholder shown in the input field."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "placeholder",
                 "reflect": false
             },
             "optionsList": {
                 "type": "unknown",
-                "attribute": "options-list",
                 "mutable": false,
                 "complexType": {
                     "original": "string[]",
@@ -63,13 +59,10 @@ export class SearchComponent {
                     "tags": [],
                     "text": "The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire."
                 },
-                "getter": false,
-                "setter": false,
                 "defaultValue": "[]"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -82,14 +75,12 @@ export class SearchComponent {
                     "tags": [],
                     "text": "The default value of the search input field. If defined, it will prefill the input."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "null"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -102,8 +93,7 @@ export class SearchComponent {
                     "tags": [],
                     "text": "Whether or not the input is disabled. Default is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             }

package/dist/collection/components/separator/separator.e2e.js

@@ -0,0 +1,22 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Separator', () => {
+    let page;
+    it('renders', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-separator></b2b-separator>`);
+        const element = await page.find('b2b-separator');
+        expect(element).not.toBeNull();
+    });
+    it('displays a vertical separator', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<div style="height: 18px;"><b2b-separator alignment="vertical"></b2b-separator></div>`);
+        const element = await page.find('b2b-separator >>> div');
+        expect(element).toHaveClass('b2b-separator--vertical');
+    });
+    it('displays a horizontal separator', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<div style="width: 18px;"><b2b-separator alignment="horizontal"></b2b-separator></div>`);
+        const element = await page.find('b2b-separator >>> div');
+        expect(element).toHaveClass('b2b-separator--horizontal');
+    });
+});

package/dist/collection/components/separator/separator.js

@@ -1,11 +1,10 @@
 import { h, Host } from "@stencil/core";
 export class B2bSeparatorComponent {
     constructor() {
-        /** The alignment of the separator. Per default it is horizontal. */
         this.alignment = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '8c508e1e41272e258efaa08fb61b0874b48e1637' }, h("div", { key: 'a42ed2f42bdf6aa2642e6760c26ee61ff7d18da3', class: {
+        return (h(Host, { key: '06f767c6c587079b6ed216081a4df3c9e599d28f' }, h("div", { key: 'c4439cc5b13f6b2932e982c03a3c2518341ef8f2', class: {
                 [`b2b-separator--${this.alignment}`]: true,
             } })));
     }
@@ -25,7 +24,6 @@ export class B2bSeparatorComponent {
         return {
             "alignment": {
                 "type": "string",
-                "attribute": "alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "'vertical' | 'horizontal'",
@@ -38,8 +36,7 @@ export class B2bSeparatorComponent {
                     "tags": [],
                     "text": "The alignment of the separator. Per default it is horizontal."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "alignment",
                 "reflect": false,
                 "defaultValue": "'horizontal'"
             }

package/dist/collection/components/shimmer/shimmer.e2e.js

@@ -0,0 +1,18 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Shimmer', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent('<b2b-shimmer loading="true" width="100" height="100"></b2b-shimmer>');
+    });
+    it('should render shimmer component', async () => {
+        const element = await page.find('b2b-shimmer');
+        expect(element).toBeDefined();
+    });
+    it('should show slot content if loading is false', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-shimmer><h1>dummy content</h1></b2b-shimmer>');
+        const element = await page.find('h1');
+        expect(element).toEqualText('dummy content');
+    });
+});

package/dist/collection/components/shimmer/shimmer.js

@@ -1,11 +1,16 @@
 import { h, Host } from "@stencil/core";
 export class ShimmerComponent {
+    constructor() {
+        this.loading = undefined;
+        this.width = undefined;
+        this.height = undefined;
+    }
     render() {
         const shimmerStyle = {
             width: `${this.width}px`,
             height: `${this.height}px`,
         };
-        return (h(Host, { key: '2333ae941c19a9505f61de6d71fe12f842d7b8ff' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
+        return (h(Host, { key: 'd56356a77a4cc11ceee13d7e579a4df5aa9826f1' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
     }
     static get is() { return "b2b-shimmer"; }
     static get encapsulation() { return "shadow"; }
@@ -23,7 +28,6 @@ export class ShimmerComponent {
         return {
             "loading": {
                 "type": "boolean",
-                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -36,13 +40,11 @@ export class ShimmerComponent {
                     "tags": [],
                     "text": "Whether the shimmer effect is shown or not."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "loading",
                 "reflect": false
             },
             "width": {
                 "type": "number",
-                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -55,13 +57,11 @@ export class ShimmerComponent {
                     "tags": [],
                     "text": "The width of the shimmer effect im px."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "width",
                 "reflect": false
             },
             "height": {
                 "type": "number",
-                "attribute": "height",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -74,8 +74,7 @@ export class ShimmerComponent {
                     "tags": [],
                     "text": "The height of the shimmer effect in px."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "height",
                 "reflect": false
             }
         };

package/dist/collection/components/shimmer/shimmer.spec.js

@@ -0,0 +1,35 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ShimmerComponent } from "./shimmer";
+import { h } from "@stencil/core";
+describe('B2B-Shimmer', () => {
+    async function renderPage(template) {
+        return newSpecPage({
+            components: [ShimmerComponent],
+            template: () => template,
+        });
+    }
+    it('should render shimmer effect with width 100 and height 100 attributes', async () => {
+        const dummyContent = 'Dummy content';
+        const page = await renderPage(h("b2b-shimmer", { loading: true, width: 100, height: 100 }, dummyContent));
+        expect(page.root).toEqualHtml(`
+      <b2b-shimmer>
+        <mock:shadow-root>
+          <div class="b2b-shimmer" style="width: 100px; height: 100px;"></div>
+        </mock:shadow-root>
+        ${dummyContent}
+      </b2b-shimmer>
+		`);
+    });
+    it('should show slot content and hide shimmer effect', async () => {
+        const dummyContent = 'Dummy content';
+        const page = await renderPage(h("b2b-shimmer", { loading: false, width: 100, height: 100 }, dummyContent));
+        expect(page.root).toEqualHtml(`
+      <b2b-shimmer>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+        ${dummyContent}
+      </b2b-shimmer>
+		`);
+    });
+});

package/dist/collection/components/snackbar/snackbar.e2e.js

@@ -0,0 +1,61 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Snackbar', () => {
+    it('should render the snackbar component', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-snackbar description="test"></b2b-snackbar>`);
+        const element = await page.find('b2b-snackbar >>> .b2b-snackbar__content__description');
+        expect(element).not.toBeNull();
+        expect(element.textContent).toBe('test');
+    });
+    it('should not be opened by default', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-snackbar></b2b-snackbar>`);
+        const element = await page.find('b2b-snackbar >>> div.b2b-snackbar');
+        expect(element).not.toHaveClass('b2b-snackbar--opened');
+        const snackbar = await page.find('b2b-snackbar');
+        expect(await snackbar.getProperty('opened')).toBe(false);
+    });
+    it('should make the snackbar opened', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-snackbar opened></b2b-snackbar>`);
+        const element = await page.find('b2b-snackbar >>> div');
+        expect(await element.isVisible()).toBe(true);
+    });
+    it('should render snackbar with CTA and close button', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-snackbar opened has-action="true" action-label="Call to action"></b2b-snackbar>`);
+        await page.waitForChanges();
+        const b2bActionClick = await page.spyOnEvent('b2b-action-click');
+        const snackbar = await page.find('b2b-snackbar');
+        expect(await snackbar.isVisible()).toBe(true);
+        const cta = await page.find('b2b-snackbar >>> div.b2b-snackbar__action');
+        expect(cta).not.toBeNull();
+        await cta.click();
+        expect(b2bActionClick).toHaveReceivedEvent();
+    });
+    it('should render snackbar that disappears after certain amount of time', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-snackbar opened timed="true" duration="1000">test</b2b-snackbar>`);
+        const element = await page.find('b2b-snackbar >>> div');
+        expect(await element.isVisible()).toBe(true);
+        await new Promise(res => setTimeout(res, 2000));
+        await page.waitForChanges();
+        const snackbar = await page.find('b2b-snackbar');
+        const isOpened = await snackbar.getProperty('opened');
+        expect(isOpened).toBe(false);
+    });
+    it('if snackbar is of type error, cannot be timed', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-snackbar opened type="error" timed="true" duration="1000"></b2b-snackbar>`);
+        const element = await page.find('b2b-snackbar >>> div');
+        expect(await element.isVisible()).toBe(true);
+        const closeIcon = await page.find('b2b-snackbar >>> div.b2b-snackbar__close-icon');
+        expect(closeIcon).not.toBeNull();
+        expect(element).toHaveClass('b2b-snackbar--opened');
+        await element.hover();
+        await page.mouse.move(0, 0);
+        await new Promise(res => setTimeout(res, 3500));
+        await page.waitForChanges();
+        expect(element).toHaveClass('b2b-snackbar--opened');
+    });
+});