|
2 | 2 |
|
3 | 3 | <img src="img/ficus-icon-optimised.svg" alt="FicusJS" width="150" align="right"> |
4 | 4 |
|
5 | | -Helper functions for web component testing. |
| 5 | +The [FicusJS testing](https://www.npmjs.com/package/@ficusjs/testing) package provides lightweight helper functions for web component testing. |
6 | 6 |
|
7 | | -## Documentation |
| 7 | +This package provides browser globals such as `window` and `document` using [jsdom](https://www.npmjs.com/package/jsdom) which is an implementation of many browser APIs ideal for testing but is not an actual browser. |
8 | 8 |
|
9 | | -See the [full documentation](https://docs.ficusjs.org). |
| 9 | +We recommend using a tool such as [Cypress](https://www.cypress.io/) for browser end-to-end tests. |
| 10 | + |
| 11 | +## Running tests |
| 12 | + |
| 13 | +This package contains functions intended for a NodeJS environment and not a real browser. It is therefore, best used for fast iteration. |
| 14 | + |
| 15 | +The functions can be used with any NodeJS testing framework. |
| 16 | + |
| 17 | +The following functions are available in the [FicusJS testing](https://www.npmjs.com/package/@ficusjs/testing) package. |
| 18 | + |
| 19 | +- `init` - a function for initializing the test environment |
| 20 | +- `render` - a function to render a web component for testing |
| 21 | + |
| 22 | +### init function |
| 23 | + |
| 24 | +The `init` function initializes the NodeJS environment ready for testing. |
| 25 | + |
| 26 | +Simply call `init` in your set-up hook. |
| 27 | + |
| 28 | +```js |
| 29 | +import test from 'ava' |
| 30 | +import { init, render } from '@ficusjs/testing' |
| 31 | + |
| 32 | +test.before(init) |
| 33 | +``` |
| 34 | + |
| 35 | +### render function |
| 36 | + |
| 37 | +The `render` function will create a new web component instance for testing. |
| 38 | + |
| 39 | +It returns a DOM instance of the component. |
| 40 | + |
| 41 | +```js |
| 42 | +import test from 'ava' |
| 43 | +import { init, render } from '@ficusjs/testing' |
| 44 | + |
| 45 | +test.before(init) |
| 46 | + |
| 47 | +test('render basic component', async t => { |
| 48 | + const comp = await render('basic-comp', () => import('../src/component.mjs')) |
| 49 | + t.is(comp.querySelector('p').textContent, 'Basic component') |
| 50 | +}) |
| 51 | +``` |
| 52 | + |
| 53 | +The `render` function accepts the following arguments: |
| 54 | + |
| 55 | +| Name | Type | Description | |
| 56 | +| --- | --- | --- | |
| 57 | +| `tagName` | `string` | The web component tag name | |
| 58 | +| `importer` | `function` | A function that registers a web component. This can return a `Promise` | |
| 59 | + |
| 60 | +## Testing components |
| 61 | + |
| 62 | +Testing web components can be done in a number of ways. |
| 63 | + |
| 64 | +- verifying that a component renders without throwing using a "smoke test" |
| 65 | +- shallow rendering and testing component output |
| 66 | +- full rendering and testing component lifecycle and state changes |
| 67 | + |
| 68 | +It is a good idea to start with creating basic smoke tests for your components. |
| 69 | + |
| 70 | +Testing that a component mounts and ensures that it doesn't throw during rendering provides a lot of value with very little effort. |
0 commit comments