问题：

如何为angular2（单元测试）编写登录组件测试

吕高雅

2023-03-14

This is login.component.ts



   
    
    
     
     
         import { Component, OnInit } from '@angular/core';
    import { Router, ActivatedRoute } from '@angular/router';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { CommonModule } from  '@angular/common';


    import { LoginUser } from './loginUser.model'
    import { UserService } from './user.service';
    import { LoaderService } from '../shared/loader.service';

    import 'rxjs/add/operator/toPromise';

    @Component({
        templateUrl: './login.component.html'
    })
    export class LoginComponent implements OnInit {
        errorMessage: string;
        loginForm: FormGroup;
        loginObj = new LoginUser();

        constructor(private userService: UserService, private loaderService: LoaderService, private router: Router, fb: FormBuilder) {
            this.loginForm = fb.group({
                userName: [null, Validators.required],
                password: [null, Validators.required]
            })
            console.log(this.loginForm);
        }

    test() : void{
        console.log("This is a test");
    }
        login(loginObjValue: any): void {
            if (loginObjValue.userName == null || loginObjValue.password == null) {
                console.log('error');
            } else {
                this.loginObj.userName = loginObjValue.userName;
                this.loginObj.password = loginObjValue.password;
                this.loaderService.displayLoader(true);

                this.userService.login(this.loginObj)
                    .then((res) => {
                        console.log("data", res);
                        console.log("$localStorage.currentUser", localStorage);
                        let link = ['customercare/customer-ticket'];
                        this.loaderService.displayLoader(false);

                        this.router.navigate(link);
                    })
                    .catch(error => this.handleError(error));
            }
        }

        private handleError(error: any): Promise<any> {
            this.loaderService.displayLoader(false);

            if (error._body) {
                this.errorMessage = JSON.parse(error._body).error_description;
            }

            console.log('An error occurred', error);
            return Promise.reject(error.message || error);
        }

        ngOnInit(): void {


        }
    }
     UserService.ts的部分代码。请参阅此代码。UserService.ts的部分代码。请参阅此代码。UserService.ts的部分代码。请参阅此代码。UserService.ts的部分代码。请参阅此代码。UserService.ts的部分代码。请参阅此代码。
     @Injectable()
export class UserService {
    private URL = "";

    constructor(private http: Http) { }

    login(loginObj: LoginUser) {

        let body = 'userName=' + loginObj.userName + '&password=' + loginObj.password + '&grant_type=password';

        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');

        return this.http.post(this.URL + '/token', body, { headers: headers })
            .toPromise()
            .then((res: Response) => {
                let data = res.json();
                if (data && data.access_token) {
                    localStorage.setItem('currentUser', JSON.stringify(data));
                }
                return data;
            })
    }

}

     到目前为止我已经写到：我无法调用登录函数。请引导我。
     **

    describe('LoginComponent', () => {
      let component: LoginComponent;
      let UserService:UserService;
      let fixture: ComponentFixture<LoginComponent>;

    beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [ LoginComponent ],
        providers: [
            { provide: UserService, useValue: UserService },
                   ]
      })

      it('should call the login method from the UserService', 
        inject([TestBed, UserService], fakeAsync((tcb: TestBed, mockUserService: UserService) => {
          spyOn(mockUserService, 'login');
    tcb
            .createComponent(LoginComponent)
            .then((fixture: ComponentFixture<LoginComponent>) => {
              tick();
               fixture.detectChanges();
              expect(mockUserService.login).toHaveBeenCalled();
            });
        }))
      );

    });

**
                
    
                
    


            
   


             共1个答案


                        
   

                
    
                    
     匿名用户

                
     

     



                
     
					
     所以我不确定错误是什么，但可能我看到的最大的事情是在创建组件之前没有调用compileComponents。
     beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [ LoginComponent ],
        providers: [
            { provide: UserService, useValue: UserService },
                   ]
      }).compileComponents();
}); <--- also looked to be missing

     这只是我的建议，我并不是为了测试你的方法是否可行而接近机器，但我也会在每个测试之前抓取一个对夹具的引用，并使用它在测试中创建组件。同上，但：
     beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [ LoginComponent ],
        providers: [
            { provide: UserService, useValue: UserService },
                   ]
      }).compileComponents();
}); 

