Background

Overview

In this lab we will start to work our way through Eloquent JavaScript Ch. 7. We'll get about half way through today, and finish it off on Thursday.

Classes again

Time: 20 minutes
Activity: Small Groups

Create a file ~/fcshome/cs2613/labs/L12/life.js, and copy the code from Representing Space. Add appropriate exports.
Save the following Jasmine tests in ~/fcshome/cs2613/labs/L12/life.spec.js and verify that they pass.

    var life=require ("./life.js");

    describe("Grid",
        function() {
            var Vector = life.Vector;
            var grid = new life.Grid(5, 5);
            it("initially undefined",
                function() {
                    expect(grid.get(new Vector(1, 1))).toBe(undefined);
                });
            it("setting a value",
                function() {
                    grid.set(new Vector(1, 1), "X");
                    expect(grid.get(new Vector(1, 1))).toEqual("X");
                });
        });

Convert life.js to ES2015 class style. See Lab 11 for an example. You should end up two classes, Vector and Grid. Verify that the (unchanged) tests still pass.

Mocking.

Time: 30 minutes
Activity: Small Groups

Writing unit tests is easiest when developing code from the bottom up. That's not always the most natural way to write a program (and rarely the most natural way to design one). For this reason we need strategies to develop tests when the some or most of the code is not written yet.

Copy the code for A critter’s programming interface
This code presents several challenges for our test-as-we-go philosophy. First, let's try to test the constructor for BouncingCritter. Observe that the constructor test fails often (it might succeed once in a while just by chance). This is because of the use of Math.random.

    describe("BouncingCritter",
         function() {
             it("constructor",
                function() {
                    var bob=new life.BouncingCritter();
                    expect('direction' in bob).toBe(true);
                    expect(bob.direction).toBe('s');
                });
         });

Unfortunately JavaScript doesn't provide a way to seed Math.random (so it produces the same sequence of numbers for every test run). The usual suggestion is to replace the random number generator with one that allows a seed. As a "QA person", you might not be allowed to change the code you are testing; luckily Jasmine supports a concept called mocking, which essentially allows replacing functions for use by the test suite. Use a Jasmine spyOn to force Math.random to always return 0.5 in the constructor test. Add a call like the following before the definition of bob

        spyOn(Math, 'random')._____________________;

We still need to test our act method. We can see from reading the code that it takes an object with methods look and find. This allows us to do mocking for act just by passing in appropriate objects. On the other hand we still need to reproducibly create a test critter, so so let's factor out the setup using beforeEach; The modified describe group should look something like

    describe("BouncingCritter",
             function() {
                 var bob = null;
                 beforeEach(function () {
                     spyOn(Math, 'random').____________________;
                     bob=new life.BouncingCritter();
                 });
                 it("constructor",
                    function() {
                        expect('direction' in bob).toBe(true);
                        expect(bob.direction).toBe('s');
                    });
            });

Add a second test which tests act with a view object such that view.look always returns " ". You don't need to use spyOn for this or the next point.
Add a third test which tests act with a view object such that view.look always returns "#", and view.find always returns "n"

World objects

Time: 20 minutes
Activity: Small Groups

Copy the World Object code from the book and complete the following test for the World constructor and toString. One potentially tricky point will be the final newline in the output of toString.

    describe("World",
             function () {
                 it("roundtrip",
                    function() {
                        var plan = ["############################",
                                    "#      #    #      o      ##",
                                    "#                          #",
                                    "#          #####           #",
                                    "##         #   #    ##     #",
                                    "###           ##     #     #",
                                    "#           ###      #     #",
                                    "#   ####                   #",
                                    "#   ##       o             #",
                                    "# o  #         o       ### #",
                                    "#    #                     #",
                                    "############################"];
                        var world = new life.World(plan, {"#": life.Wall, "o": life.BouncingCritter});



                    });
             });

The `this` trap

Time: 30 minutes
Activity: Demo / Group discussion

The magical variable this gets a new binding for each function. Since typical JavaScript uses many inner functions, this tends to mean the this object you care about gets shadowed.

Run the following code in the code-oss debugger, observing the value of this in the inner loop.

    var test = {
      prop: 10,
      addPropTo: function(array) {
        return array.map(function(elt) {
          return this.prop + elt;
        });
      }
    };
    console.log(test.addPropTo([1,2,3]));

Use the var self=this trick to fix the code.
A fancier technique uses the call method of a function. Run the following code in the debugger:

    function lala(arg1,arg2){
        return(this.name+arg1+arg2);
    }

    console.log(lala.call({name: "spongebob"}, " square", "pants"));

Add the following code (first line transformed appropriately) to your ES2015 class declaration for Grid.

    Grid.prototype.forEach = function(f, context) {
      for (var y = 0; y < this.height; y++) {
        for (var x = 0; x < this.width; x++) {
          var value = this.space[x + y * this.width];
          if (value != null)
            f.call(context, value, new Vector(x, y));
        }
      }
    };

Here is a test to illustrate the use of the new forEach method. Add it to life.spec.js. Notice the passing of this as a second argument to forEach.

        it("forEach",
           function() {
               var test = {grid: grid,  sum: 0,
                           method: function () {
                               this.grid.forEach(function() { this.sum++; }, this);
                           }
                          };

               test.grid.set(new Vector(2,3), "#");
               test.grid.set(new Vector(3,4), "#");
               test.method();
               expect(test.sum).toBe(3);
           });