I want to test that on click of link, modal should open.

I have written following test in spec.ts file

describe('NavbarComponent', () => {
  let p:    NavbarComponent;
  let fixture: ComponentFixture<NavbarComponent>;
  let de:      DebugElement;
  let el:      HTMLElement;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        NavbarComponent
      ],
        imports: [ ng2Bootstrap.Ng2BootstrapModule.forRoot() ]
    });
    fixture = TestBed.createComponent(NavbarComponent);
    p = fixtureponentInstance; 
    de = fixture.debugElement.query(By.css('nav'));
    el = de.nativeElement;
  });
  it('signin should open modal', fakeAsync(() => {
    var signin = <HTMLElement>el.getElementsByClassName("signin-link")[0];
    signin.click();
    tick();
    var temp =<HTMLElement>el.getElementsByClassName("signinmodal")[0];
    expect(["block"]).toContain(temp.style.display);
  }));

I am using fakeasync and tick() as shown in the angular2 test guide

But the above test always fails as Expected [ 'block' ] to contain ''.

Here is the template code

<li><a href="#" class="signin-link" (click)="signinmodal.show()" data-toggle="modal" data-target=".signinmodal">Signin</a></li>

<div class="modal signinmodal" bsModal #signinmodal="bs-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
      ...
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

Edit

I also tried using their click simulator,as described in their test guide

The click() helper function is not one of the Angular testing utilities. It's a function defined in this guide's sample code. All of the sample tests use it. If you like it, add it to your own collection of helpers.

export const ButtonClickEvents = {
   left:  { button: 0 },
   right: { button: 2 }
};
export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void {
  if (el instanceof HTMLElement) {
    el.click();
  } else {
    el.triggerEventHandler('click', eventObj);
  }
}

and then calling click(signin) instead of signin.click(). But still the test failed.

I want to test that on click of link, modal should open.

I have written following test in spec.ts file

describe('NavbarComponent', () => {
  let p:    NavbarComponent;
  let fixture: ComponentFixture<NavbarComponent>;
  let de:      DebugElement;
  let el:      HTMLElement;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        NavbarComponent
      ],
        imports: [ ng2Bootstrap.Ng2BootstrapModule.forRoot() ]
    });
    fixture = TestBed.createComponent(NavbarComponent);
    p = fixture.ponentInstance; 
    de = fixture.debugElement.query(By.css('nav'));
    el = de.nativeElement;
  });
  it('signin should open modal', fakeAsync(() => {
    var signin = <HTMLElement>el.getElementsByClassName("signin-link")[0];
    signin.click();
    tick();
    var temp =<HTMLElement>el.getElementsByClassName("signinmodal")[0];
    expect(["block"]).toContain(temp.style.display);
  }));

I am using fakeasync and tick() as shown in the angular2 test guide

But the above test always fails as Expected [ 'block' ] to contain ''.

Here is the template code

<li><a href="#" class="signin-link" (click)="signinmodal.show()" data-toggle="modal" data-target=".signinmodal">Signin</a></li>

<div class="modal signinmodal" bsModal #signinmodal="bs-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
      ...
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

Edit

I also tried using their click simulator,as described in their test guide

The click() helper function is not one of the Angular testing utilities. It's a function defined in this guide's sample code. All of the sample tests use it. If you like it, add it to your own collection of helpers.

export const ButtonClickEvents = {
   left:  { button: 0 },
   right: { button: 2 }
};
export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void {
  if (el instanceof HTMLElement) {
    el.click();
  } else {
    el.triggerEventHandler('click', eventObj);
  }
}

and then calling click(signin) instead of signin.click(). But still the test failed.

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

Share Improve this question Follow edited May 14, 2017 at 4:22 Santosh asked May 14, 2017 at 3:23 SantoshSantosh 1,83911 gold badge1919 silver badges3737 bronze badges 2

• In the test guide, they call fixture.detectChanges(); – Aluan Haddad Commented May 14, 2017 at 3:30
• I had tried calling it before and after tick, but somehow the test always fails. – Santosh Commented May 14, 2017 at 3:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Update: I've taken a minimum working example of ng2-bootstrap and tried to test it using jasmine unit tests, and I don't think it's going to be possible. The unit tests run inside a cut-down browser window without access to the full style sheet, external dependencies (like bootstrap) etc. These tests are designed to test the logic of your ponent, rather than the rendering and display of a template.

If you want to test this level of ui interaction, you're best of putting it in an E2E test and then using protractor. Then you will have an entire, runnable browser instance and there ng2-bootstrap should work as expected.

https://github./angular/angular-cli/wiki/e2e

Initial answer:

Sorry to ask a potentially dumb question, but isn't your expect the wrong way round? Shouldn't it be:

expect(temp.style.display).toContain("block");

Although that probably won't resolve the issue, it's important to note that expect should operate on the item under test, and in certain scenarios (I'm not sure if this is one of them) can be responsible for resolving promises.

To troubleshoot the actual problem, maybe you should first verify that the click of the sign-in modal is working and that you're actually finding all of the elements on the page. It can sometimes occur that no errors are thrown, but the element isn't found.