Randy Jones Jackie Roberts@randysjones @webdevjackie

Unit Testing with the JavaScript API

• A Lot of Demos• Tons of Tools

Last Year’s Talk

This Year’s Talk

• Some Ground Rules• Start with TDD• Testing Frameworks• Legacy Application• Web AppBuilder

Write Code

Write Test

Write code, break test

Rewrite Test

How do we Test?

Write Test

Test Fails

Write code till passes

Refactor

Test Driven Development

Write Test

Test Fails

Write code till passes

Refactor

Test Driven Development

Rule #1:

Don’t Test Other People’s Code

Rule #2:

Prioritize

https://www.slideshare.net/abagmar/anand-bagmar-behavior-driven-testing-bdt-in-agile

Nightmare Test Pyramid

Bugs

A single functional test thathasn’t passed in three years

Rule #3:EncapsulateEncapsulateEncapsulate

Easy to Test=

Easy to Maintain

Jackie starts next slide

TestFromTheStartFlickr Photo by nostri-imago https://flic.kr/p/8XF4BL shared under a Creative Commons (BY) license

Can IReact?(or Angularor Emberor new-trendy-framework)

Flickr Photo by nostri-imago https://flic.kr/p/8XF4BL shared under a Creative Commons (BY) license

https://jestjs.io/docs/en/getting-startedhttps://enzymejs.github.io/enzyme/

Can group related tests by wrapping them in describe(), or individually write tests using it() or test() blocks

expect() is a global function for making assertions

jest.fn() and expect(fn).toBeCalled() to create “spies” or mock functions

FixYourLegacy

Flickr Photo by nostri-imago https://flic.kr/p/8XF4BL shared under a Creative Commons (BY) license

https://github.com/Esri/enterprise-build-sample-js

What About Web AppBuilder?

https://github.com/Esri/esri-wab-build

Separate Your Code

https://github.com/Esri/generator-esri-appbuilder-js

Web AppBuilderDev Edition

generate

watch Copywidget

git

create

ArcGIS JS CLIhttps://github.com/Esri/arcgis-js-cli

Legacy App Samplehttps://github.com/Esri/enterprise-build-sample-js

Nearby App - Reacthttps://github.com/Esri/nearby-javascript

Web AppBuilder Resourceshttps://github.com/rsjones/wab-test-example

The Clean Code Talks -> Unit Testinghttps://www.youtube.com/watch?v=wEhu57pih5w

2018 Talk – Javascript Applications for the Enterprise: Test More, Work Lesshttps://www.youtube.com/watch?v=amEMQk5iY5c&t=8s

Resources

Using the ArcGIS API for JavaScript with Reacthttps://developers.arcgis.com/javascript/latest/guide/react/

esri-loaderhttps://developers.arcgis.com/javascript/latest/guide/esri-loader/index.html

Jesthttps://jestjs.io/docs/en/getting-started

Enzyme https://enzymejs.github.io/enzyme/

Resources

Intern – Test Runner & Frameworkhttps://theintern.io/

Karma – Test Runnerhttp://karma-runner.github.io/latest/index.html

SinonJS – Spies, Stubs, Mockshttps://sinonjs.org/

TS Mockito – Strongly Typed Mocking Libraryhttps://github.com/NagRock/ts-mockito

Jasmine – Test Frameworkhttps://jasmine.github.io/

Tooling

• Section Subhead

Section Header

Related Talks - UPDATE

Web AppBuilder for ArcGIS: Advanced Development Tools and Techniques• TODAY // 5:30 – 6:30• Catalina / Medera• George Bochenek / Gavin Rehkemper

Download the EsriEvents app and find

your event

Select the session you attended

Scroll down to “Survey”

Log in to access the survey

Complete the survey and select “Submit”

Please Share Your Feedback in the App

Presenter Names

Presentation Title

Section SubheadSection Header

Presenter(s)Demo Title