From 2180dd9c3e995459f6340c56240cc041661f19b0 Mon Sep 17 00:00:00 2001
From: Bogdan Bosca <bogdan-dan.bosca@endava.com>
Date: Wed, 28 Jun 2023 16:47:26 +0300
Subject: [PATCH] test(toast): add e2e test

---
 .../toast/__tests__/bq-toast.e2e.ts           | 78 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 4 deletions(-)

diff --git a/packages/bee-q/src/components/toast/__tests__/bq-toast.e2e.ts b/packages/bee-q/src/components/toast/__tests__/bq-toast.e2e.ts
index c79715345..05d62bbee 100644
--- a/packages/bee-q/src/components/toast/__tests__/bq-toast.e2e.ts
+++ b/packages/bee-q/src/components/toast/__tests__/bq-toast.e2e.ts
@@ -1,5 +1,7 @@
 import { newE2EPage } from '@stencil/core/testing';
 
+import { computedStyle } from '../../../shared/test-utils/computedStyle';
+
 describe('bq-toast', () => {
   it('should render', async () => {
     const page = await newE2EPage();
@@ -19,12 +21,80 @@ describe('bq-toast', () => {
     expect(element.shadowRoot).not.toBeNull();
   });
 
-  it.skip('should display text', async () => {
+  it('should display text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<bq-toast></bq-toast>');
+    await page.setContent('<bq-toast>Text</bq-toast>');
+
+    const element = await page.find('bq-toast');
+
+    expect(element).toEqualText('Text');
+  });
+
+  it('should display info icon by default', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-toast>Text</bq-toast>');
+
+    const iconWrapper = await page.find('bq-toast >>> bq-icon');
+
+    expect(iconWrapper).toEqualAttribute('name', 'info');
+  });
+
+  it('should display success icon', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-toast type="success">Text</bq-toast>');
+
+    const iconWrapper = await page.find('bq-toast >>> bq-icon');
+
+    expect(iconWrapper).toEqualAttribute('name', 'check-circle');
+  });
+
+  it('should display custom icon', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <bq-toast>
+      Text
+      <bq-icon slot="icon" size="24" weight="bold" name="star"></bq-icon>
+    </bq-toast>
+    `);
+
+    const iconWrapperName = await page.$eval('bq-toast', (element) => {
+      const slotElement = element.shadowRoot.querySelector<HTMLSlotElement>('slot[name="icon"]');
+
+      const assignedElements = slotElement.assignedElements({ flatten: true })[0];
+
+      return assignedElements.getAttribute('name');
+    });
+
+    expect(iconWrapperName).toEqualText('star');
+  });
+
+  it('should respect design style', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<bq-toast>Text</bq-toast>`);
+
+    const styleProps = ['padding', 'borderRadius', 'gap'] as const;
+
+    const style = await computedStyle(page, 'bq-toast >>> [part="base"]', styleProps);
+
+    expect(style).toEqual({ padding: '12px 16px', borderRadius: '8px', gap: '8px' });
+  });
+
+  it('should call methods', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-toast>Test</bq-toast>');
+
+    const element = await page.find('bq-toast');
+
+    await element.callMethod('show');
+    await page.waitForChanges();
+
+    expect(element).toEqualAttribute('aria-hidden', 'false');
+    expect(element).toEqualAttribute('hidden', 'false');
 
-    const element = await page.find('bq-toast >>> p');
+    await element.callMethod('hide');
+    await page.waitForChanges();
 
-    expect(element).toEqualText('My name is Stencil');
+    expect(element).toEqualAttribute('aria-hidden', 'true');
+    expect(element).toEqualAttribute('hidden', 'true');
   });
 });