beforeEach(async(() => {
      // components are now compiled
      fixture = TestBed.createComponent(LoginComponent);
}); 

     主要是在创建对它的引用之前。您尝试在测试中重新创建该引用，但您可以在beforeEach中为其赋值并使用该引用。
     而且，您的测试并没有真的做任何我能看到的触发任何要调用的事情。如果这是你的目标，你可以验证它的存在。
      it('should call the login method when the component does something', 
        inject([UserService], ((userService: UserService) => {
          spyOn(userService, 'login');
          let component = fixture.componentInstance;
          component.doSomething();
          expect(userService.login).toHaveBeenCalled();
          });
 }));

     由于您只是在测试函数是否被调用，因此实际上没有必要在异步中包装任何内容。您不是在等待DOM中的响应或其他任何东西，而是在调用组件自己的login（）方法时验证服务上的login（）方法是否确实被调用。如果有任何疑问，您可以抛出一个无害的fixture.detectChanges()，但我认为即使是这样，通常也是为了确保如果您在模板中更改了某些内容，元素已经传播回来。
     老实说，即使是在纯单元测试之外。您可以为UserService编写其他单元测试。如果您想验证LoginComponent的某些方面，我将编写测试，对LoginComponent登录后应该发生变异或存在的任何内容进行断言。（DOM中的文本可能已经更改，等等）。或者如果您只是测试业务逻辑，您可以截取登录调用以返回true或false，并验证doSomething（）的反应是否恰当。

 
  
  相关问题 
  
 
   
    
    使用带有命令行选项的maven跳过单个测试 
    设置ADuser和“用户下次登录时必须更改密码”的问题 
    Active Directory如何模拟用户登录和更改密码 
    电源外壳服务帐户密码更改登录失败 
    当密码包含特殊符号时，使用powershell更改服务的登录帐户 
    JavaFx:如何为一个节点的给定样式类获取对应的样式表？ 
    无法使用 Ansible 通过 SSH 登录到新虚拟机？ 
    如何使用React ES6 webpack导入和导出组件？ 
    单独分级子项目中的测试Spring等级 
    登录页面后如何更改Pentaho 
    如何在 Spring 集成测试之间删除内存中的 h2db？ 
    使用Schedulers. boundedElastic（）时如何正确登录webflow？ 
    Kafka-表演测试 
    Kafka流拓扑测试驱动程序输入输出主题 
    如何一起对Kafka流和生产者API进行单元测试 
    跳过identity server 4登录页面并输入IDP 
    编写可通过 asp.net 标识用户和持有者令牌访问的单个 API 
    如何将社交登录与现有的. Net核心Web API后端和Angular SPA前端与工作OpenIdduce用户/密码和不记名令牌 
    IdentityServer4, .net Core Web Api;在启用社交登录的情况下实施个人用户帐户 
    使用OWIN标识从多个API客户端注册Web API 2外部登录

共有3个答案

浦德明

2023-03-14

热门标签

诸腾

2023-03-14

相关问题

计承德

2023-03-14

所以我不确定错误是什么，但可能我看到的最大的事情是在创建组件之前没有调用compileComponents。

beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [ LoginComponent ],
        providers: [
            { provide: UserService, useValue: UserService },
                   ]
      }).compileComponents();
}); <--- also looked to be missing

这只是我的建议，我并不是为了测试你的方法是否可行而接近机器，但我也会在每个测试之前抓取一个对夹具的引用，并使用它在测试中创建组件。同上，但：

beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [ LoginComponent ],
        providers: [
            { provide: UserService, useValue: UserService },
                   ]
      }).compileComponents();
}); 

beforeEach(async(() => {
      // components are now compiled
      fixture = TestBed.createComponent(LoginComponent);
});

主要是在创建对它的引用之前。您尝试在测试中重新创建该引用，但您可以在beforeEach中为其赋值并使用该引用。

而且，您的测试并没有真的做任何我能看到的触发任何要调用的事情。如果这是你的目标，你可以验证它的存在。

 it('should call the login method when the component does something', 
        inject([UserService], ((userService: UserService) => {
          spyOn(userService, 'login');
          let component = fixture.componentInstance;
          component.doSomething();
          expect(userService.login).toHaveBeenCalled();
          });
 }));

由于您只是在测试函数是否被调用，因此实际上没有必要在异步中包装任何内容。您不是在等待DOM中的响应或其他任何东西，而是在调用组件自己的login（）方法时验证服务上的login（）html" target="_blank">方法是否确实被调用。如果有任何疑问，您可以抛出一个无害的fixture.detectChanges()，但我认为即使是这样，通常也是为了确保如果您在模板中更改了某些内容，元素已经传播回来。

老实说，即使是在纯单元测试之外。您可以为UserService编写其他单元测试。如果您想验证LoginComponent的某些方面，我将编写测试，对LoginComponent登录后应该发生变异或存在的任何内容进行断言。（DOM中的文本可能已经更改，等等）。或者如果您只是测试业务逻辑，您可以截取登录调用以返回true或false，并验证doSomething（）的反应是否恰当。

类似资料：

如何为@KafkaListener编写单元测试？

试图弄清楚我是否可以使用spring kafka和spring kafka测试为@KafkaListener编写单元测试。我的听众课。我的测试类别：我的测试配置类：有什么简单的方法可以做到这一点吗？或者我应该以其他方式测试@KafkaListener？在单元测试中，如何确保在Kafka中收到新消息时调用@KafkaListener。
Java 如何编写单元测试？

问题内容：我有一个Java课。如何进行单元测试？就我而言，我有课做一个二进制和。它需要两个数组，将它们求和，然后返回一个新的二进制数组。问题答案：使用正确的输入定义正常情况下的预期和期望输出。现在，通过声明一个类来实现测试，将其命名为任何东西（通常是类似TestAddingModule之类的东西），并向其添加testAdd方法（即，类似于下面的方法）：编写一个方法，并在其上方添加@T
编写单元测试

我不会告诉你有关后台任务的单元测试的任何内容，因为Hangfire没有添加任何特定方法 (除了 IJobCancellationToken 接口参数)去改变任务。使用您最喜爱的工具，并照常写入单元测试。本节介绍如何测试创建的后台任务。所有的代码示例都使用静态 BackgroundJob 类来告诉你如何做这个或那些东西，只是出于简单演示的目的。但是当你想测试调用的静态方法时，会变得很痛苦。不用担
如何为Spring Boot Controllerendpoint编写单元测试
如何为类型化类编写单元测试？

我一直在学习使用Jest库编写JavaScript/TypeScript代码的单元测试。下面是一个我不知道如何处理的例子。它是用TypeScript输入的——只有两个公共方法和一个构造函数需要service1参数。我想我需要测试两种情况： > 如果函数为空。我没有在代码中看到它的任何实现，也不知道它是如何工作的。我应该把它作为参数传递给这个类的实例吗？我很困惑，在这个特定的例子中，我应该使用
flask单元测试：如何测试已登录用户的请求

问题内容：我正在为我的Flask Web应用程序编写一些单元测试，并且试图测试匿名用户发出的请求和登录用户之间的响应差异。我正在使用扩展程序来实现用户登录/注销。显然，我可以执行匿名请求，但是如何模拟已登录用户的请求？我认为发送标头中的cookie 就足够了，但是它不起作用。会话Cookie值是我从浏览器中的真实登录名获得的值。问题答案： Flask-Login 在会话中寻找，你可以使

如何为angular2（单元测试）编写登录组件测试

共1个答案

相关问题

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档