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.