zoukankan      html  css  js  c++  java
  • [Angular & Unit Testing] TestBed.get vs Injector

    Both what "TestBed.get" & "injector" trying to do is get service for the test component. 

    But there is some diffenece which determined when use which.

    Register the service: 

    You need to mock the service, not using the real service!

    You can use mock class, or just an object.

    userServiceStub = {
      isLoggedIn: true,
      user: { name: 'Test User'}
    };
    TestBed.configureTestingModule({
       declarations: [ WelcomeComponent ],
    // providers:    [ UserService ]  // NO! Don't provide the real service!
                                      // Provide a test-double instead
       providers:    [ {provide: UserService, useValue: userServiceStub } ]
    });

    "Root Injector"

    You may be able to get the service from the root injector via TestBed.get. This is easier to remember and less verbose. But it only works when Angular injects the component with the service instance in the test's root injector. 

    // UserService from the root injector
    userService = TestBed.get(UserService);

    "Injected service for Component"

    // UserService actually injected into the component
    userService = fixture.debugElement.injector.get(UserService);

    Code Example:

    beforeEach(() => {
      // stub UserService for test purposes
      userServiceStub = {
        isLoggedIn: true,
        user: { name: 'Test User'}
      };
    
      TestBed.configureTestingModule({
         declarations: [ WelcomeComponent ],
         providers:    [ {provide: UserService, useValue: userServiceStub } ]
      });
    
      fixture = TestBed.createComponent(WelcomeComponent);
      comp    = fixture.componentInstance;
    
      // UserService from the root injector
      userService = TestBed.get(UserService);
    
      //  get the "welcome" element by CSS selector (e.g., by class name)
      de = fixture.debugElement.query(By.css('.welcome'));
      el = de.nativeElement;
    });
    
    it('should welcome the user', () => {
      fixture.detectChanges();
      const content = el.textContent;
      expect(content).toContain('Welcome', '"Welcome ..."');
      expect(content).toContain('Test User', 'expected name');
    });
    
    it('should welcome "Bubba"', () => {
      userService.user.name = 'Bubba'; // welcome message hasn't been shown yet
      fixture.detectChanges();
      expect(el.textContent).toContain('Bubba');
    });
    
    it('should request login if not logged in', () => {
      userService.isLoggedIn = false; // welcome message hasn't been shown yet
      fixture.detectChanges();
      const content = el.textContent;
      expect(content).not.toContain('Welcome', 'not welcomed');
      expect(content).toMatch(/log in/i, '"log in"');
    });
  • 相关阅读:
    C++ 动态库导出函数名“乱码”及解决
    ASP.NET 4.5 Bundle组件(捆绑、缩小静态文件)
    MVC4 + WebAPI + EasyUI + Knockout-授权代码维护
    关于Grunt可视化的尝试
    Object-c学习之路三(@class与#import的区别)
    2.1 以指定的次序返回查询结果
    进程序名得到进程ID和句柄与进程的公司名(使用快照和GetPeFileCompany和VerQueryValueW等函数)
    在资源里面画出你的界面
    VS2008下WinRar源码生成dll和 lib总结
    进程占用百分百CPU不卡(从未试过,当别的程序运行的时候,当前程序还会运行吗?)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7647351.html
Copyright © 2011-2022 走看看