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();
  }));

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

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

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

Upload файла в Angular по клику кнопки

Создано простейшее nestjs приложение, принимающее файлы. Выбор и отправка файла по клику подразумевает, что на форме отсутствует input для файла. Отправка запроса осуществляется с отслеживанием прогресса.

Angular dependency injection

Определение Provider (useClass, useValue, useFactory ), Injector. Декоратор @Inject, ключ multi: true

13 ноября 2018 г. в Angular

Вставить <script> в Angular компонент

Добавление сторонних скриптов в Angular по запросу. Как известно, добавить скрипт через шаблон невозможно. Представлено решение как это сделать программно.

15 ноября 2019 г. в Angular