Cross-framework web components library 📚 using Lit (Part II)

This is the second part of the Cross-framework web components library 📚 using Lit (Part I) and Cross-framework web components library 📚 using Lit (Part III)

Testing

After we conclude our card component is time to test it. I have used the testing package from Open Web Components, and you can find the documentation here in conjunction with jasmine and karma.

We start describing what component will be tested and defining what we will mock as component properties:

src/card.spec.ts

After that, before the test runs, we boot a fixture that will pass a Card component with our custom configuration, and we check if the element is defined, checking the instanceOf:

src/card.spec.ts

If everything is well configured, we run the test, and we should have one successful test:

Let’s have a bit more coverage on that component:

https://gist.github.com/fstbraz/2ce4793be22c170c12d47d1530840f0a

This should leverage the coverage to more than 80%.

Cards component

We will be doing a second component where we can pass the configuration to have multiple cards. This exposes the ability to reuse one internal component and do another with other purposes that can have a different design. Also, we will be using lit directives.

We start by doing a new component at the same level as card.ts:

src/cards.ts

After we define the external @property, that basically will receive an array of CardConfig objects:

src/cards.ts

We can now render the cards container and use the repeat directive to generate various instances of the card based on the configuration we passed in the @property:

src/cards.ts

To finalize, we only need to add the component styles and the shared ones:

src/cards.ts

And now, you should have a component that will render like this:

In the next part, we will cover distributing the lib via a node package using the npm registry and how to use the components in different frameworks/libs environments.

You can find the previous step here 👉 Cross-framework web components library 📚 using Lit (Part I)

You can find the next step here 👉 Cross-framework web components library 📚 using Lit (Part III)