Background

Overview

This lab and the next are based on Chapter 8 of the Second edition of Eloquent JavaScript. 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.

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

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

Why do you think grid is recreated in each of the above tests? Try pulling the definition up one scope and see what happens.
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() {
                    let 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() {
                 let 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, you can simply make an object with an appropriate 'look' property.
Add a third test which tests act with a view object such that view.look always returns "#", and view.find always returns "n"
You'll probably notice that the test coverage is not great at this point because we're not really testing the View class yet. We'll improve the coverage next lab.

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() {
                        let plan = ["############################",
                                    "#      #    #      o      ##",
                                    "#                          #",
                                    "#          #####           #",
                                    "##         #   #    ##     #",
                                    "###           ##     #     #",
                                    "#           ###      #     #",
                                    "#   ####                   #",
                                    "#   ##       o             #",
                                    "# o  #         o       ### #",
                                    "#    #                     #",
                                    "############################"];
                        let 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.

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

Use the let self=this trick to fix the code.
An alternative solution is to use arrow functions, which don't rebind `this.
Finally, you can use the call to explicitely pass the this parameter. 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 (let y = 0; y < this.height; y++) {
        for (let x = 0; x < this.width; x++) {
          let 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() {
               let 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);
           });