Kiểm tra để hiển thị trong kiểm tra QUnit của tiện ích JQueryUI

Question

Điều này có thể hiển nhiên với mọi người nhưng tôi không tìm thấy nó bằng cách tìm kiếm, vì vậy hãy đăng cả câu hỏi và câu trả lời có thể ở đây.

Bối cảnh:

1. Tuỳ chỉnh giao diện người dùng JQuery phụ tùng sử dụng widget factory
2. Trong widget, một số yếu tố được ẩn hoặc hiển thị dựa trên dữ liệu/lựa chọn khác.
3. Tạo các kiểm tra đơn vị để xác minh chúng đang được hiển thị/ẩn chính xác.
4. Tôi nghĩ rằng các bài kiểm tra đơn vị của tôi có thể tạo từng phần tử riêng của họ trong bộ nhớ, tương tự như this old answer.

Stripped ra phần phụ tùng thực tế từ ví dụ này:

test('show/hide', 1, function() { 
    var somecondition = true; 

    var div = $('<div/>').hide(); 
    if (somecondition) div.show(); 

    equal(somecondition, div.is(":visible")); 
}); 

Xét nghiệm này không thành công vì jQuery luôn báo cáo div.is(":visible") như sai. Tôi nghĩ rằng việc sử dụng div.css('display') == 'none' sẽ là một giải pháp thay thế. Thật không may, điều này đã làm việc trong Chrome chứ không phải Firefox.

Answer 1

Vấn đề là jQuery là đủ thông minh để biết rằng ngay cả nếu một yếu tố cụ thể có nói nó nhìn thấy, nó có thể không thực được hiển thị nếu (ví dụ):

1. Đó là không bao giờ thêm vào
2. Yếu tố DOM DOM (hoặc cha mẹ/ông bà/etc) nó được gắn vào là không thực sự có thể nhìn thấy

vì vậy, để cho các bài kiểm tra đơn vị làm việc, tôi n eed để có một div thực trong html khai thác thử nghiệm, đính kèm các widget vào nó, và sau đó gọi một tiêu diệt ở cuối.

test('show/hide', 1, function() { 
    var somecondition = true; 

    var div = $('#someid').hide(); 
    if (somecondition) div.show(); 

    equal(somecondition, div.is(":visible")); 
}); 

Tôi đã hy vọng cho một cách tiếp cận khác nhau (và có thể ai đó sẽ đi cùng và đưa ra câu trả lời khác), nhưng tôi không phải là rất hy vọng, nhìn thấy như thế này là cách tiếp cận mà jQueryUI sử dụng trong their own QUnit tests:

test("search, close", function() { 
    //SNIP 
    // Note the use of a real element here: 
    element = $("#autocomplete").autocomplete({ 
     source: data, 
     minLength: 0 
    }), 
    menu = element.autocomplete("widget"); 
    //SNIP 
    ok(menu.is(":visible"), "menu is visible after search"); 
    //SNIP 
});