Кутові тести не вдалося виконати "Не вдалося виконати" надіслати "на" XMLHttpRequest "

Я намагаюся перевірити свій кутовий компонент 4.1.0 -

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>) {
  }
}

Однак простий тест "повинен створити" кидає цю криптовану помилку ...

NetworkError: Не вдалося виконати 'send' на 'XMLHttpRequest': Не вдалося завантажити 'ng: ///DynamicTestModule/module.ngfactory.js'.

тому я знайшов це запитання, яке говорить про те, що проблема полягає в тому, що компонент має @Input)_параметри, які не встановлені, однак, якщо я можу змінити тест так:

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

тоді я все одно отримую ту саму проблему, аналогічно, якщо я видаляю @Input()примітки із компонента, все одно ніякої різниці. Як я можу пройти ці тести?

Це проблема нового Angular Cli. Запустіть свій тест, --sourcemaps=falseі ви отримаєте правильні повідомлення про помилки.

Деталі див. Тут: https://github.com/angular/angular-cli/isissue/7296

Редагувати:

Стенограма для цього:

ng test -sm=false

Станом на кутовий 6 командою є:

ng test --source-map=false

У мене була така ж проблема з використанням angualar cli 6, я використовував цей тег, щоб отримати правильне повідомлення про помилку:

ng test --source-map=false

Можливо, комусь це допоможе :).

У моєму випадку виникла проблема з макетом даних, і в разі Arrayя повертався stringз макету.

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

Повідомлення про помилку насправді відволікає і не говорить про фактичну помилку. Біг ng test --source=falseвказав на правильну помилку та рядок, і допоміг мені швидко її виправити.

Багато разів це трапляється, коли ви знущаєтесь із даних неповні або неправильні.

Ви можете встановити властивість input () за замовчуванням у компонент.ts

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

АБО

Змініть файл компонент.spec.ts наступним чином,

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

Як було запропоновано вище тут: https://stackoverflow.com/a/45570571/7085047 моя проблема була в моїй ngOnInit. Я закликав проксі-генерований проксі-контролер REST. Він повертався до нуля, і я підписався на цю нуль, яка не працює ...

Помилка повернулася:

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

Я вирішив проблему за допомогою ts-mockito: https://github.com/NagRock/ts-mockito

Я додав код, щоб створити подібний екземпляр:

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);

А потім додав екземпляр до масиву постачальників тестів таким чином:

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

Я зіткнувся з тією ж проблемою, і я виявив, що для її вирішення потрібно встановити свої входи для компонента в методі beforeEach, як показано нижче:

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

Це безумовно вирішить вашу проблему.

Це може бути пов’язано з тим, що Chrome приховує фактичну помилку тесту. Тестова область буде заплутати деякий знущальний фабричний http, який він не може завантажувати, і тому це буде повідомлення про помилку. Швидше за все, помилка буде навколо області ngOnInit, де об'єкт, скажімо, очікує субоб'єкти, і вони не визначені.

Щоб спробувати дійти до нижньої частини помилки, перейдіть на PhantomJS тимчасово, який, здається, менше страждає від цих помилок ініціалізації, і це, сподіваємось, повідомить вам про фактичну помилку. Кілька разів я виявляв, що об'єкт, який очікується при ініціалізації, не був завершеним. IE:

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

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

Виправлення об'єкта дозволило PhantomJS завершити, а також Chrome перейти до наступного тесту.

Окрім цього, я не бачив рішення для видалення проблеми з Chrome. Як і будь-коли, спробуйте прийняти політику "видалити код, поки помилка не піде", щоб переслідувати помилку.

ОНОВЛЕННЯ: Зауважте, що це вже досить стара відповідь, я більше не рекомендую використовувати PhantomJS (EOL). Звітування про тести веб-переглядачів покращилося, і якщо Chrome доставляє вам горе, то спробуйте Firefox, який також сьогодні дуже добре працює з тестами.

У мене також була така помилка, правду сказати досить не балакуче.

Це було пов'язано з дзвінками HTTP через мої послуги

Я використовую myService.ts двома методами

get();
getAll();

Я знущаюся над цією послугою: mockMyService.ts

Помилка була тут, тому що мій компонент використовував метод getAll (), який я забув реалізувати в mockMyService, тому я просто додав метод:

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);
}

Помилки не було :)

У моєму випадку винуватець був observable.timeout(x).retry(y)застосований десь на поверненому спостерігається на рівні класу обслуговування, а потім знову в компоненті, який використовував цю послугу.

У браузері все працювало правильно, поки не було 1.4. Потім почав провалюватися під час випробувань Карма (з такою дурною помилкою). Рішення було, звичайно, виправити ці оператори тайм-ауту / повтору.

Для мене це повідомлення з’являється, коли макет є хибним у моїх тестах: зазвичай ви надаєте mockService у вашому завантажувальному пакеті тестів. Якщо ваш макет неповний або хибний, то кутовий поверніть цю дурну помилку.

Більше інформації про мій випадок тут

Що я б робив, це:

Додайте console.log () s, рядок за рядком у ngOnint () та дізнайтеся, як далеко він проходить, а потім огляньте рядок, через який він не пройде.

Наприклад:

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);
        })
    }

Це не вдалося на моєму тесті з тією ж помилкою в цій публікації. Як показано вище, у мене було два console.logs. Перший пройшов шип, а другий - ні. Тому я зрозумів, що проблема в рядку const id = params.get ('id'); і я це зафіксував.

Сподіваюся, що це комусь допоможе.