CODEWITHSUNDEEP
javascripthtmlunit-testingtypescriptangular
BWG
BWG

Reputation: 324

Angular2 component unit test

I am trying to understand more about Angular2 unit testing. Currently I am unable to get a count of a particular element in my component html template.

My component

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'cl-header',
  templateUrl: 'cl-header.component.html',
  styleUrls: ['cl-header.component.css']
})
export class ClHeaderComponent implements OnInit {
  headerTitle: string = 'Some Title';
  constructor() {}

  ngOnInit() {
  }

}

The component html template

<nav class="navbar navbar-default" role="navigation">
  <ul class="nav navbar-nav">
    <li><a href="#" class="fa fa-bars fa-2x"></a></li>
    <li><a href="http://localhost:91/UserHome/" class="fa fa-home fa-2x no-padding"></a></li>
  </ul>
  <div class="nav navbar-text-center">{{headerTitle}}</div>
  <a href="#" class="navbar-brand pull-right">
    <img src="app/components/cl-header/shared/logo.png" height="28px" alt="logo" />
  </a>
  <i>testtext</i>
</nav>

My Spec File

import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
  injectAsync
} from '@angular/core/testing';

import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';

import { ClHeaderComponent } from './cl-header.component';

describe('Component: ClHeader', () => {
  it('should display header title: "Some Title"', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(ClHeaderComponent).then((fixture) => {
      fixture.detectChanges();

      var compiled = fixture.debugElement.nativeElement;

      //WORKING
      //To check that a given piece of text exists in the html template
      //expect(compiled.innerHTML).toContain('ul');
      //To check whether a given element type contains text
      //expect(compiled.querySelector('div')).toHaveText('Some Title');
      //END WORKING

      //NOT WORKING - ALWAYS RETURNS SUCCESS NO MATTER WHAT THE TOEQUAL COUNT IS          
      //To check that a given element by type exists in the html template
      expect(compiled.querySelector('div').length).toEqual(5);
    });
  }));
});

No matter what I set the toEqual expression to below: expect(compiled.querySelector('div').length).toEqual(5);

The test will always return true.

Does anyone have any advice on how to accurately get a count of a given element type in a component html template?

Thanks

Upvotes: 2

Views: 2411

Answers (1)

BWG
BWG

Reputation: 324

Thank you for your advice.

Whilst compiled.querySelector('div') did not throw an answer (using the Angular Cli seed and vsCode) it was indeed a caching issue as I am now able to return the correct element count using compiled.querySelectorAll('div')

I think my confusion arose due to the caching as I had originally tried querySelectorAll.

Ps. I couldn't set any comments as an answer so I had to set it answered by myself.

Upvotes: 1

Related Questions