How to find right button using text in angular 2 for unit test case

Issue

I am new to UI test cases. what I am trying to do is to validate text of button in my angular template.

Below are the button controls available in my angular template file

<button type="button" class="btn btn-primary" (click)="staticModal.show()">Show/Hide</button>
&nbsp;&nbsp;
<button type="button" class="btn btn-primary" (click)="filterModal.show()">Filter</button>

Below is my angular test

it('should have button with text show/hide',()=>{
    const debug=fixture.debugElement;
    const native=debug.nativeElement;
    const buttonElem=native.querySelector('button:contains("show/hide")');
    console.log(native);
    expect(buttonElem.textContent).toContain('Show/Hide');
  });

As I have two buttons in my template without any Id and with same class. I am trying to find right button with text value but it is failing with below error "SyntaxError: Failed to execute 'querySelector' on 'Element': 'button:contains("show/hide")' is not a valid selector."

What is the right way to test this scenario.

Edit: I am using Jasmine with karma for testing.

Solution

Providing answer for my own question. I tried below solution and it worked for me. Not sure if this is best approach.

First I updated my HTML code. converted "button" element to "input" type element.

<input type="button" class="btn btn-primary" (click)="staticModal.show()" value="Show/Hide"/>
&nbsp;&nbsp;
<button type="button" class="btn btn-primary" (click)="filterModal.show()">Filter</button>

second I modified my test case as below.

it('should have button with text show/hide',()=>{
    const debug=fixture.debugElement.query(By.css('input[value="Show/Hide"]'));
    const native=debug.nativeElement;
    const buttonElem=native;    
    expect(buttonElem.value).toContain('Show/Hide');
  });

This worked for me.

Answered By - Anil