How to disable angular 2 animations for testing with protractor?

Question

I can hardly find anything about this. Almost everything that comes up on google is about Angular 1, and what I found about Angular 2 didn't work (http://www.talkinghightech.com/en/angular-2-end-2-end-testing/).

I'm looking for a way to disable both CSS animations and the animations I have on my angular 2 components.

Answer 1

Now that this bug is closed you can disable child animations using a special binding called @.disabled. It can be applied both to local components and also app-wide.

Here's a quote from their code doc:

@Component({
  selector: 'my-component',
  template: 
    <div [@.disabled]="isDisabled">
      <div [@childAnimation]="exp"></div>
    </div>
  animations: [
    trigger("childAnimation", [
      //...
    ])
  ]
})

class MyComponent {
  isDisabled = true;
  exp = '...';
}

Or app-wide:

import {Component, HostBinding} from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html',
})
class AppComponent {
  @HostBinding('@.disabled')
  public animationsDisabled = true;
}

I hope this helps!

Answer 2

We've done it for testing optionally with test config/env settings...via our core.module

@NgModule({
  imports: [
    BrowserModule,
    environment.noAnimations ? NoopAnimationsModule : BrowserAnimationsModule,

See: https://github.com/angular/components/issues/10590

Answer 3

I just spent a couple of hours in order to set up all correctly, so sharing all the procedure in case it would be helpful for someone in the future.

This is how I did in order to turn off all the angular animations just when running protractor tests in an Angular 6 application (but it should work for all Angular versions equal or greater than 2).

In src/environments folder, add a file called: environment.e2e.ts with the following content:

export const environment = {
    production: false,
    disableAnimations: true
};

In all the other environments you have, that should be .prod and the default one, add the property disableAnimations: false.

Then in your root component, that should be your app component usually, add the following input property to the root tag:

<div [@.disabled]="disableAnimations">
    <!-- ALL THE CONTENT -->
</div>

And in your component code, add the following:

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    disableAnimations: boolean;

    constructor() {
        // pick from the environment if you need to disable the animations
        // they are disabled for e2e tests speed up
        this.disableAnimations = environment.disableAnimations;
    }
}

In this way, you will pick up the value from the current environment, and disable/enable all the animations inside your app based on that value.

That's all you need in your app code.

What you miss, is to specify to your ng e2e command, to pick up the corresponding environment file associated to the e2e tests, which will disable the animations.

In order to do that, open your angular.json file in the root of your project, and follow the next steps (I am following my name conventions but you can feel free to use the names you prefer, just be sure to refer to tha names in the right way. In the following example the name of my project is app-test):

1. Add a new project called app-test-e2e whose target is the serve-e2e build of your main project
2. Add the serve-e2e build to the builds of your main project whose target is the test configuration of the build of your main project
3. Add the test configuration to the configurations of the build, which will replace the default environment.ts with environment.e2e.ts

So the important code you should have in your angular.json is something like:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "app-test": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
                    "styleext": "scss"
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/app-test",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": ["src/favicon.ico", "src/assets"],
                        "styles": ["src/styles.scss"],
                        "scripts": []
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                }
                            ]
                        },
                        "test": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.e2e.ts"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "app-test:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "app-test:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "app-test:build"
                    }
                },
                "test": {
                    "builder": "@angular-builders/jest:run",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": ["src/styles.css"],
                        "scripts": [],
                        "assets": ["src/favicon.ico", "src/assets"]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
                        "exclude": ["**/node_modules/**"]
                    }
                },
                "serve-e2e": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "app-test:build"
                    },
                    "configurations": {
                        "test": {
                            "browserTarget": "app-test:build:test"
                        }
                    }
                }
            }
        },
        "app-test-e2e": {
            "root": "e2e/",
            "projectType": "application",
            "prefix": "",
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "app-test:serve-e2e:test"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "app-test:serve-e2e:test"
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": "e2e/tsconfig.e2e.json",
                        "exclude": ["**/node_modules/**"]
                    }
                }
            }
        }
    },
    "defaultProject": "app-test"
}

If you now execute your e2e tests through the command npm run e2e or ng e2e it should pick up the right environment file and disable the animations in all your application.