FormidableLabs/full-stack-testing

Name: full-stack-testing

Owner: Formidable

Description: Full. Stack. Testing. (w/ JavaScript)

Created: 2015-02-19 13:47:15.0

Updated: 2018-01-12 07:19:51.0

Pushed: 2018-01-09 18:33:44.0

Homepage: http://full-stack-testing.formidablelabs.com/

Size: 140

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Full. Stack. Testing.

Learn frontend, backend, and functional testing with a full-stack JavaScript web application, sample tests, exercises, and more!

Introduction

We start with a simple “Converter” web application that converts strings to camel, snake, or dashed cases. You can see an online demo of the app/tests (with local development counterparts) at: full-stack-testing.formidablelabs.com

• Converter Web App (127.0.0.1:3000)
• Client Unit Tests (127.0.0.1:3001/test/client/test.html)

Stack

The frontend app uses jQuery for DOM/AJAX work and is built with the wonderful Webpack bundling tool. The backend server uses the ever popular Express framework for our REST API.

To test our application, we write backend, frontend, and functional tests with technologies that include:

• Mocha: Suites, tests
• Chai: Assertions
• Sinon.JS: Fakes
• SuperTest: REST requests, asserts

Getting Started

See our installation instructions. Here's a tl;dr summary:

t clone https://github.com/FormidableLabs/full-stack-testing.git
 full-stack-testing
m install
m run-script check

Tests

The test suites in this project can be found in the following locations:

/server
/client
/func

For each of these

Backend Tests

test/server

Server-side (aka “backend”) tests have two real flavors – unit and REST tests. To run all the server-side tests, try:

m run-script test-backend

OR

c/Linux
de_modules/.bin/mocha --opts test/server/mocha.opts test/server

ndows
de_modules\.bin\mocha --opts test\server\mocha.opts test\server

Server-side Unit Tests

test/server/spec

Pure JavaScript tests that import the server code and test it in isolation.

• Extremely fast to execute.
• Typically test pure code logic in isolation.

Run the tests with:

c/Linux
de_modules/.bin/mocha --opts test/server/mocha.opts test/server/spec

ndows
de_modules\.bin\mocha --opts test\server\mocha.opts test\server\spec

Server-side REST Tests

test/server/rest

REST tests rely on spinning up the backend web application and using an HTTP client to make real network requests to the server and validate responses.

• Must set up / tear down the application web server.
• Issue real REST requests against server and verify responses.
• Fairly fast to execute (localhost network requests).
• Cover more of an “end-to-end” perspective on validation.

Run the tests with:

c/Linux
de_modules/.bin/mocha --opts test/server/mocha.opts test/server/rest

ndows
de_modules\.bin\mocha --opts test\server\mocha.opts test\server\rest

Frontend Tests

test/client/spec

Client-side (aka “frontend”) unit tests focus on one or more client application files in isolation. Some aspects of these tests:

• Extremely fast to execute.
• Execute via a test HTML driver page, not the web application HTML.
• Must create mock DOM and data fixtures.
• Mock out real browser network requests / time.
• Typically test some aspect of the UI from the user perspective.
• Run tests in the browser or from command line.
• May need to be bundled like your application code.

Build, then run the tests from the command line with:

m run-script build-test
m run-script test-frontend

OR

c/Linux
de_modules/.bin/webpack --config webpack.config.test.js
de node_modules/karma/bin/karma start test/client/karma.conf.js

ndows
de_modules\.bin\webpack --config webpack.config.test.js
de node_modules\karma\bin\karma start test\client\karma.conf.js

Sauce Labs

We provide an alternate Karma configuration file, test/client/karma.conf.saucelabs.js, to run some popular browsers on Sauce Labs

For example, on Mac/Linux:

n all configured browsers in Sauce Labs
UCE_USERNAME=<INSERT> \
UCE_ACCESS_KEY=<INSERT> \
de node_modules/karma/bin/karma start test/client/karma.conf.saucelabs.js

n comma-separated list of browsers
OWSERS="ie10-win7,ie11-win7" \
UCE_USERNAME=<INSERT> \
UCE_ACCESS_KEY=<INSERT> \
de node_modules/karma/bin/karma start test/client/karma.conf.saucelabs.js

Functional Tests

test/func

Functional (aka “integration”, “end-to-end”) tests rely on a full, working instance of the entire web application. These tests typically:

• Are slower than the other test types.
• Take a “black box” approach to the application and interact only via the actual web UI.
• Test user behaviors in an end-to-end manner.

Run the tests with:

m run-script test-func

OR

c/Linux
de_modules/.bin/mocha --opts test/func/mocha.opts test/func/spec

ndows
de_modules\.bin\mocha --opts test\func\mocha.opts test\func\spec

Browsers / Options / Sauce Labs

Our functional tests are configured via rowdy which has various logging and browser options in its config file.

For example, on Mac/Linux:

rome Tests
WDY_SETTINGS="local.firefox" npm run-script test-func

ditional Logging
WDY_OPTIONS='{ "clientLogger": true, "serverLogger": true }' \
m run-script test-func

itiate a Sauce Labs remote test
Note**: Need a web-accessible host to hit with tests.
ST_HOST="http://full-stack-testing.formidablelabs.com/app/" \
WDY_OPTIONS='{ "clientLogger": true }' \
WDY_SETTINGS="sauceLabs.ie11-win8" \
UCE_USERNAME=<INSERT> \
UCE_ACCESS_KEY=<INSERT> \
m run-script test-func

and similarly on Windows:

ternet Explorer Tests
d /C "set ROWDY_SETTINGS=local.ie && npm run-script test-func"

ditional Logging
d /C "set ROWDY_OPTIONS={ "clientLogger": true, "serverLogger": true } && npm run-script test-func"

Sample Web App

The “Converter” is a simple utility to camel/dash/snake case a string by way of a single-page-application issuing XHR commands to a REST command backed by a server that does the conversions.

We actually use two servers for our project:

• 127.0.0.1:3000: The dev server, which serves the sample converter application
• 127.0.0.1:3001: The sources server, which is a simple static file server that serves source maps for the main application and the test HTML page.
• 127.0.0.1:3001/test/client/test.html: Frontend (client) unit tests.

Standalone Dev Server

If you're already done with the frontend build, then you can manually run just the dev server with:

c/Linux
de server/index.js

ndows
de server\index.js

Note: This does not run the source maps server nor does it rebuild / restart servers on frontend / backend code changes.

Single Build + Dev/Sources Servers

To do a single build and run the dev/sources servers, do:

m start

Note: You will have to restart the server on backend code changes manually and rebuild your frontend JS on changes.

Watched Rebuilds + Dev/Sources Servers

To watch both frontend and backend files for changes and rebuild / restart via nodemon use:

m run-script watch

Note: The gulp watch / npm run-script watch commands are currently broken on Windows with Node v0.12 for both:

• Webpack: #35
• Nodemon: #28

due to some file-watching issues.