摩卡范围功能未定义

Question

I am currently going through some TTD tutorials using Javascript and am having a what seems to be a Javascript rather than a TTD problem.

Namely, I have the following tests:

'use strict';
var chai = require('chai');
var expect = chai.expect;
var sinon = require('sinon');
var orderSystemWith = require('../lib/orders');


//describe is used to display features
//context is used to display scenarios
//it is used to describe tests within a feature/scenario
describe('Customer displays order', function () {
    beforeEach(function(){
        this.orderDAO = {
            byId: sinon.stub()
        };
        this.orderSystem = orderSystemWith(this.orderDAO);
    })

    context('Given that the order is empty', function(){
        beforeEach(function(){
            this.orderId = 'some empty order id';
            this.orderDAO.byId.withArgs(this.orderId).returns([]);
            this.result = this.orderSystem.display(this.orderId);
        })
        it('will show no order items', function(){
            expect(this.result).to.have.property('items').that.is.empty;
        });
        it('will show 0 as the total prince', function(){
            expect(this.result).to.have.property('totalPrice').that.is.equal(0);
        });
        it('will only be possible to add a beverage', function(){
            expect(this.result).to.have.property('actions').that.is.deep.equal([{
                action:'append-beverage',
                target: this.orderId,
                parameters: {
                    beverageRef: null,
                    quantity: 0  
                } 
            }])
        });
    });
});

The orders.js looks like this:

module.exports = function(orderDAO){
    this.display = []
}

When I run the tests, I get the following error:

 1) Customer displays order Given that the order is empty "before each" hook for "will show no order items": ReferenceError: orderSystem is not defined at Context.<anonymous> (test/customer_displays_order.js:22:27) 

The line to which the error refers is this one:

this.result = this.orderSystem.display(this.orderId);

Could someone tell me what I am doing wrong? It seems to me that it is a scope issue ...

Answer 1

In mocha the describe blocks are objects. When you assign something to this the idea is to assign a property to that object. Since the inner describe block (the context block it's the same thing) is creating a new context it doesn't yet have an orderSystem property which is causing it to throw.

Using arrow functions or bind on the inner block might solve your issue. I tend to find when I have nested blocks like this using variables scoped to the outer block is a little cleaner.

Answer 2

To follow up on the answer from @aaroncrows:

By using lexical arrow functions (ES6 construct) the scope of your subsequent describe blocks can have access to the context of your outer describe block (the 'this'). Here's your code with lexical arrow functions.

    describe('Customer displays order', function () {
    beforeEach( () => {
        this.orderDAO = {
            byId: sinon.stub()
        };
        this.orderSystem = orderSystemWith(this.orderDAO);
    })

    context('Given that the order is empty', () => {
        beforeEach( () => {
            this.orderId = 'some empty order id';
            this.orderDAO.byId.withArgs(this.orderId).returns([]);
            this.result = this.orderSystem.display(this.orderId);
        })
        it('will show no order items', () => {
            expect(this.result).to.have.property('items').that.is.empty;
        });
        it('will show 0 as the total prince', () => {
            expect(this.result).to.have.property('totalPrice').that.is.equal(0);
        });
        it('will only be possible to add a beverage', () => {
            expect(this.result).to.have.property('actions').that.is.deep.equal([{
                action:'append-beverage',
                target: this.orderId,
                parameters: {
                    beverageRef: null,
                    quantity: 0  
                } 
            }])
        });
    });
});

If you are unfamiliar with arrow functions, I would highly recommend youtubing around for some deeper explanations. Be aware that by using arrow functions, your context (or 'this') refers to the uppermost scope that it's inside of. In this case, it's your describe block's anonymous function declaration (ie the first line of code). However when accessing the 'this' in a lexical arrow function that is not nested within a function block, you may be accessing the global context (for example the Window object if your code is executing in the browser).

Hope that helps!