CODEWITHSUNDEEP
angulartestingtypescriptkarma-jasmineangular2-testing
Lucas Andrade
Lucas Andrade

Reputation: 4570

Angular 2 tests karma. What exactly to test

I am trying to learn how to create tests for angular 2 (typescript files) using karma-jasmine. My doubt is, to test the component.ts files, I only can test the methods that I call at HTML file or I can test all of then? For example: I have this model file modal.nota.component.ts 

    import { Component, Input, Output, EventEmitter } from '@angular/core';
    import { Nota } from './nota.model'


    @Component({
      moduleId: module.id,
      selector: 'modal-nota',
      templateUrl: 'modal.nota.component.html'
    })
    export class ModalNotaComponent {

      test : boolean = true;

      setFalse(test) {
        this.test = false;
        return test;
      }
  }

And I don't call the method 'setFalse' in my HTML file, but I want to test him. How can I call and test the method in my spec file? modal.nota.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';

import { ModalNotaComponent } from '../modal.nota.component';

describe('Test of test variable', () => {

  let component: ModalNotaComponent;
  let fixture: ComponentFixture<ModalNotaComponent>;
  beforeEach(() => {
    TestBed.compileComponents(); // ModalNotaComponent test instance
    TestBed.configureTestingModule({
      declarations: [ ModalNotaComponent ], // declare the test component
    });

    fixture = TestBed.createComponent(ModalNotaComponent);
    component = fixture.componentInstance;
  });


  it('Should show that the value of test variable is true', () => {
    expect(component.test).toBe(true);
  }); 

  it('Should test setFalse method', () => {
    let r = null;
    let t = true;  
    r = component.setFalse(t);
    expect(r).toBe(false);
  }); 

});

This test is not working. I am getting this errors photo of the errors

Upvotes: 1

Views: 1686

Answers (2)

Lucas Andrade
Lucas Andrade

Reputation: 4570

After some search I found how to call methods and variables from component.ts file, (service, modal, whatever). All you have to do is instantiate the class in your test. Here is the new test file:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';

import { ModalNotaComponent } from '../modal.nota.component';

describe('Test of test variable', () => {

  beforeEach(() => {

    this.modalNota = new ModalNotaComponent();
  });

  it('Should show that the value of test variable is true', () => {
    expect(this.modalNota.test).toBeTruthy()
  }); 

  it('Should test setFalse method', () => {
    let r = null;
    let t = true;  
    r = this.modalNota.setFalse(t);
    expect(r).toBeFalsy()
  }); 

});

Credits to: Live chat Developers Blog - Testing Angular 2 apps Part 2: Dependency Injection and Components

Upvotes: 1

Jim
Jim

Reputation: 4172

After scaffolding out a new Angular 2 project and fiddling with this a bit, I was able to get the test to run successfully. Here are a few things to check:

1. Check Zone.js Version

After the initial scaffold I would run the tests with your code, and I was getting a strange error:

TypeError: Cannot set property 'stack' of undefined

I was then able to fix this by upgrading zone.js from 0.7.2 to 0.7.4 like so:

npm install --save [email protected]

2. Check Your Vars In The "setFalse" Method

After it compiled properly, I was still getting an error, "Expected false to be true". Take a look at your setFalse method:

setFalse(test) {
    this.test = false;
    return test;
}

Note that test and this.test are NOT referring to the same variable. When you say "this.test" it is referring to the class level variable test that is declared above this function. Keep in mind that scoping is different in TypeScript vs JavaScript.

Hopefully this helps. Good luck!

Upvotes: 0

Related Questions