How to complete a project starting with JavaScriptMVC and create a test program

JavaScriptMVC puts a huge emphasis on testing. The JavaScriptMVC framework uses the FuncUnit module to help us write functional and unit tests more easily, and the tests can be executed in the browser or fully automated.

After you build the recipe module, it will automatically generate test code. The following article guides us on how to accomplish the following 5 things.

1. Execute unit testing.
2. Understand unit testing.
3. Perform functional testing.
4. Understand functional testing.
5. Testing is a good function.

1. Execute unit testing

FuncUnit uses Jquery’s QUnit tool to test modules and basic plug-ins. You can execute these tests in the browser or Envjs.

Execute unit testing in the browser

Open cookbook/qunit.html, you will see the following picture:

Let’s see how the second method is executed. First, let the test be executed in the Envjs environment.

Execute unit tests in Envjs environment

Envjs is a basic script browser. FuncUnit can execute your tests in this simulated environment.

Enter the following command in the DOC console of Window:
js funcunit/run envjs cookbook/qunit.html

It will let qunit.html execute in a simulated browser environment. Enter the following:

2. Understand unit testing

FuncUnit uses the assertions of the QUnit tool to combine test functions into modules. If we want to better understand unit testing, we can read QUnit's help documentation.
cookbook/qunit.html loads the steal module and lets steal load the cookbook/test/qunit/qunit.js file, and this file is to load all unit test files:
cookbook/test/qunit/cookbook_test.js
cookbook/ test/qunit/recipe_test.js

The test’s assertions will be executed once all scripts have loaded.

Open the cookbook/test/qunit/recipe_test.js file and let’s see how the findAll test works.
//creates a test
test("findAll", function(){
//prevents the next test from running
stop(2000);

//requests recipes
Cookbook.Models.Recipe.findAll({}, function(recipes){

//makes sure we have something
ok(recipes)

//makes sure we have at least 1 recipe
ok(recipes.length)

//makes sure a recipe looks right
ok (recipes[0].name)
ok(recipes[0].description)

//allows the next test to start
start()
});
})

3. Execute functional test

Functional test It is used to test mouse and keyboard events generated by simulating user interaction with the interface.

The functional test of the Chef Manual is to test the interactive actions of the recipe creation and list interface.

Execute functional testing in the browser www.2cto.com

Open cookbook/funcunit.html, you will see the following picture:

Execute functional testing in Selenium environment.

Selenium can automatically load the browser and encapsulate it into the FuncUnit module.

Execute the following command:
js funcunitrun selenium cookbookfuncunit.html

If you are using Window system, it will open Firefox and IE browsers. The results of this test are as follows:

If an exception occurs when executing this test in IE, you need to modify the configuration of the IE browser. Please see the FuncUnit help documentation for details.

4. Understand functional testing

FuncUnit plus QUnit can open other pages, in this example cookbook/cookbook.html, this page has interactive actions and obtains some information from it.

The cookbook/funcunit.html page can work like qunit.html because the FuncUnit module loads the FuncUnit plug-in. FuncUnit, like the Jquery API, is called using the "S" alias.

Open the cookbookrecipecreatecreate_test.js file and we see the following code:

test("create recipes", function(){

//type Ice in the name field
S("[name=name]").type ("Ice")

//type Cold Water in the description field
S("[name=description]").type("Cold Water")

//click the submit button
S("[type= submit]").click()

//wait until the 2nd recipe exists
S('.recipe:nth-child(2)').exists()

//Gets the text of the first td
S ('.recipe:nth-child(2) td:first').text(function(text){

//checks taht it has ice
ok(text.match(/Ice/), "Typed Ice") ;
});

})

It can be easily seen from the test that this test case is to create a recipe and add the recipe to the list.

5. Testing is a good function.

FuncUnit makes web testing possible for readability and linear syntax. JavaScriptMVC provides this testing function and makes a great contribution to our web development.