Mock ActivatedRoute with params, data and snapshot.

mockActivatedRoute.ts

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [
            MdToolbarModule,
        ],
        providers: [
            {
                provide: Router,
                useClass: MockRouter,
            },
            {
                provide: ActivatedRoute,
                useValue: {
                    data: {
                        subscribe: (fn: (value: Data) => void) => fn({
                            company: COMPANY,
                        }),
                    },
                    params: {
                        subscribe: (fn: (value: Params) => void) => fn({
                            tab: 0,
                        }),
                    },
                    snapshot: {
                        url: [
                            {
                                path: 'foo',
                            },
                            {
                                path: 'bar',
                            },
                            {
                                path: 'baz',
                            },
                        ],
                    },
                },
            },
        ],
    })
    .overrideComponent(ConversationsComponent, {
        set: {
            template: '',
        }
    });
}));

Whoop!

Thanks!

thanks a lot. you save my day

awesome, thanks a lot, you save a lot of time

Thanks a bunch!

hey, thanks for that. Was wondering if anyone can help to solve my issue. I'm trying to figure out how I can mock route data in case I need to set different value in a specific test (after TestBed has been configured)?

Haven't tested this directly, but I believe you should be able to do something along the lines of:

const myRouteDataFactory = new BehaviorSubject(myDefaultData);

...

                    data: {
                        subscribe: (fn: (value: Data) => void) => fn({
                            myDataKey: myRouteDataFactory.getValue(),
                        }),
                    },

...

// First test here...

...

// Then later, update the factory data before spinning up a second test:
myRouteDataFactory.next(myNewData);

// Second test here..

great, I'll try that and let you know if that works. thanks!

that works great, just in my case I had to change provider a little bit as I'm using pipe, before subscribing to route data. So in my case it looks like this

            provide: ActivatedRoute, useValue: {
              params: of(routeParams),
              data: {
                pipe: () => {
                  return {
                    subscribe: (fn: (value) => void) => fn({
                      myDataKey: routeDataFactory.getValue()
                    })
                  };
                }
              },
              snapshot: {}
            }
          }

Awesome! Glad to know that works 💪

perfect!

Just in case someone plans to mock the paramMap -> params.get() function here you go:

{
  provide: ActivatedRoute,
  useValue: {
	paramMap: Observable.of({
	  get: () => {
		return 10;
	  }
	})
  }
}

Thanks! That's what I neded!