https://github.com/learosema/wctest
https://github.com/learosema/wctest
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/learosema/wctest
- Owner: learosema
- Created: 2023-12-06T17:43:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-07T11:35:43.000Z (over 2 years ago)
- Last Synced: 2025-01-22T07:52:32.808Z (over 1 year ago)
- Language: JavaScript
- Size: 24.4 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WCTest 🚻
This is a test about testing web components with the node test runner :).
The web component to be tested is a progressively enhanced `` component which is wrapped around an input.
When the input is a clear-text field, it creates a `hide` button, when the input is a password field, it creates a `show` button, making it possible to toggle between a revealed and hidden input.
## `node --test`
node.js comes with an integrated test runner, which is a very lightweight way to run tests.
The built-in test runner lives inside the `node:test` package and can be started via `node --test`. All files with a `.test.js` suffix are processed, also handling `.mjs` and `.cjs` files.
The test is using the `describe` and `it`-syntax which can be imported from `"node:test"`.
## Assertions
As assertion library, we are using the integrated `node:assert/strict`. It is recommended to use strict assertions as the un-strict ones use the very lax `==` JavaScript comparisons rather than `===`.
In case you are more familiar with the `expect` syntax from jest and/or jasmine, you can use `chai.js` as assertion library.
## Simulating a browser environment with linkedom inside the node test
We can use [LinkeDOM](https://github.com/WebReflection/linkedom) to simulate a minimal browser environment.
```js
window = global.window = parseHTML(``);
```
In order to get the returned window object working with the componet to be tested, we have to pollute window and several other DOM objects into the global namespace and then dynamically load the component via `await import()`.