0

my-component.html

<ul class="nav nav-list">
<a *ngFor="let plan of plansNames" style="color:grey;"class="list-group-item" [routerLink]="['/annotations']"  [queryParams]="{ id: plan.id }" >
  <i class="material-icons" id={{plan.id}}>layers</i>
  &nbsp;{{plan.name}}
</a>
</ul>

my component.spec.ts

import { HttpModule } from '@angular/http';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';
import { PlansComponent } from './plans.component';
import { Location, CommonModule } from '@angular/common';
import { RouterTestingModule } from '@angular/router/testing';
import {async, fakeAsync, tick} from '@angular/core/testing';
import {DefaultApi} from "../api/api/DefaultApi";
import {TableData } from './table-data';
import { Router, NavigationEnd } from '@angular/router';
import { RouterLinkWithHref } from '@angular/router';

describe('DOM Elements testing', () => {
  let comp : PlansComponent;
  let fixture : ComponentFixture<PlansComponent>;
  let de : DebugElement;
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          PlansComponent
        ],
          imports: [RouterTestingModule,HttpModule]
      }).compileComponents();
    }));
    beforeEach(() => {
      TestBed.configureTestingModule({
          declarations: [
              PlansComponent
          ]
      });
      TestBed.compileComponents();
      fixture = TestBed.createComponent(PlansComponent);
      fixture.detectChanges();
      de = fixture.debugElement;
  });
  it('Plan was created',() => {
    fixture.detectChanges();
    expect(de.nativeElement.querySelector('a[ng-reflect-router-link= "/annotations"]').getAttribute('ng-reflect-href')).toMatch('/annotations')
  });
  it('Plan has class list-group-item',() => {
    expect(de.nativeElement.querySelector('ul.nav-list a').getAttribute('class')).toMatch('list-group-item')
  });

1 ответ 1

0

В этом куске кода получается получить доступ к DOM

...component.html

<li>
    <a [routerLink]="['home']">
        <i class="fa fa-home"></i>
        <span>&nbsp; Home</span>
    </a>
</li>

И вот мой тест

...spec.comp.ts

    it('Sidebar element "Assign Labeller" was created',() => {
      expect(de.nativeElement.querySelector('a[ng-reflect-router-link= "assign-labeller"]').getAttribute('ng-reflect-href')).toMatch('assign-labeller')
      expect(de.nativeElement.querySelector('a[ng-reflect-router-link= "assign-labeller"]').getAttribute('ng-reflect-router-link')).toBeDefined()
    });

Может ли быть дело в ngFor*? И то что тест запускается перед функцией ngOnInit и в момент тестирования DOM элементы ещё не созданы?

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.