Угловой компонент тестирования с ActivatedRoute - PullRequest
Новая
       12

Угловой компонент тестирования с ActivatedRoute

0 голосов
/ 26 апреля 2018

У меня большая проблема с компонентом тестирования, который использует ActivatedRoute - я хочу только пройти тест по умолчанию "component.toBeTruthy"

Класс компонентов: 

@Component({
  selector: 'app-room',
  templateUrl: './room.component.html',
  styleUrls: ['./room.component.css']
})
export class RoomComponent implements OnInit {

  roomId:string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.roomId = this.route.snapshot.params.id;
  }

}

Тест: 

describe('RoomComponent', () => {
  let component: RoomComponent;
  let fixture: ComponentFixture<RoomComponent>;

  beforeEach(async(() => {

    let temp = new ActivatedRouteStub();

    TestBed.configureTestingModule({
      declarations: [ RoomComponent ],
      imports: [MaterialModule, FormsModule, RouterModule, BrowserModule,BrowserAnimationsModule],
      providers: [MatDialog, MatToolbar, RoomService,
        {
          provide: ActivatedRoute, useValue: {}
        }
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(RoomComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Проблема в том, что при запуске тестов происходит сбой со странной ошибкой:

Chrome 65.0.3325 (Mac OS X 10.13.4) ОШИБКА { «message»: «Uncaught NetworkError: не удалось выполнить« send »для« XMLHttpRequest »: не удалось загрузить« ng: ///DynamicTestModule/RoomComponent_Host.ngfactory.js ». \ nat http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2206:25\n\nError: не удалось выполнить« send » 'on' XMLHttpRequest ': не удалось загрузить' ng: ///DynamicTestModule/RoomComponent_Host.ngfactory.js '. \ n в http://localhost:9876/_karma_webpack_/polyfills.bundle.js:4970:35\n в XMLHttpRequest.proto. (анонимная функция) [при отправке] ( http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3386:24)\n в массиве. (Node_modules / source-map-support / browser-source-map-support.js: 107: 134) \ n в node_modules / source-map-support / browser-source-map-support.js: 101: 106 \ n

Если я удаляю эту строку this.roomId = this.route.snapshot.params.id; из ngOnInit, все работает.

Что происходит?

1 Ответ

0 голосов
/ 21 августа 2018

Моя интуиция говорит, что сообщение об ошибке, вероятно, не имеет ничего общего с реальной проблемой.

Проблема в том, что вы используете {} в качестве поставщика для ActivatedRoute. Затем в вашем компоненте вы пытаетесь получить доступ к ActivatedRoute, который в тестовом примере равен {}.

Можете ли вы попробовать заменить providers на: 

providers: [MatDialog, MatToolbar, RoomService,
{
  provide: ActivatedRoute, useValue: {
    snapshot: { params: { id: 123 } }
  }
}];
...