test(e2e): update to stencil 0.13.0-3 testing

core/src/components/toggle/test/toggle.e2e.ts

@@ -0,0 +1,159 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('toggle', () => {
+
+  it('should create standalone, unchecked by default', async () => {
+    // create a new e2e test page
+    const page = await newE2EPage();
+
+    // set the page content
+    await page.setContent(`
+      <ion-toggle class="some-class"></ion-toggle>
+    `);
+
+    // add an event spy to the page
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    // find the elemnt in the page
+    const toggle = await page.find('ion-toggle');
+
+    // check it has the expected css classes
+    expect(toggle).toHaveClass('some-class');
+    expect(toggle).toHaveClass('hydrated');
+
+    // toggle should not have checked css
+    expect(toggle).not.toHaveClass('toggle-checked');
+
+    // set checked property
+    toggle.setProperty('checked', true);
+
+    // wait for the changes to apply
+    await page.waitForChanges();
+
+    // make sure the property was updated
+    const checkedValue1 = await toggle.getProperty('checked');
+    expect(checkedValue1).toBe(true);
+
+    // toggle should have checked css
+    expect(toggle).toHaveClass('toggle-checked');
+
+    // make sure we received the correct event detail
+    expect(ionChange).toHaveReceivedEventDetail({
+      checked: true,
+      value: 'on'
+    });
+
+    // set unchecked
+    await toggle.setProperty('checked', false);
+
+    // wait for the changes to apply
+    await page.waitForChanges();
+
+    // make sure the property was updated
+    const checkedValue2 = await toggle.getProperty('checked');
+    expect(checkedValue2).toBe(false);
+
+    // toggle should not be checked
+    expect(toggle).not.toHaveClass('toggle-checked');
+
+    // we should have received the event two times now
+    expect(ionChange).toHaveReceivedEventTimes(2);
+
+    // make sure we received the correct event detail
+    expect(ionChange).toHaveReceivedEventDetail({
+      checked: false,
+      value: 'on'
+    });
+  });
+
+  it('should create standalone, checked by default', async () => {
+    const page = await newE2EPage({ html: `
+      <ion-toggle checked></ion-toggle>
+    `});
+
+    // find the elemnt in the page
+    const toggle = await page.find('ion-toggle');
+
+    // spy on the ionChange event
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    // find the hidden input in the light dom
+    const hiddenInput = await page.find('ion-toggle input[type=hidden]');
+
+    // hidden input property should have value
+    expect(hiddenInput).toEqualAttribute('value', 'on');
+
+    // hidden in put should have aux-input class
+    expect(hiddenInput).toHaveClass('aux-input');
+
+    // find the checkbox input in the shadow dom
+    const checkboxInput = await page.find('ion-toggle >>> input[type=checkbox]');
+
+    // checkbox input should have value on
+    expect(checkboxInput).toEqualAttribute('value', 'on');
+
+    // checkbox input should have checked property true
+    const checkedValue = await checkboxInput.getProperty('checked');
+    expect(checkedValue).toBe(true);
+
+    // set checked true again, no actual change
+    await toggle.setProperty('checked', true);
+
+    // wait for the changes to apply
+    await page.waitForChanges();
+
+    // shouldn't have fired the ionChange event cuz it didn't change
+    expect(ionChange).not.toHaveReceivedEvent();
+
+    // uncheck
+    toggle.setProperty('checked', false);
+
+    // wait for the changes to apply
+    await page.waitForChanges();
+
+    // toggle should not be checked
+    const checkedValue2 = await toggle.getProperty('checked');
+    expect(checkedValue2).toBe(false);
+
+    // hidden input property should no value
+    expect(hiddenInput).toEqualAttribute('value', '');
+
+    expect(ionChange).toHaveReceivedEventTimes(1);
+
+    expect(ionChange).toHaveReceivedEventDetail({
+      checked: false,
+      value: 'on'
+    });
+  });
+
+  it('should pass properties down to hidden input', async () => {
+    const page = await newE2EPage({ html: `
+      <ion-toggle disabled checked value="coding" name="primary"></ion-toggle>
+    `});
+
+    const toggle = await page.find('ion-toggle');
+
+    expect(await toggle.getProperty('disabled')).toBe(true);
+    expect(await toggle.getProperty('checked')).toBe(true);
+    expect(await toggle.getProperty('value')).toBe('coding');
+    expect(await toggle.getProperty('name')).toBe('primary');
+
+    const hiddenInput = await page.find('ion-toggle input[type=hidden]');
+
+    expect(await hiddenInput.getProperty('disabled')).toBe(true);
+    expect(await hiddenInput.getProperty('value')).toBe('coding');
+    expect(await hiddenInput.getProperty('name')).toBe('primary');
+
+    toggle.setProperty('disabled', false);
+    toggle.setProperty('checked', false);
+    toggle.setProperty('value', 'design');
+    toggle.setProperty('name', 'secondary');
+
+    await page.waitForChanges();
+
+    expect(await hiddenInput.getProperty('disabled')).toBe(false);
+    expect(await hiddenInput.getProperty('value')).toBe('');
+    expect(await hiddenInput.getProperty('name')).toBe('secondary');
+  });
+
+});

