bug(DragDrop): After cdk update to v17.3.7, tests fail with css parse error "Could not parse CSS stylesheet"
rubiesonthesky opened this issue · comments
Is this a regression?
- Yes, this behavior used to work in the previous version
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",
This is likely the same root cause as primefaces/primereact#5156.
@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 -> jsdom/jsdom#2177 (comment)
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.