Download to read offline
![Arrange, Act, Assert
it('can search for whisky', async () => {
// Arrange
fetchMock.get('http://localhost:3001/whiskys?q=glen', [
{"id":99901,"name":"Glenmorangie Signet","region":""}
])
const app = mount(<App />)
// Act
const input = app.find('#searchBox')
input.simulate('change', { target: { value: 'glenm' }})
await wait(800)
// Assert
expect(app.find('span').text()).toBe('Glenmorangie Signet')
})](https://image.slidesharecdn.com/writingbettertestsforyourjavascriptapp-170224235621/75/Writing-better-tests-for-your-java-script-app-34-2048.jpg)
More Related Content
![Aula 2 revisado[2][1]](https://cdn.slidesharecdn.com/ss_thumbnails/aula2revisado21-170224235459-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Writing better tests for your java script app
Writing better tests for your java script app
- 1. Writing better testsfor your JavaScript app Jake Ginnivan
- 2.
- 3. Typical Problems whentesting… • Slow to write • Slow to run • Intermittently fail • Do not fail • Prevent refactoring • Don’t catch issues
- 4.
- 5.
- 6.
- 8. Writing better testsfor your JavaScript app
- 9.
- 11. Some testing scenarios Youdon’t have much testing, and want to get as much confidence with as little work as possible You have found a bug which is really easy to fix, how do you ensure it doesn’t happen again You have a feature which is critical and has a large impact if there are issues
- 12. There is nosingle testing strategy!
- 13. Unit tests In process Isolated Fast Testone thing Module Function Fast Comprehensive Reliable Maintainable Increased confidence Not restrictive
- 14. Unit tests Pros • Fastto write • Fast to run • Easy to debug Cons • Can inhibit refactoring • Delete them and re-write • Does not find collaboration issues between modules • Need higher level tests to accompany them
- 15. Unit tests –Test runner
- 16.
- 17. Unit tests • Keepmodules pure • Mocks are potential design issues
- 18. Higher level unittests Also known as acceptance tests, behaviour tests, collaboration tests, boundary tests and many other things
- 19. Unit Tests In process Isolated Fast Testone thing Fast Speed of development Reliable Maintainable Increased confidence Not restrictive
- 20. Higher level UnitTests In process Isolated Fast Test one thing Fast Speed of development Reliable Maintainable Increased confidence Not restrictive
- 21. Higher Level Unittests Pros • Fast to write • Pretty Fast to run • Covers module interactions • Less prone to breaking during refactoring Cons • Harder to debug than unit tests • Cannot cover all scenarios • Combinatorial issue
- 22. Higher level unittests – tips / techniques • An approach to testing single page apps • Testing an express API
- 23. Client SPA Context •Mock / Polyfill the DOM (JSDom) • Mock external services (Sockets, HTTP Calls) • Create a DOM instance and mount your application into it • State based testing • Raise events, interact with application, ensure it does what you want
- 24. Node web servicecontext • Create an mockable abstraction for any external systems • Database • Other services • Reduce logic in express middlewares • If you are not going to start an in memory express server • Use mediator pattern to introduce middlewares not tied to your http server • Use subcutaneous style testing
- 25. Ports and adapters Source:http://www.dossier-andreas.net/software_architecture/ports_and_adapters.html
- 26. Ports and adapters exportdefault { emailSender: function(details) { eventEmitter.publish(‘sendEmail’, details) } } eventEmitter.on(‘sendEmail’, (details) => { // actually send email }) eventEmitter.on(‘sendEmail’, (details) => { console.log(‘Pretending to send email’) })
- 27.
- 28. Integration Tests Out ofprocess communication Slow Often shared mutable state Fast Speed of Development Reliable Maintainable Increased confidence Not restrictive
- 29.
- 30. UI Tests Fragile Slow Fast Speed of Development Reliable Maintainable Increasedconfidence Not restrictive
- 31.
- 32.
- 33. The seam function getCheckins(testDb){ var db = testDb || connection return db('checkin') .select() }
- 34. Arrange, Act, Assert it('cansearch for whisky', async () => { // Arrange fetchMock.get('http://localhost:3001/whiskys?q=glen', [ {"id":99901,"name":"Glenmorangie Signet","region":""} ]) const app = mount(<App />) // Act const input = app.find('#searchBox') input.simulate('change', { target: { value: 'glenm' }}) await wait(800) // Assert expect(app.find('span').text()).toBe('Glenmorangie Signet') })
- 35. Page Object Pattern classAppPage { constructor() { this.app = mount(<App />) } async searchForWhisky(term) { const input = app.find('#searchBox') input.simulate('change', { target: { value: term }}) } getResults() { return this.app.find('span').text() } }
- 38. Recap • Test inNode • Snapshot testing is awesome • Different tests are a trade off, mix, blend and experiment to get what you need • Tests do not have to be painful • Tests increase confidence so you can deploy and make your customers happy!
- 39.
- 40.
Editor's Notes
- #2 Good afternoon, how has everyones conference been? There has been so many great talks over the past few days, personally I really enjoyed ____ and ____ amongst others. Today we are going to be talking about how to write better tests for your JavaScript app, to do that we need to quality what I mean by ‘better’?
- #3 Fast / Comprehensive --- Number of tests vs coverage? Reliable / Maintainable --- No race conditions, trusted, easy to maintain and keep up to date Valuable / Non-restrictive --- Do the tests find bugs? Can you refactor without breaking heaps of tests?
- #5 We are payed to write software, not tests. The reason we write tests is to give us confidence to ship the software we write.
- #6 We are payed to write software, not tests. The reason we write tests is to give us confidence to ship the software we write.
- #8 To make your customers happy
- #9 Good afternoon, how has everyones conference been? There has been so many great talks over the past few days, personally I really enjoyed ____ and ____ amongst others. Today we are going to be talking about how to write better tests for your JavaScript app, to do that we need to quality what I mean by ‘better’?
- #10 Then…
- #13 Lets explore this more
- #16 Use node, way fast to bootstrap and unit tests are not trying to test browser compat
- #17 searchLatest
- #19 There is no common taxonomy on types of tests, the important thing to focus on is the characteristics of each type of test!
- #24 I use React, Redux, but redux is transparent. This approach can be used with most UI libraries and is far far faster than using karma and real browsers, but you are testing in a different environment that your application will actually run in..
- #40 We are payed to write software, not tests. The reason we write tests is to give us confidence to ship the software we write.