Skip to content

Commit 6ca4f9f

Browse files
committed
feat: release v1.0.0
1 parent 70f9fca commit 6ca4f9f

File tree

2 files changed

+65
-4
lines changed

2 files changed

+65
-4
lines changed

README.md

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,69 @@
22

33
<img src="img/ficus-icon-optimised.svg" alt="FicusJS" width="150" align="right">
44

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.
66

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.
88

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.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ficusjs/testing",
3-
"version": "1.0.0-alpha.4",
3+
"version": "1.0.0",
44
"description": "Helper functions for component testing",
55
"type": "module",
66
"main": "src/index.mjs",

0 commit comments

Comments
 (0)