Slide 1

Slide 1 text

Kung Fu Moves for Front-End Hero

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

What shall I do next?

Slide 4

Slide 4 text

T D D B D D

Slide 5

Slide 5 text

T D D B D D P D D

Slide 6

Slide 6 text

You either die a JavaScript hero, or you live long enough to read those JavaScript fatigue articles.

Slide 7

Slide 7 text

Sample Project

Slide 8

Slide 8 text

Test Runner Test Library Assertion Library Style Checker github.com/ariya/from-zero-to-hero

Slide 9

Slide 9 text

> npm start > [email protected] start /home/ariya/from-hero-to-zero > http-server -p 9000 Starting up http-server, serving ./ Available on: http://127.0.0.1:9000 http://192.168.1.69:9000 Hit CTRL-C to stop the server

Slide 10

Slide 10 text

Prevent regressions with Git hooks

Slide 11

Slide 11 text

git commit Run pre-commit hook Exit code = 0 ? Continue Abort the commit process Y N

Slide 12

Slide 12 text

git push Run pre-push hook Exit code = 0 ? Continue Abort the push process Y N

Slide 13

Slide 13 text

cat << EOF >> .git/hooks/pre-commit npm run jscs EOF Create a pre-commit hook script chmod +x .git/hooks/pre-commit Ensure that it is executable

Slide 14

Slide 14 text

> git commit -a -m "Fix bug #666"

Slide 15

Slide 15 text

