Когда вызывать функцию receiveChanges () для ngOnInit () при тестировании параметров снимка ActivatedRoute в Angular - PullRequest
Новая
       32

Когда вызывать функцию receiveChanges () для ngOnInit () при тестировании параметров снимка ActivatedRoute в Angular

0 голосов
/ 16 апреля 2019

У меня есть компонент с режимом редактирования / нового, он инициализируется в том или ином режиме в зависимости от параметров моментального снимка ActivatedRoute.

Единственный способ проверить его правильно - это вызвать первый detectChanges () дляngOnInit () в каждом тестовом примере, предварительно устанавливая route.snapshot.params в значения, которые я хочу проверить.

Мне интересно, есть ли более элегантное и правильное решение.Я обычно предпочитаю вызывать первый detectChanges () для метода beforeEach ().

Я пробовал много решений из Интернета, но ни одно из них не сработало.Два вопроса в StackOverflow, которые привели меня к работе:

  1. Угловое тестирование, динамическое изменение параметров ActivatedRoute для различных тестовых случаев

    Это говорит о том, что вызов TestBed.get (ActivatedRoute), а затем настройка параметров моментального снимка работают, но вы должны вызвать его перед инициализацией компонента с помощью detectChanges () для ngOngInit ().В противном случае снимок не будет иметь параметров.

  2. Angular 2 - тест на изменение параметров маршрута

    Этот рассказывает об использовании объекта игенерировать события с изменениями параметров.Я также пробовал этот, но он не работает.

Для этих двух вариантов мне пришлось изменить внутреннюю реализацию ngOnInit () компонента, в первом Iиспользуйте параметры снимка, а во втором я использую подписку на параметры.

Это код, который мне подходит, следуя решению в первой теме (1):

spec.ts 

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EntryDetailComponent ],
       imports: [
        ...
        RouterTestingModule.withRoutes(testRoutes)
       ],
       providers: [
        ...
        { provide: ActivatedRoute, useValue: { snapshot: { params: { 'id': null } } } }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EntryDetailComponent);
    // Do this inside each test case to set
    // snapshot params before init component
    // fixture.detectChanges(); // ngOnInit()
    component = fixture.componentInstance;
    compiled = fixture.debugElement.nativeElement;
    service = fixture.debugElement.injector.get(DiaryDataService);
    router = TestBed.get(Router);
    route = TestBed.get(ActivatedRoute);

  });

 it('should show \'Edit Entry\' text in edit mode', () => {
    console.log('*** should show \'Edit Entry\' text in edit mode - in');
    route.snapshot.params = { 'id': entryMock.id };
    fixture.detectChanges(); // ngOnInit()
    expect(compiled.querySelector('span').textContent.trim()).toBe('Edit Entry');
    console.log('*** should show \'Edit Entry\' text in edit mode - out');
  });

component.ts 

 ngOnInit() {
    console.log('EntryDetailComponent::ngOnInit');
    const params = this.route.snapshot.params;
    const id = params['id'];
    this.edit = (id != null);
    console.log('edit = ' + this.edit);
    if (this.edit) {
      this.entry = this.diaryDataService.getEntry(id);
      console.log(this.entry);
    }
    this.initForm();
  }

Я хотел бы знать, существует ли более элегантный и правильный способ проверки параметров снимка ActivatedRoute, чтобы они могли различаться в каждомtest case (1).

Кроме того, я хотел бы знать, как заставить его работать с подпиской params, я следую предложенному решению и не могу заставить его работать (2).

Заранее спасибо!

package.json 

  "dependencies": {
    "@angular/animations": "^7.0.4",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "dairy-client-lib": "1.0.1",
    "primeicons": "^1.0.0",
    "primeng": "^7.1.0",
    "rxjs": "6.3.3",
    "rxjs-compat": "6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "~7.0.6",
    "@angular/compiler-cli": "^7.2.7",
    "@angular/language-service": "~7.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6",
    "webpack-dev-server": "^3.2.1"
  }
...