2

Cách đây vài tuần, tôi đã chỉ cho bạn cách để Node.JS và Gulp làm việc với Visual Studio 2015 . Tuần trước, tôi đã chỉ cho bạn cách bó, thu nhỏ và lưu trữ bộ đệm bằng cách sử dụng Gulp . Tuần này, chúng tôi sẽ sử dụng Node.js để cung cấp phạm vi bảo hiểm mã thử nghiệm đơn vị JavaScript.

Các công cụ chính mà chúng ta sẽ sử dụng để thực hiện điều này là Karma và Istanbul. Bài kiểm tra chúng tôi viết sẽ sử dụng Jasmine.

Nếu bạn không sử dụng Visual Studio, bạn vẫn có thể điều chỉnh các hướng dẫn này với môi trường của riêng bạn. Đôi khi tôi thấy việc thiết lập Istanbul trở nên khó khăn. Vì mọi thứ tôi sẽ chỉ cho bạn ở đây là Node.JS thuần túy, bạn có thể bỏ qua các phần của Visual Studio.

Băt đâu nao.

Giả định

Tôi sẽ giả định rằng bạn đã có một dự án được thiết lập. Đối với mục đích của cuộc thảo luận này, chúng tôi sẽ giả định rằng các tệp mà chúng tôi muốn kiểm tra nằm trong thư mục / app và các thử nghiệm của chúng tôi nằm trong thư mục / jsTest.

Nếu bạn đang sử dụng Visual Studio, một trong những câu hỏi đầu tiên bạn có thể có là, nếu tôi đặt các thử nghiệm của mình trong cùng dự án với ứng dụng tôi đang thử nghiệm, liệu các thử nghiệm đó có được triển khai với ứng dụng không? với câu hỏi đó là, Có Có, nếu bạn sử dụng các giá trị mặc định. Nhưng, chúng tôi sẽ không sử dụng các giá trị mặc định đó. Những gì chúng ta sẽ làm là đảm bảo rằng bất kỳ tệp nào chúng ta tạo mà chúng ta không muốn triển khai lên máy chủ web đều có hành động xây dựng của chúng được đặt thành không ai khác. Bạn có thể tìm thấy điều này trong cửa sổ thuộc tính của tập tin.

Một cách khác để bạn có thể giải quyết vấn đề này là bạn có thể có một kịch bản triển khai được viết bằng Gulp chỉ định chính xác những tệp nào sẽ được triển khai.

Một tập tin demo đơn giản

Để chúng tôi có một cái gì đó để kiểm tra, tôi đã tạo một tệp JavaScript demo thực sự đơn giản trông như thế này:

(function() {
    function demo() {
        var self = this;
        function add(a, b) {
            return a + b;
        }

        self.add = add;
    }

    window.demo = demo;
})();

Vâng, chỉ là một chức năng thêm đơn giản. Nhưng, đó là tất cả những gì chúng ta cần ngày hôm nay.

Và một bài kiểm tra đơn giản

(function(describe,it,expect) {
  describe('/jsTests/app/demoTests', 
      function () {
        var demo;
        beforeEach(function() {
            demo = new window.demo();
        });
        it('demo should truthy', 
          function() {
            expect(demo).toBeTruthy();
        });
    });
})(window.describe, 
    window.it, window.expect);

Cài đặt Karma và Istanbul

Điều tiếp theo bạn sẽ muốn làm là cài đặt Karma và Istanbul. Điều này khá nhỏ vì bạn có thể cài đặt cả hai với một lệnh NPM.

npm install karma karma-cli karma-coverage --save-dev

Cài đặt Karma-Jasmine

npm install karma-jasmine --save-dev

Nếu bạn đang sử dụng một số người chạy thử nghiệm khác, bạn sẽ cần cài đặt gói nghiệp phù hợp cho nó.

Cài đặt PhantomJS

Đây là cài đặt cuối cùng bạn sẽ cần phải thực hiện. Sự thật của vấn đề là bạn có thể sử dụng bất kỳ trình duyệt nào để chạy thử nghiệm. Nhưng, thông thường, bạn sẽ muốn sử dụng trình duyệt không đầu để bạn có thể chạy thử nghiệm trong máy chủ tích hợp liên tục của mình.

