Js unit test-block delay Loading

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 collect', 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, current block scroll out of 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;

}, 'Unfinished! ', 1200 );

Runs (function (){

Var imgs = S. all ('img ',' # J_l2 ');

S. each (imgs, function (img) {// test image src to restore normal

Reverse CT (url). not. toEqual (img. getAttribute ('src '));

});

Lazy2.un ('afterload', loaded );

});

Function loaded (){

Finished = true;

}

});

This case is more complex. In some cases when JavaScript controls Dom, we define when and when the function is executed, especially when some actions are triggered by events. At this time, we need to notify us after the action is completed. The callback function is obviously not suitable at this time, so we can provide events and facilitate the extension of others.

Test experience:

In fact, frontend unit tests are easier to write than imagined, and there are enough tests to do. Therefore, it is best to provide unit tests for components that are provided to others for ease of improvement and testing, I will also write an article later to better reflect the power of unit testing, so that everyone will continue to learn and make progress.

Download Demo