The documentation for browser testing should not use react.

[atomless]

Description

The documentation on how to perform browser testing with Ava, starts off well by advising the use of jsdom but then the example uses React which is less than helpful for anyone not using React.

Environment

[sindresorhus]

What do you propose instead?

[sotojuan]

I sort of agree—especially because if you're doing any serious React testing you'll use enzyme. I don't know much about browser testing, but it seems maybe we can just use a regular button with a click event handler?

[sindresorhus]

@atomless Would you be interested in doing a pull request?

[atomless]

@sindresorhus @sotojuan - Another issue with the browser testing docs is that if you follow the jsdom usage - and add the browser setup to the required helpers in package.json - the globally declared document and window still do not appear to be available to tests. Just a simple example showing loading a url into jsdom and then getting an attribute of the body element would provide a much better start.

[atomless]

I ditched jsdom in the end in favour of zombie. @sindresorhus I'd be happy to make this into a pull request if you wished?

import test from 'ava';
import Browser from 'zombie';

const browser = new Browser();

test.serial.cb('PAGE REQUEST', t => {

  browser.visit('http://example.com/path', e => {

    t.end();
  });
});

test.serial('PAGE LOADED', t => {
  t.plan(2);

  let status = browser.statusCode;

  t.truthy(browser.success, 'Page Load Failed');
  t.truthy(status === 200, 'Page Returned Status: ' + status);
});

[sindresorhus]

@atomless I think both should be covered then. jsdom is the lowest primitive. Zombie is a nicer API on top of it. Then users can choose which abstraction they like.

[atomless]

@sindresorhus here's a very basic test using jsdom...

import test from 'ava';

const jsdom = require('jsdom');

var window;

test.serial.cb('PAGE REQUEST', t => {

  jsdom.env({
    url: 'http://example.com/path',
    done: (error, win) => {
      window = win;
      t.end();
    }
  });
});


test.serial('PAGE LOADED', t => {
  t.plan(1);

  let attr = window.document.body.getAttribute('data-some-known-attr');

  t.truthy(attr.length > 0, 'The Body attribute "data-some-known-attr" is missing or invalid: ' + attr);
});

[sindresorhus]

@atomless 👍 The jsdom init should be in a beforeEach hook and use t.context for passing and using the window. That way the tests will be atomic and doesn't have to be serial. Care to submit a pull request?

[atomless]

@sindresorhus I have now switched to nightmare.js for various reasons and it both fits my needs better and also seems a much better fit for ava. I'll get a simple test script for all 3 and make a pull request asap. WRT using beforeEach, I'm not so sure. I agree unit tests should be atomic but feel browser testing is often more functional testing and for my use case I will want to perform various actions in serial and have the state maintained between tests.