When you create a component as described in component approach, you may want to use unit tests to verify its behavior and to make sure the behavior is not accidentally broken when doing maintenance.
Maquette provides the maquette-query npm package to facilitate unit testing. In order to explain how it works, let’s start with the button component that we used in component approach:
To explain how we can unit-test this component, we will use NodeJS, mocha, chai and sinon, but any other set of libraries will do as well. Maquette-query provides a test-projector that can be reused between tests. The test-projector allows you to create queries that are also reusable. Before each test, the test-projector can be initialized with a fresh instance of the component under test. This looks as follows in code.
Edit on codepen.
For more information, see maquette-query on github.