Getting started with javascriptmvc-12. funcunit

Funcunit integrates selenium and phantomjs and uses jquery-like languages to automate web engineering testing. Funcunit uses qunit to organize tests and assertions, But it extends qunit and you can implement the following work:

1. [funcunit. Open] Open a page.

2. query elements.

3. Simulate user operations.

4. Wait until it is true.

5. Get the information on your page and run the assertions.

6. Run the test in the browser.

7. Integrated the browser automated test box build tool.

 

　　Create Test

Qunit provides the basic structure for writing units and functional testing.

　　1. Module

The module contains the setup and teardown methods, which will be run during each test.

Module ("contacts", {// run Setup: function () {// setup code} before each test, // run teardown: function () after each test () {// cleanup code }})

2. Test

test("findOne", function(){  // define a test})

　　3. Assertions

test("counter", function() {  ok(Conctacts.first().name, "there is a name property");  equal(Contacts.counter(), 5, "there are 5 contacts");});

 

Open a page

The following code uses S. Open (the URL scheme opens the autocomplete.html page during each test.

module("autosuggest",{  setup: function() {    S.open('autosuggest.html')  }});

 

　　Query Element

Writing a test using funcunit is like using jquery. The S method is a copy of jquery and used to query elements on the program page. Like the result returned by $ and S, the funcunit method is chained.

// Obtain # description. Wait until the description changes to visible. Enter the information s ("# description"). Visible (). Type ("test framework ")

 

　　Simulate user operations

When you test a plug-in, you need to simulate user operations. Funcunit uses the [SYN] library to accurately simulate underlying events, such as mouseup and keypress. You can also simulate high-level operations, such as click and type. The following example simulates common user operations.

　　1. Click

// Click the button S ('# submit_button'). Click ()

　　2. Type

// Enter data S ('# task_name'). Type ("Learn funcunit") in the text box ")

　　3. Drag

// Drag the task item to the trash region s ('. task'). Drag (". Trash ");

 

　　Waiting for page Conditions

After the user completes the operation, the test page triggers the corresponding event and the page changes. The wait command is used to wait for the page conditions and then run the test code. Wait for the method to override jquery's getter method. The S. FN. Text (textval, callback) method waits for the content of the page element $. FN. Text to be textval.

// Wait for the content to change to "task complete" s ("# result"). Text ("task complete ")

Visible:

// Wait until the first element is visible. S ('# autocomplete_results: First-child'). Visible ()

Width:

// Wait for the width to change to 200pxs ('# horizontal_menu_item'). Width (200)

VAL:

// Wait for the value of the input box S ('# Your age_input'). Val ("JavaScript ")

Size:

// Wait for the same number of HTML elements S ('. Contact'). Size (5)

You can use the following connection to learn more about the wait method, http://www.javascriptmvc.com/docs.html! Funcunit. Waits.

 

　　Obtain information and run assertions

After simulating user operations, you need to wait for the page to change. You often want to get the element value and then run the assertions. You can combine jquery's getter method with qunit assertions. These methods will be executed as the callback function waiting for the function.

// Wait until we have the result, and then run the callback function S ('. autocomplete_item '). visible (function () {equal (S ('. autocomplete_item '). size (), 5, "there are 5 results ")})

 

　　Run in a browser

The test can be run in any browser. The application opens an independent window and the running result is displayed on the qunit page.

Test ("javascript results", function () {S ('input '). click (). type ("JavaScript") // wait until we have the result s ('. autocomplete_item '). visible (function () {equal (S ('. autocomplete_item '). size (), 5, "there are 5 results ")})});

 

　　Integrated automated test box build tool for browsers

The same test code can be run in the browser automation test tool selenium, phantomjs, and envjs. These tools are started with the command line tool.

js funcunit/run phantomjs path/to/funcunit.html

The result is displayed on the command line. If the test fails, you can use Maven to interrupt the build of your code or integrate it into ci tools, such as Jenkins.