Angular и Жасмин MAT_DIALOG_DATA "Ошибка типа: ctx.currentRoles не определено"

Question

Мне было поручено написать тест Karma / Jasmine для компонентов приложения, которое разрабатывает наша команда. Я не тот человек, который написал фактический компонент. Я столкнулся с ошибкой, на которую до сих пор не смог найти ответ.

Это код deleteuser.component.ts:

import {MatTableDataSource} from '@angular/material/table';
import {MatSort} from '@angular/material/sort';
import {MatPaginator} from '@angular/material/paginator';
import {PCplanUser} from 'src/app/models/pcplanUser';
import {PCplanRole} from 'src/app/models/pcplanRole';

import { InitService } from 'src/app/services/pcplan/initializer.service';
import { TlsApiService } from 'src/app/services/api/user-apiservice';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FormControl, FormBuilder, FormGroup} from '@angular/forms';


@Component({
  selector: 'app-deleteuser',
  templateUrl: './deleteuser.component.html',
  styleUrls: ['./deleteuser.component.scss'],
})

export class DeleteUserComponent implements OnInit, AfterViewInit  {

  name :string = this.data.fullname
  confirmdelete :string = "Confirm Delete"

  currentRoles: any;

  constructor(    
    public dialogRef: MatDialogRef<DeleteUserComponent>,
 
    @Inject(MAT_DIALOG_DATA) public data: any
    ) { 
        console.log('data passed in is:', this.data);
      }


    ngAfterViewInit(): void {
    }

    ngOnInit() {
      this.currentRoles = this.data.role.split(',');
    }

  
    onCancelClick(): void {
      this.dialogRef.close();
    }

    ConfirmDelete() {
      
    }

   
}

это deleteuser.component.spe c .ts с некоторым кодом, который я безуспешно пытался получить, пытаясь получить хороший тест.

import { DeleteUserComponent } from './deleteuser.component';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Component } from '@angular/core';
import { of } from 'rxjs';

describe('DeleteUserComponent', () => {
  let component: DeleteUserComponent;
  let fixture: ComponentFixture<DeleteUserComponent>;
  let mockMatDialogRef, mockMAT_DIALOG_DATA;
  let currentRoles: any;


  /*@Component({
    selector: 'app-deleteuser',
    template: '<div></div>'
  })
  class fakeDeleteUserComponent{
    static data: string = 'Admin';
  } */ 

  beforeEach(async(() => {
    mockMAT_DIALOG_DATA = jasmine.createSpyObj(['role']);
    mockMAT_DIALOG_DATA.role = jasmine.createSpyObj(['split']);

    TestBed.configureTestingModule({
      declarations: [ DeleteUserComponent, fakeDeleteUserComponent ],
      providers: [
        {provide: MatDialogRef, useValue: mockMatDialogRef},
        {provide: MAT_DIALOG_DATA, useValue: mockMAT_DIALOG_DATA},
      ]
    })
    .compileComponents();
  }));

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

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

С тестовым случаем как он в настоящее время я получаю эту ошибку.

введите описание изображения здесь

Я пытался определить currentRoles в файле spe c, но это не сработало. Все поиски, которые я проделал до сих пор, не привели меня к ответу на мою ошибку.

Если вы не услышите от меня ответ сразу, это потому, что я буду в отпуске до конца недели.

Answer 1

После разговора с товарищем по команде, который создал компонент, и нескольких экспериментов самостоятельно, я смог выполнить тест по умолчанию

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

, проблема заключалась в том, что в базовом c beforeEach оператор был DeteChanges () вызывается. Однако этот компонент рассчитан на ожидание пользовательской информации при его открытии.

Тестирование передачи пользовательской информации является частью интеграционного тестирования, которое я еще не выполняю.

Путем перемещения detectChanges в любые тесты где я тестирую фактическую функциональность компонента и не проверяю ее в beforeEach Я смог пройти тесты.

Дополнительным преимуществом является то, что я кое-чему научился.

Answer 2

Как насчет использования

  const mockDialogData= {
    role : {
      split: () => {} // or return whatever you want as a function
    }
  };

, а затем использования его как:

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [ DeleteUserComponent, fakeDeleteUserComponent ],
      providers: [
        {provide: MatDialogRef, useValue: mockMatDialogRef},
        {provide: MAT_DIALOG_DATA, useValue: mockDialogData}, // <-- use it here
      ]
    })
    .compileComponents();
  }));

Сообщите мне, сработало ли это.