![exports[`Page renders Page with title and unread count`] = `
<div
className="page"
>
<h1
className="title"
>
title
</h1>
<span
className=“unread-badge”
>
5
</span>
</div>
`;
Snapshot File](https://image.slidesharecdn.com/codetalks17-171002082623/85/From-0-to-100-How-we-jump-started-our-frontend-testing-28-320.jpg)
![Field Trip: Chromeless
Chrome automation made simple
Runs locally or headless on AWS.
const chromeless = new Chromeless({ remote: true })
const screenshot = await chromeless
.goto('https://www.google.com')
.type('chromeless', 'input[name="q"]')
.press(13)
.wait('#resultStats')
.screenshot()
.scrollTo(0, 1000)
console.log(screenshot)
await chromeless.end()](https://image.slidesharecdn.com/codetalks17-171002082623/85/From-0-to-100-How-we-jump-started-our-frontend-testing-31-320.jpg)
From 0 to 100: How we jump-started our frontend testing
- 1. From 0 to 100 How we jump-started our frontend testing @henningmus Doist
- 2. ‣ Studied Business IT and Computer Science ‣ Software Engineer at Doist ‣ Fully remote company behind Todoist and recently Twist Intro: Hi, I’m Henning !
- 3. Twist Calmer communication More organized team knowledge More productive teamwork
- 5. October 2014 Begin of development
- 6. October 2014 Begin of development April 2016 Doist abandons Slack completely
- 7. October 2014 Begin of development April 2016 Doist abandons Slack completely January 2017 Invite-only Beta
- 8. October 2014 Begin of development April 2016 Doist abandons Slack completely January 2017 Invite-only Beta 21st July 2017 Public Launch
- 9. October 2014 Begin of development April 2016 Doist abandons Slack completely January 2017 Invite-only Beta 21st July 2017 Public Launch 1st May 2017 Me joining the web team
- 10. Why test?
- 11. Why test? ✓ Increase Quality
- 12. Why test? ✓ Increase Quality ✓ Easier & faster refactorings
- 13. Why test? ✓ Increase Quality ✓ Easier & faster refactorings ✓ Avoid regressions
- 14. Why test? ✓ Increase Quality ✓ Easier & faster refactorings ✓ Avoid regressions ✓ Tests as documentation
- 15. Why test? ✓ Increase Quality ✓ Easier & faster refactorings ✓ Avoid regressions ✓ Tests as documentation ✓ Reduce fear of changes
- 16. Test Types 1. API Tests 2. UI Tests 3. Unit Tests
- 17. API Tests
- 18. API Tests Consumer-Driven Contracts ‣ Written by clients executed by service
- 19. API Tests Consumer-Driven Contracts ‣ Written by clients executed by service Not a high priority in our setup (at the moment)
- 20. UI Tests Run your web app in an actual browser
- 21. UI Tests Run your web app in all the browsers
- 22. UI Tests Run your web app in all the browsers ‣ Selenium → WebDriver Protocol
- 23. UI Tests Run your web app in all the browsers ‣ Selenium → WebDriver Protocol ‣ Alternative APIs: WebdriverIO or NightwatchJS
- 24. UI Tests Run your web app in all the browsers ‣ Selenium → WebDriver Protocol ‣ Alternative APIs: WebdriverIO or NightwatchJS ‣ Run in the cloud: Saucelabs or Browserstack
- 25. Unit Tests Test your components in isolation ‣ Assert render output against prop-combinations
- 26. Unit Tests Test your components in isolation ‣ Assert render output against prop-combinations it('renders Page with title and unread count', () => { const page = shallow(<Page title='title' unreadCount={ 5 } />) expect(page.find('.page')).toBeDefined() expect(page.find('.title')).toBeDefined() expect(page.find('.title').text()).toBe('title') expect(page.find('.unread-badge')).toBeDefined() expect(page.find('.unread-badge').text()).toBe('5') }) Without snapshots
- 27. Unit Tests Test your components in isolation ‣ Assert render output against prop-combinations it('renders Page with title and unread count', () => { const page = shallow(<Page title='title' unreadCount={ 5 } />) expect(page).toMatchSnapshot() }) With snapshots
- 28. exports[`Page renders Page with title and unread count`] = ` <div className="page" > <h1 className="title" > title </h1> <span className=“unread-badge” > 5 </span> </div> `; Snapshot File
- 29. Integration Tests Test the interplay of your components ‣ When I simulate a click here is this being displayed? ‣ If my store changes to this does my UI update correctly?
- 30. Field Trip: Chromeless Chrome automation made simple Runs locally or headless on AWS.
- 31. Field Trip: Chromeless Chrome automation made simple Runs locally or headless on AWS. const chromeless = new Chromeless({ remote: true }) const screenshot = await chromeless .goto('https://www.google.com') .type('chromeless', 'input[name="q"]') .press(13) .wait('#resultStats') .screenshot() .scrollTo(0, 1000) console.log(screenshot) await chromeless.end()
- 32. Unit Tests Used technologies • jest as test-runner • enzyme as renderer • enzyme-to-json as snapshot serializer React 16 Proof
- 33. How hard is it to start with testing?
- 34. How hard is it to start with testing?
- 35. Leverage cross-browser tests for a good night’s sleep.
- 36. Reduce boilerplate assertions by using snapshots.
- 37. The biggest mistake is not to start.
- 38. From 0 to 100 How we jump-started our frontend testing @henningmus Doist