core/src/components/toggle/test/toggle.spec.ts

@@ -1,120 +0,0 @@
-import { TestWindow, spyOnEvent } from '@stencil/core/dist/testing';
-
-import { Toggle } from '../toggle';
-
-describe('toggle', () => {
-  it('should create standalone', async () => {
-    const win = new TestWindow();
-    const el = await win.load({
-      components: [Toggle],
-      html: '<ion-toggle></ion-toggle>'
-    }) as HTMLIonToggleElement;
-
-    const ionChange = spyOnEvent(el, 'ionChange');
-
-    // toggle should not be checked
-    testChecked(el, false);
-
-    // set checked
-    el.checked = true;
-    await win.flush();
-
-    // toggle should be checked
-    testChecked(el, true);
-    expect(ionChange).toHaveBeenCalledWith({
-      checked: true,
-      value: 'on'
-    });
-
-    // set unchecked
-    el.checked = false;
-    await win.flush();
-
-    // toggle should not be checked
-    testChecked(el, false);
-    expect(ionChange).toHaveBeenCalledTimes(2);
-    expect(ionChange).toHaveBeenCalledWith({
-      checked: false,
-      value: 'on'
-    });
-  });
-
-  it('should create checked standalone', async () => {
-    const win = new TestWindow();
-    const el = await win.load({
-      components: [Toggle],
-      html: '<ion-toggle checked></ion-toggle>'
-    }) as HTMLIonToggleElement;
-
-    const ionChange = spyOnEvent(el, 'ionChange');
-
-    // toggle should not be checked
-    testChecked(el, true);
-
-    // set checked
-    el.checked = true;
-    await win.flush();
-
-    testChecked(el, true);
-    expect(ionChange).not.toHaveBeenCalled();
-
-    // set checked
-    el.checked = false;
-    await win.flush();
-
-    // toggle should not be checked
-    testChecked(el, false);
-    expect(ionChange).toHaveBeenCalledTimes(1);
-    expect(ionChange).toHaveBeenCalledWith({
-      checked: false,
-      value: 'on'
-    });
-  });
-
-  it('should pass properties down to <input>', async () => {
-    const win = new TestWindow();
-    const el = await win.load({
-      components: [Toggle],
-      html: '<ion-toggle disabled checked value="coding" name="primary"></ion-toggle>'
-    }) as HTMLIonToggleElement;
-
-    expect(el.disabled).toBe(true);
-    expect(el.checked).toBe(true);
-    expect(el.value).toBe('coding');
-    expect(el.name).toBe('primary');
-
-    const input = getInput(el);
-    expect(input).toHaveProperties({
-      disabled: true,
-      checked: true,
-      value: 'coding',
-      name: 'primary'
-    });
-
-    el.disabled = false;
-    el.checked = false;
-    el.value = 'design';
-    el.name = 'secondary';
-
-    await win.flush();
-    expect(input.disabled).toBe(false);
-    expect(input.checked).toBe(false);
-    expect(input.value).toBe('design');
-    expect(input.name).toBe('secondary');
-  });
-});
-
-function testChecked(el: HTMLIonToggleElement, shouldBeChecked: boolean) {
-  const input = getInput(el);
-  expect(el.checked).toBe(shouldBeChecked);
-  expect(input.checked).toBe(shouldBeChecked);
-  if (shouldBeChecked) {
-    expect(el).toHaveClasses(['toggle-checked']);
-  } else {
-    expect(el).not.toHaveClasses(['toggle-checked']);
-  }
-}
-
-function getInput(el: HTMLElement): HTMLInputElement {
-  return el.querySelector('input')!;
-}