Question

如何模拟角度服务类的属性（Jasmine / Karma）

2020-09-28

8924

angular jasmine angular6 karma-jasmine spy

我试图从我的服务中模拟 currentOrganizationMessageSource ，但收到以下错误：

this.OrganizationService.currentOrganizationMessageSource.subscribe 不是一个函数

我尝试使用 spyOnProperty，然后我得到 currentOrganizationMessageSource 不是一个属性

类：

export class OrganizationEditComponent implements OnInit {

  feedback: any = {};
  appOrgs: OrganizationDataModel;
  organizationLocationTableTitle: string;


  constructor(
    public route: ActivatedRoute,
    private router: Router,
    private orgService: OrganizationService) {
  }


  ngOnInit() {
    this.loadOrganisation();
  }

  private loadOrganisation()
  {
    this.orgService.currentOrganizationMessageSource.subscribe(
      org => this.appOrgs = org);
      this
      .route
      .params
      .pipe(
        map(p => p.id),
        switchMap(id => {
          if (id === 'new') { return of(this.appOrgs); }
          if (id != null) {
            return this.orgService.findByOrganizationsId(id);
          }
        })
      )
      .subscribe(orgs => {
          this.orgService.changeMessage(orgs);
          this.appOrgs = orgs;
          this.feedback = {};
        },
        err => {
          this.feedback = {type: 'warning', message:'Error'};
        }
      );
  }

服务：

export class OrganizationService {

  private OrganizationMessageSource = new BehaviorSubject( new OrganizationDataModel());
  currentOrganizationMessageSource = this.OrganizationMessageSource.asObservable();


  changeMessage(appOrganization: appOrganizationDataModel) {
    this.appOrganizationMessageSource.next(appOrganization);
  }
}

测试规范类：

fdescribe('OrganizationEditComponent', () => {
  let component: OrganizationEditComponent;
  let fixture: ComponentFixture<OrganizationEditComponent>;
  let activatedRoutes: any = {};


  beforeEach(async(async () => {
    const OrganizationService: OrganizationService = jasmine.createSpyObj('OrganizationService', ['currentOrganizationMessageSource']);
    await TestBed.configureTestingModule({
      declarations: [ OrganizationEditComponent ],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRoutes },
        { provide: Router, useValue: {url: ''}},
        { provide: OrganizationService, useValue: OrganizationService },
      ],      
      imports: [ FormsModule ] ,
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    })
    .compileComponents();
    // component.ngOnInit();
    fixture = TestBed.createComponent(OrganizationEditComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  function givenServicesAreMocked() {
    const spy = TestBed.get(OrganizationService);
    // let mockService = jasmine.createSpyObj(OrganizationService, ['currentOrganizationMessageSource']);
    // mockService.currentOrganizationMessageSource.and.returnValue('');
    // spyOnProperty(OrganizationService, "OrganizationMessageSource").and.returnValue([]);
    // OrganizationService.currentOrganizationMessageSource = () => {
    //   return [];
    // };
  }
});

Answer 1

您的想法是正确的，但您无法使用 createSpyObj 模拟属性，只能模拟方法。

import { of } from 'rxjs';
....
// the 2nd argument is for public methods, not properties
    const OrganizationService: OrganizationService = jasmine.createSpyObj('OrganizationService', ['changeMessage']);
// attach currentOrganizationMesageSource as a property to OrganizationService and mock the value
OrganizationService.currentOrganizationMessageSource = of(/* Mock the value here */);
// keep everything else the same

希望这能奏效。

您还需要正确模拟 ActivatedRoute 和 Router 。对于路由器，只需将 RouterTestingModule 添加到 imports 数组即可。它由 Angular 提供，在测试注入路由器的组件/服务时很有用。

Answer 2

您可以尝试使用此 createMockService 方法，该方法基于 ts-mockery lib

import { Mock, Mockery } from 'ts-mockery';

interface Stub {
  [key: string]: any;
}

export function createMockService<T>(service: Type<T>, stubs?: Stub) {
  Mockery.configure('jasmine');
  const mockedFunctions = stubs ? stubs : {};
  if (!stubs) {
    for (const key in service.prototype) {
      mockedFunctions[key] = () => null;
    }
  }
  return {
    provide: service,
    useValue: Mock.of<Type<T>>(mockedFunctions)
  };
}

然后您可以像这样使用它

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [SomeModule, OtherModule],
      declarations: [SomeComponent, MockComponent(OtherComponent)],
      providers: [createMockService(OrganizationService)]
    }).compileComponents();
  }));

这与您的问题无关，但请注意 ng-mocks lib 中的 MockComponent，这是封装您的 karma 测试的正确方法，从而无需使用 [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]，这是一种不好的做法。

这里有一个示例，您需要使用 rxjs 模拟返回的值操作员

import { of } from 'rxjs';
const RESULT = [{id: 1, name:"test"},{id: 2, name:"toto"}];
beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [SomeModule, OtherModule],
      declarations: [SomeComponent, MockComponent(OtherComponent)],
      providers: [createMockService(OrganizationService, { yourMethod: () => of(RESULTS) })]
    }).compileComponents();
  }));

通过这种方式，您的模拟服务将始终非常容易被模拟。

Answer 3

使用 of 运算符。

import { of } from 'rxjs';

使用前定义 orgService：

 let orgService : KhojiOrganizationService;

将其添加到 beforeach：

orgService= TestBed.get(KhojiOrganizationService);

测试用例：

it('should fetch data', () => {
   spyOn(orgService, 'currentkhojiOrganizationMessageSource').and.returnValue(of('test Data'));
   component.ngOnInit();
   expect(component.appOrgs).toEqual('test Data');
});

例如，我在 of 运算符内传递 string 。您可以在其中传递 Object / array of object ，并根据您的数据模型更改期望。