Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TDD With Ember.js

TDD With Ember.js

Kerrick Long

March 06, 2014
Tweet

More Decks by Kerrick Long

Other Decks in Programming

Transcript

  1. Test
    Driven
    Development

    View Slide

  2. Kerrick Long
    Things I make and do Where to find me online
    twitter.com/KerrickLong
    github.com/Kerrick
    Lead Front-end Developer
    at Second Street
    KerrickLong.com
    www.
    meetup.com/STLEmber

    View Slide

  3. Why TDD?

    View Slide

  4. Outside-In

    View Slide

  5. Integration Tests
    Unit Tests
    then

    View Slide

  6. Red
    Green
    Refactor

    View Slide

  7. Green
    Refactor

    View Slide

  8. Test-Driven
    Design

    View Slide

  9. How?

    View Slide

  10. Integration Test

    View Slide

  11. Integration Test

    View Slide

  12. Integration Test
    Unit Test

    View Slide

  13. Integration Test
    Unit Test

    View Slide

  14. Integration Test
    Unit Test
    Unit Test
    Unit Test

    View Slide

  15. Integration Test
    Unit Test
    Unit Test
    Unit Test

    View Slide

  16. Integration Test
    Unit Test
    Unit Test
    Unit Test
    Unit Test

    View Slide

  17. Integration Test
    Unit Test
    Unit Test
    Unit Test
    Unit Test

    View Slide

  18. Integration Test
    Unit Test
    Unit Test
    Unit Test
    Unit Test

    View Slide

  19. Integration Test
    Unit Test
    Unit Test
    Unit Test
    Unit Test

    View Slide

  20. Integration Test
    Unit Test
    Unit Test
    Unit Test
    Unit Test

    View Slide

  21. Tooling

    View Slide

  22. Karma
    Test Runner

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. QUnit.js

    View Slide

  28. Assertions

    View Slide

  29. QUnit.assert.ok(
    makeBoolean()
    )
    Assertions

    View Slide

  30. QUnit.assert.equal(
    makeTen(),
    '10'
    )
    Assertions

    View Slide

  31. QUnit.assert.strictEqual(
    makeTen(),
    10
    )
    Assertions

    View Slide

  32. QUnit.assert.deepEqual(
    makeObject(),
    { foo: ‘bar’, baz: 10 }
    )
    Assertions

    View Slide

  33. QUnit.assert.propEqual(
    makeObject(),
    { foo: ‘bar’, baz: 10 }
    )
    Assertions

    View Slide

  34. QUnit.assert.throws(
    function() { throwError() },
    ‘Example Thrown Error’
    )
    Assertions

    View Slide

  35. Ember Test
    Helpers

    View Slide

  36. App.rootElement = ‘#qunit-fixture’
    App.setupForTesting()
    App.injectTestHelpers(QUnit)

    View Slide

  37. QUnit.visit(‘/posts’)

    View Slide

  38. QUnit.find(‘.add’, ‘.list’)

    View Slide

  39. QUnit.fillIn(
    ‘.name’,
    ‘Kerrick’
    )

    View Slide

  40. QUnit.click(‘.submit’)

    View Slide

  41. QUnit.keyEvent(
    ‘.wysiwyg’,
    ‘keypress’,
    30
    )

    View Slide

  42. QUnit.visit(‘/posts/new’)
    .fillIn(‘.name’, ‘Hello’)
    .click(‘.submit’)
    .then(function() {
    QUnit.assert.ok(true)
    })

    View Slide

  43. QUnit.visit(‘/posts/new’)
    QUnit.fillIn(‘.name’, ‘Hi’)
    QUnit.click(‘.submit’)
    QUnit.andThen(function() {
    QUnit.assert.ok(true)
    })

    View Slide

  44. QUnit.visit(‘/posts/new’)
    QUnit.fillIn(‘.name’, ‘Hi’)
    QUnit.click(‘.submit’)
    QUnit.andThen(function() {
    QUnit.assert.ok(true)
    })

    View Slide

  45. Integration

    Tests

    View Slide

  46. Controller
    Unit Tests

    View Slide

  47. Component
    Unit Tests

    View Slide

  48. Mixin
    Unit Tests

    View Slide

  49. Component
    Unit Tests

    View Slide