Functional tests

Unlike unit tests that load and execute code, functional tests load a page in the browser and test how users interact with the running application.

When validating application output for a certain route, an id should be added to the corresponding route link to allow for easier targeting.

src/widgets/Menu.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import Link from '@dojo/framework/routing/ActiveLink';
import Toolbar from '@dojo/widgets/toolbar';

import * as css from './Menu.m.css';

const factory = create();

const Menu = factory(function Menu() {
    return (
        <Toolbar heading="My Dojo App!" collapseWidth={600}>
            <Link id="home" to="home" classes={[css.link]} activeClasses={[css.selected]}>
                Home
            </Link>
            <Link id="about" to="about" classes={[css.link]} activeClasses={[css.selected]}>
                About
            </Link>
            <Link id="profile" to="profile" classes={[css.link]} activeClasses={[css.selected]}>
                Profile
            </Link>
        </Toolbar>
    );
});

export default Menu;

During application use, a user would expect to click on the profile link and be directed to a page welcoming them. A functional test can be created to verify this behavior.

tests/functional/main.ts

const { describe, it } = intern.getInterface('bdd');
const { assert } = intern.getPlugin('chai');

describe('routing', () => {
    it('profile page correctly loads', ({ remote }) => {
        return (
            remote
                // loads the HTML file in local node server
                .get('../../output/dev/index.html')
                // find the id of the anchor tag
                .findById('profile')
                // click on the link
                .click()
                // end this action
                .end()
                // find the h1 tag
                .findByTagName('h1')
                // get the text in the h1 tag
                .getVisibleText()
                .then((text) => {
                    // verify the content of the h1 tag on the profile page
                    assert.equal(text, 'Welcome Dojo User!');
                })
        );
    });
});

When running a functional test, Dojo provides a remote object that is used to interact with the page. Because loading and interacting with the page is an asynchronous action, the remote interaction object should be returned from the test.

Functional tests can be executed in the command line via:

dojo test --functional

This will load the html page into a remote instance of Chrome on the build machine to test interactivity.

Functional tests are very useful to to make sure that application code works as intended when it is actually used inside a browser.

See the Intern functional tests guide for more details.