경로 매개 변수 변경시 ngrx 저장소 작업 디스패치를 테스트하는 방법은 무엇입니까?

케티 자 크리스타

버튼을 클릭하면 ngrx 스토어의 일부 데이터를 표시하는 구성 요소를 테스트하고 있습니다.

버튼을 클릭하면 경로 매개 변수가 변경됩니다.

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

매개 변수 중 하나가 submit_search이면 init에서 라우트 매개 변수의 변경 사항을 구독하고 저장 조치를 발송합니다. 테스트를 실행할 때 텍스트가 기록되지 않습니다.

  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'`
      );
    }));

그러나이 테스트에서는 'dispatch'가 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 매개 변수를 다르게 제공해야합니까?

AliF50

당신이 원하는 것을 조롱 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구독을 시작할 수 있습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

NgRx에서 작동 매개 변수를 얻는 방법은 무엇입니까?

분류에서Dev

Azure CosmosDB 저장 프로시 저는 함수 매개 변수를 더 작은 케이스로 변경합니다.

분류에서Dev

매개 변수로 단위 테스트를 작성하는 방법은 무엇입니까?

분류에서Dev

BitBucket에서 업스트림 저장소를 변경하는 방법은 무엇입니까?

분류에서Dev

스크립트 매개 변수 (폴더 경로)를 변수로 사용하는 방법은 무엇입니까?

분류에서Dev

반복기를 매개 변수로 사용하는 메소드로 동적 디스패치를 사용하는 방법은 무엇입니까?

분류에서Dev

여러 출력 매개 변수로 프로 시저를 작성하는 방법은 무엇입니까?

분류에서Dev

게스트가 로그 아웃 / 종료 / 다시 시작시 테마 저장을 변경하는 방법은 무엇입니까?

분류에서Dev

작업 저장소 디스패치가 정의되지 않은 경우 ngrx 8

분류에서Dev

저장 프로 시저에 출력 매개 변수를 전달하는 방법은 무엇입니까?

분류에서Dev

PHP의 mysqli 저장 프로 시저에서 매개 변수를 검색하는 방법은 무엇입니까?

분류에서Dev

select 문을 입력 매개 변수로 전달하는 저장 프로 시저를 작성하는 방법은 무엇입니까?

분류에서Dev

저장 프로 시저를 테이블 값 함수로 변경하는 방법은 무엇입니까?

분류에서Dev

zf2의 경로에서 매개 변수를 얻는 가장 좋은 방법은 무엇입니까?

분류에서Dev

C #에서 Oracle 저장 프로 시저로 CLOB 매개 변수를 보내는 방법은 무엇입니까?

분류에서Dev

C #에서 Oracle 저장 프로 시저로 CLOB 매개 변수를 보내는 방법은 무엇입니까?

분류에서Dev

다른 매개 변수로 동일한 스프링 배치 작업을 동시에 시작하는 방법은 무엇입니까?

분류에서Dev

Oracle : 세션 매개 변수를 "변경 취소"하는 방법은 무엇입니까?

분류에서Dev

Angular 2 : 경로 매개 변수를 하위 경로로 전달하는 방법은 무엇입니까?

분류에서Dev

JUnit 5에서 JUnitCore로 매개 변수화 된 테스트를 실행하는 방법은 무엇입니까?

분류에서Dev

두 번째 생성이 첫 번째에 의존 할 때 2 개의 매개 변수로 테스트를 작성하는 방법은 무엇입니까?

분류에서Dev

레일에서 경로 매개 변수로 변수를 할당하는 방법은 무엇입니까?

분류에서Dev

사전에 매개 변수가 다른 일반 작업을 저장하는 방법은 무엇입니까?

분류에서Dev

컨트롤러 작업 전에 Laravel 경로 매개 변수에 액세스하는 방법이 있습니까?

분류에서Dev

경로가 레일의 특정 매개 변수에서 true / false를 반환하는지 테스트하는 방법은 무엇입니까?

분류에서Dev

