Use Cucumber-Electron

[aslakhellesoy]

This runs the same scenarios in cucumber-electron.

Pros:

• It's just Cucumber (plus a browser environment - dom, fetch, WebSocket, everything you have in chrome)
• Familiar directory structure (feature files and stepdefs in separate files)
• Reporting works as usual
• No extra runner to write and maintain
• Doesn't require a display (nice in CI)
• Run with cucumber-electron -i to bring up a window. Command-R to rerun (!). Dom inspector (!!!) Breakpoints (!!!!!)

Cons:

• You can't run it on other browsers (FireFox, Safari, IE etc)

[mattwynne]

Thanks, that's really helpful. How would you go about loading in the app from a separate HTML file, rather than injecting the code for it into the document in the test?

My electron-fu is rusty, but I remember there being a main process and rendered processes... which one are we running in here? A renderer?

[mattwynne]

I remember the guy saying "I'm not married to Karma" so I think this solution could fly with them. It depends a bit how important cross-browser testing is to them, I guess. But I'd have thought not, since their drive here is to be able to reach within the app and do fast tests. If they cared about browser compatibility they'd still be using protractor.

[aslakhellesoy]

How would you go about loading in the app from a separate HTML file, rather than injecting the code for it into the document in the test.

Read it from a file?

$scope.innerHTML = fs.readFileSync(htmlFile)

[mattwynne]

At the moment $scope is pointing to a div inside the body. I don't think it would like it if we put a whole 'nother document into that, would it?

I'm also puzzled how we would see the angular reference in the page to call #boostrap on it from the tests.

I've had a quick fiddle with the code but I haven't figured it out yet. See the cucumber-electron-keep-app-and-tests-separate branch.

[aslakhellesoy]

A DOM application should be designed in such a way that it doesn't matter what node it is mounted under. If it's well-designed and decoupled, you should be able to mount several instances of the app, each under their own DOM node. This is what we do in the codebreaker demo app.

The DOM (window, document et al) is global, and won't change between scenarios. That's why each scenario creates a new dom node, adds it to the body, and mounts the app under that new node. This is the only way to ensure isolation between scenarios.

For running in the browser, there should be a tiny .js script that mounts the app. This just delegates to a DomApp which encapsulates all the UI logic. We could rewrite that DomApp to render an Angluar app, but this one just uses plain DOM.

• https://github.com/subsecondtdd/codebreaker-js/blob/master/public/index.html
• https://github.com/subsecondtdd/codebreaker-js/blob/master/lib/httpServer/app.js

These files are not used when running against Cucumber-Electron