How can I disable angular 2 animations for testing with a protractor?
I can't do anything about it. Almost everything that comes up on google is around Angular 1 and what I found about Angular 2 doesn't work ( http://www.talkinghightech.com/en/angular-2-end-2-end-testing/ ).
I'm looking for a way to disable CSS animations and animations that I have on my Angular 2 components.
source to share
Now that this bug is closed, you can turn off the @.disabled
animation using a custom binding called @.disabled
. It can be applied to both local components and the entire application.
Here is a quote from their doc code:
@Component({
selector: 'my-component',
template:
<div [@.disabled]="isDisabled">
<div [@childAnimation]="exp"></div>
</div>
animations: [
trigger("childAnimation", [
//...
])
]
})
class MyComponent {
isDisabled = true;
exp = '...';
}
Or for the whole application:
import {Component, HostBinding} from '@angular/core';
@Component({
selector: 'app-component',
templateUrl: 'app.component.html',
})
class AppComponent {
@HostBinding('@.disabled')
public animationsDisabled = true;
}
Hope this helps!
source to share
I just spent a couple of hours getting everything set up correctly, so I am sharing the entire procedure in case anyone needs it in the future.
This is exactly what I did to disable all angular animations only when running protractor tests in Angular 6 app.
In the folder src/environments
add a file named: environment.e2e.ts
with the following content:
export const environment = {
production: false,
disableAnimations: true
};
In all your other environments, which should be the .prod
default, add the property disableAnimations: false
.
Then, in the root component, which should normally be your application component, add the following input property to the root tag:
<div [@.disabled]="disableAnimations">
<!-- ALL THE CONTENT -->
</div>
And add the following to your component code:
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;
}
}
This way you will get the value from the current environment and disable / enable all animations in your application based on this value.
That's all you need in your application code.
What you are missing is telling yours ng e2e
to pick up the appropriate environment file associated with the e2e tests that will disable the animation.
To do this, open the file angular.json
at the root of your project and follow these steps (I follow my naming conventions, but feel free to use your preferred names, just be sure to refer to the names correctly. In the following example, my project's name is app-test
):
- Add a new project named
app-test-e2e
, which aims to buildserve-e2e
your main project. - Add
serve-e2e
to your main project builds that target your main project build test configuration. - Add a
test
config in the build config that will replace the defaultenvironment.ts
withenvironment.e2e.ts
So, the important code that you should have in yours angular.json
looks something like this:
{
"$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 are now running your e2e tests with a command npm run e2e
or ng e2e
it should pick up the correct environment file and disable animations in all your applications.
source to share