0

I run into this error "Error during cleanup of component" and I found this Testing Angular component with unsubscribe Error during cleanup of component But it didn't work for me since I have an abstract class where I have the ngOnDestroy method and a Subject for unsubscribing:

@Injectable()
export abstract class Unsub implements OnDestroy {
  unsubscribe$ = new Subject<void>();

  ngOnDestroy(): void {
    if (this.unsubscribe$) {
      this.unsubscribe$.next();
      this.unsubscribe$.complete();
    }
  }
}

The main class for which I'm running the test:

export class PanelCedulaComponent extends Unsub implements OnInit, AfterViewInit {
  constructor() { super(); }

  ngOnInit(): void {
    this.loadData();
  }

  public loadData = () => {

    this.tareasService
      .getCedulas()
      .pipe(
        takeUntil(this.unsubscribe$)
      )
      .subscribe((resp: any) => {
        ELEMENT_DATA = resp.notificaciones;
      });
  };
}

Unit test:

describe("Panel cedulas Component", () => {

  let component: PanelCedulaComponent;
  let fixture: ComponentFixture<PanelCedulaComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        AngularMaterialModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
      ],
      declarations: [
        PanelCedulaComponent,
        EstadosPipe,
        EstadosSacPipe,
      ],
      providers: [
        TareasService,
        NotificacionesService,
        ChangeDetectorRef,
        DatePipe
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(PanelCedulaComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it("should have displayed columns", () => {
    expect(component.displayedColumns.length).toBeGreaterThan(0);
  });
})
Mr. Stash
  • 2,940
  • 3
  • 10
  • 24
Zeta
  • 25
  • 6

0 Answers0