test.spec > Cannot read property 'destroy' of undefined

[CosmoFruit]

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting

OS and Version?

Ubuntu 18

Versions

"@angular/cli": "~7.0.0-rc.1",
"@ngx-progressbar/core": "^5.2.0",

Repro steps

App.component.html

<ng-progress color="red"></ng-progress>
<router-outlet></router-outlet>

App.component.spec.ts

describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
NgProgressModule,
RouterTestingModule,
],
declarations: [
AppComponent,
],
}).compileComponents();
}));

it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});

});

The log given by the failure

TypeError: Cannot read property 'destroy' of undefined
at NgProgressComponent.push../node_modules/@ngx-progressbar/core/fesm5/ngx-progressbar-core.js.NgProgressComponent.ngOnDestroy (http://localhost:9878/node_modules/@ngx-progressbar/core/fesm5/ngx-progressbar-core.js?:478:1)
at callProviderLifecycles (http://localhost:9878/node_modules/@angular/core/fesm5/core.js?:18506:1)
at callElementProvidersLifecycles (http://localhost:9878/node_modules/@angular/core/fesm5/core.js?:18474:1)
at callLifecycleHooksChildrenFirst (http://localhost:9878/node_modules/@angular/core/fesm5/core.js?:18464:1)
at destroyView (http://localhost:9878/node_modules/@angular/core/fesm5/core.js?:19526:1)
at callViewAction (http://localhost:9878/node_modules/@angular/core/fesm5/core.js?:19652:1)
at execComponentViewsAction (http://localhost:9878/node_modules/@angular/core/fesm5/core.js?:19574:1)
at destroyView (http://localhost:9878/node_modules/@angular/core/fesm5/core.js?:19525:1)
at callWithDebugContext (http://localhost:9878/node_modules/@angular/core/fesm5/core.js?:20285:1)
at Object.debugDestroyView [as destroyView] (http://localhost:9878/node_modules/@angular/core/fesm5/core.js?:19969:1)}

Desired functionality

how to right test component with ngProgressComponent? if i dont want mock it?

[MurhafSousli]

The library does not have test files yet!

[chendachao]

I encountered the same issue, have to use schemas: [NO_ERRORS_SCHEMA] to ignore the ng-progress tag as of now. Keep looking for some better solutions.

[bougnat12]

I encountered the same issue.

I patched the node_modules/@ngx-progressbar/core/fesm5/ngx-progressbar-core.js like this by adding a test before calling destroy() function:

    NgProgressComponent.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        this._started.unsubscribe();
        this._completed.unsubscribe();
        if (this.progressRef instanceof NgProgressRef) {
          this.progressRef.destroy();
        }
    };

Hope that helps to correct this bug.

[nielswitte]

I am having the same issue when running ng test for a component which uses the ng-progress component.

[meiordac]

having the same issue

[eleftherias]

As a workaround you can add fixture.detectChanges() to either run before your tests or during your test.
The code from the original repro steps can be modified like this:

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        NgProgressModule,
        RouterTestingModule,
      ],
      declarations: [
        AppComponent,
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    // This is necessary
    fixture.detectChanges();
    expect(app).toBeTruthy();
  });
});

[steve-todorov]

@MurhafSousli, it looks like @eleftherias's PR has fixed the issue for me (I've tried it by manually building it and replacing the installed package). Will you be releasing it soon? Our build has started failing in Jenkins because of this issue.

[steve-todorov]

ping... any updates? :)

[MurhafSousli]

Fixed in v5.3.2

[steve-todorov]

Many thanks! 🎆