Angular Unit test on ngClass and ngStyle Binding

 Angular Unit test on ngClass and ngStyle Binding

Please see below Video for writing angular unit test

Angular Unit test on property binding

  Unit test on property binding

Interpolation is a special syntax that Angular converts into property binding (pair of square bracket). It's a convenient alternative to property binding. 

Another major difference is that to set an element property to a non-string data value, we must use property binding.

Please see below video for writing angular unit test

Angular Unit test on interpolation

 Angular Unit test on interpolation

Interpolation is a technique that allows the user to bind a value to a UI element. Interpolation binds the data one-way. This means that when value of the field bound using interpolation changes, it is updated in the page as well. It cannot change the value of the field.

Return type of interpolation is always a string.

Please see below video for writing angular unit test

SpyOn Private Method in angular unit test

SpyOn Private Method in angular unit test

Please find below video

Call Private Method and private variable in angular unit test

  Call Private Method and private variable in angular unit test 

Please find below video 

Debug Element & DOM events in angular unit test

Debug Element & DOM events in angular unit test

DebugElement is an Angular class that contains all kinds of references and methods relevant to investigate an element as well as component fixture.debugElement.query(By.css(‘#h1’))

Instead of creating an HTML element tree, Angular creates a DebugElement tree that wraps the native elements for the runtime platform.

 The nativeElement property unwraps the DebugElement and returns the platform-specific element object.

nativeElement returns a reference to the DOM element.

triggerEventHandler is a function that exists on Angular's DebugElement.

https://angular.io/api/core/DebugElement

you can learn more on it from below video

Change detection in angular unit test | Angular unit test case Tutorials with Jasmine

 Change detection in angular unit test | Angular unit test case Tutorials with Jasmine

Change Detection is the backbone of the Angular framework, and each component has its own change detector.

Angular can detect when data changes in the component, and can re-render the view to display the updated data. Angular makes sure that data in the component and the view are always in sync with each other.

Change detection means updating the view whenever data changed.

You can learn more on it from below video

SpyOn to mock and Stub methods in angular unit test

  SpyOn to mock and Stub methods in angular unit test 

Jasmine Spies help  us to mock the execution of the Angular method.

It’s a easy way to check a method was called or not, without leaving Subject Under Test(SUT).

We can chain the spyOn method to get dummy return value using .and.returnvalue()

spyOn can call the original function using .and.callThrough().

Stub: a dummy piece of code that lets the test run, but you don't care what happens to it.

Mock: a dummy piece of code, that you VERIFY is called correctly as part of the test.

Spy: a dummy piece of code, that intercepts some calls to a real piece of code, allowing you to verify calls without replacing the entire original object.

You can learn more on it from below video

TestBed and Component Fixture | Angular unit test case Tutorials with Jasmine & Karma

  TestBed and Component Fixture | Angular unit test case Tutorials with Jasmine & Karma

The Angular Test Bed (ATB) is a higher level Angular Only testing framework that allows us to easily test behaviors that depend on the Angular Framework.

We still write our tests in Jasmine and run using Karma but we now have a slightly easier way to create components, handle injection, test asynchronous behaviour and interact with our application.

When to Use ATB

It allows us to test the interaction of a directive or component with its template.

It allows us to easily test change detection.

It provide methods to create components and services for unit test case.

It allows us to test and use Angular’s DI framework.

It allows us to test using the NgModule configuration we use in our application.

It allows us to test user interaction via clicks and input fields

You can learn more on it from below video

Arrange-Act-Assert(AAA) Pattern | Angular unit test case Tutorials with Jasmine & Karma

  Arrange-Act-Assert(AAA) Pattern | Angular unit test case Tutorials with Jasmine & Karma

 

Arrange-Act-Assert is a great way to structure test cases. It prescribes an order of operations:

Arrange inputs and targets. Arrange steps should set up the test case. Does the test require any objects or special settings? Does it need to prep a database? Does it need to log into a web app? Handle all of these operations at the start of the test.

Act on the target behaviour. Act steps should cover the main thing to be tested. This could be calling a function or method, calling a REST API, or interacting with a web page. Keep actions focused on the target behaviour.

Assert expected outcomes. Act steps should elicit some sort of response. Assert steps verify the goodness or badness of that response. Sometimes, assertions are as simple as checking numeric or string values. Other times, they may require checking multiple facets of a system. Assertions will ultimately determine if the test passes or fails.

You can learn more on it from below video

BeforeAll and AfterAll in Jasmin Method | Angular unit test case Tutorials with Jasmine

  BeforeAll and AfterAll in Jasmin Method | Angular unit test case Tutorials with Jasmine

 

beforeAll() The beforeAll function executes once and only once for the describe block containing it, just before the any block run.

AfterAll() The beforeAll function executes once and only once for the describe block containing it, just All After the block run.

You can learn more about it from below video

BeforeEach and AfterEach Jasmine functions | Angular unit test case Tutorials with Jasmine

 BeforeEach and AfterEach Jasmine functions | Angular unit test case Tutorials with Jasmine

 

beforeEach() is run before each test in a describe

afterEach()   is run after each test in a describe

You can learn about it in brief from below video

tobenull() ,tocontain() ,tobeNan() , toBePositiveInfinity, toBeNegetiveInfinity matcher

 tobenull() ,tocontain() ,tobeNan() , toBePositiveInfinity, toBeNegetiveInfinity matcher

'toBeNull()

The 'toBeNull' matcher should be applied successfully to compare against null

it("Jasmine matcher - toBeNull", function() {

  var nullValue = null;

  var valueUndefined;

  var notNull = "notNull";

  expect(null).toBeNull();

  expect(nullValue).toBeNull();

  expect(valueUndefined).not.toBeNull();

  expect(notNull).not.toBeNull();

}); 

'toContain()

The 'toContain' matcher should be applied successfully for finding an item in an array

it("Jasmine matcher -toContain ", function() {

  var MyArray = ["jasmine", "Dotnetoffice", "Tutorials"];

    expect([1, 2, 3]).toContain[2];

    expect([1, 2, 3]).toContain(2,3);

    expect(MyArray).toContain["jasmine"];

    expect([1, 2, 3]).not.toContain(4);

    expect(MyArray).not.toContain("dot");

});

tobeNan()

The tobeNan' matcher should be applied successfully for finding an Un-determined value

it("Jasmine matcher - tobeNan ", function() {

    expect(0 / 0).toBeNaN();

      expect(0 / 5).not.toBeNaN();

}); 

toBePositiveInfinity()

The toBePositiveInfinity ' matcher should be applied successfully for finding an Positive infinity value

it("Jasmine matcher - toBePositiveInfinity ", function() {

 expect(1 / 0).toBePositiveInfinity();

}); 

You can learn it from below Video

toBeDefined and toBeUndefined Jasmine matcher

  toBeDefined and toBeUndefined Jasmine matcher

toBeDefined()

The 'toBeDefined' matcher should be applied successfully to compares against defined

it("Jasmine matcher - toBeDefined", function() {

  var MyObj = {

    foo: "foo"

  };

  var Myfunction = (function() {})();

  var strUndefined;

  expect("The Dotnet office").toBeDefined();

  expect(MyObj).toBeDefined();

  expect(MyObj.foo).toBeDefined();

  expect(Myfunction).not.toBeDefined();

  expect(strUndefined).not.toBeDefined();

});

'toBeUndefined()

The 'toBeUndefined' matcher should be applied successfully to compares against undefined

it("Jasmine matcher - toBeUnDefined", function() {

  var MyObj = {

          foo: "foo"

        };

  var Myfunction = (function() {})();

  var strUndefined;

    expect(MyObj).not.toBeUndefined();

    expect(MyObj.foo).not.toBeUndefined();     

    expect(Myfunction).toBeUndefined();

    expect(strUndefined).toBeUndefined();

});

 you can learn more on it from below video

toMatch() and toBeCloseTo() Jasmin Matcher

 toMatch() and toBeCloseTo() Jasmin Matcher

ToMatch()

 

 

The 'toMatch' matcher should be applied successfully for regular expressions

 

it('Jasmin Matcher - Match function', () =>{

var input = "The dotnetoffice tutorials";

var strPhone = "001-789-56-67";

expect(input).toMatch(/dotnetoffice/);

expect(input).toMatch(/dotnetoffice/i);

expect(input).not.toMatch(/dot1/);

expect(strPhone).toMatch(/\d{3}-\d{3}-\d{2}-\d{2}/);

})

 

toBeCloseTo()

This matcher is used to check whether a number is close to another number, up to a given level of decimal precision.

In our case, we checked whether the expected number was equal to the actual number with a given level of decimal precision.

it('Jasmin Matcher - toBeCloseTo ', () =>{

  var pi = 3.1415926, e = 2.78;

  expect(pi).not.toBeCloseTo(e);

  expect(pi).toBeCloseTo(e,0);

  expect(4.334).toBeCloseTo(4.334);

  expect(4.334).toBeCloseTo(4.3345,1);

  expect(4.334).toBeCloseTo(4.3345,2);

  expect(4.334).not.toBeCloseTo(4.3,2);

  expect(4.223).not.toBeCloseTo(4.22,3);

  expect(4.223).not.toBeCloseTo(4.22,4);

})

 you can learn more on it from below video

toBeGreaterThan() ,toBeGreaterThanOrEqual() ,toBeLessThan() ,toBeLessThanOrEqual() Matcher

 toBeGreaterThan() ,toBeGreaterThanOrEqual() ,toBeLessThan() ,toBeLessThanOrEqual() Matcher

toBeGreaterThan( expectedValue )

toBeGreaterThan(expectedValue) is a comparison function that evaluates to true or false.

 toBeGreaterThanOrEqual( expectedValue )

toBeGreaterThanOrEqual(expectedValue) is a comparison function that evaluates to true or false.

toBeLessThan( expectedValue )

toBeLessThan(expectedValue) is a comparison function that evaluates to true or false.

toBeLessThanOrEqual( expectedValue )

toBeLessThanOrEqual(expectedValue) is a comparison function that evaluates to true or false.

you can learn more on it from below video

 

toBe(true), toBeTrue() and toBeTruthy() , toBeFalse() and toBeFalsy() Jamine matcher

 toBe(true), toBeTrue() and toBeTruthy() , toBeFalse() and toBeFalsy() Jamine matcher

toBe(true)

Matcher function performs the test: actual === expected

Syntax: expect(flag).toBe(true | false)

This test passes only if flag has the value true,

in the case of expect(flag).toBe(true).

toBeTrue()

Matcher function performs the test: (actual === true || is(actual, 'Boolean') && actual.valueOf())

Syntax: expect(flag).toBeTrue()

This function behaves the same way as toBe(true) but handles an additional case.

toBe(true) ➜ only handles a primitive boolean type.

ToBeTrue() ➜ handles both a primitive boolean type and a Boolean object.

 

ToBeTruthy()

This Boolean matcher is used in Jasmine to check whether the result is equal to true or false.

 

toBeFalsy()

toBeFalsy() also works the same way as toBeTruthy() method. It matches the output to be false whereas toBeTruthy matches the output to be true.

 

 

  expect(true).toBeTruthy(); // true

   expect('1').toBeTruthy(); // true

   expect(0).toBeTruthy(); // false

   expect(undefined).toBeTruthy(); // false

   expect(NaN).toBeTruthy(); // false

   expect(false).toBeTruthy(); // false

   expect('').toBeTruthy(); // false

 

you can learn more on it from below video

ToBe and ToEqual in-built matcher in angular unit test | Angular unit test case Tutorials

 ToBe and ToEqual in-built matcher in angular unit test

We can use toBe for primitives like strings, numbers or Booleans,  for everything else use toEqual.

you can learn more on it from below video

Jasmin Matchers in angular unit test case | Angular unit test tutorials

 Jasmin Matchers in angular unit test case

What are matchers

Matchers are nothing but compare functions to actually compare the expected and actual result in the test specs.

Matchers are the JavaScript function that does a Boolean comparison between an actual output and an expected output. 

There are two type of matchers Inbuilt matcher and Custom matchers.

Inbuilt Matcher

The matchers which are inbuilt in the Jasmine framework are called inbuilt matcher. The user can easily use it implicitly.

Custom Matchers

The matchers which are not present in the inbuilt system library of Jasmine is called as custom matcher. Custom matcher needs to be defined explicitly().

you can learn more it from below video

Exclude Angular unit test case from Execution | Angular unit test tutorials

 Exclude Angular unit test case from Execution

Case using ‘x’  keyword we can exclude any test case from execution.

  xit('Show the Addition result',() =>{

  expect(Addition(10,20)).toBeGreaterThan(20);

})

you can learn more from below video