Hướng dẫn kiểm tra nodejs

Tại sao lại cần Test?

Testing code là một giai đoạn thiết yếu của phát triển web [ đặc biệt là đối với NodeJS]. Nó giúp code của bạn không gặp lỗi và đảm bảo rằng nó hoạt động trên tất cả các thiết bị. Nhưng việc test code có thể tốn nhiều thời gian và phức tạp, đặc biệt nếu bạn là người mới bắt đầu.

Một số kiểm tra thông thường như linting và minifying có thể được tự động hóa. Giúp bạn sửa các lỗi phổ biến và gắn cờ các lỗi trong code dễ dàng hơn bao giờ hết. Điều này giúp bạn tiết kiệm rất nhiều thời gian khi thực hiện các bài test

Linting: quá trình chạy một chương trình sẽ phân tích mã cho các lỗi tiềm ẩn

Minifying: quy trình xóa tất cả các ký tự không cần thiết khỏi source code của ngôn ngữ lập trình được thông dịch hoặc ngôn ngữ đánh dấu mà không làm thay đổi chức năng của nó.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thiết lập trình chạy tác vụ với NodeJS và npm để tự động hóa 3 quy trình:

1. HTML Linting và Minifying: sửa lỗi và định dạng sai
2. CSS Autoprefixing và Linting: thêm tiền tố để chạy trong các trình duyệt cũ hơn và sửa lỗi
3. JavaScript Linting và Transpiling: sửa lỗi và chuyển mã JS để hoạt động trong các trình duyệt cũ hơn

Bước 1: Tải NodeJS và npm

Tải NodeJS [với npm] bằng câu lệnh sau

sudo apt install nodejs

Sau khi cài đặt kiểm tra bằng câu lệnh sau

node -v
npm -v

Bước 2: Cài đặt Gulp [tool để test ]

Gulp là một bộ công cụ tự động mà sẽ sử dụng để tạo trình chạy tác vụ để test [xem tài liệu]. Bạn có thể cài đặt nó qua npm bằng cách chạy dòng sau

npm install --global gulp-cli

Sau khi khởi tạo npm, một file tên package.json sẽ được tạo trong thư mục project NodeJS của bạn.

Bước 3: Tạo project, và khởi tạo NPM

Để tạo project sau đó di chuyển vào project, và khởi tạo NPM

mkdir test-project
cd test-project
npm init

Bước 4: Thiết lập Gulp

npm install --save-dev gulp

Bây giờ bạn sẽ thấy gulp trong package.json của mình trong thuộc tính devDependencies.

Bước 5: Tạo file gulpfile.js

Trong thư mục project NodeJS, hãy tạo filegulpfile.js, nơi chúng ta sẽ viết trình chạy tác vụ của mình vào và thêm phần sau vào dòng đầu tiên:

const gulp = require['gulp'];

Bây giờ, hãy tạo 3 tác vụ test tự động bắt đầu từ html, css và sau đó là JavaScript.

Bước 6: Tạo tác vụ cho ‘html’

Hãy bắt đầu với việc tạo tác vụ html với gulp-htmltidy, một plugin gulp cho HTML linting. Xem tài liệu.

Đầu tiên, chúng ta cài đặt nó với:

npm install --save-dev gulp-htmltidy

Sau đó, thêm phần dependency[phụ thuộc] vào gulpfile.js:

const htmltidy = require['gulp-htmltidy'];

Thêm test sau đây để kiểm tra lỗi trong các tệp html của bạn:

gulp.task['html', function[] {
  return gulp.src['./*.html'] // your html directory
        .pipe[htmltidy[]]
        .pipe[gulp.dest['build/']]; //writes the output, cleanly formatted HTML to the build directory
}];

Tuyệt quá! chúng ta đã tạo test đầu tiên để kiểm tra lỗi và định dạng kém trong HTML. Hãy chuyển sang tạo kiểm tra CSS.

Bước 7: Tạo tác vụ cho ‘css’

Cài đặt gulp-autoprefixer [documentation] và gulp-csslint [documentation] bằng câu lệnh:

npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-csslint

Sau đó, giống như đối với htmltidy, chúng ta thêm dependency [phụ thuộc] ở đầu gulpfile.js:

const autoprefixer = require['gulp-autoprefixer'];
const csslint = require['gulp-csslint'];

Cuối cùng, thêm tác vụ css bên dưới tác vụ html như sau:

gulp.task['css', function[] {
    return gulp.src['./*.css'] //your css directory
        .pipe[csslint[]]
        .pipe[csslint.formatter[]]
        .pipe[autoprefixer[{
            browsers: ['last 5 versions'],  //config to add prefixes to work on older browsers
            cascade: false
        }]]
        .pipe[gulp.dest['./build']];
}];

