Testing your app

Every new Sipa project comes with a ready to use test setup based on Karma and Jasmine, so you can write and run browser tests for your app right away.

The API documentation for SipaTest can be found here.

Test setup

When you create a project with sipa new, the test setup is already in place:

• Test specs live in spec/tests/browser/ and are named *-spec.js.
• The Karma configuration is in karma.conf.js at the project root.
• A ready to run example spec is created at spec/tests/browser/example-spec.js.

The package.json generated by sipa new also contains the test scripts:

Script	Command	Description
test	karma start --single-run	run all tests once
test:watch	karma start --no-single-run --auto-watch	run tests and re-run on file changes
test:prepare	node bin/jasmine/prepare-jasmine-browser.js	prepare the browser test environment

Writing a spec

A spec is a normal Jasmine spec with describe and it blocks. Call SipaTest.enableTestingMode() in beforeAll to prepare the Sipa environment for testing.

spec/tests/browser/example-spec.js

describe('Example', function () {
    beforeAll(function () {
        SipaTest.enableTestingMode();
    });

    it('adds two numbers', function () {
        expect(1 + 1).toEqual(2);
    });
});

Why enableTestingMode()

SipaTest.enableTestingMode() puts Sipa into testing mode. Among other things, it disables the performance optimized render throttling of SipaComponent, so components render instantly during tests instead of being limited per period. This keeps your tests fast and predictable.

Running tests

Run all tests once:

npm test

Run the tests and re-run them automatically when files change:

npm run test:watch

Tests run in a headless Chrome browser, so make sure Chrome is installed on the machine.

Example: testing a component

Because Sipa components are plain HTML and JavaScript, you can test them by instantiating them, appending them to the DOM and checking the result. Remember to enable testing mode so renders happen instantly.

spec/tests/browser/example-component-spec.js

describe('ExampleComponent', function () {
    beforeAll(function () {
        SipaTest.enableTestingMode();
    });

    it('renders the given data and updates it', function () {
        const component = new ExampleComponent({ example: 'Pinky' });
        component.append('body');

        // the component is now in the DOM
        expect(component.element().textContent).toContain('Pinky');

        // update the data and check the DOM again
        component.update({ example: 'Crocodile' });
        expect(component.element().textContent).toContain('Crocodile');

        // clean up
        component.destroy();
    });
});

See the SipaComponent guide for more on components.