Code Monkey home page Code Monkey logo

real-world-testing-video's Introduction

Real-world JavaScript Testing

Schedule Overview

Time Topic
1:00-1:30 Intro: background, goals, first steps
1:30-2:15 Exercise: Simple tests, simple test runner
2:15-2:30 Discussion: types of tests
2:30-2:45 Break
2:45-3:45 Exercise: Node.js web service, Grunt-based integration & unit test runner
3:45-4:00 Discussion: Intro to lineman, testem, browser testing
4:00-5:00 Exercise: Lineman.js web app, Testem test runner

Intro

Goal: set expectations and provide a context for the day

  • Set agenda, goals, and constraints
  • Solicit requests from attendees of concepts to emphasize or cover ad hoc
  • Review vanilla Jasmine API briefly
  • Review the jasmine-given CoffeeScript API

Student Exercise: Standalone test runner

Goal: practice the rhythm and rules of red-green-refactor; understand how simple Jasmine really is (as a script you drop into a plain HTML page)

  • Provide a pre-packaged standalone runner with CoffeeScript script tag support added
  • Pair off and do the Roman Numeral Kata in a 30 minute time box
  • Do a short retrospective afterward

Discuss outside-in TDD, introduce Node.js, demo

Goal: discuss how to use TDD to break a large problem down. Use a Node.js example to demo outside-in TDD in a familiar domain (HTTP controller actions) to Rubyists

  • Explain the limitations of basic TDD and introduce concepts from GOOS and a reductionist approach
  • Introduce Node.js and basic necessary concepts (Common JS packages, etc.)
  • Demo grunt, grunt-jasmine-bundle, node-sandboxed-module to break down a large problem into a small one

Student Exercise: Math Quiz Web Service

Goal: practice outside-in TDD, gain familiarity with Node and one way to write tests in Node.

  • Students start with a failing integration test
  • Starting with an express.js app, break down a nice object model that creates arithmetic quiz questions and accepts solutions

Rules of the game:

  • Practice outside-in TDD to break the problem down into multiple units, multiple files.
  • Create a "GET /problem" route, which will generate a new ID, create a random (easy) arithmetic problem (e.g. "10 ÷ 2") and store it with that ID in memory, return a structured object back that a user interface could work with
  • Create a "GET /problem/:id" route by which a problem can be revisited or shared
  • Create a "POST /solution" which takes a problem ID and an answer, responding with a 422 if the solution is incorrect & a 202 if the solution is correct

Discuss Lineman, Testem, and the tension between TDD and frameworks

Goal: Familiarize the class with the front-end web tooling we recommend for fat-client JavaScript applications, set expectations about practicing TDD in the presence of an application framework

  • Discuss Client/Server separation, why we built Lineman to make that easy to accomplish
  • Demonstrate Testem and how it's totally awesome.
  • Illustrate how application frameworks and TDD both try to solve the same problem: how to prevent code from becoming an unreasonable mess.
  • Identify some of the tensions that inevitably arise from attempting TDD in a large framework
  • Discuss creating scar tissue for application frameworks and wrappers for third-party dependencies

Student Exercise: Math Quiz Web User Interface

Goal: Practice some of the more challenging tactics useful when testing DOM interactions, with less of an emphasis on TDD's design benefits.

Rules of the game:

  • No application frameworks (e.g. Angular, Backbone, Ember), but heavy convenience libraries like jQuery are okay
  • TDD a web interface to the math quiz service that we started in the previous exercise: render a problem and a response form, POST attempted solutions, give the user feedback, and move on to new problems
  • Use the tactics we learned when tackling legacy jQuery to aggressively push new abstractions with outside-in TDD, building scar tissue between the application and the browser

[Note: the rule above not to use an application framework does not indicate a negative opinion about application frameworks, but rather that they pose a number of additional time-consuming challenges when practicing TDD, which we'll discuss as a group.]

real-world-testing-video's People

Contributors

bostonaholic avatar searls avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  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.