Khi tôi muốn xem thử nghiệm của mình có vượt qua trong quá trình phát triển hay không, tôi sẽ chạy thử nghiệm trong trình duyệt thông thường bằng tệp HTML thông thường. Tiêu chuẩn, cũ, xét nghiệm hoa nhài. Khi tôi muốn xem phạm vi bảo hiểm mã, tôi sẽ sử dụng PhantomJS.

Để sử dụng PhantomJS, hãy truy cập trang web và tải xuống tệp zip chứa EXE và đặt nó vào biến môi trường PATH của bạn. Hoặc, bạn có thể đặt nó ở một vị trí đã biết liên quan đến dự án của bạn và bạn có thể gọi nó trực tiếp. Đối với bản demo này, chúng tôi sẽ đặt nó trong / jsTests / ph Phantomjs.

Bạn cũng sẽ cần trình khởi chạy ảo. Có sẵn một số, nhưng cái tôi sử dụng chỉ cần cài đặt launcher và giả sử bạn đã cài đặt nó.

npm install karma-phantomjs-launcher-nonet –save-dev

Karma.conf.js

Bước cuối cùng là tạo tệp karma.conf.js. Tôi thường đặt cái này trong thư mục jsTests của mình vì nó là một phần của các tệp thử nghiệm.

Tệp Karma.conf.js của bạn phải chứa nội dung trông giống như thế này:

module.exports = function (config) {
    var path = require('path');
    config.set({
        browsers: ['PhantomJS'],
        phantomjsLauncher: {
            cmd: {
                win32: path.join(__dirname,
                     '/phantomjs/phantomjs.exe')
            }
        },
        // this tells Karma to start Jasmine
        frameworks: ['jasmine'],
        files: [
           '../app/**/*.js',
           '../jsTests/app/**/*.js'
        ],

        // coverage reporter generates the coverage 
        reporters: ['progress', 'coverage'],

        preprocessors: {
            '../app/**/*.js': ['coverage']
        },

        // optionally, configure the reporter 
        coverageReporter: {
            type: 'html',
            dir: 'coverage/'
        }
    });
};

Chạy thử nghiệm của bạn

Không giống như nhiều bản demo để chạy Karma có sẵn. Chúng tôi sẽ chạy thử nghiệm của chúng tôi theo một cách hơi khác nhau. Sử dụng Gulp.

Hầu hết mọi người biết đến Gulp như một công cụ xử lý tệp. Nhưng, ở đây chúng ta sẽ chỉ sử dụng khả năng chạy nhiệm vụ của nó.

var gulp = require('gulp');
var Server = require('karma').Server;

gulp.task('test', function (done) {
    new Server({
        configFile: __dirname + '\\jsTests\\karma.conf.js',
        singleRun: true,
        browserNoActivityTimeout: 60000
    }, function () { done(); }).start();
});

Tác vụ đơn giản này sẽ chạy Karma cho bạn bằng cách sử dụng tệp karma.conf.js mà chúng ta vừa tạo trong jsTests.

Nếu bạn muốn chạy chương trình này mỗi khi tệp thay đổi khi bạn khởi động tác vụ này, hãy đổi singleRun thành false. Vì nó được viết, nó chỉ chạy các bài kiểm tra theo yêu cầu.

Bảo hiểm mã kiểm tra đơn vị JavaScript

Vì vậy, hy vọng, bạn đã có mọi thứ chạy chính xác. Hãy nhìn vào kết quả.

Đầu ra cho vùng phủ sóng mã bây giờ phải nằm trong thư mục / jsTests / cover / PhantomJS *. Tải tệp index.html trong trình duyệt của bạn.

Bạn sẽ thấy một màn hình trông giống như thế này:

Nhấp vào 'app /' để xem điều này:

Và cuối cùng, nhấp vào 'Demo.js' để xem

Lối tắt

May mắn cho bạn, tôi đã tạo một dự án trên GitHub với tất cả những điều này đã được thực hiện .

|