search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.18k stars 6.68k forks source link

bug(DragDrop): After cdk update to v17.3.7, tests fail with css parse error "Could not parse CSS stylesheet" #29053

Closed rubiesonthesky closed 1 month ago

rubiesonthesky commented 1 month ago

Is this a regression?

The previous version in which this bug was not present was

17.3.6

Description

After updating to version 17.3.7, a lot of our unit tests fails with error "Could not parse CSS stylesheet".

Tests are using jest and jest-preset-angular. Some of these units tests are almost same what cli generates. The components testing are using DragDropModule with table, where you can drag and drop table rows.

Reproduction

I'd like to include StackBlitz example, but that link creates Angular 16 app and I'm having hard to time updating it to Angular 17. I'm mainly getting errors about zone.js even when it's added to polyfills in angular.json. (That harness link creates Angular 10 repo)

NG0908: In this configuration Angular requires Zone.js

But this bug manifest itself only in test setup (at least for now), so not sure if that Stackblitz would help.

I may be able to create whole repro repository later.

Expected Behavior

Tests should still pass after patch update.

Actual Behavior

Full stack trace:

Error: Could not parse CSS stylesheet
    at exports.createStylesheet (node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
    at HTMLStyleElementImpl._updateAStyleBlock (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
    at HTMLStyleElementImpl._attach (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:19:12)
    at HTMLHeadElementImpl._insert (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:835:14)
    at HTMLHeadElementImpl._preInsert (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:756:10)
    at HTMLHeadElementImpl._append (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:862:17)
    at HTMLHeadElementImpl.appendChild (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:598:17)
    at HTMLHeadElement.appendChild (node_modules/jsdom/lib/jsdom/living/generated/Node.js:411:60)
    at _SharedStylesHost.getStyleElement (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:358:18)
    at _SharedStylesHost.addStyleToHost (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:363:30)
    at _SharedStylesHost.onStyleAdded (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:305:18)
    at _SharedStylesHost.addStyles (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:268:22)
    at NoneEncapsulationDomRenderer.applyStyles (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:742:31)
    at _DomRendererFactory2.createRenderer (node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:466:22)
    at createRootComponentView (node_modules/@angular/core/fesm2022/core.mjs:15958:54)
    at ComponentFactory.create (node_modules/@angular/core/fesm2022/core.mjs:15845:39)
    at createComponent (node_modules/@angular/core/fesm2022/core.mjs:36380:20)
    at _DragDrop._loadResets (node_modules/@angular/cdk/fesm2022/drag-drop.mjs:2749:34)
    at _DragDrop.createDrag (node_modules/@angular/cdk/fesm2022/drag-drop.mjs:2734:14)
    at new _CdkDrag (node_modules/@angular/cdk/fesm2022/drag-drop.mjs:2920:34)
    at NodeInjectorFactory._CdkDrag_Factory [as factory] (ng:///_CdkDrag/ɵfac.js:5:10)
    at getNodeInjectable (node_modules/@angular/core/fesm2022/core.mjs:5984:44)
    at instantiateAllDirectives (node_modules/@angular/core/fesm2022/core.mjs:11907:27)
    at createDirectivesInstances (node_modules/@angular/core/fesm2022/core.mjs:11306:5)
    at ɵɵelementStart (node_modules/@angular/core/fesm2022/core.mjs:23045:9)
    at ConfigFormComponent_tr_16_Template (ng:///ConfigFormComponent.js:95:5)
    at executeTemplate (node_modules/@angular/core/fesm2022/core.mjs:11268:9)
    at renderView (node_modules/@angular/core/fesm2022/core.mjs:12470:13)
    at createAndRenderEmbeddedLView (node_modules/@angular/core/fesm2022/core.mjs:12540:9)
    at TemplateRef2.createEmbeddedViewImpl (node_modules/@angular/core/fesm2022/core.mjs:13393:31)
    at ViewContainerRef2.createEmbeddedView (node_modules/@angular/core/fesm2022/core.mjs:16191:37)
    at node_modules/@angular/common/fesm2022/common.mjs:3173:31
    at DefaultIterableDiffer.forEachOperation (node_modules/@angular/core/fesm2022/core.mjs:33351:17)
    at _NgForOf._applyChanges (node_modules/@angular/common/fesm2022/common.mjs:3168:17)
    at _NgForOf.ngDoCheck (node_modules/@angular/common/fesm2022/common.mjs:3163:22)
    at callHookInternal (node_modules/@angular/core/fesm2022/core.mjs:5136:14)
    at callHook (node_modules/@angular/core/fesm2022/core.mjs:5167:9)
    at callHooks (node_modules/@angular/core/fesm2022/core.mjs:5118:17)
    at executeInitAndCheckHooks (node_modules/@angular/core/fesm2022/core.mjs:5068:9)
    at refreshView (node_modules/@angular/core/fesm2022/core.mjs:12806:21)
    at detectChangesInView$1 (node_modules/@angular/core/fesm2022/core.mjs:13015:9)
    at detectChangesInViewIfAttached (node_modules/@angular/core/fesm2022/core.mjs:12978:5)
    at detectChangesInComponent (node_modules/@angular/core/fesm2022/core.mjs:12967:5)
    at detectChangesInChildComponents (node_modules/@angular/core/fesm2022/core.mjs:13028:9)
    at refreshView (node_modules/@angular/core/fesm2022/core.mjs:12841:13)
    at detectChangesInView$1 (node_modules/@angular/core/fesm2022/core.mjs:13015:9)
    at detectChangesInViewWhileDirty (node_modules/@angular/core/fesm2022/core.mjs:12732:5)
    at detectChangesInternal (node_modules/@angular/core/fesm2022/core.mjs:12714:9)
    at ViewRef$1.detectChanges (node_modules/@angular/core/fesm2022/core.mjs:13310:9)
    at node_modules/@angular/core/fesm2022/testing.mjs:352:36
    at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:412:32)
    at Object.onInvoke (node_modules/@angular/core/fesm2022/core.mjs:14882:33)
    at _ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:411:38)
    at ZoneImpl.run (node_modules/zone.js/bundles/zone.umd.js:147:47)
    at NgZone.run (node_modules/@angular/core/fesm2022/core.mjs:14733:28)
    at PseudoApplicationComponentFixture.detectChanges (node_modules/@angular/core/fesm2022/testing.mjs:351:22)
    at src/app/config-form.component.spec.ts:34:13
    at processTicksAndRejections (node:internal/process/task_queues:95:5) {
  detail: '@layer cdk-resets{.cdk-drag-preview{background:none;border:none;padding:0;color:inherit}}',
  type: 'css parsing'
}

Environment

Angular CLI: 17.3.7 Node: 20.12.2 Package Manager: npm 10.5.0 OS: darwin arm64

Angular: 17.3.8 ... animations, common, compiler, compiler-cli, core, forms ... localize, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1703.7 @angular-devkit/build-angular 17.3.7 @angular-devkit/core 17.3.7 @angular-devkit/schematics 17.3.7 @angular/cdk 17.3.7 @angular/cdk-experimental 17.3.7 @angular/cli 17.3.7 @schematics/angular 17.3.7 rxjs 7.8.1 typescript 5.4.5 zone.js 0.14.5

"jest": "29.7.0",
"jest-preset-angular": "14.0.4",
crisbeto commented 1 month ago

This is likely the same root cause as https://github.com/primefaces/primereact/issues/5156.

rubiesonthesky commented 1 month ago

@crisbeto Yeah, I just figured out that it's probably because of jsdom etc.

And the fix for failing tests is to not fail them, if the error is just this stylesheet error -> https://github.com/jsdom/jsdom/issues/2177#issuecomment-1724971596

crisbeto commented 1 month ago

Ideally JSDom would be updated to account for @layer since it's a standard supported in all browsers. For now I think we can add a try/catch around it only in test environments.

angular-automatic-lock-bot[bot] commented 1 day ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.