Angular单元测试：使用构造函数注入测试组件

huangapple
go评论141阅读模式
英文:

Angular Unit Test: testing component with constructor injection

问题

我正在尝试为下面的登录组件编写单元测试。该组件的构造函数中使用了@Inject。我们如何测试带有@Inject构造函数的Angular组件？有人可以帮忙吗？谢谢！

LoginComponent.ts

  1. import { Component, Inject, OnInit } from '@angular/core';
  2. import { OKTA_AUTH } from '@okta/okta-angular';
  3. import { OktaAuth } from '@okta/okta-auth-js';
  5. @Component({
  6.     selector: 'app-login',
  7.     templateUrl: './login.component.html',
  8.     styleUrls: ['./login.component.css']
  9. })
  10. export class LoginComponent implements OnInit {
  11.     isAuthenticated!: boolean;
  12.     userName?: string;
  13.     error?: Error;
  15.     constructor(@Inject(OKTA_AUTH) public oktaAuth: OktaAuth) {  
  16.     }
  18.     async ngOnInit() {
  19.         this.isAuthenticated = await this.oktaAuth.isAuthenticated();
  20.         if (this.isAuthenticated) {
  21.             const userClaims = await this.oktaAuth.getUser();
  22.             this.userName = userClaims.name;
  23.         }
  24.     }
  25.   
  26.     async login() {
  27.         try {
  28.             await this.oktaAuth.signInWithRedirect();
  29.         } catch (err: any) {
  30.             console.error(err);
  31.             this.error = err;
  32.         }
  33.     }
  34.   
  35.     async logout() {
  36.         await this.oktaAuth.signOut();
  37.     }
  38. }

LoginComponent.spec.ts

  1. import { ComponentFixture, TestBed } from '@angular/core/testing';
  2. import { LoginComponent } from './login.component';
  3. import { OktaAuth } from '@okta/okta-auth-js';
  5. describe('LoginComponent', () => {
  6.     let component: LoginComponent;
  7.     let fixture: ComponentFixture<LoginComponent>;
  8.     let authService: OktaAuth;
  10.     beforeEach(async () => {
  11.         await TestBed.configureTestingModule({
  12.             declarations: [LoginComponent],
  13.             providers: [OktaAuth]
  14.         }).compileComponents();
  16.         fixture = TestBed.createComponent(LoginComponent);
  17.         component = fixture.componentInstance;
  18.         authService = TestBed.inject(OktaAuth);
  19.         fixture.detectChanges();
  20.     });
  22.     it('should create', () => {
  23.         expect(component).toBeTruthy();
  24.     });
  25. });

这是错误信息：

  1. Chrome Headless 114.0.5735.133 (Windows 10) LoginComponent should create FAILED
  2. Error: NG0204: Can't resolve all parameters for OktaAuth: (?).
  3. error properties: Object({ code: 204 }) at getUndecoratedInjectableFactory (node_modules/@angular/core/fesm2022/core.mjs:9227:15) at injectableDefOrInjectorDefFactory (node_modules/@angular/core/fesm2022/core.mjs:9217:16)
  4.     at providerToFactory (node_modules/@angular/core/fesm2022/core.mjs:9263:52)      
  5.     at providerToRecord (node_modules/@angular/core/fesm2022/core.mjs:9247:25)       
  6.     at R3Injector.processProvider (node_modules/@angular/core/fesm2022/core.mjs:9144:24)
  7.     at fn (node_modules/@angular/core/fesm2022/core.mjs:8975:59)
  8.     at forEachSingleProvider (node_modules/@angular/core/fesm2022/core.mjs:9318:13)  
  9.     at forEachSingleProvider (node_modules/@angular/core/fesm2022/core.mjs:9315:13)  
  10.     at new R3Injector (node_modules/@angular/core/fesm2022/core.mjs:8975:9)
  11.     at createInjectorWithoutInjectorInstances (node_modules/@angular/core/fesm2022/core.mjs:10591:12)

我一定漏掉了什么。请告诉我我漏掉了什么。提前谢谢。

尝试导入以下两个：

import { OKTA_AUTH } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

英文:

I am trying to write unit test for the login component below. This component has a constructor with @Inject. How do we test an angular component with @Inject in constructor? Can someone help? Thanks!

