angular: BUG: Animations cause tests to fail on PhantomJs after upgrade to ng5

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

After upgrade to Angular 5 tests keeps failing on animations with following error.

Error: The animation trigger "flyInOut" has failed to build due to the following errors:
         - The provided animation property "transform" is not a supported CSS property for animations

This happens only on PhantomJs, that means on our build server tests keep failing. With Angular 4 same code without any changes was working also on PhantomJS. In Chrome tests are passing without any problem.

Expected behavior

Testing components which contains animations should work on all browsers.

Minimal reproduction of the problem with instructions

Animation looks like this.

/**
 * Fly in animation
 */
export const flyInAnimation: AnimationReferenceMetadata = animation(
[
    style(
    {
        opacity: '{{fromOpacity}}',
        transform: 'translateX({{fromX}})',
        display: '{{display}}',
        position: '{{position}}'
    }),
    animate('{{duration}}', style(
    {
        opacity: '{{toOpacity}}',
        transform: 'translateX(0)'
    }))
], {params: <FlyInParams>{fromOpacity: 0, toOpacity: 1, position: 'absolute', display: 'block', fromX: '25%', duration: '400ms ease-in'}});

I have imported NoopAnimationsModule.

What is the motivation / use case for changing the behavior?

I want to have working automated tests on server, where GUI browser is not allowed.

Environment


Angular version: 5.0.0


Browser:
- [X] PhantomJS 2.1.1
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.1.2
- Platform:  Windows

Others:

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 8
Comments: 17 (9 by maintainers)

Most upvoted comments

It may be a problem if you’re using Jest to run your tests. I added the following to my jestGlobalMocks.js and it fixed it

Object.defineProperty(document.body.style, 'transform', {value: () => ({enumerable: true, configurable: true})});

geometricpanda on Jan 7, 2018

@emilio-martinez these validations are disabled if they are run in a non-browser environment (no DOM). But in this case since opacity was detected then this means that there is in-fact a browser present (in this case headless webkit).

This PR should fix that problem: https://github.com/angular/angular/pull/19055

matsko on Dec 4, 2017

loicsalou on Nov 16, 2017

This fails not only in PhantomJS, but in Safari <= 8. Would be good to update the browser support page if these are not supported anymore (https://angular.io/guide/browser-support)

An easy way to repro is to use Browserstack => Yosemite => Safari 8 (latest) => go to https://angular.io and see app crash.

josephliccini on Nov 20, 2017