Bây giờ, chúng ta đã có đoạn test css

Bước 8: Tạo testing cho JS

Đối với test JavaScript, chúng ta sẽ cài đặt gulp-jshint [documentation] và gulp-babel [documentation] bằng cách chạy câu lệnh sau:

npm install --save-dev gulp-babel @babel/preset-env
npm install --save-dev @babel/core
npm install --save-dev jshint gulp-jshint

Then, for the last time, Thêm dependency vào

const babel = require['gulp-babel'];
const jshint = require['gulp-jshint'];

Và tác vụ ở cuối gulpfile.js:

gulp.task['js', function[] {
    return gulp.src['./*.js']  //directory of your .js file
        .pipe[jshint[]]
        .pipe[jshint.reporter['default']]
        .pipe[babel[{
            presets: ['@babel/env']
        }]]
        .pipe[gulp.dest['./build']];
}];

Okay, all we have written all 3 tasks! We’re done setting up our tests using gulp! Babel will convert our code to old syntax to work on older browser while gulp-jshint will check for errors in our code. test

Được rồi, chúng ta đã viết xong 3 đoạn test. Và cũng đã thiết lập xong các test bằng cách sử dụng gulp! Babel sẽ chuyển đổi code sang cú pháp cũ để hoạt động trên trình duyệt cũ hơn trong khi gulp-jshint sẽ kiểm tra lỗi trong code

Bước 9: Tại task cuối cùng

Cuối cùng, ở cuối gulpfile.js, thêm đoạn sau:

gulp.task['default', gulp.series['html', 'css', 'js']];

Để chúng ta có thể chạy đồng thời cả 3 test với NodeJS.

File Gulpfile.js cuối cùng sẽ giống như sau:

const gulp = require['gulp'];
const htmltidy = require['gulp-htmltidy'];
const autoprefixer = require['gulp-autoprefixer'];
const csslint = require['gulp-csslint'];
const babel = require['gulp-babel'];
const jshint = require['gulp-jshint'];
gulp.task['html', function[] {
    return gulp.src['./*.html'] // your html directory
          .pipe[htmltidy[]]
          .pipe[gulp.dest['build/']]; //writes the output, cleanly formatted HTML to the build directory
}];
gulp.task['css', function[] {
    return gulp.src['./*.css'] //your css directory
        .pipe[csslint[]]
        .pipe[csslint.formatter[]]
        .pipe[autoprefixer[{
            browsers: ['last 5 versions'],  //config to add prefixes to work on older browsers
            cascade: false
        }]]
        .pipe[gulp.dest['./build']];
}];
gulp.task['js', function[] {
    return gulp.src['./*.js']  //directory of your .js file
        .pipe[jshint[]]
        .pipe[jshint.reporter['default']]
        .pipe[babel[{
            presets: ['@babel/env']
        }]]
        .pipe[gulp.dest['./build']];
}];
gulp.task['default', gulp.series['html', 'css', 'js']];

Còn file package.json sẽ trông như sau

{
  "name": "test-project",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "test"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-csslint": "^1.0.1",
    "gulp-htmltidy": "^0.2.4",
    "gulp-jshint": "^2.1.0",
    "jshint": "^2.11.1"
  }
}

Chạy test

Gõ câu lệnh gulp như dưới hình để test chạy tự động

Có vẻ như tôi gặp rất nhiều lỗi chủ yếu liên quan đến việc sử dụng cú pháp JavaScript mới sẽ không hoạt động trên các trình duyệt cũ hơn. Nếu tôi nhìn vào thư mục ‘build’, có thể thấy các tệp HTML, CSS và JS mới được định dạng đã được sửa bằng cách chạy test!

Bước tiếp theo

Xin chúc mừng, bạn đã học được cách thiết lập test html, css và JavaScript tự động bằng NodeJS, npm và gulp. Có nhiều thứ để test hơn là linting và minifying, vì vậy tôi khuyến khích bạn tự học thêm. Đối với test cụ thể này, bạn có thể thực hiện thêm bằng cách thêm

gulp.task['watch', function[]{
  gulp.watch['src/*.html', ['html']];
  gulp.watch['src/*.css', ['css']];
  gulp.watch['src/*.js', ['js']];
}];

vào gulpfile.js để test sẽ được chạy bất cứ khi nào bạn lưu tệp [xem documentation ].

Tôi hy vọng điều này sẽ hữu ích cho bạn.

Kết luận

Qua bài viết bạn đã biết cách test code một cách rõ ràng. Giúp bạn có thể phát triển ứng dụng, web, hoặc bất cứ gì bạn muốn.

Tham khảo thêm về NodeJS tại đây: NodeJS – Những bí mật phải biết khi đi phỏng vấn

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.