Вам всегда нужен макет для ActivatedRoute? - PullRequest
Новая
       12

Вам всегда нужен макет для ActivatedRoute?

0 голосов
/ 10 ноября 2019

Итак, я делаю несколько юнит-тестов. И следующий компонент, который я пытаюсь провести модульный тест: 

export class EcheqDisplayComponent implements OnInit {
  echeq: EcheqSubmissionApi;
  orgId = 1;

  constructor(
    private route: ActivatedRoute
  ) {
    this.echeq = this.route.snapshot.data['submission'];
  }

  ngOnInit() {
  }

  getAnswers(page: EcheqPageApi): any[] {
    return page.elements.map(element => this.echeq.answers[element.name]);
  }

И это для него модульный тест: 


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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ],
      imports:[ParticipantEcheqModule,
        RouterModule.forRoot([])

      ]
    })
    .compileComponents();
  }));

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

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

Так что я не получаю ошибки.

Номой вопросЭто правильный способ сделать это?

Потому что не лучше ли использовать макет для ActivatedRoute?

Если да, то как это сделать, тогда как правильно?

Спасибо

sO ЭТО ЭТО шаблон: 


<div class="echeq-display" *ngIf="echeq">
  <header class="echeq-display-header header">
    <div class="echeq-display-info">
      <h1 class="heading echeq-display-heading">
        {{ echeq.definition.title }}
      </h1>
      <div class="sub-heading echeq-display-subheading">
        <span class="echeq-display-creator">
          Toegekend door:
          {{ echeq.assignedByProfName ? echeq.assignedByProfName : 'Het Systeem' }}
        </span>
        <span class="echeq-display-date">{{
          echeq.definition.createdOnUtc | date: 'dd MMM'
        }}</span>
      </div>
    </div>
    <app-meta-box
      [metadata]="{
        numPages: echeq.definition.numPages,
        vPoints: echeq.definition.awardedVPoints
      }"
    ></app-meta-box>
  </header>
  <main class="echeq-display-questions body">
    <app-echeq-question
      *ngFor="let page of echeq.definition.pages; let i = index"
      [page]="page"
      [readonly]="true"
      [number]="i + 1"
      [answers]="getAnswers(page)"
    ></app-echeq-question>
  </main>
</div>

и модульный тест, подобный этому: 

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ],
      providers: [
        { provide: ActivatedRoute, useClass: MockActivatedRoute }
      ],
      imports:[
        ParticipantEcheqModule

      ]
    })
    .compileComponents();
  }));

и это app-meta-box компонент: 

export class MetaData {
  numPages: number;
  vPoints: number;
}

@Component({
  selector: 'app-meta-box',
  templateUrl: './meta-box.component.html',
  styleUrls: ['./meta-box.component.scss']
})
export class MetaBoxComponent implements OnInit {
  @Input() metadata: MetaData;

  constructor() {}

  ngOnInit() {}

}

1 Ответ

0 голосов
/ 10 ноября 2019

Вы можете просто предоставить фиктивному объекту ActivatedRoute необходимую переменную, заданную в свойстве «provider», когда вызывается «TestBed.configureTestingModule ({...})» для настройки модуля тестирования. 

class MockActivatedRoute {
    public snapshot = { 
        data: {
           submission: {
             answers: {}
           }
        }
    };
}

TestBed.configureTestingModule({
  declarations: [ ],
  providers: [
   { provide: ActivatedRoute, useClass: MockActivatedRoute }
  ]
  imports:[
    ParticipantEcheqModule,
    // RouterModule.forRoot([]) // Not required after mocking the "ActivatedRoute"
  ]
})
.compileComponents();

Таким образомВы можете проверить свой компонент на разные значения в activRoute.

...