MonsieurMan

import { TestWindow } from '@stencil/core/testing';

import { Adder } from './adder';

describe('adder', () => {
  it('should build', () => {
    expect(new Adder()).toBeTruthy();
  });

  describe('rendering', () => {

MonsieurMan

import { Component } from '@stencil/core';

@Component({
  tag: 'adder',
})
export class Adder {
  render() {
    return (<div></div>);
  }
}

MonsieurMan

declare global {
  // This is actually merging to the HTMLElement DOM Interface
  interface HTMLElement {
    componentOnReady?: () => Promise<this | null>;
  }

  interface HTMLStencilElement extends HTMLElement {
    componentOnReady(): Promise<this>;
    forceUpdate(): void;
  }

MonsieurMan

beforeEach(async () => {
  testWindow = new TestWindow();
  element = await testWindow.load({
    components: [Adder],
    // Let's say we want to props `a` and `b`
    html: '<adder a="2" b="2"></adder>',
  });
});

it('adds up the two values and display it in the text content', () => {

MonsieurMan

render(): JSX.Element {
  return '4';
}

MonsieurMan

export class Adder {
  @Prop() a: number;
  @Prop() b: number;

  render(): JSX.Element {
    return this.a + this.b;
  }
}

MonsieurMan

interface Adder {
  'a': number;
  'b': number;
}

MonsieurMan

it('updates the result if we change the props', () => {
  element.a = 1;
  element.b = 1;
  expect(element.textContent).toEqual('1');
});

MonsieurMan

it('updates the result if we change the props', async () => {
  element.a = 1;
  element.b = 1;
  await testWindow.flush();
  expect(element.textContent).toEqual('2');
});

MonsieurMan

describe('adder', () => {
  it('should build', () => {
    expect(new Adder()).toBeTruthy();
  });

  it('adds up the two values', () => {
    const adder = new Adder();
    adder.a = 1;
    adder.b = 1;
    expect(adder.value).toEqual(2);