Question

我正在为Angular7模板中的函数编写单元测试用例。它是一个登录组件，并且登录功能在http请求中具有router.navigate，以便在正确登录时路由到仪表板。但我遇到错误-

错误：预期的间谍导航已通过[['/ ProjectData / MasterSequence']]调用，但从未被调用。堆叠（http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2455:17）在buildExpectationResult（http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2425:14）在Spec.expectationResultFactory（http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:901:18）位于Spec.addExpectationResult（http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:524:34）在Expectation.addExpectationResult（http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:845:21）在Expectation.toHaveBeenCalledWith（http://localhost:9876/absolute/home/hp/Downloads/ICICI/ICICI_UI/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?0b1eaf7a13cae32191eadea482cfc96ae41fc22b:2369:12）在UserContext上。（http://localhost:9876/src/app/authentication/login2/login2.component.spec.ts?:208:38）

app.component.html

loginData(value) {
    this.username = value.username;
    this.password = value.password;
    this.dataObj = {
      'username': this.username,
      'password': this.password
    }
    this.loginService.login(this.dataObj).then((data) => {
      console.log("data", data);
      this.response = data;
      console.log("message", this.response.message);
      if (this.response.message == "Login Successful.") {
        this.router.navigate(['/ProjectData/MasterSequence'])
      }
      else {
        this.toastr.error("UserName or Password is incorrect");
      }
    })

app.component.spec.ts

describe('Login2Component', () => {
    let comp: Login2Component;
    let fixture: ComponentFixture<Login2Component>;
    let de: DebugElement;
    let el: HTMLElement;
    beforeEach(async(() => {
        mockRouter = { navigate: jasmine.createSpy('navigate') };
        TestBed.configureTestingModule({
            declarations: [Login2Component, MasterSequenceComponent],

            imports: [
                BrowserModule,
                FormsModule,
                RouterModule,
                ReactiveFormsModule,
                RouterTestingModule,
                HttpClientModule,

                [
                    RouterTestingModule.withRoutes([
                        { path: '/ProjectData/MasterSequence', 
                          component: MasterSequenceComponent }
                    ])
                ]
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],

            providers: [{ provide: ToastrService, useValue: ToastrService }, Login2Service]
        })
            .compileComponents()
            .then(() => {
                //Login2Component
                fixture = TestBed.createComponent(Login2Component);

                comp = fixture.componentInstance;

                de = fixture.debugElement.query(By.css('form'));
                el = de.nativeElement;
            });
    }));

    it('should redirect the user to "login form" component when button is clicked', () => {
        const router = TestBed.get(Router);
        const spy = spyOn(router, 'navigate');
        fixture.detectChanges();

        const button = fixture.debugElement.query(By.css('form[id=loginform]'));

        button.triggerEventHandler('click', null);

        let userN = comp.addLoginData.controls['username'];
        userN.setValue('pallavi');
        let pass = comp.addLoginData.controls['password'];
        pass.setValue(1234);

        let value = {
            username: userN,
            password: pass
        };

        comp.loginData(value);

        expect(spy).toHaveBeenCalledWith(['/ProjectData/MasterSequence']);
    });
});

参考-

Angular 2/4/6/7 - Unit Testing with Router

Answer 1

我找不到SELECT STRING_ESCAPE('['' This is a special / "message" /'']', 'json') AS escapedJson;的代码，但是我确定它必须进行一些API调用，因此创建loginService.login()是一个好习惯。像这样：

stub

在export class LoginServiceStub{ login(obj){ return new Promise((resolve, reject) => { resolve("whatever_data_is_expected"); }); } }文件中：

spec

，然后在describe('Login2Component', () => { let RouterMock = { navigate: jasmine.createSpy('navigate') }; providers: [ {provide: ToastrService, useValue: ToastrService }, // I am not sure why you have done "useValue" with same Service {provide: Login2Service, useClass: Login2ServiceStub }, {provide: Router, useValue: RouterMock } ]块中：

it

我也建议您read this collection of articles specifically written for Unit testing in Angular。您可以找到几个链接，这些链接几乎涵盖了所有基本测试方案。

预期的间谍导航已使用[[''ProjectData / MasterSequence']]调用，但从未调用过

1 个答案: