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

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import Link from '@dojo/framework/routing/ActiveLink';
  3. import Toolbar from '@dojo/widgets/toolbar';
  5. import * as css from './Menu.m.css';
  7. const factory = create();
  9. const Menu = factory(function Menu() {
  10.     return (
  11.         <Toolbar heading="My Dojo App!" collapseWidth={600}>
  12.             <Link id="home" to="home" classes={[css.link]} activeClasses={[css.selected]}>
  13.                 Home
  14.             </Link>
  15.             <Link id="about" to="about" classes={[css.link]} activeClasses={[css.selected]}>
  16.                 About
  17.             </Link>
  18.             <Link id="profile" to="profile" classes={[css.link]} activeClasses={[css.selected]}>
  19.                 Profile
  20.             </Link>
  21.         </Toolbar>
  22.     );
  23. });
  25. 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

  1. const { describe, it } = intern.getInterface('bdd');
  2. const { assert } = intern.getPlugin('chai');
  4. describe('routing', () => {
  5.     it('profile page correctly loads', ({ remote }) => {
  6.         return (
  7.             remote
  8.                 // loads the HTML file in local node server
  9.                 .get('../../output/dev/index.html')
  10.                 // find the id of the anchor tag
  11.                 .findById('profile')
  12.                 // click on the link
  13.                 .click()
  14.                 // end this action
  15.                 .end()
  16.                 // find the h1 tag
  17.                 .findByTagName('h1')
  18.                 // get the text in the h1 tag
  19.                 .getVisibleText()
  20.                 .then((text) => {
  21.                     // verify the content of the h1 tag on the profile page
  22.                     assert.equal(text, 'Welcome Dojo User!');
  23.                 })
  24.         );
  25.     });
  26. });

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:

  1. 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.