Skip to content

Commit

Permalink
improving testing on marionette/backbone
Browse files Browse the repository at this point in the history
  • Loading branch information
Gago committed Oct 4, 2016
1 parent e759e06 commit 100eb20
Showing 1 changed file with 24 additions and 5 deletions.
29 changes: 24 additions & 5 deletions backbone/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -476,15 +476,34 @@ We have extended Sinon with a few custom functions, which you can see in django/

### Running the Jasmine Tests

Go to <https://www.evbdev.com/js-tests> to see the index of the JS unit test suites. Most of the modern unit tests are under require at <https://www.evbdev.com/js-tests/require>.
We have several system cohexisting in our testing environment and depending on our runner version is how we run them.

You can also click through to an individual spec to run just the one, for example <https://www.evbdev.com/js-tests/require/?spec=LSBMainLayout>. The query param comes from the top `describe` block in the test file. This is useful when debugging, as you can run one test suite at a time and put debugger statements in your JS code, run the failing tests and you’ll get a breakpoint there.

We also have all the Jasmine tests running with the Django unit tests via phantomjs (a headless WebKit).
| technolgies | jasmine version| how to execute them? |
|:--------------------------------|:--------------:|--------------------------------------------------------|
| `mako`, `js`, global name space |1.2.0 | `tug attach core-web && test_eb ebapps.js_tests.tests`|
| `handlebars`, `js` |1.2.0, 2.5.0 | `tug attach core-frontend && npm run tests` |
| `react` + `jsx` + `es6` |2.5.0 | `tug attach core-frontend && npm run tests` |

You can run them like so:

`test_eb ebapps.js_tests.tests`
#### debugging on the browser

Go to <https://www.evbdev.com/js-tests> to see the index of the JS unit test suites (you will find links for every test report). Most of the modern unit tests are under [require (jasmine 2.5.0)](https://www.evbdev.com/static-dj/django/js/tests/_RequireSpecs.html) and [react + es6 tests](https://www.evbdev.com/static-dj/django/js/tests/_ReactSpecs.html).

You can also click through to an individual spec to run just the one, for example <https://www.evbdev.com/static-dj/django/js/tests/_RequireSpecs.html?spec=LSBMainLayout>. The query param comes from the top `describe` block in the test file. This is useful when debugging, as you can run one test suite at a time and put debugger statements in your JS code, run the failing tests and you’ll get a breakpoint there.

### known issues

####rendering on the Dom
jasmine comes with a handy `setFixture()` function that attaches html to the runner so we can render there and try our code. this results often in issues with what we leave behind or conflicts with the actual runner report.

solution: it most cases the solution for us is just to create a fake node (not attached to the dom) ex:
`new Marionette.ItemView(el: $(<div id=fake ></div>)`)

####avoiding toBeVisible
Jquery does several tricky things to find out if an element is hidden or not. assuming that an element is attached to the dom. it also leads to confusing tests, giving that not always the element we are testing gets hidden by direct result of our test case rather is produced by the parent element or css generically applied.

solution: test either if the element is there (`expect().to.[not.]Exist()`) or check for the only class we have for hiding stuff (`expect(..).to.hasClass('is-hidden')`)

### Folder Structure

Expand Down

0 comments on commit 100eb20

Please sign in to comment.