预期间谍导航已使用 [ [ 'users' ] ] 调用,但在集成测试 Angular CLI 中从未调用过

2024-04-21

我在一个项目上实现了一个简单的集成测试,但它失败了,因为expect()行是在component.save()方法之前执行的。当我将 Expect() 行放在 setTimeout() 上时,它会成功。没有setTimeout()如何成功?

spec.ts

 import { Observable } from 'rxjs/Rx';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser'; 
 import { DebugElement } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/Router';
 import { UserDetailsComponent } from './user-details.component';
 import { RouterTestingModule } from '@angular/router/testing';

 class RouterStub {
 navigate(params) { };
 }
 class ActivatedRouteStub {
 params: Observable<any> = Observable.empty();
 }
 describe('UserDetailsComponent', () => {
 let component: UserDetailsComponent;
 let fixture: ComponentFixture<UserDetailsComponent>;

 beforeEach(async(() => {
  TestBed.configureTestingModule({
  imports: [RouterTestingModule],
   declarations: [UserDetailsComponent],
   providers: [
     { provide: Router, useClass: RouterStub },
     { provide: ActivatedRoute, useClass: ActivatedRouteStub }
   ],
 })
   .compileComponents();
}));

beforeEach(() => {
 fixture = TestBed.createComponent(UserDetailsComponent);
 component = fixture.componentInstance;
});

it('should redirect the user to the users page after saving', () => {
let router = TestBed.get(Router);
let spy = spyOn(router, 'navigate');

component.save();

expect(spy).toHaveBeenCalledWith(['users']);

 });
});

error:

Expected spy navigate to have been called with [ [ 'users' ] ] but it was never called

我遇到了通过创建mockRouter并检查方法解决的相同问题nav()已被调用。

In this HomeComponent是着陆组件并且AppComponent正在拥有router.navigate method.

In my app.component.ts

nav() {
    this.router.navigate(['/home']);
}

And my app.component.spec.ts

