web-dev-qa-db-ja.com

ジャスミン単体テスト-未定義のプロパティパイプを読み取れません

私はAngular 6、NgRx 6、RxJS 6。

このようなルートガードがあります-

_import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { IAppState } from '../../../app.state';
import { Store } from '@ngrx/store';

import { SetTenant } from './../../../store/config/config.actions';

@Injectable()
export default class TenantGuard implements CanActivate {
  constructor(private store: Store<IAppState>) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const tenant = route.params['tenant'];

    if (!tenant) {
      return of(false);
    }

    this.store.dispatch(new SetTenant(tenant));
    return of(true);
  }
}
_

ご覧のとおり、this.store.dispatch(new SetTenant(tenant));を介してtenantをストアに追加していました

ただし、これにより、ユーザーがベースルートにアクセスするたびにそのアクションが起動していました。

これに対処するために、tenantが設定されているかどうかを確認するチェックを追加し、そうでない場合のみアクションを起動します-

_import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable, of, combineLatest } from 'rxjs';
import { IAppState } from '../../../app.state';
import { Store, select } from '@ngrx/store';

import { SetTenant } from './../../../store/config/config.actions';
import { getTenant } from '../../../store/config/config.selectors';
import { map } from 'rxjs/operators';

@Injectable()
export default class TenantGuard implements CanActivate {
  constructor(private store: Store<IAppState>) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const tenantFromRoute: string = route.params['tenant'];

    return this.store.pipe(select(getTenant)).pipe(
      map(tenantFromStore => {
        if (!tenantFromRoute) {
          return false;
        }

        if (!tenantFromStore) {
          this.store.dispatch(new SetTenant(tenantFromRoute));
        }
        return true;
      })
    );
  }
}
_

ただし、追加のロジックを導入し、エラー_TypeError: Cannot read property 'pipe' of undefined_が発生しているため、これによりユニットテストが壊れています。

私の仕様ファイルは次のようになります-

_import { TestBed, async } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Store } from '@ngrx/store';
import { StoreModule } from '@ngrx/store';

import { SetTenant } from './../../../store/config/config.actions';

import TenantGuard from './tenant.guard';

describe('TenantGuard', () => {
  it('should return false if a tenant is not present on the route', async(() => {
    const { tenantGuard, props } = setup({});
    let result: boolean;
    tenantGuard.canActivate(props).subscribe(canActivate => (result = canActivate));
    expect(result).toBeFalsy();
  }));

  it('should return true if a tenant is present on the route', async(() => {
    const { tenantGuard, props } = setup({ tenant: 'main' });
    let result: boolean;
    tenantGuard.canActivate(props).subscribe(canActivate => (result = canActivate));
    expect(result).toBeTruthy();
  }));

  it('should dispatch an action to set the tenant in the store', () => {
    const { store, tenantGuard, props } = setup({ tenant: 'foo' });
    const action = new SetTenant('foo');
    tenantGuard.canActivate(props);

    expect(store.dispatch).toHaveBeenCalledWith(action);
  });

  it('should not dispatch an action to set the tenant in the store if the tenant is missing', () => {
    const { store, tenantGuard, props } = setup({});
    tenantGuard.canActivate(props);

    expect(store.dispatch).not.toHaveBeenCalled();
  });

  const setup = propOverrides => {
    TestBed.configureTestingModule({
      imports: [StoreModule.forRoot({})],
      providers: [
        TenantGuard,
        {
          provide: Store,
          useValue: jasmine.createSpyObj('Store', ['dispatch', 'pipe']),
        },
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();

    const props = Object.assign({ params: { tenant: null } }, { params: { ...propOverrides } });

    const tenantGuard = TestBed.get(TenantGuard);
    const store = TestBed.get(Store);

    return { tenantGuard, props, store };
  };
});
_

_jasmine.createSpyObj_にpipeを追加しましたが、進行方法がわかりません。

これについて追加のテストを作成したいのですが、この場合のpipeの使用方法/使用方法のモックアウトに問題があります。

編集-pipeを_jasmine.createSpyObj_に渡さない場合、代わりにエラー_​​TypeError: this.store.pipe is not a function​​_が表示されます

angularjasminerxjsngrx
7
Harry Blue

あなたと同じエラーメッセージが表示されました。コンポーネントにルーターを挿入し、this.router.events.pipe（...）を使用しました...テストではルーターにスタブを使用しました。 routerStubが次のようになる前：

routerStub = {
        navigate: (commands: any[]) => { Promise.resolve(true); },
};

コンポーネントでルーターのナビゲートメソッドが必要になる前に、スタブで定義したことがわかります。ここで、.pipeが使用されている場所よりも監視可能なものを返すeventsプロパティも必要です。 routerStubに以下を追加して修正しました：

routerStub = {
        navigate: (commands: any[]) => { Promise.resolve(true); },
        events: of(new Scroll(new NavigationEnd(0, 'dummyUrl', 'dummyUrl'), [0, 0], 'dummyString'))
};

私の場合、コードを機能させるにはスクロールイベントが必要ですが、イベントがスタブでObservableとして定義され、パイプが認識されるようになりました。

たぶんこれはあなたを助けます...

1
Gerros