Question

我几乎找不到任何相关信息。谷歌上出现的几乎所有东西都是关于Angular 1的，而我发现的Angular 2并不起作用（http://www.talkinghightech.com/en/angular-2-end-2-end-testing/）。

我正在寻找一种方法来禁用CSS动画和我的角度2组件上的动画。

Answer 1

现在this bug已关闭，您可以使用名为@.disabled的特殊绑定来禁用子动画。它既可以应用于本地组件，也可以应用于应用范围。

这里引用了他们的代码文档：

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

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

或app-wide：

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

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

我希望这有帮助！

Answer 2

我们已经完成了它的测试，可以选择通过config/env settings通过测试core.module

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

请参阅：example for driver version 4.x

Answer 3

我花了几个小时才能正确设置所有程序，因此共享所有程序以防将来对某人有所帮助。

这就是我在Angular 6应用程序中运行量角器测试时要关闭所有角度动画的方法（但它应适用于等于或大于2的所有Angular版本）。

在src/environments文件夹中，添加一个名为：environment.e2e.ts的文件，其内容如下：

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

在您拥有的所有其他环境（应为.prod和默认环境）中，添加属性disableAnimations: false。

然后在您的根组件（通常应该是您的应用程序组件）中，将以下输入属性添加到根标签：

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

在您的组件代码中，添加以下内容：

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;
    }
}

通过这种方式，您将从当前环境中获取该值，并根据该值禁用/启用应用程序内的所有动画。

这就是您在应用程序代码中所需的全部。

您错过的是指定ng e2e命令，以拾取与e2e测试关联的相应环境文件，该文件将禁用动画。

为此，请在项目的根目录中打开angular.json文件，然后执行以下步骤（我遵循我的名称约定，但是您可以随意使用自己喜欢的名称，请确保以正确的方式引用名称。在以下示例中，我的项目名称为app-test）：

添加一个名为app-test-e2e的新项目，其目标是主项目的serve-e2e构建
将serve-e2e构建添加到主项目构建中，其目标是主项目构建的测试配置
将test配置添加到构建配置中，它将用environment.ts替换默认的environment.e2e.ts

因此，angular.json中应该包含的重要代码如下：

{
    "$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"
}

如果您现在通过命令npm run e2e或ng e2e执行e2e测试，它将选择正确的环境文件并在所有应用程序中禁用动画。

如何禁用角度2动画进行量角器测试？

3 个答案: