Угловое тестирование, динамическое изменение параметров ActivatedRoute для разных тестовых случаев

Составная часть:

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent implements OnInit {
  useCase: string;

  constructor(
    private route: ActivatedRoute,
  ) {}

  ngOnInit() {
    this.route.queryParams.subscribe(p => {
      if (p) {
        this.useCase = p.u;
      }
    });
  }
}

Спецификация теста

describe('TestComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      providers: [
        { provide: ActivatedRoute, useValue: ??? }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
    expect(component.useCase).toBeFalsy();
  });

  it('should set useCase variable with query string value', () => {
    fixture.detectChanges();
    // Set different route.queryParams here...
    expect(component.useCase).toBe('success');
  });
});

Использование Angular 6, Karma и Jasmine для модульного тестирования.

Я знаю, что мы можем установить ActivatedRoute для объекта, который будет использоваться во время этого тестирования, как таковой:

providers: [
  { provide: ActivatedRoute, useValue: {
    queryParams: Observable.of({id: 123})
  } }
]

Но это установит значения для всех тестовых случаев. Есть ли способ динамически изменять ActivatedRoute в каждом другом тестовом примере?


unit-testing angular jasmine karma-jasmine angular-test
person stack247    schedule 21.08.2018    source источник

Ответы (3)


arrow_upward
26
arrow_downward

Вы можете получить его с помощью TestBed.get(ActivatedRoute) в функциях it, если хотите сохранить его в переменной. Вы также можете обновить значение.

Из Karma v9.0.0 в новейших версиях angular метод TestBed.get устарел.

person Suresh Kumar Ariya    schedule 21.08.2018
comment
Спасибо Суреш! Это работает. Это так же просто, как TestBed.get(ActivatedRoute).queryParams = of({ id: 1 }); - person stack247; 21.08.2018
comment
ты гений ^^ хаха - person Vitor Kevin; 23.07.2021

arrow_upward
1
arrow_downward

если вы не используете testBed, используйте эту строку кода:

в методе beforeEach макет activatedRoute должен быть определен следующим образом:

activatedRoute = {queryParams: of({id: 1})};

затем в своем методе it обновите активированный маршрут до:

activatedRoute.queryParams = of({id: 2})};
person Ashia Nagi    schedule 11.06.2021

arrow_upward
0
arrow_downward

Есть альтернатива с классом-заглушкой. Следуйте ниже подхода.

Объявить класс-заглушку

class ActivatedRouteStub {
    private _params = new Subject<any>();

    get params() {
        return this._params.asObservable();
    }

    public push(value) {
        this._params.next(value);
    }
}

В вашем файле beforeEach объявите псевдоним для активированного поставщика маршрутов.

beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            imports: [
                RouterTestingModule
            ],
            declarations: [YourComponentComponent],
            providers: [
                {
                    provide: ActivatedRoute,
                    useClass: ActivatedRouteStub
                }
            ]
        })
            .compileComponents();
    }));

И вы можете использовать его где угодно. Ниже пример в этом тесте.

it('should show example, how to set parameters', () => {
        let spy = spyOn(router, 'navigate');
        
        // here we pass the any parameter for return and type the route variable with the stub class
        let route: ActivatedRouteStub = TestBed.inject<any>(ActivatedRoute);
        // you can push the parameters like you desire.
        route.push({id: 0})

        expect(spy).toHaveBeenCalledWith(['not-found'])
    });
person Vitor Kevin    schedule 23.07.2021