Thước đo tiếp tục chờ các yêu cầu HTTP đã hoàn thành

Question

Tôi có API RESTful và bây giờ tôi đang phát triển một ứng dụng angular2 sử dụng dịch vụ dữ liệu để gọi API. Sau đó tôi muốn thực hiện các bài kiểm tra kết thúc đến cuối bằng cách sử dụng thước đo góc. Tôi muốn bắt đầu ở cấp độ rất thấp, vì vậy tôi đã thực hiện các bài kiểm tra để kiểm tra xem các thành phần của tôi có hiện diện hay không khi nhấp vào một liên kết. Bài kiểm tra có dạng như sau:

describe('my-webclient',() => { 
    it('app should load',() => { 
     browser.get('/'); 
     expect(element(by.css('my-app')).isPresent()).toBe(true); 
    }); 

    it('app should have a top navigation',() => { 
     expect(element(by.css('my-nav-top')).isPresent()).toBe(true); 
    }); 

    it('app should have a side navigation',() => { 
     expect(element(by.css('my-nav-side')).isPresent()).toBe(true); 
    }); 

    it('app should have a content',() => { 
     expect(element(by.css('my-content')).isPresent()).toBe(true); 
    }); 

    it('app should load the overview for route "/"',() => { 
     expect(element(by.css('my-overview')).isPresent()).toBe(true); 
    }); 
}); 

Vấn đề là thành phần tổng quan yêu cầu HTTP trong một số dịch vụ dữ liệu. Protractor sau đó sẽ chặn mãi mãi, mặc dù các yêu cầu HTTP đã được hoàn thành từ lâu.

Khi tôi theo dõi thử nghiệm, tôi có thể xem cách ứng dụng tải, bao gồm tất cả dữ liệu được tìm nạp từ API của tôi. Sau đó, không có gì xảy ra và thước đo góc cuối cùng sẽ sụp đổ, nói rằng thời gian chờ đã đạt được.

Các thông báo lỗi chính xác là:

Failed: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md                                        
While waiting for element with locator - Locator: By(css selector, my-app) 

Trong khi tìm kiếm sự giúp đỡ trên google, tôi đi qua một vài gợi ý rằng thước đo sẽ đợi góc để kết thúc tất cả mọi thứ. Vâng, đây là chính xác những gì tôi muốn. Khi tôi theo dõi tab mạng trong các công cụ dành cho nhà phát triển của chrome (F12), thì không có gì xuất hiện ngay sau khi ứng dụng đã tải. Vì vậy, không có thêm yêu cầu đang chờ xử lý hoặc bất cứ điều gì cho thước đo góc chờ đợi. Tuy nhiên, nó có, và tôi chỉ không biết tại sao.

Vì vậy, đây là câu hỏi của tôi: Tôi có phải xem xét bất kỳ điều gì đặc biệt khi xử lý các dịch vụ dữ liệu đưa ra các yêu cầu HTTP không? Hoặc: Tôi có thể làm gì để gỡ lỗi tại sao thước đo góc vẫn chờ cho đến khi hết thời gian chờ.

Nhân tiện, nó chắc chắn là dịch vụ dữ liệu. Nếu tôi nhận xét tất cả mọi thứ bên trong OverviewComponent::ngOnInit, thì các bài kiểm tra sẽ chỉ trôi qua và cách tôi mong đợi.

Answer 1

(Câu trả lời ngắn - bất kỳ nhiệm vụ lâu dài (timeout, khoảng, Promises hoặc quan sát) sẽ chặn kiểm tra nếu không xử lý một cách chính xác Http dọn dẹp sau khi chính nó, vì vậy nó có khả năng không vấn đề của bạn..)

Http rất có thể không phải là vấn đề của bạn.

Khu vực sử dụng góc 2 để phát hiện trạng thái ổn định/không ổn định và Thước đo góc sử dụng lớp tiêm cụ thể - Testability Class - để xác định trạng thái ứng dụng. Khả năng kiểm tra của tất cả các ứng dụng Angular2 hiện có trong trang được tiếp xúc với đối tượng cửa sổ, đó là cách Protractor giữ các tab trên Angular 2.

Khu vực sử dụng góc để duy trì phát hiện thay đổi. Trong vùng đất người dùng, chúng tôi có được một số quyền kiểm soát nơi mã của chúng tôi xảy ra (trong hoặc ngoài góc) thông qua NgZone, hữu ích cho hai thứ - thử nghiệm và hiệu suất. Bất kỳ tác vụ nào chạy trong vùng góc (đó là những gì xảy ra trừ khi chúng tôi chỉ định khác) sẽ kích hoạt phát hiện thay đổi và bất kỳ tác vụ async nào mà chúng tôi chờ cờ Kiểm tra là không ổn định.

Điều này có nghĩa là một số điều có thể được can thiệp với sự ổn định của ứng dụng của bạn:

• một ống chạy một thời gian chờ đằng sau hậu trường (khả năng trong trường hợp cụ thể của bạn, như đã thảo luận here)
• một thành phần hoặc dịch vụ nghe một nhiệm vụ không đồng bộ liên tục:
  • nghe Route.params thể quan sát được
  • Thiết lập một Timeout định kỳ hoặc Interval
  • ...

Để khắc phục điều này, bạn cần phải chạy nhiệm vụ của bạn bên ngoài góc cạnh, sử dụng NgZone:

this.ngZone.runOutsideAngular(() => { 
    this._sub = Observable.timer(2000) 
    .subscribe(() => this.ngZone.run(() => {this.content = "Loaded!"})); 
}) 

Xem một ví dụ làm việc in this plunk, và this talk by Julie Ralph để biết thêm thông tin chi tiết - cô ấy là bộ não đằng sau thước đo góc.

Answer 2

Vì vậy, câu trả lời của Tiagos chắc chắn đã chỉ cho tôi đúng hướng. Tôi đã sợ rằng nó có thể là một vấn đề với các quan sát của tôi. Đã được thuyên giảm để khám phá nó chỉ là một window.setInterval() Tôi đã sử dụng để làm mới jwt của tôi. Điều này đã được giải quyết như sau:

constructor(private ngZone: NgZone) { 
} 

this.ngZone.runOutsideAngular(() => { 
    Observable.interval(4 * 60 * 1000) 
    .subscribe(data => { 
     this.refreshJwt(); 
    }); 
});