4

Button looks like this

<button [routerLink]="['/account/recovery','identification']" class="btn btn-default">Back</button>

I want to check if url has redirected to /account/recovery/identification after the button is clicked

If it was an anchor tag solution is provided here. My problem is with button tag.

My test spec looks like this.

beforeEach(async(() => {
        let ne = new NavigationEnd(0, "/account/recovery/otp", null);       // Create a mock instance for navigation end, utilized within OnInit()
        router = {
            navigate: jasmine.createSpy('navigate'),    // to spy on the url that has been routed
            events: new Observable(observer => {        // last router event that occurred
                observer.next(ne);
            }),

        };
        TestBed
            .configureTestingModule({
                imports: [CoreModule],
                declarations: [OtpComponent],
                providers: [
                    {provide: Router, useValue: router},
                    {provide: ActivatedRoute, useValue: router},
                    {provide: Location, useClass: SpyLocation}, FormBuilder
                ],
                schemas: [NO_ERRORS_SCHEMA]
            })
            .overrideComponent(OtpComponent, {
                set: {
                    providers: [
                        {provide: MyModel, useClass: MockModel}
                    ],
                }
            })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(OtpComponent);
        component = fixture.componentInstance;
    });

it('Back button click on OTP screen should redirect to identification screen', async(inject([Location], (location: Location) => {

        fixture.detectChanges();

        let buttonElements = fixture.debugElement.queryAll(By.css('button'));   // fetch all the elements with button tag.

        buttonElements[0].nativeElement.click();

        fixture.detectChanges();
        fixture.whenStable().then(
            () => {
                expect(location.path()).toBe(['/account/recovery', 'identification']);     // check if url is routed to identification page after back button is clicked
            }
        );
    })));

But it does not give me the result I want, Here is what i got :

Chrome 56.0.2924 (Windows 7 0.0.0) OtpComponent Back button click on OTP screen should redirect to identification screen FAILED
        Expected '' to be [ '/account/recovery', 'identification' ].
            at webpack:///src/app/account/registration/otp/otp.component.spec.ts:775:40 <- src/test.ts:124883:37 [ProxyZone]
            at AsyncTestZoneSpec.onInvoke (webpack:///~/zone.js/dist/async-test.js:49:0 <- src/test.ts:98588:39) [ProxyZone]
            at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:76:0 <- src/test.ts:99280:39) [ProxyZone]
            at Zone.run (webpack:///~/zone.js/dist/zone.js:113:0 <- src/test.ts:148355:43) [ProxyZone => ProxyZone]
            at webpack:///~/zone.js/dist/zone.js:535:0 <- src/test.ts:148777:57 [ProxyZone]
Chrome 56.0.2924 (Windows 7 0.0.0): Executed 1 of 147 (1 FAILED) (skipped 146) ERROR (0.96 secs / 0.594 secs)

Even buttonElements[0].nativeElement.click(); does not seem to work because there is no click event registered.

1 Answer 1

5

The answer in the link you shared works for buttons, too. Here's a plnkr to play with. I wish there was a way to statically (no-click) inspect router link on the button. I suppose you could inspect its attributes and check 'ng-reflect-router-link', but that feels dirty. ¯\_(ツ)_/¯

  • Create a lightweight component for test routes (DummyComponent). (You can use it multiple times if testing multiple routes.)
  • Include RouterTestingModule.withRoutes([...]) with the dummy component for the paths you're testing in the test module imports.
  • Import Location and inject it into the test. RouterTestingModule uses a mock location strategy so you can inspect changes.

    @Component({ template: '' })
    class DummyComponent {}
    
    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [AppComponent, DummyComponent],
        imports: [
          RouterTestingModule.withRoutes([
             { path: 'test', component: DummyComponent }
            ])
        ]
      });
    });
    
    describe('app', () => {
      it('should have a test button', inject([Location], (location) => {
        const fixture = TestBed.createComponent(AppComponent);
        const elem = fixture.debugElement;
    
        const button = elem.query(e => e.name === 'button');
        expect(!!button).toBe(true);
        expect(button.nativeElement.textContent.trim()).toBe('CLICK FOR BUBBLES');
    
        button.nativeElement.click();
        fixture.detectChanges();
        fixture.whenStable().then(() => {
          expect(location.path()).toBe('/test');
        });
      }));
    });
    

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.