Các thử nghiệm góc không thành công với Không thể thực hiện 'gửi' trên 'XMLHttpRequest'

Tôi đang thử kiểm tra thành phần 4.1.0 góc của mình -

export class CellComponent implements OnInit {
  lines: Observable<Array<ILine>>;
  @Input() dep: string;
  @Input() embedded: boolean;
  @Input() dashboard: boolean;
  constructor(
    public dataService: CellService,
    private route: ActivatedRoute,
    private router: Router, private store: Store<AppStore>) {
  }
}

Tuy nhiên, một thử nghiệm "nên tạo" đơn giản sẽ ném lỗi khó hiểu này ...

NetworkError: Không thể thực thi 'gửi' trên 'XMLHttpRequest': Không thể tải 'ng: ///DocateTestModule/module.ngfactory.js'.

Vì vậy, tôi đã tìm thấy câu hỏi này , điều này cho thấy vấn đề là thành phần có các thông @Input)_số không được đặt, tuy nhiên, nếu tôi sửa đổi thử nghiệm của mình như vậy:

  it('should create', inject([CellComponent], (cmp: CellComponent) => {
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    expect(cmp).toBeTruthy();
  }));

sau đó tôi vẫn gặp vấn đề tương tự, tương tự, nếu tôi loại bỏ các @Input()chú thích khỏi thành phần, vẫn không có sự khác biệt. Làm thế nào tôi có thể vượt qua các bài kiểm tra này?

Đây là một vấn đề của Angular Cli mới. Chạy thử nghiệm của bạn với --sourcemaps=falsevà bạn sẽ nhận được thông báo lỗi đúng.

Xem chi tiết tại đây: https://github.com/angular/angular-cli/issues/7296

BIÊN TẬP:

Viết tắt cho điều này là:

ng test -sm=false

Kể từ góc 6, lệnh là:

ng test --source-map=false

Tôi gặp vấn đề tương tự khi sử dụng angualar cli 6, tôi đã sử dụng thẻ này để nhận thông báo lỗi đúng:

ng test --source-map=false

Có lẽ nó sẽ giúp được ai đó :).

Đối với trường hợp của tôi, có một vấn đề dữ liệu giả và trong trường hợp đó Array, tôi đã trở về stringtừ bản giả.

someApi = fixture.debugElement.injector.get(SomeApi);
spyOn(someApi, 'someMethod')
  .and.returnValue(Observable.of('this is not a string but array'));

Thông báo lỗi thực sự gây mất tập trung và không báo lỗi thực tế. Chạy ng test --source=falsechỉ ra lỗi và dòng chính xác, và giúp tôi khắc phục nhanh chóng.

Nhiều khi nó xảy ra khi bạn giả định dữ liệu không đầy đủ hoặc không chính xác.

Bạn có thể đặt thuộc tính input () thành giá trị mặc định trong thành phần.

@Input() tableColumns: Array<any> = [];  
@Input() pageObj: any = '';

HOẶC LÀ

Sửa đổi tệp thành phần.spec.ts của bạn theo cách sau,

beforeEach(() => {  
   fixture = TestBed.createComponent(MyComponent);  
   component = fixture.componentInstance;  
   component.tableColumns = [];  
   component.pageObj = '';  
   fixture.detectChanges();  
});

Như đã đề xuất ở trên: https://stackoverflow.com/a/45570571/7085047 vấn đề của tôi là ở tôi ngOnInit. Tôi đã gọi một proxy bộ điều khiển REST được tạo ra giả. Nó đã trả về null và tôi đã đăng ký vào null đó, nó không hoạt động ...

Lỗi đã trở lại:

Failed to load ng:///DynamicTestModule/MockNodeDashboardComponent_Host.ngfactory.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Tôi đã khắc phục sự cố bằng ts-mockito: https://github.com/NagRock/ts-mockito

Tôi đã thêm mã để tạo một ví dụ giả như thế này:

import { mock, instance, when } from 'ts-mockito';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { MockScenario } from './vcmts-api-client/model/MockScenario';

const MockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = mock(VcmtsnodemockresourceApi);
const obs = Observable.create((observer: Observer<MockScenario[]>) => {
  observer.next(new Array<MockScenario>());
  observer.complete();
});
when(MockVcmtsnodemockresourceApi.getMockScenariosUsingGET()).thenReturn(obs);
const instanceMockVcmtsnodemockresourceApi: VcmtsnodemockresourceApi = instance(MockVcmtsnodemockresourceApi);

Và sau đó thêm ví dụ vào mảng nhà cung cấp của bài kiểm tra như thế này:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      ...
      providers: [
        ...
        { provide: VcmtsnodemockresourceApi, useValue: instanceMockVcmtsnodemockresourceApi },
        ...
      ]        
    }).compileComponents();
  }));

Điều này có thể liên quan đến Chrome ẩn một lỗi kiểm tra thực tế. Khu vực kiểm tra sẽ gây nhầm lẫn cho một số nhà máy giả lập http rằng nó không thể tải và do đó đó là lỗi mà nó sẽ báo cáo. Nhiều khả năng lỗi sẽ xảy ra xung quanh khu vực ngOnInit nơi có một đối tượng, giả sử, mong đợi các đối tượng phụ và chúng không được xác định.

