Как проверить отправку действия магазина ngrx на изменение параметров маршрута?

Question

Я тестирую компонент, который отображает некоторые данные из хранилища ngrx при нажатии кнопки.

При нажатии кнопки параметры маршрута меняются

  <button
    class="submit"
    [routerLink]="['/page']"
    [queryParams]="{
      period_start: '01.01.19',
      period_end: '01.01.19',
      submit_search: '->'
    }"
  >
  </button>

Я подписываюсь на изменение в Направьте параметры на init и отправьте действие магазина, если один из параметров - submit_search. При выполнении тестов текст не регистрируется.

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      console.log('Before params.submit_search');
      if (params.submit_search) {
        console.log('In params.submit_search');
        this.store.dispatch(...);
      }
    });
  }

Этот тест знает, что маршрут после щелчка изменился (этот тест пройден):

    it('should set route params to filter params', fakeAsync(() => {
      const filterButtonElement = fixture.nativeElement.querySelector('.submit');
      filterButtonElement.click();
      tick();
      expect(location.path()).toEqual(
        `'/page?period_start=01.01.19&period_end=01.01.19&submit_search=-%3E'`
      );
    }));

Но этот тест говорит, что «диспетчеризация» был вызван 0 раз, поэтому подписка не зарегистрировала изменение маршрута:

describe('SomeComponent', () => {
  let dispatchSpy;
  let location: Location;
  let router: Router;
  let route: ActivatedRoute;
  let component: SomeComponent;
  let fixture: ComponentFixture<SomeComponent>;
  let mockStore: MockStore<State>;
  let mockGetData: MemoizedSelector<State, SomeData[]>;
  const initialState = {};
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        RouterTestingModule.withRoutes([
          {
            path: 'page',
            component: SomeComponent
          }
        ]),
      ],
      declarations: [SomeComponent],
      providers: [
        provideMockStore({ initialState }),
        { provide: ActivatedRoute, useValue: { queryParams: from([]) } }
      ]
    }).compileComponents();
    router = TestBed.get(Router);
    route = TestBed.get(ActivatedRoute);
    location = TestBed.get(Location);
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    mockStore = TestBed.get(Store);
    mockGetData = mockStore.overrideSelector(SomeSelectors.selectData, []);
    router.initialNavigation();
    fixture.detectChanges();
  });
    it('should dispatch store action', fakeAsync(() => {
      dispatchSpy = spyOn(mockStore, 'dispatch');
      const filterButtonElement = fixture.nativeElement.querySelector('.submit');
      filterButtonElement.click();
      tick();
      expect(dispatchSpy).toHaveBeenCalledTimes(1);
    }));
});

Почему подписка не сработала? Должен ли я предоставлять параметры ActivatedRoute по-другому?

Answer 1

Похоже, вам нужно смоделировать ActivatedRoute на то, что вы хотели бы.

Измените значение ActivatedRoute на такое, надеюсь, вас разблокируют.

  import { of } from 'rxjs';
  //.....
  providers: [.... 
              {
                 provide: ActivatedRoute, 
                 useValue: { queryParams: of({ submit_search: 'hello', })
               }],

Теперь, чтобы получить способ изменить значение queryParams, вы можете сделать:

let dispatchSpy;
let queryParamsValue = new BehaviorSubject({ submit_search: 'hello', });
....
// bind this behavior subject to queryParams in the provider
  useValue: { queryParams: queryParamsValue }

Затем в ваших тестах вы можете сделать, queryParamsValue.next({ ... });, чтобы изменить значение того, что queryParams и начать подписку.