---

layout: true

<h2 id="style.rightfloat-positionabsolute-right0style.footnoterobert-hostlowsky--modern-testing-in-js-world--agile-testing-meetup--2018"> 
.footnote[Robert Hostlowsky | Modern Testing in JS World | Agile Testing Meetup | 2018]</h2>
class: middle 
.center[# Modern Testing in Javascript World 
]
<h2 id="background-image-urlimage.jpg-.footnotego-directly-to-project-sitehttpsgithub.comgnabremark--------"></h2>
name: agenda
<h1 id="agenda">Agenda</h1>
Agile Testing @Munich - Meetup | Oct. 26, 2018 Munich
<ol>
<li>Let’s talk about testing</li>
<li>Unit testing with Jest</li>
<li>End-to-end testing: a challenge</li>
<li>Puppeteer</li>
<li>Cypress</li>
</ol>
<h2 id="summary">Summary</h2>
class: center
Robert Hostlowsky
Consultant at codecentric AG, Germany, since 2020: working at instana
web-dev-ops-qa-guy
<img src="assets/meInNY.jpg" width="60%">
<hr>
class: center
<h2 id="andrea-tomasini">Andrea Tomasini:</h2>
<h2 id="agile-testing-is-nonsense">"Agile Testing is nonsense,</h2>
– 
because Agile is about testing" 
<a href="https://www.slideshare.net/tumma72/keynote-agile-testing">https://www.slideshare.net/tumma72/keynote-agile-testing</a>
<blockquote>
“Testing is an attitude which brings us to trust results based on the fact that we can validate them.”
</blockquote>
<hr>
class: 
.center[ 
Two sides of the same medal, different focus
Ice-cone of testing: user / business values
Testing-pyramid: developer fast feedback + confidence
<h2 id="img-srcassetsagiletesting-icecone.jpg-width60"><img src="assets/agiletesting-icecone.jpg" width="60%">]</h2>
class: middle
<h1 id="let’s-start-with-unit-tests">Let’s start with Unit tests</h1>
<hr>
<h2 id="class-middle.centerimg-srcassetsjest.png-width100-">class: middle 
.center[<img src="assets/jest.png" width="100%">]</h2>
<h2 id="jest-a-modern-test-runner">Jest: A modern Test runner</h2>
<ul>
<li>Similar to Junit, phpunit, etc.</li>
<li>Built by facebook</li>
</ul>
–
<ul>
<li>Based on jasmine</li>
</ul>
–
<ul>
<li>Runs Tests in parallel</li>
</ul>
–
<ul>
<li>
All usual <a href="https://jestjs.io/docs/en/using-matchers">matchers</a> we know from chai are already built-in 
–
</li>
<li>
Extensible: <a href="https://jestjs.io/docs/en/expect">Expect API</a>
</li>
</ul>
<hr>
<h1 id="why-jest">Why Jest?</h1>
<h2 id="easy-setup-getting-started">Easy setup <a href="https://jestjs.io/docs/en/getting-started">Getting started</a></h2>
<ul>
<li>🔋🔋 All batteries included</li>
<li>Install via <code>npm install -g -D jest</code></li>
<li>Basic configuration file via <code>jest --init</code></li>
<li>ES6 support with <code>babel-jest</code></li>
<li>Typescript support with <code>ts-jest</code></li>
<li>Same syntax as Mocha and Chai: BDD style like Jasmine</li>
</ul>
<pre class=" language-js"><code class="prism language-js">describe('Test Code with Jest', () => {
 it('should have Test runner
 expect("Jest based on Jasmine").toContain('jasmine');
 });
 });
