# What to test in JS? ## A humble overview of JS testing techniques

# Jisse Reitsma - <!-- .element: class="fragment" -->Founder of Yireo - <!-- .element: class="fragment" -->Trainer of M2 devs - <!-- .element: class="fragment" -->Creator of MageTestFest & Reacticon - <!-- .element: class="fragment" -->Member of ExtDN.org - <!-- .element: class="fragment" -->Magento Master 2017 & 2018 Mover - <!-- .element: class="fragment" -->A simple Dutch boy

# Fundamentals - <!-- .element: class="fragment" -->No inline JS code (?) - <!-- .element: class="fragment" -->Move logic to separate JS components - <!-- .element: class="fragment" -->Use RequireJS to load dependencies - <!-- .element: class="fragment" -->Pass HTML identifiers as configuration (JSON)

# Levels - <!-- .element: class="fragment" -->**Unit**: Jasmine, Mocha, QUnit - <!-- .element: class="fragment" -->**Integration**: RequireJS - <!-- .element: class="fragment" -->**Functional**: MFTF - <!-- .element: class="fragment" -->**End-to-end**: Selenium, Nightwatch.js

# Diving into the tools

# How to make a choice?

# Which environment? - Regular webbrowser - PhantomJS browser - Node CLI - Rhino CLI

# Testing frameworks - Jasmine - MochaJS - NodeUnit - Tape - CasperJS - Jest - Intern - QUnit

# Assertion libraries - Chai - Should.js - Expect.js - NodeJS `assert()` - power-assert - assert-plus - unexpected - better-assert

# Test runners - Karma - (Tape) - Ava

# Other tools - <span class="label">Sinon </span><span class="value">Mocking & spying library</span> - <span class="label">ESLint </span><span class="value">Linting your JS code</span> - <span class="label">Mockjax </span><span class="value">Mocking AJAX requests</span>

# Could you repeat that?

# Find your way

<div class="heading"><img src="/images/mm18it/jasmine.png" /></div> # Jasmine basics

# Getting started with Jasmine Installing packages: ```bash $ npm install -g jasmine-node $ npm install -g yo $ npm install -g generator-jasmine ``` Creating a Jasmine skeleton: ```bash $ yo jasmine ``` Files: - `test/index.html` - `test/spec/test.js`

<div class="heading"><img src="/images/mm18it/karma.svg" /></div> # Adding Karma

# Adding Karma Installing packages: ```bash $ npm install -g karma $ npm install -g generator-karma $ npm install karma-chrome-launcher ``` Creating a Karma/Jasmine skeleton ```bash $ yo karma --test-framework=jasmine ```

# Karma config for Jasmine File `karma.conf.js`: ```js module.exports = function(config) { 'use strict'; config.set({ basePath: '', frameworks: ['jasmine'], files: ['spec/*.js'], port: 8080, browsers: ['Chrome'], plugins: [ 'karma-phantomjs-launcher', 'karma-chrome-launcher', 'karma-jasmine' ] }); }; ```

# The test (Jasmine) File `test/spec/test.js`: ```js (function () { 'use strict'; describe('Give it some context', function () { describe('maybe a bit more context here', function () { it('should run here few assertions', function () { expect(true).toBe(true); }); }); }); })(); ```

# Run tests ```bash $ cd test/ $ karma start $ karma start karma.conf.js ```

<div class="heading"><img src="/images/mm18it/mocha.svg" /></div> # Adding Mocha

# Karma + Mocha Installing packages: ```js $ npm install karma-mocha mocha ```

# Karma config for Mocha File `karma.conf.js`: ```js module.exports = function(config) { 'use strict'; config.set({ basePath: '', frameworks: ['mocha'], files: ['spec/*.js'], port: 8080, browsers: ['Chrome'], plugins: [ 'karma-phantomjs-launcher', 'karma-chrome-launcher', 'karma-mocha' ] }); }; ```

# Run tests Mocha only: ```bash $ node_modules/mocha/bin/mocha test/spec/test.js ``` or via Karma: ```bash $ cd test/ $ karma start $ karma start karma.conf.js ```

