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';
  4. import * as css from './Menu.m.css';
  5. const factory = create();
  6. const Menu = factory(function Menu() {
  7. return (
  8. <Toolbar heading="My Dojo App!" collapseWidth={600}>
  9. <Link id="home" to="home" classes={[css.link]} activeClasses={[css.selected]}>
  10. Home
  11. </Link>
  12. <Link id="about" to="about" classes={[css.link]} activeClasses={[css.selected]}>
  13. About
  14. </Link>
  15. <Link id="profile" to="profile" classes={[css.link]} activeClasses={[css.selected]}>
  16. Profile
  17. </Link>
  18. </Toolbar>
  19. );
  20. });
  21. 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');
  3. describe('routing', () => {
  4. it('profile page correctly loads', ({ remote }) => {
  5. return (
  6. remote
  7. // loads the HTML file in local node server
  8. .get('../../output/dev/index.html')
  9. // find the id of the anchor tag
  10. .findById('profile')
  11. // click on the link
  12. .click()
  13. // end this action
  14. .end()
  15. // find the h1 tag
  16. .findByTagName('h1')
  17. // get the text in the h1 tag
  18. .getVisibleText()
  19. .then((text) => {
  20. // verify the content of the h1 tag on the profile page
  21. assert.equal(text, 'Welcome Dojo User!');
  22. })
  23. );
  24. });
  25. });

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.