import { TestBed, async, ComponentFixture, fakeAsync, tick,inject } from '@angular/core/testing';
import { By, BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { RouterModule, Routes } from '@angular/router';
import { Router, RouterOutlet,ActivatedRoute } from "@angular/router";
import { RouterTestingModule } from '@angular/router/testing';
import * as br from '@angular/platform-browser';

describe('Component:AppComponent', () => {
    let component: AppComponent;
    let fixture: ComponentFixture<AppComponent>;
    let debugElement: DebugElement;
    let location, router: Router;
    let mockRouter;

    beforeEach(() => {
        mockRouter = { navigate: jasmine.createSpy('navigate') };
        TestBed.configureTestingModule({
            imports: [RouterTestingModule.withRoutes([
                { path: 'home', component: HomeComponent }
            ])],
            declarations: [AppComponent, HomeComponent],
            providers: [
                { provide: Router, useValue: mockRouter},
            ]
        });
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        debugElement = fixture.debugElement;
    });

    it('should go home', async(() => {
        fixture.detectChanges();
        component.nav();
        expect(mockRouter.navigate).toHaveBeenCalledWith(['/home']);   
    }));
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

预期间谍导航已使用 [ [ 'users' ] ] 调用,但在集成测试 Angular CLI 中从未调用过 的相关文章

  • 如何禁用 Ionic2 / Angular2 上的“未使用的导入”警告

    我知道有一个选项可以禁用这些 未使用的导入 警告tslint跑步时ionic serve or ionic build 但我不知道该把它放在哪里 有人知道吗 谢谢 1 https palantir github io tslint rule
  • 如何在调试器模式下运行 perl 测试?

    我尝试在调试器下运行测试 perl d which prove t file t 但这没有任何效果 因为每个测试都是作为单独的作业运行的 我已经发现 exec选项 但是当我提供它时 我失去了任何选项 proverc文件和命令行 prove
  • http.put 请求在 Angular2 中执行两次

    我正在尝试更新从我的 Angular2 应用程序调用 API 的公司记录 我在调试时注意到 http 调用被执行了两次 我找到了另一个堆栈溢出线程 https stackoverflow com questions 37241294 ang
  • 如何在 ngrx/effects 中执行 if/else 操作?

    我正在使用 ngrx effects 我想根据以下情况分派不同的操作foo商店里的状态 这就是我现在正在做的 Effect foo1 this updates whenAction Actions FOO filter obj gt obj
  • 不同事件的角度停止传播

    在我的 Angular 4 应用程序中 我有一个带有 dblclick 处理程序的父组件和一个带有 click 处理程序的子组件 组件 html
  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动
  • 用嘲笑测试 Laravel 外观总是会通过,即使它应该失败

    我试图在单元测试期间模拟 Laravel 中的一些外观 但似乎无论如何测试总是会通过 例如 此示例取自 Laravel 文档 Event shouldReceive fire gt once gt with foo array name g
  • 如何在 TypeScript 中禁用/抑制库中的错误?

    我打开了一些编译器开关来报告代码中的更多问题 例如严格的空检查 但我在使用的库中遇到了数十个错误 例如 default xxx node modules angular core src util decorators d ts 11 5
  • 如何使用 *ngFor 迭代对象键

    我想在 Angular 2 中使用 ngFor 迭代 object object 问题是该对象不是对象的数组 而是包含更多对象的对象的对象 data id 834 first name GS last name Shahid phone 0
  • MatAutocomplete 值 X 显示

    我的自动完成显示具有以下定义的对象的值 export class Person id number name string cityName string 这是自动完成模板
  • 如何在 Angular 单元测试中模拟/触发 $routeChangeSuccess?

    给定一个附加到 routeChangeSuccess 事件的处理程序来更新 rootScope 上的 title 属性 rootScope on routeChangeSuccess function event current previ
  • 在停止调试时终止 VS Code 中的 ng 服务任务

    我有一个 Angular 项目 目前正在通过 chrome 调试器在 vs code 内进行调试 我的launch json uses preLaunchTask serve 其中服务定义于tasks json as ng serve 这样
  • 如何显示 GroupList 的 FormArray?

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup
  • Angular 2:使用正则表达式进行数字验证

    我正在尝试验证 IE 11 中的数字字段
  • Angular 2 ngModel 不工作(仅限 javascript)

    所以我是 Angular2 javascript 的新手 我能够通过 5 分钟的 Angular 教程制作一个简单的 Hello world 我对 Angular2 的新变化很好奇 我开始阅读 Angular2 Js 文档 但我发现它不完整
  • 如何对我的自定义验证属性进行单元测试

    我有一个自定义的 asp net mvc 类验证属性 我的问题是如何对其进行单元测试 测试类是否具有该属性是一回事 但这实际上并不能测试其中的逻辑 这就是我想测试的 Serializable EligabilityStudentDebtsA
  • 编辑角度材质的表格单元格填充

    当我使用开发人员工具检查该元素时 它显示零填充 但是当我查看它并将鼠标悬停在它上面时 它非常清楚地在单元格内具有填充 我不知道这是从哪里来的 并且设置td padding 0 important 什么也没做 感知到的填充是由以下原因引起的d
  • 茉莉花单元测试 - 测试对象的未定义属性

    我有以下声明 expect A BAR name toEqual foo 由于我的对象 A 具有顶级属性 BAR 并且 bar 具有值 foo 传递 我想测试我的结构以确认属性 NONEXISTINGPROP 尚未定义 例如 expect
  • 在 Angular 单元测试中应该如何处理运行块?

    我的理解是 当您在 Angular 单元测试中加载模块时 run块被调用 我认为如果你正在测试一个组件 你不会想同时测试run块 因为unit测试应该只是测试一个unit 真的吗 如果是的话有什么办法可以防止run阻止运行 我的研究让我认为
  • 错误:找不到模块“jasmine-core”

    我安装了以下内容进行测试 devDependencies jasmine core 2 4 1 karma 0 13 22 karma jasmine 0 3 7 karma phantomjs launcher 1 0 0 运行后karm

随机推荐