다른 작업 매개 변수로 스프링 배치 작업을 여러 번 실행하는 방법은 무엇입니까?

분류에서Dev

입력 매개 변수 (Varray OF INT)로 프로 시저를 실행하는 방법은 무엇입니까?

분류에서Dev

여러 매개 변수로 길이 계산 결과를 저장하는 방법은 무엇입니까?

분류에서Dev

경로 매개 변수를 VPC 링크 엔드 포인트로 전달하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    NgRx에서 작동 매개 변수를 얻는 방법은 무엇입니까?

  2. 2

    Azure CosmosDB 저장 프로시 저는 함수 매개 변수를 더 작은 케이스로 변경합니다.

  3. 3

    매개 변수로 단위 테스트를 작성하는 방법은 무엇입니까?

  4. 4

    BitBucket에서 업스트림 저장소를 변경하는 방법은 무엇입니까?

  5. 5

    스크립트 매개 변수 (폴더 경로)를 변수로 사용하는 방법은 무엇입니까?

  6. 6

    반복기를 매개 변수로 사용하는 메소드로 동적 디스패치를 사용하는 방법은 무엇입니까?

  7. 7

    여러 출력 매개 변수로 프로 시저를 작성하는 방법은 무엇입니까?

  8. 8

    게스트가 로그 아웃 / 종료 / 다시 시작시 테마 저장을 변경하는 방법은 무엇입니까?

  9. 9

    작업 저장소 디스패치가 정의되지 않은 경우 ngrx 8

  10. 10

    저장 프로 시저에 출력 매개 변수를 전달하는 방법은 무엇입니까?

  11. 11

    PHP의 mysqli 저장 프로 시저에서 매개 변수를 검색하는 방법은 무엇입니까?

  12. 12

    select 문을 입력 매개 변수로 전달하는 저장 프로 시저를 작성하는 방법은 무엇입니까?

  13. 13

    저장 프로 시저를 테이블 값 함수로 변경하는 방법은 무엇입니까?

  14. 14

    zf2의 경로에서 매개 변수를 얻는 가장 좋은 방법은 무엇입니까?

  15. 15

    C #에서 Oracle 저장 프로 시저로 CLOB 매개 변수를 보내는 방법은 무엇입니까?

  16. 16

    C #에서 Oracle 저장 프로 시저로 CLOB 매개 변수를 보내는 방법은 무엇입니까?

  17. 17

    다른 매개 변수로 동일한 스프링 배치 작업을 동시에 시작하는 방법은 무엇입니까?

  18. 18

    Oracle : 세션 매개 변수를 "변경 취소"하는 방법은 무엇입니까?

  19. 19

    Angular 2 : 경로 매개 변수를 하위 경로로 전달하는 방법은 무엇입니까?

  20. 20

    JUnit 5에서 JUnitCore로 매개 변수화 된 테스트를 실행하는 방법은 무엇입니까?

  21. 21

    두 번째 생성이 첫 번째에 의존 할 때 2 개의 매개 변수로 테스트를 작성하는 방법은 무엇입니까?

  22. 22

    레일에서 경로 매개 변수로 변수를 할당하는 방법은 무엇입니까?

  23. 23

    사전에 매개 변수가 다른 일반 작업을 저장하는 방법은 무엇입니까?

  24. 24

    컨트롤러 작업 전에 Laravel 경로 매개 변수에 액세스하는 방법이 있습니까?

  25. 25

    경로가 레일의 특정 매개 변수에서 true / false를 반환하는지 테스트하는 방법은 무엇입니까?

  26. 26

    다른 작업 매개 변수로 스프링 배치 작업을 여러 번 실행하는 방법은 무엇입니까?

  27. 27

    입력 매개 변수 (Varray OF INT)로 프로 시저를 실행하는 방법은 무엇입니까?

  28. 28

    여러 매개 변수로 길이 계산 결과를 저장하는 방법은 무엇입니까?

  29. 29

    경로 매개 변수를 VPC 링크 엔드 포인트로 전달하는 방법은 무엇입니까?

뜨겁다태그

보관