Module_js e2e

Testing

End to End tests for Jinja2 template views.

Challenges

Leaky code
No Django Server
Slooooooooow

Solutions

IFRAMES (more of them! (ya i know right??))
Nunjucks
Caching/optimization

Leaky CoDE

Global state
Leaky dom events

Iframes!

Recreate entire page
every
single
time.

django/Jinja2

Don't want to run django server
Tests are run in nodejs

nunjucks

Jinja template compiler for Javascript
Not 100% compatible
Works for simple pages (base_list.html)

Caching

Karma provides file list with hashes
Template processing step adds hashes to links.
 <link href="/base/module_css/faceplate.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/base/fweb_core_all.js"></script>
becomes
  <link href="/base/module_css/faceplate.css?cd88f114a6f4ee9d8f60d6943f3c43dc65ad889c" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/base/fweb_core_all.js?27f1e20609965cc041c1fe982b2f0077ee571920"></script>

optimization

make it faster

spec helpers

Utility functions to assist setup/teardown
done(real_done) //fake done function to emulate jasmine 2.0 behavior
waitsFor(cb, selector?) //takes a function/jquery selector and returns a promise
iframe(template, complete) //take a template and return an iframe. Complete is iframe.onload
cachedUrl(url) //add cache hash to url
json() //return generic json fixtures
insertCode(template, marker, code, before?, tag?) //insert code into a template
insertScript(template, marker, src, before?) //insert script.js as <script> tags into a template


Mocks

Inserted into template before template is loaded into iframe
        beforeEach(mocks({
            'console': true,
            '$.addStyle': true,
            //...
            'fweb.CONFIG_GUI_NO': true,
            'Request.send': {
                when: [{
                    url: /^\/system\/widget\/sysop\?json/,
                    response: helpers.json.common.sysop
                }]
            }
        }));
<script type="text/javascript" src="/base/fweb_core_all.js"></script>
<script>window.top.install_mocks13225910({'$':$,'fweb':fweb});</script>

Developing tests

 # grunt test:e2e
Run all tests once
 # grunt test:module_e2e_server
Watch files and run tests on changes
Currently takes <2s but should be faster!
 # grunt karma:module_e2e_server
will start a server and wait for connections
Connect with a browser and select 'DEBUG'
Too many files to watch, have to restart the server if there are changes
(working on this)

Jasmine shortcuts

Disable a test (temporarily)
it() -> xit()
describe() -> xdescribe()
Only run a selected test!
it() -> iit() //run a single test
describe() -> ddescribe() // run a single suite


Karma e2e Dec2014

By Jamie Pate

Karma e2e Dec2014

  • 1,046