Using Jasmine to unit test JS

Source: Internet
Author: User

The rapid development of the Internet has brought unprecedented challenges to web developers. For front-end development, the front-end development ER needs to write JS is not those few lines of visual effect code. The large increase in code volume, multi-person synergy, personnel quality disparity, this requires a standard, to the normative control of the code. Jasmine as a test framework used by a front-end team, it should be shipped.

1, Jasmine Introduction

Jasmine is a framework for writing JavaScript tests that does not depend on any other JavaScript framework. It has a clever and clear syntax that allows you to easily write test code. Currently the latest version is 2.0.0.

In Jasmine, a typical unit test starts with a global function Describe,describe contains n it functions, and an IT function contains n assertions.

A basic test code is as follows:

function () {  It (function() {    expect (true). ToBe (true);  });});

2. Download Jasmine

You can download it by clicking on the link below:

Https://github.com/pivotal/jasmine/tree/master/dist

We recommend downloading the 2.0.0 version of the ZIP package.

After extracting, we go to lib\jasmine-2.0.0 in the file directory, which usually includes the following files.

These files are required for us to do the JS test.

3, Jasmine's dependence

The operation of the Jasmine depends on 4 parts:

1) Operating Environment
Browser (ie,firefox,chrome)

2) source file

JS Footsteps Written by developers

3) test File

Test scripts that conform to JASMINEAPI

4) Output Results

Web-based output or console output

4, the use of jasmine

We create a new test.html file in the project with the following principal code:

<!DOCTYPE HTML><HTML><Head>    <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8">    <title>JASMINE-JS Unit Test Framework</title>    <Linkrel= "stylesheet"href= "Jasmine/jasmine.css">    <Scriptsrc= "Jasmine/jasmine.js"></Script>    <Scriptsrc= "Jasmine/jasmine-html.js"></Script>    <Scriptsrc= "Jasmine/boot.js"></Script></Head><Body><Div>    <P>JS Unit Test</P></Div><Scriptsrc= "Src.js"></Script><Scriptsrc= "Test.js"></Script></Body></HTML>

In the page we introduced 5 JS files and a CSS file.

The core file of the Jasmine.js:jasmine framework.

Jasmine-html.js: JS file for Web page result output.

The startup script for the Boot.js:jasmine framework. It is worth noting that the execution of this script should be done after the jasmine.js is loaded.

Src.js: Our business logic script.

Test.js:jasmine test Scripts.

JASMINE.CSS: A style file that controls the output of a Web page result.

Let's take a look at the Src.js file, we've defined a showname function

function ShowName (name) {    return ' My name is ' +name;}

We write the test script within Test.js:

Describe (' Just a test ',function() {    It (' Test showname ',function() {        var a= ' ck ';         var exp= ' My name is ck ';        Expect (exp). Toequal (ShowName (a));    } );

The browser side runs the test.html file with the output as follows:

This shows that our script passed the test successfully.

We modify the Test.js file

var exp= ' My name is mm ';

Run the test.html file again and enter the following:

You can see the Jasmine print out the error messages.

With this simple example, we can see that it is very convenient to use Jasmine for unit testing.

5. API

Describe (string,function)

Global function, receive two parameters

String: Description of the function

Function: Test group functions

It (string,function)

A test specs, receiving two parameters

Name of the String:spces

function:spces function

Beforeeach (function)

Define what to do before all it execution in a describe

Aftereach (function)

Define what to do after all it execution in a describe

ToBe

equals = = =, Comparison variable

Toequal

Handling variables, arrays, objects, etc.

Tomatch

Match using regular style

tobedefined

is declared and assigned

tobeundefined

is not declared

Tobenull

Is null

Tobetruthy

True if converted to a Boolean value

Tobefalsy

False if converted to a Boolean value

Tocontain

Whether the array contains elements (values). Only for arrays, not for objects

Tobelessthan

Numeric comparison, less than

Tobegreaterthan

Numeric comparison, greater than

Tobecloseto

Define precision when comparing values, rounding before comparing

Tothrow

Checks if a function throws an error

function () {    varfunction() {      return 1 + 2;    };     var function () {      return a + 1;    };    Expect (foo). Not.tothrow ();    Expect (bar). Tothrow ();});

Jasmine also has a powerful spy function, it can monitor the function of the call situation, because the content is more involved and the article just play a role, so I do not list, we are interested can go to the official website for in-depth understanding.

Website Link: http://jasmine.github.io/2.0/introduction.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.