LoginComponent.ts

  1. import { Component, Inject, OnInit } from &#39;@angular/core&#39;;
  2. import { OKTA_AUTH } from &#39;@okta/okta-angular&#39;;
  3. import { OktaAuth } from &#39;@okta/okta-auth-js&#39;;
  5. @Component({
  6.     selector: &#39;app-login&#39;,
  7.     templateUrl: &#39;./login.component.html&#39;,
  8.     styleUrls: [&#39;./login.component.css&#39;]
  9. })
  10. export class LoginComponent implements OnInit {
  11.     isAuthenticated!: boolean;
  12.     userName?: string;
  13.     error?: Error;
  15.     constructor(@Inject(OKTA_AUTH) public oktaAuth: OktaAuth) {  
  16.     }
  18.     async ngOnInit() {
  19.         this.isAuthenticated = await this.oktaAuth.isAuthenticated();
  20.         if (this.isAuthenticated) {
  21.             const userClaims = await this.oktaAuth.getUser();
  22.             this.userName = userClaims.name;
  23.         }
  24.   }
  25.   
  26.     async login() {
  27.         try {
  28.             await this.oktaAuth.signInWithRedirect();
  29.         } catch (err: any) {
  30.         
  31.         console.error(err);
  32.         this.error = err;
  33.     }
  34.   }
  35.   
  36.     async logout() {
  37.         await this.oktaAuth.signOut();
  38.     }
  40. }

LoginComponent.spec.ts

  1. import { ComponentFixture, TestBed } from &#39;@angular/core/testing&#39;;
  2. import { LoginComponent } from &#39;./login.component&#39;;
  3. import { OktaAuth } from &#39;@okta/okta-auth-js&#39;;
  5. describe(&#39;LoginComponent&#39;, () =&gt; {
  6.     let component: LoginComponent;
  7.     let fixture: ComponentFixture&lt;LoginComponent&gt;;
  8.     let authService: OktaAuth;
  10.     beforeEach(async () =&gt; {
  11.         await TestBed.configureTestingModule({
  12.         declarations: [LoginComponent],
  13.         providers: [OktaAuth]
  14.     }).compileComponents();
  16.     fixture = TestBed.createComponent(LoginComponent);
  17.     component = fixture.componentInstance;
  18.     authService = TestBed.inject(OktaAuth);
  19.     fixture.detectChanges();
  20.     });
  22.     it(&#39;should create&#39;, () =&gt; {
  23.         expect(component).toBeTruthy();
  24.     });
  25. });

Here is the error

  1. Chrome Headless 114.0.5735.133 (Windows 10) LoginComponent should create FAILED
  2. Error: NG0204: Can&#39;t resolve all parameters for OktaAuth: (?).
  3. error properties: Object({ code: 204 }) at getUndecoratedInjectableFactory (node_modules/@angular/core/fesm2022/core.mjs:9227:15) at injectableDefOrInjectorDefFactory (node_modules/@angular/core/fesm2022/core.mjs:9217:16)
  4.     at providerToFactory (node_modules/@angular/core/fesm2022/core.mjs:9263:52)      
  5.     at providerToRecord (node_modules/@angular/core/fesm2022/core.mjs:9247:25)       
  6.     at R3Injector.processProvider (node_modules/@angular/core/fesm2022/core.mjs:9144:24)
  7.     at fn (node_modules/@angular/core/fesm2022/core.mjs:8975:59)
  8.     at forEachSingleProvider (node_modules/@angular/core/fesm2022/core.mjs:9318:13)  
  9.     at forEachSingleProvider (node_modules/@angular/core/fesm2022/core.mjs:9315:13)  
  10.     at new R3Injector (node_modules/@angular/core/fesm2022/core.mjs:8975:9)
  11.     at createInjectorWithoutInjectorInstances (node_modules/@angular/core/fesm2022/core.mjs:10591:12)

I must miss something. Please let me know what I am missing. Thanks in advance.

tried to import both
import { OKTA_AUTH } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

答案1

得分: 1

这是我找到答案的地方：https://github.com/okta-samples/okta-angular-quickstart/blob/main/src/app/app.component.spec.ts

  1. ...
  3. import { OktaAuthStateService, OKTA_AUTH } from '@okta/okta-angular';
  5. describe('AppComponent', () => {
  6.   const authStateSpy = jasmine.createSpyObj('OktaAuthStateService', [], {
  7.     authState$: of({
  8.       isAuthenticated: false
  9.     })
  10.   });
  12.   const authSpy = jasmine.createSpyObj('OktaAuth', ['login']);
  14.   beforeEach(async () => {
  15.     await TestBed.configureTestingModule({
  16.       imports: [
  17.         RouterTestingModule
  18.       ],
  19.       declarations: [
  20.         AppComponent
  21.       ],
  22.       providers: [
  23.         { provide: OktaAuthStateService, useValue: authStateSpy },
  24.         { provide: OKTA_AUTH, useValue: authSpy } // <-- 看看如何提供令牌，但提供自己的存根/模拟？
  25.       ]
  26.     }).compileComponents();
  27.   });
英文:

This is where I ended up finding the answer: https://github.com/okta-samples/okta-angular-quickstart/blob/main/src/app/app.component.spec.ts

  1. ...
  3. import { OktaAuthStateService, OKTA_AUTH } from &#39;@okta/okta-angular&#39;;
  5. describe(&#39;AppComponent&#39;, () =&gt; {
  6.   const authStateSpy = jasmine.createSpyObj(&#39;OktaAuthStateService&#39;, [], {
  7.     authState$: of({
  8.       isAuthenticated: false
  9.     })
  10.   });
  12.   const authSpy = jasmine.createSpyObj(&#39;OktaAuth&#39;, [&#39;login&#39;]);
  14.   beforeEach(async () =&gt; {
  15.     await TestBed.configureTestingModule({
  16.       imports: [
  17.         RouterTestingModule
  18.       ],
  19.       declarations: [
  20.         AppComponent
  21.       ],
  22.       providers: [
  23.         { provide: OktaAuthStateService, useValue: authStateSpy },
  24.         { provide: OKTA_AUTH, useValue: authSpy } // &lt;-- see how you can provide the token, but provide your own stub/mock?  
  25.       ]
  26.     }).compileComponents();
  27.   });

huangapple
  • 本文由 发表于 2023年8月9日 04:19:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76862952.html
  • angular
  • constructor-injection
  • dependency-injection
  • karma-jasmine
  • testing
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定