From 2d6c220ae2ec6ca65ca09b556f430a0b5e7eb962 Mon Sep 17 00:00:00 2001
From: Chris Haynes <chris.haynes@gmail.com>
Date: Mon, 24 Aug 2020 21:54:45 +0100
Subject: [PATCH] Add e2e tests for slAlert

---
 test/e2e/alert.e2e.ts | 85 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 test/e2e/alert.e2e.ts

diff --git a/test/e2e/alert.e2e.ts b/test/e2e/alert.e2e.ts
new file mode 100644
index 000000000..8938c9af5
--- /dev/null
+++ b/test/e2e/alert.e2e.ts
@@ -0,0 +1,85 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContentStartClosed = `
+<sl-alert>
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
+  This is a standard alert. You can customize its content and even the icon.
+</sl-alert>
+`;
+
+const testContentStartOpen = `
+<sl-alert open>
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
+  This is a standard alert. You can customize its content and even the icon.
+</sl-alert>>
+`;
+
+describe('alert', () => {
+  it('should open/close with the show/hide methods', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const alert = await page.find('sl-alert');
+    const alertBase = await page.find('sl-alert >>> .alert');
+
+    expect(await alertBase.isVisible()).toBe(false);
+
+    await alert.callMethod('show');
+    await page.waitFor(500); // wait for transition to end
+    expect(await alertBase.isVisible()).toBe(true);
+
+    await alert.callMethod('hide');
+    await page.waitFor(500); // wait for transition to end
+    expect(await alertBase.isVisible()).toBe(false);
+  });
+
+  it('should open/close with the open attribute added/removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const alert = await page.find('sl-alert');
+    const alertBase = await page.find('sl-alert >>> .alert');
+
+    expect(await alertBase.isVisible()).toBe(false);
+
+    alert.setAttribute('open', '');
+    await page.waitForChanges();
+    await page.waitFor(500); // wait for transition to end
+    expect(await alertBase.isVisible()).toBe(true);
+
+    alert.removeAttribute('open');
+    await page.waitForChanges();
+    await page.waitFor(500); // wait for transition to end
+    expect(await alertBase.isVisible()).toBe(false);
+  });
+
+  it('should emit slShow and slAfterShow events when alert is opened', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const alert = await page.find('sl-alert');
+    const slShow = await alert.spyOnEvent('slShow');
+    const slAfterShow = await alert.spyOnEvent('slAfterShow');
+
+    await alert.callMethod('show');
+    expect(slShow).toHaveReceivedEventTimes(1);
+
+    await page.waitFor(500); // wait for transition to end
+    expect(slAfterShow).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slHide and slAfterHide events when alert is closed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartOpen);
+
+    const alert = await page.find('sl-alert');
+    const slHide = await alert.spyOnEvent('slHide');
+    const slAfterHide = await alert.spyOnEvent('slAfterHide');
+
+    await alert.callMethod('hide');
+    expect(slHide).toHaveReceivedEventTimes(1);
+
+    await page.waitFor(500); // wait for transition to end
+    expect(slAfterHide).toHaveReceivedEventTimes(1);
+  });
+});