Mock Query Params Activated Route with different values

Question

If I have this mock activatedRoute below I can write some tests when type is 'mismatch', but if I want to write some tests where type is 'admin-mismatch'. How do I change the value of the the query params?

        await TestBed.configureTestingModule({
            declarations: [ErrorPageComponent],
            imports: [GraphQLModule, RouterTestingModule],
            providers: [
                Apollo,
                {
                    provide: ActivatedRoute,
                    useValue: {
                        queryParams: of({
                            name: 'John Doe',
                            cacheKey: 'cacheKey',
                            type: 'mismatch'
                        })
                    }
                },
            ]
        }).compileComponents();
    });


    beforeEach(() => {
        fixture = TestBed.createComponent(ErrorPageComponent);
        component = fixture.componentInstance;
        route = TestBed.inject(ActivatedRoute);
        fixture.detectChanges();
    });

score 2 · Answer 1 · answered Jul 19 '21 at 18:17

You can use a Subject or BehaviorSubject, then you can control what is emitted:

describe('', () => {
  const activatedRouteQueryParams = new BehaviorSubject({
    name: 'John Doe',
    cacheKey: 'cacheKey',
    type: 'mismatch'
  });

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ErrorPageComponent],
      imports: [GraphQLModule, RouterTestingModule],
      providers: [
        Apollo,
        {
          provide: ActivatedRoute,
          useValue: {
            queryParams: activatedRouteQueryParams,
          }
        },
      ]
    }).compileComponents();
  });

  it('test', () => {
    activatedRouteQueryParams.next({
      name: 'John Doe',
      cacheKey: 'cacheKey',
      type: 'admin-mismatch',
    });
  });

Mock Query Params Activated Route with different values

1 Answers1