# stencil-awesome-test

> Contains the generic test utils to test stencil components.

Latest version **1.0.6** (published 2023-03-14) · EUPL-1.2 license · 0 weekly downloads

## Install

```sh
npm install stencil-awesome-test
pnpm add stencil-awesome-test
yarn add stencil-awesome-test
bun add stencil-awesome-test
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2023-03-14 |
| First published | 2022-06-20 |
| Weekly downloads | 0 |
| License | EUPL-1.2 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Martin Oppitz |
| Maintainers | m.oppitz |

## Links

- npm: https://www.npmjs.com/package/stencil-awesome-test
- npm.io page: https://npm.io/package/stencil-awesome-test

## Recent versions

- 1.0.6 (latest) — 2023-03-14
- 1.0.5 — 2023-01-27
- 1.0.4 — 2022-11-25
- 1.0.3 — 2022-07-07
- 1.0.2 — 2022-07-07
- 1.0.1 — 2022-07-07
- 1.0.0 — 2022-06-20

## README

# Stencil Awesome Test

![Dependencies](https://img.shields.io/librariesio/release/npm/stencil-awesome-test?style=for-the-badge)
![Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/stencil-awesome-test?style=for-the-badge)
![Version](https://img.shields.io/npm/v/stencil-awesome-test?style=for-the-badge)
![Downloads](https://img.shields.io/npm/dt/stencil-awesome-test?style=for-the-badge)
![Size](https://img.shields.io/bundlephobia/min/stencil-awesome-test?style=for-the-badge)
![Lerna](https://img.shields.io/badge/managed%20with-lerna-blueviolet?style=for-the-badge)

## 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](https://stenciljs.com/).

## 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`

```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`

```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`

```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

---
_Source: https://npm.io/package/stencil-awesome-test · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._