Me encargaron escribir la prueba Karma / Jasmine para componentes de una aplicación que nuestro equipo está desarrollando. No soy la persona que escribió el componente actual con el que me he encontrado con un error que hasta ahora no he podido encontrar la respuesta.

Este es el código 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() {
      
    }

   
}

Este es el deleteuser.component.spec.ts con algún código que había intentado sin éxito para intentar obtener una buena prueba.


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();
  });
});

Con el caso de prueba como está actualmente, obtengo este error.

enter image description here

Traté de definir currentRoles en el archivo de especificaciones pero no funcionaba. Todas las búsquedas que he realizado hasta ahora no me han señalado la respuesta a mi error.

Si no escuchas una respuesta de mi parte de inmediato, es porque estaré de vacaciones el resto de la semana.

0
Eric Lommatsch 14 jul. 2020 a las 22:23

2 respuestas

La mejor respuesta

Después de hablar con el compañero de equipo que creó el componente y experimentar un poco por mi cuenta, pude realizar la prueba predeterminada de

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

El problema era que en la declaración básica beforeEach se llamaba a detectChanges (). Sin embargo, este componente está diseñado para esperar información del usuario cuando se abre.

Probar la información del usuario que pasa es parte de las pruebas de integración que aún no estoy haciendo.

Al mover el detectChanges a cualquier prueba en la que estoy probando la funcionalidad real del componente y no tenerla en el antes, cada una pude hacer que pasaran las pruebas.

El beneficio adicional es haber aprendido algo.

0
Eric Lommatsch 23 jul. 2020 a las 20:52

¿Qué tal usar

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

Y luego usarlo como:

  beforeEach(async(() => {

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

Avísame si esto funcionó.

0
Shashank Vivek 16 jul. 2020 a las 11:26