Kendo-angular: [Bug] Testing: TypeError: getComputedStyle(...).getPropertyValue is not a function

Created on 1 May 2018 · 6Comments · Source: telerik/kendo-angular

I'm submitting a...

Bug report

Current behavior

I'm using Jest to run our tests and we're seeing an error when the InputsModule is included for testing. Here's the error:

 TypeError: getComputedStyle(...).getPropertyValue is not a function

      80 |         fixture = TestBed.createComponent(SchemaFieldPropertiesEditorComponent);
      81 |         component = fixture.componentInstance;
    > 82 |         fixture.detectChanges();
      83 |     });
      84 |
      85 |     it("should create", () => {

and a bit of the stack trace:

at computedProp (node_modules/@progress/kendo-angular-resize-sensor/dist/npm/resize-sensor.component.js:12:41)
      at ResizeSensorComponent.Object.<anonymous>.ResizeSensorComponent.ngAfterViewChecked (node_modules/@progress/kendo-angular-resize-sensor/dist/npm/resize-sensor.component.js:69:13)
      at callProviderLifecycles (node_modules/packages/core/esm5/src/view/provider.js:597:2)
      at callElementProvidersLifecycles (node_modules/packages/core/esm5/src/view/provider.js:561:12)
      at callLifecycleHooksChildrenFirst (node_modules/packages/core/esm5/src/view/provider.js:544:2)

Here's the testbed we're using:

 TestBed.configureTestingModule({
                declarations: [
                    SchemaFieldPropertiesEditorComponent,
                    NmSwitchComponent
                ],
                imports: [
                    FormsModule,
                    BrowserModule,
                    BrowserAnimationsModule,
                    MatDialogModule,
                    RouterTestingModule,
                    MatMenuModule,
                    ReactiveFormsModule,
                    ConfirmationDialogsModule,
                    InputsModule
                ],

System:

TypeScript version: 2.4
Node version: 9
Platform: Mac

Question

Source

mcblum

Most helpful comment

The error can be worked around by mocking getPropertyValue in your setup file:

Object.defineProperty(window, 'getComputedStyle', {
    value: () => ({
        getPropertyValue: (prop) => {
            return '';
        }
    })
});

We may add feature detection if this is a common problem in customers tests. For now, we prefer to keep the code free of JSDOM-specific workarounds.

tsvetomir on 2 May 2018

👍43 🎉4

All 6 comments

Just a quick update, if I remove fixture.detectChanges(); from the test, it passes.

mcblum on 1 May 2018

👍2

The error can be worked around by mocking getPropertyValue in your setup file:

Object.defineProperty(window, 'getComputedStyle', {
    value: () => ({
        getPropertyValue: (prop) => {
            return '';
        }
    })
});

We may add feature detection if this is a common problem in customers tests. For now, we prefer to keep the code free of JSDOM-specific workarounds.

tsvetomir on 2 May 2018

👍43 🎉4

@tsvetomir thank you! I added it to setupJest.ts and all is working. I Googled for days on this one - hopefully someone else will find this if they need it.

mcblum on 2 May 2018

👍10

Thank you @tsvetomir! This just made it really easy!