stencil-awesome-test v1.0.6

Stencil Awesome Test

Motivation

Normally, tests are built piece by piece and written for each test case.

As soon as many components are to be tested, it is important to consider the costs for the care and maintenance of the tests.

With this small library it is possible to simplify the care and maintenance of the tests considerably.

If a component is changed, only one change needs to be made to the tests so that all tests run again.

Delimitation

This test library currently only works for Stencil.

Installation

The following package must be installed:

• NPM: npm i -D stencil-awesome-test

• or PNPM: pnpm i -D stencil-awesome-test

• or Yarn: yarn add -D stencil-awesome-test

Usage

First of all, we need a component (test object) for testing:

my-component.tsx

import { Component, h, JSX, Prop } from '@stencil/core';

/**
 * API
 */
type RequiredProps = {
  title: string;
};
type OptionalProps = {
  tooltipAlign: TooltipAlignment;
};
export type Props = {
  age: number;
  name: string;
};

@Component({
  tag: 'my-component',
})
export class MyComponent implements Props {
  /**
   * My component age property
   */
  @Prop() public age: number;

  /**
   * My component name property
   */
  @Prop() public name!: string;

  public render(): JSX.Element {
    return (
      <p>
        Hello, I am {this.name}
        {this.age && <span> and I am {this.age} years old</span>}.
      </p>
    );
  }
}

You have to write two files for every component:

1. HTML-Mock
2. Spec-TSX

HTML-Mock

The mock file represents the counterpart to the render result of the TSX renderer. With the help of parameterization, the various test cases can be mapped.

Note: The important thing is that there is a second implementation (counterpart) to the component. This specifies how the sub-DOM of the component should look depending on the properties.

test/html.mock.tsx

import { mixMembers } from 'stencil-awesome-test';
import { Props } from '../my-component';

export const getMyComponentHtml = (props: Props): string => {
  return `
<my-component>
  <mock:shadow-root>
    <p>
      Hallo, my name is ${props.name}${props.age && `<span> and I am ${this.age} years old</span>`}.
    </p>
  </mock:shadow-root>
</my-component>`;
};

Spec-TSX

The second part is the test execution configuration. You can give them the property list with some relevant property values. The executor merge this input and execute all tests.

test/snapshot.spec.tsx

import { h } from '@stencil/core';
import { newSpecPage, SpecPage } from '@stencil/core/testing';
import { executeTests } from 'stencil-awesome-test';

import { MyComponent, Props } from '../my-component';
import { getMyComponentHtml } from './html.mock';

executeTests<Props>(
  'MyComponent',
  async (props): Promise<SpecPage> => {
    const page = await newSpecPage({
      components: [MyComponent],
      template: () => <my-component {...props} />,
    });
    return page;
  },
  {
    age: [10, 25],
    name: ['Martin'],
  },
  getMyComponentHtml
);

Execute the tests

Run npx stencil test --spec

More information you can find here: https://stenciljs.com/docs/unit-testing