components: animation trigger "transformMenu" has failed to build
Bug, feature request, or proposal:
Bug or unclear documentation
What is the expected behavior?
Either the same tests work with Angular 5 or there is documentation for a breaking change
What is the current behavior?
I upgraded Angular as detailed below and a unit test started failing
Error: The animation trigger “transformMenu” has failed to build due to the following errors: The provided animation property “transform” is not a supported CSS property for animations The provided animation property “transform” is not a supported CSS property for animations The provided animation property “transform” is not a supported CSS property for animations in http://localhost:9876/_karma_webpack_/vendor.bundle.js (line 21927)
What are the steps to reproduce?
- Develop a project with the versions below
- Add many md components to a shared
material-module
- import the module into several components and tests
- iterate for months observing passing tests
- upgrade angular as mentioned below
- observe failing test
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
material 2.0.0-beta.10 angular 4.2.4 cli 1.3.2 TypeScript 2.5 OS Windows 7 (I’m at the office!)
upgraded to angular 5.0.0-beta-7 and test throws as mentioned above
Thanks for Angular Material, team!
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 8
- Comments: 43 (11 by maintainers)
Commits related to this issue
- Fix tests With the update to Angular 5, PhantomJS fails to run the tests due to errors with the 'transform' css property. Chrome still works, so switch the tests to use ChromeHeadless instead of Phan... — committed to NextCenturyCorporation/neon-dash-legacy by ScottWarner 7 years ago
- Switch Chrome to ChromeHeadless for tests In order to run tests in an automated environment, we need some way to run headless tests. The only issue with running tests on ChromeHeadless is that it ne... — committed to NextCenturyCorporation/neon-dash-legacy by ScottWarner 7 years ago
Sorry, for commenting on a closed issue but got the same error when upgrading to Angular 5 using JEST.
added the following snippet to the “Jest global mocks” list will add the missing behaviour to your JSDom instance.
Bot a perfect solution but still keeps my tests alive 😃
I am experiencing this too in Angular 5 rc.0 during Jest unit tests
Material
5.0.0-rc0
doesn’t seem to have fixed it. Still an issue with Angular5.0.0
.Still facing the issue with Angular 6 and Jest. I don’t know if the fix provided by @marcojahn would hold in production environment. @crisbeto shouldn’t the material team address this issue now. This issue persists with every Angular release when testing with Jest.
@kblestarge ths error happens for any browsers that don’t support CSS transforms. Material doesn’t support any of those browsers.
I can’t see why this issue was closed without anything else said except it isn’t the Material’s issue.
Then why do I see this issue after using Angular 5 and latest RC of Angular Material2 in Karma tests? Without Material, I don’t have the issue at all.
I can paste the stack trace during a Jest test:
FWIW, you should be able to switch to Chrome Headless @udos86.
Using latest Angular
@5.0.0.rc-9
packages I’m experiencing this when running unit tests with PhantomJS.I guess, PhantomJS should finally upgrade it’s obsolete QtWebKit engine…
Same here. Seeing issue in Safari 7, 8 with the web-animations-js polyfill added to my polyfills.ts file
Sent from my iPhone
I would at least like to know how to shut up the error on unsupported browsers so I don’t have to worry about it all the time.
Thanks a bunch @marcojahn! I’m using Karma and I couldn’t find a corresponding global configuration option, so I just pasted your code at the top of my single problematic test case and it solved the problem.
I hit this too with Jest. Jest uses
jsdom
which in turn usescssstyle
for pseudo browser/dom/CSS testing. Turns outcssstyle
doesn’t support thetransform
CSS property. PR was submitted to addtransform
a while back but the project isn’t very active.Interestingly though,
cssstyle
currently supports the webkit- prefix transform props. And there is an Angular PR to get webkit prefixes supported. I think this issue will be fixed indirectly when Angular’s PR is accepted.Issue was resolved for me by switching from PhantomJS to ChromeHeadless (using NoopAnimationsModule)
Still here in beta.12