I got an error when testing a component

[paradoxm]

Hi! I wanted to write a test for a component and got an error
untilDestroyed operator cannot be used inside directives or components or providers that are not decorated with UntilDestroy decorator.

Tell me please, how should I test components with your @UntilDestroy() decorator?

Component:

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';

@UntilDestroy()
@Component({
  selector: 'text-field-filter',
  templateUrl: './text-field-filter.component.html',
  styleUrls: ['./text-field-filter.component.sass'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TextFieldFilterComponent implements OnInit {
  fieldPortalForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.fieldPortalForm = this.fb.group({
      fieldValue: [],
    });

    this.fieldPortalForm.valueChanges.pipe(untilDestroyed(this)).subscribe(() => {});
  }
}

Spec:

import { ChangeDetectionStrategy } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { TextFieldFilterComponent } from './text-field-filter.component';

fdescribe('TextFieldFilterComponent', () => {
  let component: TextFieldFilterComponent;
  let fixture: ComponentFixture<TextFieldFilterComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TextFieldFilterComponent],
      imports: [ReactiveFormsModule],
    })
      .overrideComponent(TextFieldFilterComponent, {
        set: { changeDetection: ChangeDetectionStrategy.Default },
      })
      .compileComponents();
  }));

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

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

HeadlessChrome 81.0.4044 (Linux 0.0.0) TextFieldFilterComponent should create FAILED
        Error: untilDestroyed operator cannot be used inside directives or components or providers that are not decorated with UntilDestroy decorator
            at ensureClassIsDecorated (http://localhost:9876/home/px/projects/gearheart/smartsuite/frontend/node_modules/@ngneat/until-destroy/__ivy_ngcc__/fesm5/ngneat-until-destroy.js:39:1)
            at http://localhost:9876/home/px/projects/gearheart/smartsuite/frontend/node_modules/@ngneat/until-destroy/__ivy_ngcc__/fesm5/ngneat-until-destroy.js:151:1
            at EventEmitter.Observable.pipe (http://localhost:9876/home/px/projects/gearheart/smartsuite/frontend/node_modules/rxjs/_esm5/internal/Observable.js:91:29)
            at TextFieldFilterComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/application-structure/filters/text-field-filter/text-field-filter.component.ts:8:3)
            at callHook (http://localhost:9876/home/px/projects/gearheart/smartsuite/frontend/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:2642:1)
            at callHooks (http://localhost:9876/home/px/projects/gearheart/smartsuite/frontend/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:2612:1)
            at executeInitAndCheckHooks (http://localhost:9876/home/px/projects/gearheart/smartsuite/frontend/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:2565:1)
            at refreshView (http://localhost:9876/home/px/projects/gearheart/smartsuite/frontend/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:7454:1)
            at renderComponentOrTemplate (http://localhost:9876/home/px/projects/gearheart/smartsuite/frontend/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:7545:1)

Versions:
Angular: 9.0.4
Node: 10.13.0
Jasmine: 3.5.0

[arturovt]

Provide a minimal reproducible example.

[arturovt]

Will you be able to provide a reproduction? Or should this issue be closed?

You can notice in our issues history that all users, who have provided reproduction to their issues, have also received bug fixes.

I'm just not a fan of dangling issues with only pasted code, but w/o reproduction. 🙂

[NetanelBasal]

Please re-open when you have a minimal reproduction of the issue.

[f1ght4fun]

I actually got same issue as the paradoxm.

I have 1 unit test which doesnt raise this issue on the component which is decorated with UntilDestroy()
And in another case it breaks with this issue.

The only difference I noticed - it happens whenever you override components to inject component providers after testmoduleconfigure and before compiling components.

[kocetora]

I got the same issue. Fixed by adding decorator to the all places (not only current one), where untilDestroyed were used