</code></pre>
<hr>
class: middle
<h1 id="why-jest-1">Why Jest?</h1>
<ul>
<li>Great documentation</li>
<li>Coverage Report built-in</li>
<li>CI support with junit-reporter</li>
<li>Each test has its own virtual environment</li>
<li>Ide support: atom/webstorm/vscode …</li>
</ul>
<hr>
class: middle
<h1 id="how-jest-saves-time-watch">How Jest saves time? ⌚️</h1>
<h2 id="watch-mode-🔎">watch-mode 🔎</h2>
<ul>
<li>only changed files, git based !</li>
<li>module dependencies!</li>
</ul>
<h2 id="astonishing-clear-testerror-results">astonishing clear test/error results</h2>
<h3 id="see-in-demo-tv">-> see in demo 📺</h3>
<hr>
class: middle
<h2 id="asynchronous-code-✔">asynchronous code ✔</h2>
<pre class=" language-js"><code class="prism language-js">// async/await can be used.
it('works with async/await', async () => {
 expect.assertions(1);
 const data = await user.getUserName(4);
 expect(data).toEqual('Mark');
});
</code></pre>
or
<pre class=" language-js"><code class="prism language-js">it('works with promises', () => {
 return user.getUserName(4)
 .then(data => expect(data)
 .toEqual('Mark'));
});
</code></pre>
<h2 id="httpsjestjs.iodocsenasynchronous"><a href="https://jestjs.io/docs/en/asynchronous">https://jestjs.io/docs/en/asynchronous</a></h2>
class: middle
<h2 id="mocking-built-in-✔">mocking: built-in ✔</h2>
[<a href="https://jestjs.io/docs/en/mock-functions">https://jestjs.io/docs/en/mock-functions</a>]
<hr>
class: middle
<h2 id="matchers-built-in-✔">matchers: built-in ✔</h2>
[<a href="https://jestjs.io/docs/en/expect">https://jestjs.io/docs/en/expect</a>]
<hr>
class: center,middle
<h1 id="camera-snapshot-testing">📷 Snapshot testing</h1>
<hr>
<h2 id="img-srcassetsjest-snapshots.png-width100"><img src="assets/jest-snapshots.png" width="100%"></h2>
class: middle
<h2 id="use-cases-for-snapshot-testing">Use cases for Snapshot testing</h2>
<ul>
<li>Replacing many asserts/equals</li>
<li>UI component comparison</li>
<li>GraphQL response</li>
<li>…</li>
</ul>
<hr>
<h1 id="what-if-only-having-unit-tests-...">What, if only having unit tests …?</h1>
<hr>
<h1 id="integration-testing">Integration Testing</h1>
<h2 id="from-painless-react-testing-by-gleb-bahmutovvideo-width800-height400-controls-srcassetsbahmutov-unit_integration.mov-">(from “painless-react-testing” by <a href="https://slides.com/bahmutov/painless-react-testing#/1/3">Gleb Bahmutov</a>): 
</h2>
class: center,middle
<h1 id="end-to-end-testing">End-to-end Testing</h1>
Full coverage with “the Testing trophy” by Kent C. Dodds:
<hr>
.right[<img src="assets/trophy-all.png" width="80%">]
<hr>
class: center
<h1 id="challenge-🏋️‍♀️">Challenge 🏋️‍♀️</h1>
<h3 id="🤔-how-can-we-test-this-app">🤔 How can we test this app:</h3>
<h2 id="img-srcassetscoolboard-screenshot.png-width80-"><img src="assets/coolboard-screenshot.png" width="80%"></h2>

<hr>
<h2 id="centerimg-srcassetspptr.png">.center[<img src="assets/pptr.png">]</h2>
class: middle
<h2 id="httpspptr.dev"><a href="https://pptr.dev">https://pptr.dev</a></h2>
<blockquote>
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.
</blockquote>
<blockquote>
Puppeteer runs headless by default
</blockquote>
<pre class=" language-js"><code class="prism language-js">const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
 const page = await browser.newPage();
 await page.goto('https://google.com');
 const inputElement = await page.$('input[type=submit]');
 await inputElement.click();
 // ...
});
</code></pre>
[<a href="https://github.com/transitive-bullshit/awesome-puppeteer">https://github.com/transitive-bullshit/awesome-puppeteer</a>]
<hr>
class: middle,center
<h2 id="dream-team-jest--puppeteer-✨">Dream-team: Jest + puppeteer ✨</h2>
<h2 id="img-srcassetsjestpuppeteer.png-width80-"><img src="assets/jest+puppeteer.png" width="80%"></h2>
class: middle
<h3 id="jest-puppeteer"><a href="https://github.com/smooth-code/jest-puppeteer">jest-puppeteer</a></h3>
🎁 Extra: Automatically starts a server as part of test suite
<pre class=" language-json"><code class="prism language-json">{
 "preset": "jest-puppeteer"
}```

``` js
describe('Google', () => {
 beforeAll(async () => {
 await page.goto('https://google.com')
 })
 it('should display "google" text on page', async () => {
 await expect(page).toMatch('google')
 })
})
</code></pre>
<hr>
<h3 id="more-extra-helpers">More extra helpers</h3>
<pre class=" language-js"><code class="prism language-js">// Assert that a button containing text "Home" will be clicked
await expect(page).toClick('button', { text: 'Home' })
</code></pre>
<pre class=" language-js"><code class="prism language-js">// Assert that current page contains 'Text in the page'
await expect(page).toMatch('Text in the page')
</code></pre>
<pre class=" language-js"><code class="prism language-js">// submit a form
const inputElement = await page.$('input[type=submit]');
await inputElement.click();
</code></pre>
and more on 
<a href="https://github.com/smooth-code/jest-puppeteer">https://github.com/smooth-code/jest-puppeteer</a>
<hr>
class: middle.
<ul>
<li>after 📹 recording manual steps via puppeteer recorder (a chrome extension),</li>
<li>generated javascript code:</li>
</ul>
<pre class=" language-js"><code class="prism language-js">const puppeteer = require('puppeteer');
(async () => {
 const browser = await puppeteer.launch({ 
 devtools: false, slowMo: 0, headless: false 
 })
 const page = await browser.newPage()
 await page.goto('https://www.coolboard.fun/')

const boards = '.sc-bdVaJa > .ui > .ui > p > a:nth-child(2)';
 await page.waitForSelector(boards)
 await page.click(boards)

await page.waitForSelector('.App > .sc-bdVaJa > .ui > p > a')
 await page.click('.App > .sc-bdVaJa > .ui > p > a')

const auth0LockInputEmail = 'div > div > .auth0-lock-input-email > .auth0-lock-input-wrap > .auth0-lock-input';
 await page.waitForSelector(auth0LockInputEmail)
 await page.click(auth0LockInputEmail)

await page.type(auth0LockInputEmail, Email_Adress)
 let auth0LockInputPassword = 'div > div > .auth0-lock-input-password > .auth0-lock-input-wrap > .auth0-lock-input';
 // ...
</code></pre>
<hr>
class: middle
<h3 id="learnings">Learnings:</h3>
<pre><code>👍 easy to start quickly
👍 slow-motion mode helps to analyse

👎 hard to maintain, because of "cryptic" _ selectors 
👎 one long test plan hard to debug
</code></pre>
<hr>
class: inverse,middle 
<img src="assets/cypresslogo.png" width="100%">
<hr>
<h1 id="cypress---what-is-it">Cypress - What is it?</h1>
A free, open source, locally installed Test Runner + Dashboard Service for recording your tests.
Git: 1st commit Jun 5, 2014
Public beta: Oct 9, 2017
<ul>
<li>Test-Runner inside Chrome Browser or Electron-App</li>
<li>Bundled with mocha, jquery, sinon, chai</li>
<li>Controlling Chrome Browser via devtools</li>
</ul>
<hr>
<h2 id="video-width800-height500-controls-srcassetscypress-installing-cli.mp4videocypress-setting-up"> 
<a href="https://docs.cypress.io/guides/overview/why-cypress.html#Setting-up-tests">cypress, Setting up</a></h2>
<h2 id="video-width800-height500-controls-srchttpsdocs.cypress.ioimgsnippetswriting-tests.0b201bd1.mp4videocypress-writing-tests"> 
<a href="https://docs.cypress.io/guides/overview/why-cypress.html#Writing-tests">cypress, Writing tests</a></h2>
<h2 id="video-width800-height500-controls-srchttpsdocs.cypress.ioimgsnippetsrunning-tests.4bae660a.mp4videocypress-running-tests"> 
<a href="https://docs.cypress.io/guides/overview/why-cypress.html#Running-tests">cypress, Running tests</a></h2>
class: middle
<h2 id="many-great-tutorials-videos-and-examples">Many great tutorials, videos, and examples:</h2>
<a href="https://www.cypress.io/how-it-works/">https://www.cypress.io/how-it-works/</a>
<a href="https://docs.cypress.io/examples/examples/recipes.html">https://docs.cypress.io/examples/examples/recipes.html</a>
<hr>
class: middle
<h2 id="center-demo">.center[# Demo 
]</h2>
<pre class=" language-js"><code class="prism language-js">function gotoBoards () { 
 return cy.get('.sc-bdVaJa > .ui > .ui > p > a:nth-child(2)').click() 
}
function clickLogin() {
 return cy.get('.App > .sc-bdVaJa > .ui > p > a').click();
}
describe('Checkout cypress', () => {
 it('tests coolboard', () => {
 cy.visit('https://www.coolboard.fun/');

gotoBoards();
 clickLogin();

cy.get(auth0LockInputEmail).type('MyEmail.com');
 cy.get(auth0LockInputPassword).type(password, {log: false});
 cy.get('#auth0-lock-container-1 form button')
 .click()
 .wait(2000); // workaround for loading new data from server.

gotoBoards();

const New_Board_button = '.App > .sc-bdVaJa .ui';
 cy.get(New_Board_button).click();
 //...
 }
}
</code></pre>
<hr>
<h2 id="video-width800-height500-controls-srcassetscoolboard-cypress-tests.movvideo"></h2>
class: middle
<h1 id="why-soo-coool-cool">Why soo coool 🆒?</h1>
<ul>
<li>Integration testing from user perspective</li>
<li>Fast</li>
<li>Easy: all stuff built-in</li>
<li>Network XHR interception/mock/spy</li>
<li>Parallel testing (easy scaling CI)</li>
</ul>
<hr>
class: middle
<h2 id="comparison-to-selenium">Comparison to Selenium:</h2>
<ul>
<li>Faster 🏃</li>
<li>Autorun/rerun</li>
<li>All in one place</li>
<li>More stable, compared to wire protocol</li>
</ul>
<hr>
class: middle
<h2 id="some-limits">Some limits</h2>
<ul>
<li>Only javascript/typescript</li>
<li>Limited jest support</li>
</ul>
<h2 id="see-cypress-page-about-trade-offs">See cypress page about <a href="https://docs.cypress.io/guides/references/trade-offs.html">trade-offs</a></h2>
class: middle
<h2 id="roadmap">Roadmap</h2>
<ul>
<li>🖥 Screen diffing</li>
<li>Native events</li>
<li>📱 mobile device support</li>
</ul>
More on <a href="https://docs.cypress.io/guides/references/roadmap.html#Upcoming-Features">Upcoming-Features</a>:
<hr>
<h2 id="cypress-summary">Cypress summary</h2>
More control and better insights than with Jest/Puppeteer:
In the protocol you can additionally see the XHR requests and even all navigation! 
That has been a problem with Puppeteer, but was easy to detect!
For even better experience:
<ul>
<li>Have many tests,</li>
<li>Test the log-in only once,</li>
<li>Mock the REST api communication for speed-up</li>
</ul>
<hr>
class: middle
<h1 id="recommendation">Recommendation</h1>
Write unit tests with Jest
🎁 Best for Fast Feedback for development / TDD
Have end-to-end tests with Cypress
🎁 Best for check meeting of the business needs
<pre><code>Cypress for the important (happy path) use cases

Small number of additional *UI browser* tests for some edge cases on other browsers
</code></pre>