How to use predicate in angular2

Question

I have created a login page using angular2. It has two input field as userName and password. And there is a button in that login. When I'm going to write test case for that loginComponent, had to use predicate for recognize the button. Here is my test case.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { LoginComponent } from './login.component';


export class LoginComponentTest {
  constructor(public loginComponent: LoginComponent){
    this.loginComponent.logIn('Chathura', '1234');

  }
}

describe('LoginComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        LoginComponent
      ],
    })
  });

  const fixture = TestBed.createComponent(LoginComponent);

  const button = fixture.query(predicate: Predicate<DebugElement>, scope?: Function) : DebugElement

});

I'm gonna test by providing input values then click the login button and look what happen next.

I was unable to find correct tutorial to use predicate correctly.

Answer 1

The easiest way to create a Predicate is to use one of the By static methods, i.e. css, directive.

const button = fixture.debugElement.query(By.css('.the-button')).nativeElement;

The By.css let's you pass any css selector. The result of the query will be a DebugElement, so you need to get the nativeElement if you want to interact with the native DOM element.