Dynamically change query params Angular unit test

Question

I have a component that has 2 different states dependent on the query params provided. Here's the 2 query param states:

  const mockLocalQueryParams = {
    Id: Guid.create(),
    customerId: Guid.create(),
  };

  const mockOrganicQueryParams = {
    id1: Guid.create(),
    id2: Guid.create(),
    id3: 1,
    id4: 2,
  };

I'm using mockLocalQueryParams as the default state but I want to change to mockOrganicQueryParams so I can test functionality for that state also

beforeEach(
  waitForAsync(() => {
    TestBed.configureTestingModule({
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            queryParams: of(mockLocalQueryParams),
          },
        },
      ],
    }).compileComponents();
  })
);

I've tried creating a new describe block and TestBed.inject(ActivatedRoute).snapshot.params = of(mockOrganicQueryParams) and other similar things but this undefined.

How can I change the query params for when I want to test mockOrganicQueryParams state?

AliF50 · Accepted Answer · 2022-06-29 13:13:49Z

1

The best way in my opinion is to do it through a BehaviorSubject that you can have a handle on. Something like this:

// !! create a behavior subject here so you can have a handle on it
const mockQueryParams = new BehaviorSubject<any>(mockLocalQueryParams);
beforeEach(
  waitForAsync(() => {
    TestBed.configureTestingModule({
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
           // !! assign the query params as an observable here
            queryParams: mockQueryParams.asObservable(),
          },
        },
      ],
    }).compileComponents();
  })
);

Whenever you want to change the queryParams subscription, you can just do mockQueryParams.next(mockOrganicQueryParams);

answered Jun 29, 2022 at 13:13

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically change query params Angular unit test

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related