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 karma:module_e2e

Run all tests once

 # grunt watch:e2e_test

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