Git Product home page Git Product logo

intern-tutorial-esri-jsapi's Introduction

intern-tutorial-esri-jsapi

This is a tutorial on using intern to unit/functional test your esri JavaScript API apps.

First off big props to Colin Snover over at sitepen for the intern-tutorial found here. Colins tutorial was my starting point and helped me get the feel for intern and writing the tests themselves. I highly recommend you read his tutorial first, then come back here.

For a fast start running my example tests, follow these steps:

Step 1:

  • Clone or download this repo.
  • We are going to run our tests with a browser so move or copy the tutorial to a web accessible folder. We will be using the browser test runner so intern needs to be served via a web server to avoid any cross domain errors.
  • If you don't have node installed, install it.
  • To run tests in selenium, read the notes in the seleneum section.

Step 2:

  • Install intern, grunt and other dev dependencies with npm:
cd <path to the tutorial>
npm install

and if you wish (to support old IE, optional, see below):

npm install intern-geezer

Step 3:

  • Download a local copy of Dojo and dependencies:
bower install

Step 4:

  • Download a local copy of the AMD build of the ArcGIS API for JavaScript:
grunt slurp
  • Thats it! your'e done!

Step 5:

  • Lets run the tests I provided in this tutorial, open a browser and point it here:
http://<path to the tutorial>/intern-tutorial-esri-jsapi/node_modules/intern/client.html?config=tests/intern

or for intern-geezer:

http://<path to the tutorial>/intern-tutorial-esri-jsapi/node_modules/intern-geezer/client.html?config=tests/intern
  • you will need to have your console open as this is where the output from intern tests are displayed when using the browser runner (client.html). It should look something like this:

Console output

Important notes for esri jsapi integration:

The key to making intern work with the esri jsapi is two fold:

  1. Downloading a local copy of the Esri JSAPI. Intern 1.3 will work with esrijs 3.6 and above (latest version tested is 3.10). If your app is looking to support old IE (8 and below) you will need to also use intern-geezer. Good news is the intern config will work for both, so you can install intern and intern-geezer side by side and use both by defining different test suites.

  2. Defining the intern loader to work with the esri jsapi. Intern uses a local copy of dojo core. As such you need to tell it where to find the esri jsapi. Do this in your intern config file:

loader: {
  // Packages that should be registered with the loader in each testing environment
	packages: [{
		name: 'tests',
		location: 'tests'
	}, {
		name: 'app',
		location: 'app'
	}, {
		name: 'gis',
		location: 'gis'
	}, {
		name: 'esri',
		location: 'esri'
	}, {
		name: 'dgrid',
		location: 'dgrid'
	}, {
		name: 'put-selector',
		location: 'put-selector'
	}, {
		name: 'xstyle',
		location: 'xstyle'
	}, {
		name: 'dojo',
		location: 'dojo'
	}, {
		name: 'dojox',
		location: 'dojox'
	}, {
		name: 'dijit',
		location: 'dijit'
	}]
}

You also need to add the locations to your custom modules you want to load and test. In the above example 'app' and 'gis' is where we have some modules to test. Due to an quirk in the dojo loader, you will also need to register the 'tests' folder as a package, no biggie.

Important notes for intern usage:

  1. Intern-geezer only supports intern/chai!assert. When using regular intern, you can take advantage of intern/chai!expect and intern/chai!should.

Notes for getting selenium server running

The simplest way to install selenium server is with homebrew. If you dont have brew, install it first then:

$ brew update
$ brew doctor
$ brew install selenium-server-standalone chromedriver

to run selenium:

$ java -jar /usr/local/opt/selenium-server-standalone/libexec/selenium-server-standalone-2.40.0.jar -p 4444

Note: you may need to explor the /usr/local/opt/selenium-server-standalone folder for the jar location and name.

Then to run your tests:

$ node node_modules/intern/runner.js config=tests/intern.js

Notes: You will want to have a seperate config for selenium vs sauce labs. In your config set:

  1. turn "useSauceConnect" to false
  2. set "capabilities" to whatever Selenium version you're running (the project linked above puts you on 2.40.0, etc)
  3. update the environments section for browsers your local selenium actually supports. I used {browserName: 'chrome'} etc.

Included tests

  1. tests\hello.js This test comes from Colins tutorial and is very simple, the hello world of intern.

  2. tests\extent.js This test demonstrates using the esri Extent and Point classes from the api.

  3. tests\map.js This test demonstrates the async testing method. This will be the most common test method as most apps need to wait for objects to load before they can be used. For example esri/map.

  4. tests\printWidget.js This test demonstrates how to use two objects that require waiting until their on load fires before testing. This also shows how to use the async method a little differently than map.js test. For more info on async tests read here.

  5. tests\functional\index.js This test comes from Colins tutorial is is the hello world for functional testing.

Read the docs

Intern has docs located in the wiki of the intern repo. Read them. While not comprehensive it does outline everything needed.

Chai doc can be found here.

Links

lots of goodies

intern-tutorial-esri-jsapi's People

Contributors

davewilton avatar davidspriggs avatar odoe avatar tomwayson avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.