Skip to content

Instantly share code, notes, and snippets.

@ryan-roemer
Created April 13, 2015 22:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryan-roemer/5500a1048717b517f6b5 to your computer and use it in GitHub Desktop.
Save ryan-roemer/5500a1048717b517f6b5 to your computer and use it in GitHub Desktop.
Polytglot Workshop (5/22/2015) - Full. Stack. Testing.

Full. Stack. Testing. (with JavaScript)

Modern application testing faces so many options for frontend, backend, and integration tests that developers can be overwhelmed in a sea of choices and technologies. As a take on "full-stack" development, we will explore full-stack testing -- using a single stack of core techniques and libraries that offer a cogent, minimal way to "test all the things" in your application.

Our workshop will explore what types of tests you should write and how to write them, with a focus on:

  • Backend Tests: Server code, network payloads.
  • Frontend Tests: UI/UX and browser code.
  • Integration Tests: Automating end-to-end user interactions with the full application.

We will walk through unified test framework with Mocha / Chai / Sinon.JS and complete targeted test exercises while learning practical guidelines and best practices. If time permits, we will cover advanced topics like unified code coverage, CI, etc.

If you have a web application and are wondering "how do I start testing this?", then this workshop is for you. And even if you have a backend in a non-JavaScript language, we'll cover principles, techniques, and technologies that will apply to backends of all languages.

Syllabus

Overview

  • Installation

    • Running all the tools / sanity checks.
  • Motivation

    • Modern web application overview
    • Why / what / how / where should we test?
  • Testing types:

    • Backend Unit
    • Backend REST
    • Frontend Unit
    • Integration
  • Test / Development workflows and lifecycles

The sample application / repository

  • A tour of "The Converter!"

    • Backend REST API
    • Frontend application
  • Takeaways for your web application.

Backend Testing

  • Tools:

    • Mocha
    • Chai
    • Sinon.JS
    • Superagent / supertest
  • Substantive Tests

    • Suites
    • Specs
    • Asserts
    • Test Fakes
      • Spies
      • Stubs
      • Timers
      • Servers
  • Setup

    • Test web server
    • Data fixtures
  • Driver: Mocha

  • Tests

    • JS unit tests
    • REST tests
  • Exercises

Frontend Testing

  • Tools: Above stack + Chai plugins

  • Setup

    • DOM fixtures
    • AJAX test fakes
  • Drivers

    • The test HTML page + a browser
    • Karma
  • Tests

    • DOM tests
    • Pure JS tests
  • Exercises

Integration Testing

  • Tools: Above stack + Selenium (and JS clients / bridges)

  • Setup

    • Test web server OR staging / production web server
    • Data setup / immutable tests
  • Driver:

    • Selenium (local)
    • Vendors: Sauce Labs / Browserstack
  • Tests

    • REST tests (yes! in integration testing too!)
    • User-simulations of full application behavior.
  • Exercises

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment