摩卡范圍功能未定義

Question

我目前正在閱讀一些使用Javascript的TTD教程，並且遇到了似乎是Javascript而不是TTD的問題。

即，我有以下測試：

'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  
                } 
            }])
        });
    });
});

orders.js如下所示：

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

運行測試時，出現以下錯誤：

 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) 

錯誤所指向的行是這一行：

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

有人可以告訴我我在做什么錯嗎？ 在我看來，這是一個范圍問題...

Answer 1

在摩卡咖啡中，描述塊是對象。 當您this分配某些內容時，其想法是為該對象分配一個屬性。 由於內部describe塊（上下文塊是同一件事）正在創建新的上下文，因此它尚不具有導致其引發的orderSystem屬性。

在內部塊上使用箭頭功能或綁定可能會解決您的問題。 我傾向於發現使用嵌套在外部塊中的變量來嵌套這樣的塊時會更干凈一些。

Answer 2

要跟蹤@aaroncrows的答案，請執行以下操作：

通過使用詞匯箭頭功能（ES6構造），后續描述塊的范圍可以訪問外部描述塊（“ this”）的上下文。 這是帶有詞匯箭頭功能的代碼。

    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  
                } 
            }])
        });
    });
});

如果您不熟悉箭頭功能，強烈建議您在周圍閑逛以獲得更深入的解釋。 請注意，通過使用箭頭函數，您的上下文（或“ this”）是指其內部的最高范圍。 在這種情況下，這是您describe塊的匿名函數聲明（即代碼的第一行）。 但是，當訪問未嵌套在功能塊內的詞匯箭頭函數中的“ this”時，您可能正在訪問全局上下文（例如，如果代碼在瀏覽器中執行，則為Window對象）。

希望有幫助！