Tests
This section covers more information about@lemonade/tester
and how to implement tests for your LemonadeJS components. It would be possible to run tests via the command line or in the browser, as described further in this section.Blue print
As the example below, a test renders the component and shares the same{self}
with a testing method. Then, it compares the result for the assertion.test('Onload event', function(render) { function Component() { const self = this; self.value = null; self.test = 5; self.onload = function() { self.value = self.test; } return `<h1>{{self.value}}</h1>`; } // Render the component and assert the return return render(Component).assert('5', function() { const self = this; // Return the value return self.el.textContent; }) });More examples in our GitHub repository
Running your tests
Via NPM
Create a./tests
folder in your project root and include your test files with the test(string, function)
as shown above. Each file can have multiple tests.// To run those tests via command line you will need % npx @lemonadejs/tests
Via Browser
You can run a test directly the browser as example below.<html> <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@lemonadejs/test/dist/test.min.js"></script> <script> // Append test to the queue test('Update the first element inside a loop', function(render) { // Get the attributes from the tag function Component() { const self = this; self.data = [ { title: 'lemonadejs' }, { title: 'angular'} ]; return `<> <ul :loop="self.data" :ref="self.root"> <li>{{self.title}}</li> </ul> </ul>`; } // Render the component and assert the return return render(Component).assert('New title', function() { const self = this; self.data[0].title = 'New title'; return self.root.children[0].textContent; }) }); // When all tests are added, run the tests test.run(); </script> </html>
Troubleshooting
Absolute path error
You receive an error about the path because your Nodejs is in a different drive from your application.Solution: Install the @lemonadejs/tests on your project and try again.
Not possible to load a file outside the module
It happens when you try to use import to load your components. This is a nodejs limitation when dealing with EMS x CommonJS.Solution: You need to add type="module" on your package.json before running the tests. You can remove it after running the tests.