featurist / browser-monkey

Reliable DOM testing
https://browsermonkey.org
53 stars 6 forks source link

add support for easily mounting an app #54

Closed dereke closed 7 years ago

dereke commented 7 years ago

mount

Typically you will need to mount your application into the DOM before running your tests.

Browser monkey comes with a handy way of doing this for popular web frameworks

hyperdom where YourHyperdomApp is a class that has a render method. see here for an example

var hyperdomMonkey = require('browser-monkey/hyperdom')
var monkey = hyperdomMonkey(new YourHyperdomApp())

angular where YourAngularApp is a class with fields 'directiveName' and 'moduleName' see here for an example

var angularMonkey = require('browser-monkey/angular')
var monkey = angularMonkey({
  directiveName: 'best-frameworks',
  moduleName: 'FrameworksApp'
})

react where YourReactApp is a react class see here for an example

var reactMonkey = require('browser-monkey/react')
var monkey = reactMonkey(new YourReactApp())

iframe You can also use browser-monkey to do full integration testing. Just give it the url of your web server

var iframeMonkey = require('browser-monkey/iframe')
var monkey = iframeMonkey('http://your-app.example')

and then you can use the monkey

monkey.find('h1').shouldHave({text: 'Hello World'});
joshski commented 7 years ago

This is awesome

joshski commented 7 years ago

You meant mount.angular() in the second example, right?

var monkey =  mount.angular()
  .withApp(() => new YourAngularApp())
  .start()
dereke commented 7 years ago

lol - yes!

refractalize commented 7 years ago

yeah that's much better!

dereke commented 7 years ago

That is why we run the tests across those browsers! No i think we should make it just work. The first thing anyone is going to think when it errors on IE is that our software doesn't work. I doubt they will lament the slow uptake of modern browsers. Browser monkey should just work.

On 14 Mar 2017 6:55 p.m., "Tim Macfarlane" notifications@github.com wrote:

@refractalize commented on this pull request.

In hyperdom.js https://github.com/featurist/browser-monkey/pull/54#discussion_r105997671 :

  • options.router.reset()
  • }
  • var app = this.app;
  • if (Mount.runningInNode) {
  • try {
  • var vquery = require('vdom-query');
  • } catch (e) {
  • throw new Error('you must npm install vdom-query --save-dev to run tests in node');
  • }
  • var vdom = hyperdom.html('body');
  • var monkey = createMonkey(vdom);
  • monkey.set({$: vquery, visibleOnly: false, document: {}});
  • hyperdom.appendVDom(vdom, app, Object.assign({ requestRender: setTimeout, window: window }, options));

good catch... right, i have to confess to my current thinking on this subject: we should use standard modern javascript methods where available and recommend users to polyfill on browsers that don't have them. We shouldn't use lowscore or underscore for methods that are now included in JavaScript, firstly because we always forget to use the non-standard underscore version, and because it keeps us dependent on underscore (or lowscore).

Think that'll work?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/featurist/browser-monkey/pull/54#discussion_r105997671, or mute the thread https://github.com/notifications/unsubscribe-auth/AAI2Gl4IMZ729mic3AYhDDtlaOm4lVbUks5rluKKgaJpZM4LKFzz .

dereke commented 7 years ago

I don't get why you want to attach that as part of the test? It is quite a useful thing to have (and listening to ctrl+r) so i was thinking always display it. Or we could have it check for an env variable?

On 14 Mar 2017 6:50 p.m., "Tim Macfarlane" notifications@github.com wrote:

@refractalize commented on this pull request.

In reloadButton.js https://github.com/featurist/browser-monkey/pull/54#discussion_r105996510:

@@ -0,0 +1,35 @@ +var href = window.location.href +var hobostyle = require('hobostyle') + +module.exports = function refreshButton(_options) {

oh right - i'm using this separately, as in:

var reloadButton = require('browser-monkey/reloadButton') after(function () { reloadButton() })

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/featurist/browser-monkey/pull/54#discussion_r105996510, or mute the thread https://github.com/notifications/unsubscribe-auth/AAI2GnjdVsYeNlmzSZGH-Z8u7kQja15Aks5rluFlgaJpZM4LKFzz .