Angular Testing. Override component's service

component.ts

@Component({
  selector: 'my-component',
  template: '',
  providers: [ComponentService], // <=== component's service
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent implements OnInit, OnDestroy { ... }

angular error during cleanup of component

component.spec.ts


  const windowMock = {
    location: {
      href: null
    }
  };

  const ComponentServiceSpy = {
    ...jasmine.createSpyObj<ComponentService>('ComponentService', [
      'init',
      'orderDomains',
      'destroy',
      'ngOnDestroy' // <=== angular error during cleanup of component
    ]),
    state$: of({
      ok: {
        preloader: false,
        disabled: true,
      },
      cancel: {
        disabled: false,
      },
    } as FormButtonsState),
  };  

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule,
        RouterTestingModule,
        MyTestModule,
      ],
      providers: [
        { provide: ModalService, useValue: modalServiceSpy },
        { provide: WINDOW, useValue: windowMock }
      ],
      declarations: [MyComponent, MyComponentChildrenMockComponent],
    })
      .overrideProvider(ComponentService, { // override
        useValue: ComponentServiceSpy,
      })
      .compileComponents();
  }));

Похожие записи

let-* $implicit in Angular template

Синтаксис let-* позволяет объявить переменную в шаблоне , использования ключа $implicit позволяет устанавливать значение по-умолчанию для объявленной переменной.

29 августа 2018 г. в Angular

Angular. Редирект по условию

Пример условного перенаправления пользователя в зависимости от некого количества

  • 0 - dashboard
  • 1 - карточка
  • 2 и более - список
10 января 2019 г. в Angular

TS. Event bus

Создаётся providedIn: 'root' сервис событий. Затем отправляются события на шину, и если какой-либо слушатель подписан на эти события, он получает уведомления.