# 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" -->Organizer of usergroups, hackathons - <!-- .element: class="fragment" -->Magento Master 2017 & 2018 Mover - <!-- .element: class="fragment" -->I live in a palace

# I live in a palace ...

# Houtje Touwtje

# Houtje Touwtje - Benefits - <!-- .element: class="fragment" -->Little effort to get started - <!-- .element: class="fragment" -->You need little material

# Houtje Touwtje - Downsides - <!-- .element: class="fragment" -->False easily apart - <!-- .element: class="fragment" -->Hard to re-structure - <!-- .element: class="fragment" -->Performance testing means you need to start again

# Testing is key

# JavaScript testing is harder

# Testing a JS component in M2 <small>Say there is a HTML element, where `data-mage-init` leads to a RequireJS alias that leads to a JS component of which the return value is either a function or an object, while in either case, it is "executed" so that it returns value is turned into a Knockout ViewModel, which is then automagically bound to the original HTML area, so all properties can be represented using a weird KO syntax (with not 1, not 2 but 3 possible stylings), while underneath the ViewModel could be observed and modified by multiple observers, using either original KO code, or imports, or exports, or both, in a way that even the most experienced Magento developers find disturbing to say the least.</small> - <!-- .element: class="fragment" -->And now, how to test this?

# Focus on logic or output?

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

# What is output? - HTML generated by Magento - Interpreted DOM tree - DOM modified by Knockout

# Levels - <!-- .element: class="fragment" -->**Unit**: Jasmine, Mocha, QUnit - <!-- .element: class="fragment" -->**Integration**: same (but with RequireJS) - <!-- .element: class="fragment" -->**Functional**: Selenium, CasperJS, 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

# 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(); }); })(); ```

# Ok, ok, but what to do?

# 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

# BONUS: React testing - Use shallow component rendering - Compare output (from HTML back to JSX?) - Testing component properties - Or use full HTML rendering to test for complete output

# My personal approach - Tape for bare-bones functionality - Mocha for more complex stuff - Selenium / CasperJS for functional tests

# Ideal procedure for unit tests - Install extension (without Magento) - Run `npm install` - Run `npm test` See [Yireo_GoogleTagManager2](https://github.com/yireo/Yireo_GoogleTagManager2) extension for inspiration

# GTM2 code ```js define([...], function (...) { ... return { 'initDataLayer': initDataLayer, 'getCustomer': getCustomer, 'getQuote': getQuote, 'getOrder': getOrder, 'isLoggedIn': isLoggedIn, 'getCustomerSpecificAttributes': getCustomerSpecificAttributes, 'addScriptElement': addScriptElement, 'yireoGoogleTagManager': function (config) { ... } }; }); ```

# 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

## Each part has its own way of testing

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

# 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>