Để thử và khắc phục lỗi cơ bản, tạm thời chuyển sang PhantomJS dường như ít bị các lỗi khởi tạo này và điều này hy vọng sẽ báo cáo lỗi thực tế cho bạn. Một số lần tôi tìm thấy là nơi một đối tượng dự kiến ​​khởi tạo chưa hoàn thành. I E:

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

    component.object = {}
// should be:
    component.object = {"innerObjectThatIsNeeded" : []}

Việc sửa đối tượng cho phép PhantomJS hoàn thành và Chrome cũng chuyển sang thử nghiệm tiếp theo.

Ngoài ra, tôi chưa thấy giải pháp nào để xóa sự cố khỏi Chrome. Đã bao giờ thử và áp dụng chính sách "xóa mã, cho đến khi lỗi xảy ra" để xử lý lỗi.

CẬP NHẬT: Lưu ý rằng đây là một câu trả lời khá cũ, tôi không khuyên bạn nên sử dụng PhantomJS nữa (EOL). Báo cáo kiểm tra trình duyệt đã tốt hơn rất nhiều và nếu Chrome mang đến cho bạn sự đau buồn thì hãy thử Firefox, hiện cũng đang chạy thử nghiệm rất tốt.

Tôi cũng có lỗi này, mà sự thật được nói là khá không nói.

Nó liên quan đến các cuộc gọi HTTP qua các dịch vụ của tôi

Tôi sử dụng myService.ts với 2 phương thức

get();
getAll();

Tôi đang chế giễu dịch vụ này: mockMyService.ts

Lỗi xảy ra ở đây vì thành phần của tôi đang sử dụng phương thức getAll () mà tôi quên thực hiện trong mockMyService, vì vậy tôi chỉ thêm phương thức:

private mockObjects = [
{
  'id': '1',
  'champ1': 'TECH',
  'champ2': 2,
  'champ3': 'Data bidon'
},
{
  'id': '2',
  'champ1': 'TECH',
  'champ2': 2,
  'champ3': 'Data au pif'
},
{
  'id': '3',
  'champ1': 'FUNC',
  'champ2': 3,
  'champ3': 'Data quelconque'
},
 ];

getAll(): Observable<any> {
  return Observable.of(this.mockObjects);
}

Lỗi đã biến mất :)

Tôi đã đối mặt với cùng một vấn đề và tôi đã phát hiện ra rằng để khắc phục nó, bạn phải đặt đầu vào cho thành phần trong phương thức trước mỗi lần như dưới đây:

beforeEach(() => {
    fixture = TestBed.createComponent(CellComponent );
    cmp = fixture.debugElement.componentInstance;
    cmp.dep = '';
    cmp.embedded = false;
    cmp.dashboard = false;
    fixture.detectChanges();
});

Điều này chắc chắn sẽ giải quyết vấn đề của bạn.

Trong trường hợp của tôi, thủ phạm đã được observable.timeout(x).retry(y)áp dụng ở đâu đó trên Đài quan sát được trả về ở cấp lớp dịch vụ, sau đó một lần nữa trong thành phần đang sử dụng dịch vụ đó.

Mọi thứ hoạt động chính xác trong trình duyệt cho đến angular-cli 1.4. Sau đó bắt đầu thất bại trong các bài kiểm tra Karma (với một lỗi ngớ ngẩn như vậy). Tất nhiên, giải pháp là dọn dẹp các toán tử hết thời gian / thử lại này.

Đối với tôi, thông báo này xuất hiện khi giả lập trong các thử nghiệm của tôi: thông thường bạn cung cấp mockService trong các thử nghiệm bootstrap của bạn. Nếu giả của bạn không đầy đủ hoặc giả, thì góc cạnh trả lại lỗi ngu ngốc này.

Thêm thông tin về trường hợp của tôi ở đây

Những gì tôi sẽ làm là:

Thêm console.log () s, dòng sau dòng trong ngOnint () và tìm hiểu xem nó đi được bao xa, sau đó kiểm tra dòng mà nó sẽ không đi qua.

Ví dụ:

ngOnInit() {
    this.route.paramMap
        .switchMap(params => {
            this.busy = true;
            this.updateErrors(null);

            console.log(params);

            **const id = params.get('id');**
            console.log(id);

            if (id === 'new') {
                this.editMode = true;
                return Observable.of(GroupComponent.newGroup());
            }
            return this.apiService.getGroup(id);
        })
    }

Điều này đã thất bại trong bài kiểm tra của tôi với cùng một lỗi trong bài viết này. Như được hiển thị ở trên, tôi đã có hai console.logs. Người thứ nhất vượt qua thorugh, nhưng người thứ hai thì không. Vì vậy, tôi nhận ra vấn đề nằm ở dòng const id = params.get ('id'); và tôi đã sửa nó.

Hy vọng điều này sẽ giúp được ai đó.