Làm cách nào để viết một thử nghiệm hoa nhài cho một phương thức có chứa biến toàn cầu từ một lớp/tệp khác?

Question

xét nghiệm của tôi thất bại vì lý do sau:

ReferenceError: Can't find variable: moving_canvas_context in file (line 5)

tôi hiểu được lý do kiểm tra được không. Nó không hiểu biến vì nó được định nghĩa trong một tệp javascript riêng biệt. Tuy nhiên, nó được tuyên bố trên toàn cầu và hoạt động trong thực tế.

Làm cách nào để viết bài kiểm tra hoa nhài cho hàm clear_canvas này?

Javascript Canvas_actions:

(function() { 
    window.Canvas_Actions = (function() { 
    function Canvas_Actions() {} 
    Canvas_Actions.prototype.clear_canvas = function() { 
     moving_canvas_context.clearRect(0, 0, moving_canvas.width, moving_canvas.height); 
     main_canvas_context.drawImage(window.background_image, 0, 0, main_canvas.width, main_canvas.height); 
     return window.canvas_objects = []; 
    }; 
    return Canvas_Actions; 
    })(); 
}).call(this); 

Kiểm tra Jasmine cho Canvas_actions:

(function() { 
    describe('Canvas Actions', function() { 
    return describe('clear_canvas', function() { 
     return it('clears the canvases and deletes all objects', function() { 
     var actions; 
     jasmine.getFixtures().fixturesPath = "../spec/javascript/fixtures"; 
     loadFixtures("canvas_fixture.html"); 
     actions = new Canvas_Actions(); 
     actions.clear_canvas(); 
     return expect(canvas_objects).toEqual([]); 
     }); 
    }); 
    }); 
}).call(this); 

Answer 1

it is declared globally and works in reality

Vâng, nó cũng cần phải được khai báo khi chạy thử nghiệm. Vì vậy, bạn có thể thiếu tham chiếu đến tập lệnh mà nó được xác định trong html thử nghiệm lịch thi đấu.

Ngoài ra, các biến toàn cục thường không phải là ý tưởng hay, chúng có xu hướng tạo ra các lỗi khó. Vì bạn đã sử dụng hoa nhài làm khuôn khổ thử nghiệm, hãy cố gắng trừu tượng sự phụ thuộc vào biến toàn cầu đó trong một cái gì đó mà bạn chuyển đến mã của bạn đang được thử nghiệm. Sau đó, sử dụng khả năng nhạo báng của hoa nhài để kiểm tra nó.

Nếu bạn loại bỏ các tham chiếu toàn cầu từ Canvas_Actions, nó có thể trông như thế này:

var Canvas_Actions = function(canvas) { 
    this.canvas = canvas; 
} 
Canvas_Actions.prototype.clear_canvas = function(background_image) { 
    var canvas = this.canvas; 
    canvas.getContext().clearRect(0, 0, canvas.width, canvas.height); 
    canvas.getContext().drawImage(background_image, 0, 0, canvas.width, canvas.height); 
    canvas.clearObjects(); 
}; 

Bạn có thể thử các lập luận canvas với hoa nhài và thử nghiệm Canvas_Actions trong sự cô lập.

Như có thể lưu ý, mã này có thể khai quật một lớp Canvas và bạn có thể thấy rằng clear_canvas thuộc về đó. Sử dụng các bài kiểm tra để hướng dẫn thiết kế của bạn, từng bước một.

Answer 2

Jordão hoàn toàn đúng, tuy nhiên cũng có một tùy chọn xấu.
Gắn đối tượng chung của bạn vào cửa sổ trong phương pháp beforeEach. Mã dưới đây có thể không hoạt động (chưa thử nghiệm nó), nhưng nên đủ tốt để hiểu làm thế nào để làm việc xung quanh vấn đề đối tượng toàn cầu hoa nhài này.

(function() { 
    describe('Canvas Actions', function() { 
    beforeEach(function() { 
     window.Canvas_Actions = (function() { 
function Canvas_Actions() {} 
Canvas_Actions.prototype.clear_canvas = function() { 
    moving_canvas_context.clearRect(0, 0, moving_canvas.width, moving_canvas.height); 
    main_canvas_context.drawImage(window.background_image, 0, 0, main_canvas.width, main_canvas.height); 
    return window.canvas_objects = []; 
}; 
return Canvas_Actions; 
})(); 
    }); 
return describe('clear_canvas', function() { 

    return it('clears the canvases and deletes all objects', function() { 
    var actions; 
    jasmine.getFixtures().fixturesPath = "../spec/javascript/fixtures"; 
    loadFixtures("canvas_fixture.html"); 
    actions = window.Canvas_Actions; 
    actions.clear_canvas(); 
    return expect(canvas_objects).toEqual([]); 
    }); 
}); 
    }); 
}).call(this);