Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mock ActivatedRoute with params, data and snapshot.
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: '',
}
});
}));
@jacksoncharles
Copy link

jacksoncharles commented Oct 18, 2017

Thanks, helped a lot :-)

@LexNetAT
Copy link

LexNetAT commented Feb 19, 2018

Wanted, found - Thanks!

@syedirfan7
Copy link

syedirfan7 commented May 21, 2018

thank you very much

@alanent
Copy link

alanent commented Jun 14, 2018

@marksyzm
Copy link

marksyzm commented Jul 24, 2018

I am also a grateful person :D

@DonkeyKongJr
Copy link

DonkeyKongJr commented Aug 24, 2018

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;
	  }
	})
  }
}

@elcordova
Copy link

elcordova commented Aug 30, 2018

thanks a lot!

@sasa-cj-jovanovic
Copy link

sasa-cj-jovanovic commented Oct 19, 2018

Thanks a bunch :-)

@michael-mckenna
Copy link

michael-mckenna commented Dec 6, 2018

Whoop!

@rafaelji
Copy link

rafaelji commented Feb 18, 2019

Thanks!

@spannozzo
Copy link

spannozzo commented May 2, 2019

thanks a lot. you save my day

@hlpupo
Copy link

hlpupo commented Jul 7, 2019

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

@Zory1
Copy link

Zory1 commented Nov 14, 2019

Thanks a bunch!

@arozwalak
Copy link

arozwalak commented Jun 18, 2020

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)?

@benjamincharity
Copy link
Author

benjamincharity commented Jun 18, 2020

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..

@arozwalak
Copy link

arozwalak commented Jun 18, 2020

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

@arozwalak
Copy link

arozwalak commented Jun 18, 2020

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: {}
            }
          }

@benjamincharity
Copy link
Author

benjamincharity commented Jun 18, 2020

Awesome! Glad to know that works 💪

@hpmartini
Copy link

hpmartini commented Aug 12, 2020

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment