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

How to get started

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


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">
	    // your web component here

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)

Adding Tests

In order to add a new test. You will add the following code

test('Name of the test', function () {
	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.