# The test (Mocha) File `test/spec/test.js`: ```js (function () { 'use strict'; const assert = require('assert'); describe('Give it some context', function () { describe('maybe a bit more context here', function () { it('should run here few assertions', function () { assert.equal(true, 1); }); }); }); })(); ```

<div class="heading"><img src="/images/mm18it/chai.png" /></div> # Adding Chai

# Adding Chai Installing packages: ```bash $ npm install karma-chai ```

# Karma config for Mocha+Chai File `karma.conf.js`: ```js module.exports = function(config) { 'use strict'; config.set({ basePath: '', frameworks: ['mocha', 'chai'], files: ['spec/*.js'], port: 8080, browsers: ['Chrome'], plugins: [ 'karma-phantomjs-launcher', 'karma-chrome-launcher', 'karma-mocha' ] }); }; ```

# Run tests Mocha only: ```bash $ node_modules/mocha/bin/mocha test/spec/test.js ``` or via Karma: ```bash $ cd test/ $ karma start $ karma start karma.conf.js ```

# The test (Mocha+Chai) File `test/spec/test.js`: ```js (function () { 'use strict'; const assert = chai.assert; describe('Give it some context', function () { describe('maybe a bit more context here', function () { it('should run here few assertions', function () { assert.equal(true, 1); }); }); }); })(); ```

<div class="heading"><img src="/images/mm18it/tape.png" /></div> # From Karma to Tape

# Adding Tape Installing packages: ```bash $ npm install -g tape ``` Run tests: ```bash $ tape test/spec/test.js ```

# The test (Tape) File `test/spec/test.js`: ```js (function () { 'use strict'; const test = require('tape'); test('Give it some context', function (t) { t.equal(typeof true, 'boolean'); t.end(); }); })(); ```

# Some thoughts

# Some thoughts - <!-- .element: class="fragment" -->Mocha or Tape for Node-based unit tests - <!-- .element: class="fragment" -->Jasmine+Karma or Mocha+Karma for browser-based tests - <!-- .element: class="fragment" -->And use Chai if you want a bit more spice - <!-- .element: class="fragment" -->Or use some other tool that suits you - <!-- .element: class="fragment" -->Or use Selenium or MFTF for functional tests - <!-- .element: class="fragment" -->Or everything at once

# We don't care <br/> which tool you use

# Whatever works for you - <!-- .element: class="fragment" -->Tests should easy and fast - <!-- .element: class="fragment" -->Pick one tool & setup. Stick with it. - <!-- .element: class="fragment" -->Keep your tests simple

# Asking the right questions

# What do you want to touch? - <!-- .element: class="fragment" -->Mocking the DOM (with `domjs`?) - <!-- .element: class="fragment" -->Mocking jQuery - <!-- .element: class="fragment" -->Spying

# Magento JS component JS component: ```js define(['jquery'], function($) { myComponentFunction = function(config, element) { $(element).append('Hello World'); } return { 'my-component': myComponentFunction } }); ``` PHTML template: ```html <div class="my-div" data-mage-init="{'my-component':{}}"></div> ```

# Preparing test Installing packages: ```bash npm install jsdom npm install jquery npm install requirejs ``` MAJOR FAIL: `jQuery requires a window with a document` RECOMMENDATION: Use Jasmine anyway

## Mocking jQuery or just using it? #### <!-- .element: class="fragment" --> Or maybe it is too hard to mock jQuery?

## How to test methods hidden using the revealing module pattern? #### <!-- .element: class="fragment" --> Don't test them? Treat it as a black box?

## Depending on RequireJS or faking it? #### <!-- .element: class="fragment" --> Beware of the NodeJS versioning nightmare

# Refactoring - <!-- .element: class="fragment" -->Dependency Injection (RequireJS) - <!-- .element: class="fragment" -->Limit dependencies per JS component - <!-- .element: class="fragment" -->Keep JS component small - <!-- .element: class="fragment" -->Separate JS component per purpose - General-purpose library - Pure functions - Model - View

## Each part has its own way of testing

# Thanks ## @jissereitsma / @yireo #### http://slides.yireo.com/yireo/js_testing

# Cat slide <video width="100%" height="100%" style="width:100%;height:100%;" controls> <source data-src="/images/mm18it/cat.webm" type="video/webm"> Your browser does not support the video tag. </video>