标签: angular-test

是否可以使用 Google 身份验证弹出窗口通过 Cypress.io 登录 Google 帐户？

我可以打开窗口，但是赛普拉斯无法检测到电子邮件输入字段的 ID。

错误是：“CypressError：重试超时：预期找到元素：'#identifierId'，但从未找到它。”

it('Login', function() {
    cy.visit('home')
    cy.get('#signin-button').click()
    cy.get('#google-login-button').click()
    // cy.wait(1500) // wait doesn't help
    cy.get('#identifierId')
    .type('user@gmail.com') // <<-- error here
  })

我正在尝试测试一个 Angular Component，它基本上接收一个Observable并template根据该 Observable 发出的值更改它。这是一个简化版本：

@Component({
    selector: 'async-text',
    template: `
        <span>{{ text | async }}</span>
    `,
})
export class AsyncTextComponent {    
    @Input() text: Observable<string>;
}

我想测试一下，目前这就是我所拥有的，正在使用rxjs-marbles（尽管它不是必须的）。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AsyncTextComponent } from './async-text.component';

describe('AsyncTextComponent', () => {
  let component: BannerComponent;
  let fixture: AsyncTextComponent<AsyncTextComponent>;

  it('...',
    marbles(m => {
      fixture = TestBed.createComponent(AsyncTextComponent);
      component = fixture.componentInstance;
      component.text = m.cold('-a-b-c|', {
        a: 'first',
        b: 'second',
        c: 'third',
      });

      fixture.detectChanges();
      expect(component.nativeElement.innerHTML).toContain('first'); …

在某些构建 Angular 应用程序的机器上，需要超过 2*60 秒（由 Karma 启动的 Chrome 捕捉内容的默认超时）。

有没有办法在构建完成后强制 Karma 启动 Chrome？

我的package.json：

{
  "dependencies": {
    "@angular/animations": "4.4.4",
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@angular/platform-server": "4.4.4",
    "@angular/router": "4.4.4",
    "rxjs": "5.4.3",
    "ts-md5": "^1.2.2",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "1.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "jasmine-core": "^2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.1.2",
    "protractor-console-plugin": "^0.1.1",
    "protractor-jasmine2-screenshot-reporter": "^0.4.1",
    "ts-helpers": "1.1.2", …

我正在尝试mat-menu在应用程序的工具栏中为我编写一个测试。当我调用button.click()测试时，Cannot read property 'templateRef' of undefined控制台中出现错误。

在浏览器中可以找到所有作品，我相信这与我运行测试的方式有关吗？

app.component.spec.ts

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';

import { AppRoutes } from './app.routes';
import {
  MatToolbarModule,
  MatIconModule,
  MatMenuModule,
  MatButtonModule
} from '@angular/material';

import { HomeComponent } from './home/home.component';
import { UserService } from './user/user.service';

class MockUserService {
  signIn() {}
}

describe('AppComponent', () => {
  let app: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  beforeEach(async(() => { …

我有一个input HTML File归档

<input type="file" class="custom-file-input" id="question-file-upload" formControlName="image" (change)="handleFileSelect($event)">

我想对handleFileSelect功能进行单元测试。但我不知道如何触发onChange输入的方法。以下是spec我写的，但出现错误imageInputNE.onchange is not a function

fit('should keep track of image counter when an image is loaded', () => {
    let newPracticeQuestionComponent = component;
    expect(newPracticeQuestionComponent.currentImageAttachmentCount).toBe(0);
    let imageInputDE = fixture.debugElement.query(By.css("#question-file-upload"));
    expect(imageInputDE).toBeTruthy();
    spyOn(newPracticeQuestionComponent,'handleFileSelect');

    let imageInputNE:HTMLElement = imageInputDE.nativeElement as HTMLElement;
    imageInputNE.onchange(new Event("some event"));
    expect(newPracticeQuestionComponent.handleFileSelect).toHaveBeenCalled();


  });

我一直在尝试在我们的混合 AngularJS/NG6 应用程序中设置测试，但哇，这很难做到。我不断收到错误。最新情况如下：

错误：StaticInjectorError(DynamicTestModule)[$injector]:

静态注入器错误（平台：核心）[$injector]：

NullInjectorError: $injector 没有提供者！

我有以下几点component：

import { Component, OnInit, Input, Inject } from '@angular/core';
import { DashboardService } from '../../services/dashboard/dashboard.service';

@Component({
    templateUrl: './views/components/dashboard/dashboard.component.html'
})
export class DashboardComponent implements OnInit {
    @Input()
    Session;
    Util;
    constructor(
        private _dashboardService: DashboardService,
        @Inject('Session') Session: any,
        @Inject('Util') Util: any
    ) {
        this.Session = Session;
        this.Util = Util;
    }

    ngOnInit() {
        this._dashboardService
            .getPrograms(this.Session.user.organization)
            .subscribe(
                data => {
                    console.log(data);
                },
                error => {
                    console.log(error);
                }
            );
    }
}

这工作得很好。我可以从我们的 API 中提取数据。另一方面，我有这个spec …

我正在尝试为 angular 7 中的文件上传方法编写单元测试。在测试窗口中出现以下错误。我是角度单元测试的新手。有人可以帮忙，如何添加模拟文件以获得完整的代码覆盖率？

类型错误：无法设置未定义的属性“值”

这是我的单元测试代码（规范文件），

describe('ImportComponent', () => {
    let component: ImportComponent;
    let fixture: ComponentFixture<ImportComponent>;
    let element;

    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                imports: [ HttpClientModule, RouterTestingModule ],
                declarations: [ ImportComponent ]
            }).compileComponents();
        })
    );

    beforeEach(() => {
        fixture = TestBed.createComponent(ImportComponent);
        component = fixture.componentInstance;
        element = fixture.nativeElement;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    it('should upload the file', () => {
        component.importFile();
        const inputEl = element.querySelector('#postal_file');
        const fileList = { 0: { name: 'foo', size: 500001 } }; …

在开始这个问题之前。我知道，有很多类似的问题和我的一样。但没有任何解决方案能够帮助我。

我用 rxjs 创建了一个自定义的自动完成，并想测试一个方法是否在输入事件上被调用。但错误表明该方法从未被调用，例如：

 Expected spy CityService.getLocation to have been called with [ 'mun' ] but it was never called.

html

我通过async管道在 HTML 中订阅了我的 observable 。

 Expected spy CityService.getLocation to have been called with [ 'mun' ] but it was never called.

成分

      <input type="text" [(ngModel)]="location" class="form-control" id="locationSearchInput"/>
      <div class="spacer">
        <p class="invalid-feedBack" *ngIf="searchFailed && location.length > 0">Nothing found.</p>
        <ul id="search" *ngFor="let item of (search | async)">
          <li class="resultItem" type="radio" (click)="location = item">{{item}}</li>
      </ul>
    </div>

测试

      ngOnInit(): void { …

我有一个基本的角度应用程序，它运行良好。在ng serve和ng test命令都工作正常。最近，作为针对不同环境构建自动化的一部分，我引入了一些配置更改以允许environment.ts根据环境加载不同的文件。对于我编辑的angular.jsonfile.After的变化，ng serve并ng test命令无法执行。每当执行命令时，都会抛出以下错误：

An unhandled exception occurred: No projects support the 'test' target.
See "C:\Users\account\AppData\Local\Temp\ng-BlbvgV\angular-errors.log" for further details.

修改angular.json为：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "applicationui": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../applicationservice/src/main/resources/static",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets" …

我正在尝试为使用 Angular Material Components 的组件编写一些测试。我阅读了有关 CDK 测试工具https://material.angular.io/guide/using-component-harnesses 的信息，我想基于此获取 Mat Select 组件中的选项计数。

<mat-card>
  <mat-card-content>
    <form [formGroup]="filterLikelihoodForm" (ngSubmit)="onSearchClick()">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-sm">
            <mat-form-field class="full-width" id="periodField">
              <mat-label>Select Period</mat-label>
              <mat-select formControlName="period" id="period">
                <mat-option *ngFor="let period of periodList" [value]="period.id">
                  {{ period.monthName }}
                </mat-option>
              </mat-select>
              <mat-error *ngIf="f.period.errors">
                Please select a valid period
              </mat-error>
            </mat-form-field>
          </div>
          <div class="col-sm">
            <mat-form-field class="full-width">
              <input
                matInput
                type="number"
                formControlName="finishedDeals"
                placeholder="Enter no of finished deals"
              />
              <mat-error *ngIf="f.finishedDeals.errors">
                Please enter a valid number
              </mat-error>
            </mat-form-field>
          </div>
          <div class="col-sm"> …