From fd7ef714382dfaa257490197efb19f71f0af8141 Mon Sep 17 00:00:00 2001
From: Chris Haynes <chris.haynes@gmail.com>
Date: Thu, 27 Aug 2020 22:12:09 +0100
Subject: [PATCH] Add e2e tests for slForm

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

diff --git a/test/e2e/form.e2e.ts b/test/e2e/form.e2e.ts
new file mode 100644
index 00000000..d4eeff93
--- /dev/null
+++ b/test/e2e/form.e2e.ts
@@ -0,0 +1,90 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-form class="form-overview">
+  <sl-input name="name" type="text" label="Name" value="Ada"></sl-input>
+  <br>
+  <sl-select name="favorite" label="Select your favorite" value="dogs">
+    <sl-menu-item value="birds">Birds</sl-menu-item>
+    <sl-menu-item value="cats">Cats</sl-menu-item>
+    <sl-menu-item value="dogs">Dogs</sl-menu-item>
+  </sl-select>
+  <br>
+  <sl-checkbox name="agree" value="yes" checked>
+    I totally agree
+  </sl-checkbox>
+  <br><br>
+  <sl-button submit>Submit</sl-button>
+</sl-form>
+`;
+
+describe('button', () => {
+  it('should emit slSubmit when submit button clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const form = await page.find('sl-form');
+    const button = await page.find('sl-button');
+
+    const slSubmit = await form.spyOnEvent('slSubmit');
+
+    await button.click();
+
+    expect(slSubmit).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slSubmit when submit method called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const form = await page.find('sl-form');
+
+    const slSubmit = await form.spyOnEvent('slSubmit');
+
+    await form.callMethod('submit');
+
+    expect(slSubmit).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slSubmit when enter pressed in input', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const form = await page.find('sl-form');
+    const inputControl = await page.find('sl-input >>> .input__control');
+
+    const slSubmit = await form.spyOnEvent('slSubmit');
+
+    await inputControl.press('Enter');
+
+    expect(slSubmit).toHaveReceivedEventTimes(1);
+  });
+
+  it('should return array of form elements when getFormControls called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const form = await page.find('sl-form');
+    const inputEl = await page.$eval('sl-input', el => el);
+    const selectEl = await page.$eval('sl-select', el => el);
+    const checkboxEl = await page.$eval('sl-checkbox', el => el);
+    const buttonEl = await page.$eval('sl-button', el => el);
+
+    const formControls = await form.callMethod('getFormControls');
+
+    expect(formControls).toEqual([inputEl, selectEl, checkboxEl, buttonEl]);
+  });
+
+  it('should return FormData object when getFormData called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const formData = await page.$eval('sl-form', async el => [...(await el.getFormData()).entries()]);
+
+    expect(formData).toEqual([
+      ['name', 'Ada'],
+      ['favorite', 'dogs'],
+      ['agree', 'yes']
+    ]);
+  });
+});