Support for AngularJS, React, etc.
cognivator opened this issue · comments
tl;dr
I propose a new frame.reload() method, and possibly a frame.restart() method that can re-initialize SPA apps built with the common MV* frameworks: Angular, React, etc. See below for details. I'm happy to begin work on these proposals.
Details
I've discovered the frame.reset() method doesn't do enough to re-initialize an SPA built with Angular, React, and probably any other MV* frameworks that have their own bootstrap process. In fact, frame.reset() may even do more harm than good for these frameworks, directly replacing body.InnerHTML as it does.
The workaround I'm using is to frame.remove() followed by quixote.createFrame() anywhere frame.reset() would normally be used (e.g. beforeEach.) This seems a bit heavyweight, but it's the only way I found to properly restart an SPA built with either Angular or React.
I propose one or two new ways to reinitialize the quixote frame.
frame.reload - intended to reload the test page in the quixote frame, as if a user had hit Ctrl-reload in the browser to avoid caching and do a server round-trip on the base url. There are undoubtedly more nuances to work through, but this is the general idea.
frame.restart - intended to restart the SPA framework, if such a thing is possible and desirable for the SPA being tested. Some initial thoughts are to support specific frameworks' bootstrap processes, and/or supply an event that the SPA can listen for and manage it's own restart.
I'm happy to begin work on these proposals. I suspect opening two separate issues, one per method, is appropriate, yes?
I'm happy for you to work on these--thanks!
Can you clarify what the different use cases for reload and restart are? If you open an issue for each one, phrase it in terms of the use case rather than "Implement reload()".
Will do.
Trying to get started after pulling the latest master branch (from Oct 11, I believe). The test suite fails with a timeout on a before / beforeEach. Just not sure which before / beforeEach it is (can't tell which order Karma is picking up the _test files.)
$ ./jake.sh loose=true --trace
Linting build files: ..........
Linting source code: .......................................................
Testing source code:
[2015-10-13 14:31:03.420] [DEBUG] config - Loading config /Users/slhenty/Documents/Projects/DEV/Libraries/quixote/build/config/karma.conf.js
Chrome 45.0.2454 (Mac OS X 10.10.4) "before all" hook FAILED
Error: timeout of 2000ms exceeded. Ensure the done() callback is being called in this test.
Chrome 45.0.2454 (Mac OS X 10.10.4): Executed 1 of 200 (1 FAILED) ERROR (4.804 secs / 3.445 secs)
jake aborted.
Error: Karma tests failed
at api.fail (/Users/slhenty/Documents/Projects/DEV/Libraries/quixote/node_modules/jake/lib/api.js:336:18)
at /Users/slhenty/Documents/Projects/DEV/Libraries/quixote/node_modules/simplebuild-karma/src/index.js:61:26
at IncomingMessage.<anonymous> (/Users/slhenty/Documents/Projects/DEV/Libraries/quixote/node_modules/karma/lib/runner.js:48:7)
at IncomingMessage.emit (events.js:129:20)
at _stream_readable.js:908:16
at process._tickCallback (node.js:355:11)
$
Please advise.
That's happening in src/__reset.js. It usually happens if your Chrome window isn't visible, because Chrome deprioritizes browser tabs that aren't visible.
Solution: when testing Safari and Chrome, make sure some portion of the Karma tab is visible. Or use Firefox, which doesn't have this issue.
Let me know if that fixes it, and if it does, I'll add a note to the Contributing doc.
Magic happened! Thanks. Had the browser open, but out of the way in a different OS X workspace... guess Chrome counts that as invisible.
I'll create a new issue for the reload method, focused on reloading the iframe src from the 'server.' It seems the easiest method of restarting an SPA the way most frameworks expect. No need to over-complicate at this point.
Once that issue is open, I'd like to run some options by you in that thread regarding how to surface the reload functionality... new method, enhancement to existing reset, etc.
BTW... any special code style (like a JSCS profile) I should be using?
Sounds good. I don't have a JSCS profile set up--just follow the existing style to the best of your ability and I'll fix it up if needed.
@cognivator Can we close this issue in favor of #18?
Closing in favor of #18.