ANGULARJS Unit Test (a) detailed _angularjs

ANGULARJS Unit Test

There are many tutorials on the web for unit testing, such as how to install Jasmine and ngmock, and you can search for them. It's not here to say. The following focuses on the process of a unit test.

Load a module

Angularjs uses a module to include different parts of the application, such as controllers,services, filters. To test the different parts, we need a reference to a different module and load it. ANGULARJS module injection uses the Ngmock module. The Ngmock module is able to inject service services into unit tests.
Ngmock exposes the Angular.mock.module method, abbreviated as module.

Get ready

What needs to be prepared is a simple angularjs boot module.

How to Achieve

The Angular.mock.module method is used in the Beforeeach method. This module method requires the name of a module or another literal object to be substituted and will be injected.

1, using a string name to represent the module

Beforeeach (module (' Services.emcees '))

2. Add literal objects

 Beforeeach (module (' Services.emcees ', {
 beatjunkies ': {
  ' dj ': ' Babu '
 })
 })

3, can now use the Beatjunkies reference in the test to retrieve the resolved object, return {' DJ ': ' Babu '}

4, finally you can also provide a method to provide a rapper reference.

 Beforeeach (module (' Services.emcees '), {
 beatjunkies ': {
  ' dj ': ' Babu '
 })
 },function ($provider) {
 $provider. Value (' rapper ', ' Madchild ')
 })

Write a Test

For example, you will begin to test an instruction about changing the scope value to update the content. This value is assigned when a Noclick method defined on scope is triggered. This needs to be triggered on the HTML button.

For example:

 . directive (' Emcee ', function () {
 return{
  restrict: ' E ',
  link:function (scope,element,attr) {
   Scope.onclick=function () {
    element.text (' Step up ' + Scope.emcee + '! ')}}}

 )

Specific approach

1. Create two variables, one for scope (var scope) and another for element (var element).

2, to determine loading your module Beforeeach (' Cookbook ')

3, create a Beforeeach method to inject the necessary dependencies, and specify the variables in 1 to declare these variables. This includes creating a new scope object and specifying a emcee value for scope.

 Beforeeach (Inject (function ($rootscope, $compile) {
 rootscope= $rootscope;
 Scope= $rootscope. $new ();
 Scope.emcee= ' Izzy Ice '
 })

4, immediately after 3 in the Beforeeach function to add the part of the creation instructions.

 Beforeeach (Inject (function ($rootscope, $compile) {
 rootscope= $rootscope;
 Scope= $rootscope. $new ();
 Scope.emcee= ' Izzy Ice ';
 Element=angular.element (' <emcee></emcee> ');
 $compile (Element) (scope);
 })

5, followed by the third step in the Beforeeach to start all the Watcher

Scope. $digest ();

6, you need to create a new spec to define what the expected results are.

It (' should assign scope emcee to element text while the OnClick handler is called ', function () {})

7, immediately in step 6spec, add the method that triggers the onclick.

Scope.onclick

8. In step 6spec, add an expectation to match the element value

Expect (Element.text ()). Tobe (' Step Up Izzy ice! ')

9, integration

 It (' should assign scope emcee to element text while the OnClick handler is called ', function () {
  scope.onclick (); 
   
    expect (Element.text ()). Tobe (' Step Up Izzy ice! ');


   

Principle

In step 1, you declare two variables that can be tested repeatedly, using Beforeeach in step 3 to ensure that the two variables are assigned values before the test runs. A value Scope.emcee is also defined for scope in step 3, expecting the value to be associated with the instruction. In step 4 We compile our instructions,
Call $scope in step 5. $degist Make sure all the bindings have been updated.

Declare this spec test in step 6 and specify what we want from it, we trigger Scope.onclick and then update the element with the value provided by scope. The angular element provides a convenient text function to return the element's contents.
In step 8, use the value returned by this text to compare with the steps up Izzy Ice.

Some common methods of matchers.

1, the actual value contains expectations.

Expect ($djListItems (). EQ (0). HTML ()). Tocontain (' Dstyles<br>\nqbert<br>\nmix Master mike<br>\ Nshortkut<br>\na-trak<br>\nbabu ')

2, the actual value and expectations are consistent.

Expect (Element.text ()). Tobe (' IEC ')

3, the actual value and expectations are equal

Expect (scope.emcee.length). Toequal (0)

4, the actual value of expectations are matched equal

Expect (Element.text (). Tomatch (/eyadea/))

5. Whether the actual value is defined

Expect ($cookies. bboy.tobedefined)

6, if the actual value is not defined

Expect ($cookiew. BBoy). not.tobedefined ()

7, the actual value is empty

Expect (Breakbeat.tracks ()). Tobenull ()

8, the actual value is not empty

Expect (Breakbeat.tracks ()). Not.tobenull ();
9, the actual value is False

Expect (Element (by.css (' button ')). getattribute (' disabled '). Tobefalsy ())

10, the actual value is True

Expect (angular.element element.find (' a ') [0].parent (). Hasclass (' Nghide '). getattribute (' disabled ')]. Tobetruthy () )

11, the actual value is less than expected

Expect (scope.deejays.length). Tobelessthan (2);

12, the actual value is greater than expected

Expect (scope.deejays.length). Tobegraterthan (2)

The above is the ANGULARJS unit test data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!