Embed Size (px)
Citation preview
Easy-Bake TestingLiz Baillie@infinite_math
Last year...
this year...
What do i wish i knew a year ago?★ What do I have access to with Ember out of the box?
What do i wish i knew a year ago?★ What do I have access to with Ember out of the box?
★ How do I use Ember’s built-in test helpers?
What do i wish i knew a year ago?★ What do I have access to with Ember out of the box?
★ How do I use Ember’s built-in test helpers?
★ What’s the difference between unit, acceptance, and integration?
What do i wish i knew a year ago?★ What do I have access to with Ember out of the box?
★ How do I use Ember’s built-in test helpers?
★ What’s the difference between unit, acceptance, and integration?
★ What’s the deal with all these other frameworks and libraries?
What do i wish i knew a year ago?★ What do I have access to with Ember out of the box?
★ How do I use Ember’s built-in test helpers?
★ What’s the difference between unit, acceptance, and integration?
★ What’s the deal with all these other frameworks and libraries?
★ What are mocks, stubs, and spies? Do I need them?
What do i wish i knew a year ago?★ What do I have access to with Ember out of the box?
★ How do I use Ember’s built-in test helpers?
★ What’s the difference between unit, acceptance, and integration?
★ What’s the deal with all these other frameworks and libraries?
★ What are mocks, stubs, and spies? Do I need them?
★ How can I mock API responses?
What do i wish i knew a year ago?★ What do I have access to with Ember out of the box?
★ How do I use Ember’s built-in test helpers?
★ What’s the difference between unit, acceptance, and integration?
★ What’s the deal with all these other frameworks and libraries?
★ What are mocks, stubs, and spies? Do I need them?
★ How can I mock API responses?
★ How do I deal with async in my tests?
What do i wish i knew a year ago?★ What do I have access to with Ember out of the box?
★ How do I use Ember’s built-in test helpers?
★ What’s the difference between unit, acceptance, and integration?
★ What’s the deal with all these other frameworks and libraries?
★ What are mocks, stubs, and spies? Do I need them?
★ How can I mock API responses?
★ How do I deal with async in my tests?
★ What are some best practices when it comes to testing?
What do i get without even trying?★ Qunit: a JavaScript testing framework
○ Default testing framework
○ Includes everything QUnit has
■ assertions, async control, and other helpers
What do i get without even trying?
★ Ember Test Helpers
○ Built-in methods to automate common tasks in acceptance tests
What do i get without even trying?★ Testem
○ Runs your tests!
Ember acceptance test helpers★ Async
Ember acceptance test helpers★ Async
○ Are aware of and ‘wait for’ async behavior
Ember acceptance test helpers★ Async
○ Are aware of and ‘wait for’ async behavior
○ Are run in order
Ember acceptance test helpers★ Async
○ Are aware of and ‘wait for’ async behavior
○ Are run in order
■ click(selector)
Ember acceptance test helpers★ Async
○ Are aware of and ‘wait for’ async behavior
○ Are run in order
■ click(selector)
■ fillIn(selector, value)
Ember acceptance test helpers★ Async
○ Are aware of and ‘wait for’ async behavior
○ Are run in order
■ click(selector)
■ fillIn(selector, value)
■ keyEvent(selector, type, keyCode)
Ember acceptance test helpers★ Async
○ Are aware of and ‘wait for’ async behavior
○ Are run in order
■ click(selector)
■ fillIn(selector, value)
■ keyEvent(selector, type, keyCode)
■ triggerEvent(selector, type, options)
Ember acceptance test helpers★ Async
○ Are aware of and ‘wait for’ async behavior
○ Are run in order
■ click(selector)
■ fillIn(selector, value)
■ keyEvent(selector, type, keyCode)
■ triggerEvent(selector, type, options)
■ visit(url)
Ember acceptance test helpers★ Sync
Ember acceptance test helpers★ Sync
○ Are performed immediately when triggered
Ember acceptance test helpers★ Sync
○ Are performed immediately when triggered
■ currentPath()
Ember acceptance test helpers★ Sync
○ Are performed immediately when triggered
■ currentPath()
■ currentRouteName()
Ember acceptance test helpers★ Sync
○ Are performed immediately when triggered
■ currentPath()
■ currentRouteName()
■ currentURL()
Ember acceptance test helpers★ Sync
○ Are performed immediately when triggered
■ currentPath()
■ currentRouteName()
■ currentURL()
■ find(selector, context)
Ember acceptance test helpers★ Wait
Ember acceptance test helpers★ Wait
○ andThen() - waits for all preceding async helpers to finish
before executing code wrapped within
Unit - integration - acceptance★ Unit
○ Self-contained
○ Only testing the code itself
○ NOT user interaction, testing only a particular function or
other unit of code
Unit - integration - acceptance★ Integration / Component
○ Test how one layer of your application interacts with
another, usually how components interact with each other or
with other templates
○ Component tests are integration tests!
Unit - integration - acceptance★ Acceptance
○ “I accept that my app has actual users who will actually
interact with it, so I’d better test for that!”
mocks - spies - stubs★ Help you write unit tests in isolation
mocks - spies - stubs★ Help you write unit tests in isolation
★ Probably won’t come up very often in Ember, but good to be aware
of
mocks - spies - stubs★ Help you write unit tests in isolation
★ Probably won’t come up very often in Ember, but good to be aware
of
★ Sinon.js is a great library that provides mocks, stubs, spies,
and more
mocks - spies - stubs★ Help you write unit tests in isolation
★ Probably won’t come up very often in Ember, but good to be aware
of
★ Sinon.js is a great library that provides mocks, stubs, spies,
and more
★ 2 highly-rated Ember Sinon addons are ember-sinon and ember-
sinon-qunit
mocks - spies - stubs★ Help you write unit tests in isolation
★ Probably won’t come up very often in Ember, but good to be aware
of
★ Sinon.js is a great library that provides mocks, stubs, spies,
and more
★ 2 highly-rated Ember Sinon addons are ember-sinon and ember-
sinon-qunit★ https://spin.atomicobject.com/2015/05/18/sinon-js-ember-cli-testing/
mocks
★ Also known as ‘test doubles’
★ Fake methods with pre-programmed behavior and pre-preprogrammed
expectations
Spies★ A function that records arguments, returns the value, as well as
the value of ‘this’ and exception thrown (if any) for all its calls
★ Good for seeing how many times a particular function was called or how a function handles a specific callback
Stubs★ Stubs are spies!
★ Force code down a specific path
★ In the case of Sinon.js, there is a lot to explore, as stubs support the full spy API as well
Mocking api responses★ Mirage is awesome and a super popular solution for this
Mocking api responses★ Mirage is awesome and a super popular solution for this
★ Can be used in development as well as test environments
Mocking api responses★ Mirage is awesome and a super popular solution for this
★ Can be used in development as well as test environments
★ Offers factories for use in testing
Mocking api responses★ Mirage is awesome and a super popular solution for this
★ Can be used in development as well as test environments
★ Offers factories for use in testing
★ Can seed your test database and/or mock one-off responses in
individual tests
Mocking api responses★ Mirage is awesome and a super popular solution for this
★ Can be used in development as well as test environments
★ Offers factories for use in testing
★ Can seed your test database and/or mock one-off responses in
individual tests
★ Sinon also offers mock API responses, but Mirage offers so much
more that it’s definitely worth looking into
Framework FOMO?
★ Jasmine
○ BDD / behavior-driven testing framework
Framework FOMO?
★ Jasmine
○ BDD / behavior-driven testing framework
○ Does not require a DOM
Framework FOMO?
★ Jasmine
○ BDD / behavior-driven testing framework
○ Does not require a DOM
○ Does not depend on any other frameworks
Framework FOMO?
★ Jasmine
○ BDD / behavior-driven testing framework
○ Does not require a DOM
○ Does not depend on any other frameworks
○ Similar in syntax to RSpec, so may be good for people coming
over from a Rails background
Framework FOMO?★ Chai
○ An assertion library (NOT a framework)
Framework FOMO?★ Chai
○ An assertion library (NOT a framework)
○ People seem to really like having a ton of different
assertions
Framework FOMO?★ Chai
○ An assertion library (NOT a framework)
○ People seem to really like having a ton of different
assertions
○ Apparently very difficult to implement in Ember with QUnit
Framework FOMO?★ Chai
○ An assertion library (NOT a framework)
○ People seem to really like having a ton of different
assertions
○ Apparently very difficult to implement in Ember with QUnit
○ A few addons are out there, but there doesn’t seem to be one
obviously best solution
Framework FOMO?★ Mocha
○ Another testing framework (so you would probably use this in
place of QUnit)
Framework FOMO?★ Mocha
○ Another testing framework (so you would probably use this in
place of QUnit)
○ Can use any assertion library you want (like Chai)
Framework FOMO?★ Mocha
○ Another testing framework (so you would probably use this in
place of QUnit)
○ Can use any assertion library you want (like Chai)
○ Can’t use fat arrow? :(
■ Their lexical binding of the ‘this’ value makes them unable to access the Mocha context, and statements like this.timeout(1000); will not work inside an arrow function
Framework FOMO?
★ Selenium
○ For end-to-end testing
Framework FOMO?
★ Selenium
○ For end-to-end testing
○ Drives browser in application environment rather than test
environment
Framework FOMO?
★ Selenium
○ For end-to-end testing
○ Drives browser in application environment rather than test
environment
○ Difficult to hook up to Ember?
Framework FOMO?
★ Selenium
○ For end-to-end testing
○ Drives browser in application environment rather than test
environment
○ Difficult to hook up to Ember?
○ Much slower to run tests
The Verdict?
★ QUnit is great! I have yet to come upon a situation in which I
really need a ton of extra assertions or am unsatisfied with what
QUnit offers me
TDD vs. Everything Else★ TDD = Test-Driven Development
TDD vs. Everything Else★ TDD = Test-Driven Development
○ Write a failing test for something that doesn’t exist yet
TDD vs. Everything Else★ TDD = Test-Driven Development
○ Write a failing test for something that doesn’t exist yet
○ Build the thing to make the test pass
TDD vs. Everything Else★ TDD = Test-Driven Development
○ Write a failing test for something that doesn’t exist yet
○ Build the thing to make the test pass
○ Write another test
TDD vs. Everything Else★ TDD = Test-Driven Development
○ Write a failing test for something that doesn’t exist yet
○ Build the thing to make the test pass
○ Write another test
○ Rinse, repeat!
TDD vs. Everything Else★ TDD = Test-Driven Development
○ Write a failing test for something that doesn’t exist yet
○ Build the thing to make the test pass
○ Write another test
○ Rinse, repeat!
★ Great way to ensure as complete test coverage as possible
TDD vs. Everything Else★ TDD = Test-Driven Development
○ Write a failing test for something that doesn’t exist yet
○ Build the thing to make the test pass
○ Write another test
○ Rinse, repeat!
★ Great way to ensure as complete test coverage as possible
★ Can be very difficult for beginners, as beginners usually don’t
know exactly what they’re expecting until they build it
Page Objects★ UI changes can make your tests brittle if they’re frequently
dependent on specifically-named selectors
Page Objects★ UI changes can make your tests brittle if they’re frequently
dependent on specifically-named selectors
★ Encapsulate the structure of your page within an object
Page Objects★ UI changes can make your tests brittle if they’re frequently
dependent on specifically-named selectors
★ Encapsulate the structure of your page within an object
★ Keep your tests DRY as well as keep the intention of your tests
clear
Page Objects★ UI changes can make your tests brittle if they’re frequently
dependent on specifically-named selectors
★ Encapsulate the structure of your page within an object
★ Keep your tests DRY as well as keep the intention of your tests
clear
★ Well-supported Ember addon: http://ember-cli-page-object.js.org
Page Objects★ UI changes can make your tests brittle if they’re frequently
dependent on specifically-named selectors
★ Encapsulate the structure of your page within an object
★ Keep your tests DRY as well as keep the intention of your tests
clear
★ Well-supported Ember addon: http://ember-cli-page-object.js.org
★ http://martinfowler.com/bliki/PageObject.html
Best testing practices★ Keep your test code DRY by writing test helpers
Best testing practices★ Keep your test code DRY by writing test helpers
★ Protect your tests from UI changes and keep their intention clear
with page objects
Best testing practices★ Keep your test code DRY by writing test helpers
★ Protect your tests from UI changes and keep their intention clear
with page objects
★ Keep each test discrete in its function
Best testing practices★ Keep your test code DRY by writing test helpers
★ Protect your tests from UI changes and keep their intention clear
with page objects
★ Keep each test discrete in its function
★ Most tests should be acceptance, some integration, least of all
unit
Best testing practices★ Keep your test code DRY by writing test helpers
★ Protect your tests from UI changes and keep their intention clear
with page objects
★ Keep each test discrete in its function
★ Most tests should be acceptance, some integration, least of all
unit
★ Testing styles such as TDD are a matter of personal preference
and aren’t better or worse than any other
Resources★ Ember Guides for details on test helpers
○ https://guides.emberjs.com/v2.4.0/testing/acceptance/
★ Qunit Docs - http://api.qunitjs.com/
★ Global Ember Meetup: Intro to Testing
○ https://vimeo.com/146960505
★ Sinon for mocks, stubs, & spies - http://sinonjs.org/
★ Mirage for mock API responses - http://www.ember-cli-mirage.com/
★ For more on mocks, stubs, & spies - http://gaboesquivel.
com/blog/2014/unit-testing-mocks-stubs-and-spies/
Thanks!
Liz Baillie @infinite_math
