Question

我有一个 Angular 服务方法，它使用另一个服务进行 api 调用。在调用成功和订阅内部之后，我调用了一些方法，例如notifySucess，发出新值...

我的问题是如何测试订阅中的代码块，例如期望 notifySucess 已被调用。我在订阅中设置了一个断点，但代码执行并没有就此停止。

对于测试组件，我知道需要应用“fixture.detectChanges()”方法。对于服务测试，有没有类似的机制？

resource.service.ts

@Injectable({
  providedIn: 'root',
})
export class ResourceService {
  constructor(
    private http: HttpClient,  
  ) {}

  putData(newData: Data): Observable<Data> {
    return this.http.put<Data>('/api/put-endpoint', newData);
  }
}

store.service.ts

@Injectable({
  providedIn: 'root',
})
export class StoreService {
  constructor(
    private resource: ResourceService,
    private notificationService: NotificationService,
  )

  saveChanges(newData: Data) {
    this.resourceServie.putData(newData).subscribe(() => {
      this.notificationService.notifySuccess('Save changes successfully');
      // do something else
  }
}

store.service.spec.ts

describe('StoreService', () => {
  let storeService: StoreService;
  let resourceService: jasmine.SpyObj<ResourceService>;
  let notificationService: jasmine.SpyObj<NotificationService>;

  notificationService = jasmine.createSpyObj('NotificationService', ['notifySuccess']);
  resourceService = jasmine.createSpyObj('ResourceService', ['putData']);

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        { provide: ResourceService, useValue: resourceService },
        {
          provide: NotificationService,
          useValue: notificationService,
        },
      ],
    });
  });


  it('should saveChanges', () => {
    const newData: Data = {foo: bar};
    resourceService.putData.and.returnValue(of(newData));

    storeService.putData(newData);
    expect(resourceService.putData).toHaveBeenCalledWith(newData); // PASS

    expect(notificationService.notifySuccess).toHaveBeenCalledWith(Save changes successfully); // FAIL as the code block inside the subscription does not run
  });
})

Answer 1

您的间谍需要返回一些触发订阅的值。您可以阅读有关间谍的更多高级信息here 您需要使用：

const newData: Data = {foo: bar};
resourceService = spyOn(resourceService,'putData').and.returnValue(newData);

代替：

resourceService = jasmine.createSpyObj('ResourceService', ['putData']);

你也可以看到类似的帖子 - Angular - unit test for a subscribe function in a component

尝试以这种方式实现 store.service.spec.ts：

describe('StoreService', () => {
  let storeService: StoreService;
  let resourceService: ResourceService;
  let notificationService: NotificationService;

const newData: Data = {foo: bar};
resourceService = spyOn(resourceService,'putData').and.returnValue(newData);
resourceService = spyOn(notificationService,'notifySuccess').and.returnValue('Save changes successfully');

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [],
    });

 resourceService= TestBed.inject(ResourceService);
 notificationService= TestBed.inject(NotificationService);
 storeService = TestBed.inject(storeService);
  });

  it('should saveChanges', () => {
storeService.saveChanges(newData);

expect(resourceService.putData).toHaveBeenCalledWith(newData); 
expect(notificationService.notifySuccess).toHaveBeenCalledWith(Save changes successfully); /
  });
})

如何在 Angular 服务的可观察订阅中测试代码块

1 个答案: