So i've looked at many issues online including this one and i'm stumped...

How I have my code set up is that I have my main describe create my testbed ponent, Here I have my mockParams set up for the active route so we can this.route.queryparams.subscribe(..), My problem is I am unable to overwrite the values in a different describe or 'it' block.

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [RouterTestingModule
        })],
      providers: [
        { provide: ActivatedRoute, useValue: mockParams },
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })pileComponents();
}));

Here is an example of me adding a the override in a different NESTED describe block...

beforeEach(() => {
      TestBed.overrideProvider(ActivatedRoute, 
      {useValue: newMockParams});
      TestBedpileComponents();
      fixture = TestBed.createComponent(MyComponent);
      ponent = fixtureponentInstance;
      fixture.detectChanges();
});

It's almost like this doesnt run at all... the new mock params do not change if i re-use mockParams and change the values then it will change the value in the original describe, Do I really have to re-create my ponent in every nested describe? It just doesn't feel right that I would have to do so when the only thing I need to change is the provider, i'm unsure what overrideProvider even does at this point! Any help would be greatly appreciated!

So i've looked at many issues online including this one https://github./angular/quickstart/issues/320 and i'm stumped...

How I have my code set up is that I have my main describe create my testbed ponent, Here I have my mockParams set up for the active route so we can this.route.queryparams.subscribe(..), My problem is I am unable to overwrite the values in a different describe or 'it' block.

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [RouterTestingModule
        })],
      providers: [
        { provide: ActivatedRoute, useValue: mockParams },
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).pileComponents();
}));

Here is an example of me adding a the override in a different NESTED describe block...

beforeEach(() => {
      TestBed.overrideProvider(ActivatedRoute, 
      {useValue: newMockParams});
      TestBed.pileComponents();
      fixture = TestBed.createComponent(MyComponent);
      ponent = fixture.ponentInstance;
      fixture.detectChanges();
});

It's almost like this doesnt run at all... the new mock params do not change if i re-use mockParams and change the values then it will change the value in the original describe, Do I really have to re-create my ponent in every nested describe? It just doesn't feel right that I would have to do so when the only thing I need to change is the provider, i'm unsure what overrideProvider even does at this point! Any help would be greatly appreciated!

• javascript
• angular
• unit-testing
• jasmine
• karma-jasmine

• Did my answer below help? – dmcgrandle Commented Nov 20, 2018 at 2:55

1 Answer 1

Updated with new information provided in ments below.

My suggestion is to change the value returned by route.queryParams. You mentioned in the ments that your ngOnInit() function looks like this:

ngOnInit() {
    this.route.queryParams.subscribe(params => { this.value = params; });
}

If you change the return value from the queryParams observable before running .detectChanges() in each test, this should achieve what you want. For example, something like this:

describe('MyComponent', () => {
    let mockActivatedRoute = {queryParams: of({old: 'test'})};
    let ponent: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let route: ActivatedRoute;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [ ],
            providers: [
                { provide: ActivatedRoute, useValue: mockActivatedRoute },
            ]
        })
        .pileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        ponent = fixture.ponentInstance;
        route = TestBed.get(ActivatedRoute);
    });

    it('ngOnInit should initialize and route params be intial values', () => {
        fixture.detectChanges(); // execute ngOnInit() in ponent
        expect(ponent.value).toEqual({old: 'test'}); // check that value is correct
    });
        it('ngOnInit should initialize and route params be changed values', () => {
        route.queryParams = of({new: 'newTest'/* mocked params */});
        fixture.detectChanges();
        expect(ponent.value).toEqual({new: 'newTest'}); // check that value is correct
    });
});

I tested this all in a stackblitz to be sure this all works error free. :) Here is the link: STACKBLITZ