8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何使用 Jest+jest-auto-spies 监视公共领域

joseville 3月前

94 0

我有这个试图模拟的 Angular 服务:@Injectable({ providedIn: 'root',})export class NotificationsService { private _notifications = new Subject (); 民众

我正在尝试模拟这个 Angular 服务:

@Injectable({
  providedIn: 'root',
})
export class NotificationsService {
  private _notifications = new Subject<Notification>();
  public notifications: Observable<Notification> = this._notifications.asObservable();
  public crudNotifications: Observable<CrudNotification> = this._notifications.asObservable().pipe(
    filter(notification => notification.notificationType === 'crud-notification'),
    map(notification => notification as CrudNotification)
  );
//....
}

我刚刚将其迁移到 Jest,并试图弄清楚当我的测试服务尝试访问时如何模拟返回自定义可观察对象 NotificationsService.crudNotifications

目前,我有这个:

describe('OrganizationUsersService', () => {
  let organizationUsersService: OrganizationUsersService;
  let crudNotifications!: Subject<CrudNotification>;
  let notificationServiceMock!: Spy<NotificationsService>
  let storeMock!: Spy<Store>;
  let httpTestingController! :HttpTestingController;
  
  beforeEach(()=>{
    

    TestBed.configureTestingModule({
      providers:[
      {provide: NotificationsService, useValue: createSpyFromClass(NotificationsService)},
      {provide: Store, useValue:     createSpyFromClass(Store)  },
      {provide: Router, useValue:     createSpyFromClass(Router)  },
      provideHttpClient(),
      provideHttpClientTesting(),
      ]
    })
    httpTestingController = TestBed.inject(HttpTestingController);
    notificationServiceMock = TestBed.inject<any>(NotificationsService);
    storeMock = TestBed.inject<any>(Store);

    //Common mocked stuff behavior for every methods here    
    crudNotifications = new Subject<CrudNotification>();
    notificationServiceMock.crudNotifications = crudNotifications.asObservable();

    storeMock.dispatch.mockReturnValue(of());
    storeMock.select.mockReturnValue(of({ id: 'some-id' }));

    //Finally create the service to test:    
    organizationUsersService = TestBed.inject(OrganizationUsersService);
  })

    fit('should refresh the store when the backend inform a new role attribution has been added for the current organization id', fakeAsync(() => {
    //Arrange
    organizationUsersService.initialize(); //Required to register

    //Act
    crudNotifications.next({
      dataType: 'organization.role-attribution',
      operationType: 'add',
      id: 'some-id',
      notificationType: 'crud-notification',
    });
    tick();

    //Assert
    httpTestingController.expectOne(environment.backendUrl + 'some/stuff').flush({});
    httpTestingController.expectOne(environment.backendUrl + 'some/other/stuff').flush({});

    expect(storeMock.dispatch).toHaveBeenCalledWith(expect.any(SetLoadingAction));
    organizationUsersService.dispose();
  }));
}));

这不起作用,因为我尝试设置的可观察对象没有启用 Spy 方法。我尝试过这个:

notificationServiceMock.crudNotifications.mockReturnValue(crudNotifications);

但公共字段上不存在 mockReturnValue 方法。

有没有办法在公共领域模拟价值?

帖子版权声明 1、本帖标题:如何使用 Jest+jest-auto-spies 监视公共领域
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由joseville在本站《angular》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 将 angular 版本从 11 升级到 17.3.8 后,无论在 @NgModule 中使用入口组件,我的代码中都会抛出错误行。因此,运行时所有 npm 模块都会抛出错误...

    将 angular 版本从 11 升级到 17.3.8 后,我的代码中无论在 @NgModule 中使用入口组件的地方都会抛出错误行。因此,在本地运行它时,它会在所有 npm 模块中抛出错误。

    import { NgModule } from '@angular/core';
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    import { CommonModule } from '@angular/common';
    import { Ng2SmartTableModule } from 'ng2-smart-table';
    import { ThemeModule } from '../../@theme/theme.module';
    import { FormsModule } from '@angular/forms';
    import { UsersComponent } from './users.component';
    import { NbCardModule, NbButtonModule, NbSelectModule, NbInputModule, NbSpinnerModule } from '@nebular/theme';
    import { AddUserComponent } from './add-user/add-user.component';
    import { EditUserComponent } from './edit-user/edit-user.component';
    import { DeleteUserComponent } from './delete-user/delete-user.component';
    
    const COMPONENTS = [
      UsersComponent,
      AddUserComponent,
      EditUserComponent,
      DeleteUserComponent,
    ];
    
    const ENTRY_COMPONENTS = [
      AddUserComponent,
      EditUserComponent,
      DeleteUserComponent,
    ];
    
    const MODULES = [
      CommonModule,
      ThemeModule,
      NgbModule,
      NbButtonModule,
      NbSelectModule,
      NbInputModule,
      NbCardModule,
      Ng2SmartTableModule,
      FormsModule,
      NbSpinnerModule
    ];
    
    @NgModule({
      imports: [...MODULES],
      declarations: [...COMPONENTS,],
      entryComponents: [...ENTRY_COMPONENTS]
    })
    export class UsersModule { }
    
返回
作者最近主题: