Js unit test-block delay Loading

Source: Internet
Author: User
Brief Introduction: javascript has not written much before unit testing, and has less applications in projects. Different programmers have different opinions on unit testing. I personally feel that when the project team is too large, unit testing is still necessary when there are frequent flow of personnel. The following is a unit test (SyntaxHighlighter) for loading block delays in previous blogs. all ();

Introduction:
JS has not written much before the unit test, and has less applications in the project. Different programmers have different opinions on unit test. I personally feel that the project team is too large, unit tests are necessary when there are frequent flows of people, the following is a unit test on block delay loading in the previous blog. (A stranger can read the previous two articles and then read this article, which is highly correlated ), please correct me.

Test Framework:
The testing framework used is jasmine, a very simple and easy-to-use testing framework.

Describe (Test Set, function () {// test Suit

It ('use case description', function () {// Test Case 1

........

});

It ('use case description', function () {}); // Test Case 2

It ('use case description', function () {}); // Test Case 3

});

Test results:


Code structure:
The code is divided into three parts: initialization, positioning testing, and image loading.


Analysis and Test cases:
1. Initialization: verify whether the src and custom attributes of the delayed loading image are consistent.

2. positioning test:

1) The parts are in the view.


2) The part is in the view and hidden from the top.


3) The part is in the view and hidden in the lower part.

 


4) The part is out of the view and above the current view.


5) The chunks are outside the view, under the current view, but within the additional area specified by the user


6) The part is out of the view. The part is not in the additional area specified by the user under the current view.


3. Load Test:

1) test that the current block is in the user view during initialization

2) scroll to the current block and test the loading result

Sample Code:
1) initialization test:

Var lazy3 = new HomeApp. groupLazyLoad ({renderTo: J_l3, placeholder: url });

Describe (initialization test, function (){

It (initialization test of the current block in the view, function (){

Var viewportHeight = DOM. viewportHeight (),

Container3 = S. one (# J_l3 ),

Off3 = DOM. offset (container3 );

 

Window. scrollTo (0, off3.top); // scroll to the block

Lazy3.initLazyLoad (); // Initialization

Wrong CT (true). toEqual (! Lazy3.loaded); // verify whether initialization has been performed.

CT (0). toEqual (lazy3.lazyloadImgs. length); // whether the uninitialized Image array is null

});

});

2) positioning test (corresponding to Test Case 2-5 above)

It (scroll up, the current block scrolls out of the view, no more than the additional range, function (){

Var container2 = S. one (# J_l2 ),

Off2 = DOM. offset (container2 ),

Append = lazy2.APPEND _ WINDOW_HEIGHT;

Window. scrollTo (0, off2.top-viewportHeight-append + 1 );

CT (true). toEqual (lazy2. _ isInView ());

});

3) test image loading

It (move to current block, test image loaded, function (){

Var finished = false;

Runs (function (){

// Register an event

Lazy2.on (afterLoad, loaded );

// Move to the block range

Window. scrollTo (0, off2.top );

});

// Wait until loading is complete

WaitsFor (function (){

Return finished;

}, Not completed !, 1200 );

<

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.