Testing Recipes for web components: Part 1 — Testing Presentation Components

There are limit out of box solution for web component testing like wct. However I managed to create much easier setup with lit-html , open-wc, karma. Here is how my package.json look like

Step 1: Setting Up Karma

Karma needs to be updated with file loaders to handle the es6 modules. karma.conf.js will go inside root of your folder

2. Testing Code

a) Testing Functional Components: Functional components are who are just used for presentation and doesn’t manage own internal state

For example lets test this movie card

It includes a image, title, ratings and date.

so my input will an json object with above mentioned properties. Web component code for movie card is as follows

Images are coming from tmdb ui.

Let’s create our movie-card.test.ts file.

First import all the required dependencies

Here is our sample input

Let’s start our unit tests, we will be using mocha for test language and fixture from open-wc for rendering the component. We also will be using sinon for stubs and fakes

As you can see, I have created a pseudo renderer inside ‘el’

Let’s go to actual test cases

  1. Test if card has a proper movie rating

We will be testing following line with given input

Our test case goes as follows

  1. Get the element or shadowRoot from fixture renderer. I mostly test over shadow renderer
  2. check if element contains expected output

So we are expecting out movie Rating to be 7.2, so as per our given input, test case should be successful. You can try by supplying different input.

Now run npm run test to check and test coverage

2. Check has proper movie title

3. Check has proper movie poster

4. Negative: Check has no movie poster

So we comes to end to test our presentation web component, in next part we will go to test stateful components and most important the custom events testing.

Here is our final code

Go to the second part of the series

You can check the complete code here at https://github.com/inms-adarsh/movie-app-webc and demo is at https://movie-app-892c6.firebaseapp.com/

--

--

Front-end developer https://www.linkedin.com/in/adarsh-somani.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store