add package ava-browser-fixture

[aweiher]

Hi,

I wrote a little helper to add browser-testing with ava and browser-env, as already suggested in the docs: https://github.com/avajs/ava/blob/master/docs/recipes/browser-testing.md

Package: https://www.npmjs.com/package/ava-browser-fixture
Github: https://github.com/WeltN24/ava-browser-fixture

( I added the npmjs.org link - should I better add the github-link?)

[vadimdemedes]

I'm a bit confused by the purpose of this module. What does it do and what problem does it solve?

[aweiher]

This module adds fixtures for browser-based testing for your frontend-modules, as ava cant do this out of the box, as ava runs only on the cli and therefore no browser environment is present.

This module use browser-env to load a fixture into a document, then you can unit-test your frontend-modules: click buttons, check visibility of elements, interaction, etc..

It just implements, which is already documented in the ava docs: https://github.com/avajs/ava/blob/master/docs/recipes/browser-testing.md

[aweiher]

@vadimdemedes I added an example, is it better understandable now?

https://github.com/WeltN24/ava-browser-fixture/blob/master/test/test.js

import test from "ava";
import {Fixture, window} from "../index";


test.beforeEach('setup fixture', t => Fixture("./test/test.html", (document) => {
  t.context.document = document;
  t.context.window = window;
}));

test("test example", t => {
  t.is(t.context.document.documentElement.querySelector("h1").textContent, "Hello Test");
});

[vadimdemedes]

Hey, sorry, was under piles of work, didn't have a chance to reply back.

Oh, so ava-browser-fixture loads html file and returns its document and window? Interesting. I guess I got a little confused by the name.

Does it accept URLs along with fs paths?

[aweiher]

No Problem!
Interesting Idea - currently I did not need this feature, but implementation will be trivial, so I added it to the issues.

On the other hand, testing a running web-application with this approach will still not be possible, you need a headless browser like phantomjs for this, browserenv is too light for this approach.

[sindresorhus]

I think your readme needs to be better at answering what problem the module solves.

Fixture => fixture. The JS convention is that constructors (with new) are PascalCased.

Why not simplify it a bit:

test.beforeEach('setup fixture', fixture('test/test.html'));

fixture here returns a function that get's the t variable as argument and set's the context.

[aweiher]

Thanks for the feedback @sindresorhus

Updated the Code and the README: https://github.com/WeltN24/ava-browser-fixture

And rebased against master.

🚀 ?

[sindresorhus]

Going to pass on this for now. As it currently is, it's not something I would recommend. The docs are lacking. Only one test. And the description has a lot of typos. t.context.window is not even shown in the usage example. And you're using document.write, which is not a very good practice.

[aweiher]

document.write is doing exactly what it is supposed for, write the fixture to the fake browser environment. t.context.window ist not shown, but t.context.document which is the more interesting part.

Thanks for your feedback anyway.