Angular Unit Test：如果构造函数将 Globals.ts 文件作为参数，如何创建组件实例

Posted 2023-03-16

【中文标题】Angular Unit Test：如果构造函数将 Globals.ts 文件作为参数，如何创建组件实例

【英文标题】：Angular Unit Test: How to create component instance if constructor takes Globals.ts file as an argument

【发布时间】：2021-12-13 13:29:03

【问题描述】：

我正在尝试为我的 Angular 6 应用程序的登录组件编写单元测试。

login.component.ts 文件有如下构造函数

constructor(public global: Globals, private appService: AppService ) 

这里的 Globals 是一个普通的 ts 文件，它有一些跨组件使用的全局函数。 AppService 是一种服务。

我当前的 spec.ts 文件

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

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      declarations: [ LoginComponent ],
      imports:[
        FormsModule,
        ReactiveFormsModule,
      ],
      providers:[
        AppService
      ]
    )
    .compileComponents();
  ));
   beforeEach(() => 
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  );

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

这里的组件实例未定义。

谁能指导如何为此案例创建 TestBed 配置模块并创建组件的实例？

【参考方案1】：

This 是学习测试的绝佳资源。

对于你的情况，我会模拟 Globals 和 AppService 的公共方法。

describe('LoginComponent', () => 
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let mockGlobals: jasmine.SpyObj<Globals>;
  let mockAppService: jasmine.SpyObj<AppService>;

  beforeEach(async(() => 
    mockGlobals = jasmine.createSpyObj('Globals', [/*public methods you want to mock go here as an array of strings */]);
    mockAppService = jasmine.createSpyObj('AppService', [/ *public methods you want to mock go here as an array of strings */]);
    TestBed.configureTestingModule(
      declarations: [ LoginComponent ],
      imports:[
        FormsModule,
        ReactiveFormsModule,
      ],
      providers:[
        // provide mocks when component wants actual services
         provide: Globals, useValue: mockGlobals ,
         provide: AppService, useValue: mockAppService 
      ]
    )
    .compileComponents();
  ));
   beforeEach(() => 
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  );

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

createSpyObj 有很多签名，你可以做更多的研究。我提供的链接还显示了如何模拟依赖项的其他方法。