Stencil Testing Cheatsheet

A collection of useful code snippets and examples for writing End to End tests in a Stencil project.

Basic test

import { newE2EPage } from "@stencil/core/testing";

describe("example", () => {
  it("should render a my-comp", async () => {
    const page = await newE2EPage();
    await page.setContent(`<my-comp></my-comp>`);
    const el = await page.find("my-comp");
    expect(el).not.toBeNull();
  });
});

Type inside an input

const input = await page.find("my-comp >>> input");
await input.press("8");
await input.press("KeyM");
await input.press(" ");
await page.keyboard.down("Shift");
await input.press("KeyM");
await page.keyboard.up("Shift");

Find an element in the shadow DOM

const el = await page.find("my-comp >>> .close-button");

Call a method on a component

const elm = await page.find("my-comp");
const value = await elm.callMethod("methodName");

Set a prop on a component

await page.setContent(`<my-comp></my-comp>`);
await page.$eval("my-comp", elm => {
  elm.first = "Marty";
});
await page.waitForChanges();

Move the mouse

await page.mouse.move(200, 300);
await page.mouse.down();
await page.mouse.move(240, 380);
await page.mouse.up();

Check an element is visible

const wrapper = await page.find("my-comp >>> .visible");
const visible = await wrapper.isVisible();
expect(visible).toBe(true);

Check that an element has an attribute

const component = await page.find("my-comp");
expect(component).toHaveAttribute("attribute");
expect(component).toEqualAttribute("attribute", "value");

Check that an event was fired

const changedEvent = await page.spyOnEvent("myEventName");
// perform actions that should fire the event
await page.waitForChanges();
expect(changedEvent).toHaveReceivedEventTimes(1);

Check the detail of a custom event

const changedEvent = await page.spyOnEvent("myEventName");
// perform actions that should fire the event
await page.waitForChanges();
expect(changedEvent).toHaveFirstReceivedEventDetail(true);

Check that a property has changed

const component = await page.find("my-comp");
let value = await slider.getProperty("value");
expect(value).toBe(30);
// perform actions that should change the value
expect(await component.getProperty("value")).toBe(31);

Check the length of a DOM collection

const children = await page.findAll("my-comp >>> .child");
expect(children.length).toBe(11);

Check text content of an element

const button = await page.find("my-comp >>> button");
const text = button.textContent;
expect(text).toBe("hello world");