Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Teste no ciclo de vida do componente

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);
  });
});
1 resposta
solução!

Fala ai pessoal achei onde estava o problema. Ao criar o injector, era para eu passar somente o valor. useValue: config?.data

 const injector = Injector.create({
      parent: this.injector,
      providers: [
        {provide: DialogRef, useValue: dialogRef},
        {provide: DIALOG_DATA, useValue: config?.data}
      ]
    });