test(toast): add e2e test

Endava · Jun 28, 2023 · 2180dd9 · 2180dd9
1 parent 08dcbdc
commit 2180dd9
Showing 1 changed file with 74 additions and 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
@@ -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');
   });
 });