> git commit -a -m "Fix bug #666" > [email protected] jscs /home/ariya/from-hero-to-zero > jscs -p idiomatic js/*.js Invalid quote mark found at js/todoModel.js : 1 |var app = app || {}; 2 |(function() { 3 | 'use strict'; ------------^ 4 | var Utils = app.Utils; 5 | // Generic "model" object. You can use whatever 1 code style error found.

Slide 16

Slide 16 text

Manage code complexity

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

http://ariya.ofilabs.com/2013/05/continuous-monitoring-of-javascript-code-complexity.html

Slide 20

Slide 20 text

> cr -f plain search.js

Slide 21

Slide 21 text

> cr -f plain search.js search.js Function: searchConsultant Line No.: 1 Physical LOC: 17 Logical LOC: 13 Parameter count: 0 Cyclomatic complexity: 6 Cyclomatic complexity density: 46.15384615384615% Halstead difficulty: 15.235294117647058 Halstead volume: 371.5647232790157 Halstead effort: 5660.897842897945

Slide 22

Slide 22 text

Monitor and track code coverage

Slide 23

Slide 23 text

Istanbul Instrumenter + Coverage analysis

Slide 24

Slide 24 text

Source Instrumented Source

Slide 25

Slide 25 text

Source Instrumented Source Tests

Slide 26

Slide 26 text

Source Instrumented Source Tests Coverage Report

Slide 27

Slide 27 text

Karma configuration module.exports = function(config) { config.set({ basePath: '..', autoWatch: true, frameworks: ['mocha', 'chai'], files: ['js/*.js', 'test/*.js' ], plugins: [ 'karma-mocha', 'karma-chai', 'karma-coverage', 'karma-phantomjs-launcher'], browsers: ['PhantomJS'], singleRun: true, preprocessors: { 'js/*.js': ['coverage'] }, reporters: ['progress', 'coverage'], coverageReporter: { dir : 'coverage/', reporters: [{ type: 'html', subdir: 'html' },] } }); };

Slide 28

Slide 28 text

Coverage Report

Slide 29

Slide 29 text

Coverage Report Statistics Uncovered Statements

Slide 30

Slide 30 text

Code Coverage Dashboard

Slide 31

Slide 31 text

Repository

Slide 32

Slide 32 text

Repository Build system

Slide 33

Slide 33 text

Repository Build system Cobertura Report

Slide 34

Slide 34 text

Repository Build system Dashboard Cobertura Report

Slide 35

Slide 35 text

Coverage Tracking in Pull Request http://ariya.ofilabs.com/2015/08/javascript-code-coverage-dashboard-with-codecov-io.html

Slide 36

Slide 36 text

“If you think JSLint hurts your feelings, wait until you use Istanbul.” @davglass

Slide 37

Slide 37 text

...I gave you my heart But the very next day you gave it away...

Slide 38

Slide 38 text

Run quick smoke tests with evergreen browsers

Slide 39

Slide 39 text

http://ariya.ofilabs.com/2015/09/javascript-testing-with-latest-firefox-and-chrome-on-appveyor.html

Slide 40

Slide 40 text

appveyor.yml install: - choco install firefox - choco upgrade firefox - choco install googlechrome - choco upgrade googlechrome - ps: Install-Product node $env:nodejs_version - node --version - npm --version - npm install test_script: - npm test

Slide 41

Slide 41 text

https://chocolatey.org/packages/Firefox

Slide 42

Slide 42 text

Running Install scripts choco install firefox Installing the following packages: firefox By installing you accept licenses for the packages. Firefox v41.0.2 already installed. Use --force to reinstall, specify a version to install, or try upgrade. Chocolatey installed 0/1 package(s). 0 package(s) failed.

Slide 43

Slide 43 text

Running Install scripts choco install firefox Installing the following packages: firefox By installing you accept licenses for the packages. Firefox v41.0.2 already installed. Use --force to reinstall, specify a version to install, or try upgrade. Chocolatey installed 0/1 package(s). 0 package(s) failed. choco upgrade firefox Upgrading the following packages: firefox By upgrading you accept licenses for the packages. You have Firefox v41.0.2 installed. Version 44.0.2 is available based on your source(s). Firefox v44.0.2 Downloading Firefox 32 bit Installing Firefox... Firefox has been installed. The upgrade of firefox was successful.

Slide 44

Slide 44 text

Test your downstream projects

Slide 45

Slide 45 text

Google V8 Node.js Express

Slide 46

Slide 46 text

Library Framework Application

Slide 47

Slide 47 text

function test_downstream_project(project, repo) { console.log('Cloning', repo, '...'); execute('git clone --depth 1 ' + repo + ' ' + project); process.chdir(project); console.log(); execute('npm install'); console.log(); console.log('Replacing awesome with a fresh one...'); copy_file(source, './node_modules/awesome/awesome.js'); console.log(); try { execute('npm test'); } catch (e) { console.log('Failing: ', e.toString()); process.exit(1); } process.chdir('..'); }

Slide 48

Slide 48 text

function test_downstream_project(project, repo) { console.log('Cloning', repo, '...'); execute('git clone --depth 1 ' + repo + ' ' + project); process.chdir(project); console.log(); execute('npm install'); console.log(); console.log('Replacing awesome with a fresh one...'); copy_file(source, './node_modules/awesome/awesome.js'); console.log(); try { execute('npm test'); } catch (e) { console.log('Failing: ', e.toString()); process.exit(1); } process.chdir('..'); } Clone a downstream project Replace the library with a fresh one Install dependencies Run the test suite

Slide 49

Slide 49 text

Run different tests in parallel

Slide 50

Slide 50 text

Verify code coverage

Slide 51

Slide 51 text

Verify code coverage Run browser tests

Slide 52

Slide 52 text

Verify code coverage Run browser tests Check downstream projects

Slide 53

Slide 53 text

Parallel Execution Verify code coverage Monitor complexity Run browser tests Check downstream projects

Slide 54

Slide 54 text

Parallel Execution Verify code coverage Monitor complexity Run browser tests Check downstream projects

Slide 55

Slide 55 text

This is the hero you’re looking for

Slide 56

Slide 56 text

Thank You Some artworks are from http://openclipart.org. @ariyahidayat shapesecurity.com speakerdeck.com/ariya