Olá pessoal! Estou precisando de uma ajuda no meu app que estou testando. Minha aplicação que estou testando ela é muito simples, é um modal na qual eu passo um objeto ou não, e ao abrir eu gostaria de pega o valor passado pelo InjectionToken e testaria se objeto esta chegando ou não. Sendo que sempre esta dando o valor de undefined. Alguem pode me ajudar !
dialog-token.ts
import { InjectionToken } from "@angular/core";
export const DIALOG_DATA = new InjectionToken<any>('DIALOG_DATA');
DialogConfig - serviço
import { Injectable, Injector } from "@angular/core";
import { ComponentType, Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from "@angular/cdk/portal";
import { DialogRef } from "./dialog-ref";
import { DIALOG_DATA } from "./dialog-token";
export interface DialogConfig {
data?: any;
}
@Injectable()
export class DialogService {
constructor(
private overlay: Overlay,
private injector: Injector
) { }
open<T>(component: ComponentType<T>,classWidth: string, config?: DialogConfig) {
// Estrategia de posição globalmente centrada
const positionStrategy = this.overlay
.position()
.global()
.centerHorizontally()
.centerVertically()
// Crie a sobreposição com opções personalizadas
const overlayRef = this.overlay.create({
positionStrategy,
hasBackdrop: true,
backdropClass: 'overlay-backdrop',
panelClass: ['overlay-panel',classWidth],
});
// Criar dialogRef para retornar
const dialogRef = new DialogRef(overlayRef);
const injector = Injector.create({
parent: this.injector,
providers: [
{provide: DialogRef, useValue: dialogRef},
{provide: DIALOG_DATA, useValue: config}
]
});
// Anexar portal de componentes a sobreposição
const portal = new ComponentPortal(component, null, injector);
overlayRef.attach(portal);
return dialogRef;
}
}
e aqui a spec que estou testando esse modal
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { AppModule } from "src/app/app.module";
import { ModalModule } from "src/app/shared/components/modal/modal.module";
import { DialogService } from "src/app/shared/components/modal/modalDialog/dialog.service";
import { CategoriaModule } from "../categoria.module";
import { CategoriaService } from "../services/categoria.service";
import { ModalCategoriaComponent } from "./modal-categoria.component";
import { DialogRef } from "src/app/shared/components/modal/modalDialog/dialog-ref";
import { DIALOG_DATA } from "src/app/shared/components/modal/modalDialog/dialog-token";
import { Categoria } from "../interfaces/categoria";
describe(ModalCategoriaComponent.name, () => {
let fixture: ComponentFixture<ModalCategoriaComponent>;
let component: ModalCategoriaComponent;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations:[ModalCategoriaComponent],
imports: [CategoriaModule,ModalModule,AppModule],
providers:[
CategoriaService,
DialogService,
{
provide: DialogRef,
useValue: {}
},
{
provide: DIALOG_DATA,
useValue: {id: 1, nome: 'Programação'}
}
]
}).compileComponents();
fixture = TestBed.createComponent(ModalCategoriaComponent);
component = fixture.componentInstance;
});
it('Deve criar o componente ModalCategoria',async () => {
expect(component).toBeTruthy();
});
it(`Deve dar o valor undefined quando o ciclo de vida
for chamado e não vier dados`, () => {
fixture.detectChanges();
expect(component.categoria).toBeUndefined();
});
it(`Deve receber o valor quando passar pelo ciclo de vida`, () => {
const categoria = {id: 1, nome: 'Programação'} as Categoria;
fixture.detectChanges();
component.categoria = categoria;
expect(component.categoria).toEqual(categoria);
});
});