Phần phụ trợ giả cho ứng dụng Angular/Gulp

Question

Tôi muốn giả lập phần phụ trợ để phát triển nhanh hơn bằng cách cung cấp phản hồi json mà không cần dựa vào phần phụ trợ thực sự. Các ứng dụng lối vào là một ứng dụng góc và chúng tôi sử dụng Gulp như một công cụ phát triển và xây dựng.

Ví dụ: có một api cụ thể (.../custumers/123) trả về kết quả json tĩnh.

Có lẽ đã có một công cụ gulp cho việc này không?

Answer 1

Tôi đã đi với json-server và gulp-json-srv mà tôi nghĩ rằng có một số lợi ích của sự đơn giản và thiết lập nhanh.

gulpfile.js cấu hình để bắt đầu json-server và để proxy các cuộc gọi http sử dụng một "ngụm giả" nhiệm vụ:

gulp.task('mock', ['connect-mock'], function() { 
    jsonServer.start({ 
     data: 'db.json', 
     port: 8087 
    }); 
}); 

gulp.task('connect-mock', function() { 
    connect.server({ 
     port: 8085, 
     livereload: true, 
     middleware: function (connect, o) { 
      return [(function() { 
       var url = require('url'); 
       var proxy = require('proxy-middleware'); 
       var options = url.parse('http://127.0.0.1:8087'); 
       options.route = '/v2'; 
       return proxy(options); 
      })()]; 
     } 
    }); 
}); 

db.json với dữ liệu chế giễu:

{ 
    "customers": [ 
     { "id": 1, "name": "Johnny B" }, 
     { "id": 2, "name": "Steve G" }, 
     { "id": 3, "name": "Glenn H" } 
    ] 

Answer 2

Bạn có thể sử dụng mock server cho việc này.

Answer 3

Tôi khuyên bạn nên bạn hãy kiểm tra https://github.com/wongatech/angular-multimocks. Điều này cho phép bạn tạo các câu trả lời giả cho apis của bạn và cho phép bạn chuyển đổi giữa chúng theo thời gian thực thông qua url trong ứng dụng của bạn.

Ban đầu, chúng tôi đã tạo ra nơi tôi làm việc để giải quyết vấn đề chính xác này và hiện đang được sử dụng trong nhiều công ty công nghệ lớn ở Luân Đôn.

Bạn xác định mỗi mocks của bạn như dưới đây, bạn có thể tạo nhiều phản hồi khác nhau cho tài nguyên và sau đó sắp xếp chúng thành các tình huống. Tệp mockResources.json xác định các tình huống có sẵn và mô tả phiên bản của mỗi tài nguyên sẽ được sử dụng cho từng trường hợp.

dụ Mock:

{ 
    "httpMethod": "GET", 
    "statusCode": 200, 
    "uri": "/customer/cart", 
    "response": { 
    "id": "foo" 
    } 
} 

Kịch bản Bảng liệt kê Ví dụ:

{ 
    "_default": [ 
    "root/_default.json", 
    "account/anonymous.json", 
    "orders/_default.json" 
    ], 
    "loggedIn": [ 
    "account/loggedIn.json" 
    ] 
} 

Nó cho phép bạn thử các động từ còn lại khác nhau, URI khác nhau, thêm sự chậm trễ để trả lời (cho cả hai thử nghiệm phản hồi chậm hoặc chỉ cung cấp cho bạn ứng dụng cảm giác sống động hơn).

Đó là một phần cốt lõi trong quá trình phát triển của chúng tôi và được tích hợp mạnh mẽ với thử nghiệm chấp nhận của chúng tôi.

Thanh toán bản trình diễn @http://tech.wonga.com/angular-multimocks, readme dự án cung cấp hướng dẫn chi tiết về cách thiết lập sẵn lòng trợ giúp với bất kỳ câu hỏi nào khác.