To test our web components we are using wct. It's basically a selenium like tool that allows you to run unit tests on different browsers
Let's say you have just created a new web component basic-comp under the packages folder. To get started running tests on this new web component you would first go to the test/index.html file and add the following lines
<script>
WCT.loadSuites([
'basic-comp-test.html',
'basic-comp-test.html?dom=shadow',
]);
</script>
This runs the tests you will right in 'basic-comp-test.html' twice. The first time with shadow dom disabled and the second line runs the same tests with shadow dom disabled.
Next, under the tests directory you will create the 'basic-comp-test.html'.
Under the <head> tag you will import the script that contains your web component
Under the <body> tag you will create a test-fixture:
<test-fixture id="component">
<template>
// your web component here
</template>
</test-fixture>
This will create a new web component for each of the tests.
Then in a <script> tag under the <body> tag add the following code
suite('<lan-tooltip>', function () {
let myEl;
setup(() => {
myEl = fixture("component");
});
// Tests will be added here
});
My El is the web component variable and you will use that when changing the web components in your tests (which we will write next)
In order to add a new test. You will add the following code
test('Name of the test', function () {
myEl.setAttribute('attr','hi');
assert.equal(myEl.get().getAttribute('attr'), 'hi');
});
The above is just an example of the code you will write to test the component. For more information you should visit original documentation of WCT.