nghiệm một sự kiện nhấp chuột với Jasmine đó gắn thêm một style sheet cho người đứng đầu

jQuerynghiệm một sự kiện nhấp chuột với Jasmine đó gắn thêm một style sheet cho người đứng đầu

$(".theme-picker").click(function() { 
     $('head').append('<link rel="stylesheet" href="" type="text/css" media="screen" id="theme_switcher"/>'); 
});

Jasmine

describe("style.switcher", function() { 

beforeEach(function() { 
    jasmine.getFixtures().set(
     '<head></head>' + 
     '<div class="switcher">' + 
      '<a class="theme-picker" title="theme-picker"></a>' + 
      '<a class="folder-picker" title="folder-picker"></a>' + 
      '<a class="font-picker" title="font-picker"></a>' + 
      '<a class="color-picker" title="color-picker"></a>' + 
     '</div>'); 
    }); 

it("loads themes switcher link in head", function() { 
    $('.theme-picker').trigger('click'); 
    expect($('head')).toContain("theme_switcher"); 
}); 
});

Tôi mới vào hoa nhài và thử nghiệm hiện đang thất bại. Tôi không chắc chắn nếu nó là vật cố định, sự kiện kích hoạt hoặc cái gì khác hoàn toàn.

Nguồn

2012-05-30 coreballs

Tôi nghĩ câu trả lời được chọn là sai lệch và không chính xác (mặc dù nó bởi OP!). Tôi không chắc chắn lý do tại sao nó sẽ là "hình thức nghèo" để kiểm tra hiệu ứng mà một đoạn javascript có trên một số html mục tiêu. Thường thì đó là đầu ra duy nhất mà bạn có thể sử dụng để xác minh xem một phương thức có hoạt động hay không.

Thử nghiệm được sử dụng làm ví dụ không thực sự chứng minh bất cứ điều gì: tất nhiên nhấp chuột đã được kích hoạt, bạn vừa kích hoạt nó! Những gì bạn muốn làm là chứng minh điều gì đó theo sau nhấp chuột đó, ví dụ: một thay đổi trong một DOM hoặc cấu trúc dữ liệu khác, đó là bản gốc (IMO chính xác) bản năng.

Những gì bạn muốn là sử dụng một thử nghiệm không đồng bộ (https://github.com/pivotal/jasmine/wiki/Asynchronous-specs) để chờ đợi một sự thay đổi trong DOM và sau đó từ bỏ, tương tự như cách các thư viện Ruby Capybara (https://github.com/jnicklas/capybara/) hoạt động:

it('loads themes switcher link in head', function() { 
    $('.theme-picker').trigger('click'); 

    waitsFor(function() { 
    return $('head').contains('theme_switcher'); 
    }, 'theme switcher never loaded', 10000); 
});

Nguồn

2012-07-25 05:31:51 method

theme_switcher là id của liên kết của bạn. toContain có công cụ chọn, tức là bạn phải viết toContain('#theme_switcher').

Cũng đảm bảo bạn đang thêm vào hộp cát và cũng kiểm tra phần đầu của hộp cát, chứ không phải tài liệu của bạn.

EDIT:

tôi giả sử bạn sử dụng jasmine-jquery

Nguồn

2012-06-01 19:00:43 ggozad

tôi không biết rằng 'toContain()' có thể lấy một bộ chọn CSS làm đối số. Bạn có một tham chiếu bạn có thể liên kết đến? –

Tôi đã tò mò về điều này vì vậy tôi đã làm một số tìm kiếm. Dưới mui xe, 'toContain()' gọi 'jasmine.Env.prototype.contains _()' mà [được định nghĩa ở đây] (https://github.com/pivotal/jasmine/blob/master/src/core/Env. js). Tôi không thấy bất cứ điều gì mà sẽ chỉ ra rằng nó sẽ chấp nhận một bộ chọn CSS, nhưng tôi muốn được chứng minh là sai! –

Làm thế nào để bạn kiểm tra đầu của hộp cát? Tôi nghĩ rằng người đứng đầu duy nhất sẽ xuất hiện trong bài kiểm tra là tài liệu. sandbox(); trả về

– coreballs

Nghiên cứu cho thấy nó là ở dạng nghèo để kiểm tra trang các yếu tố cụ thể.

thử nghiệm hiện tại của tôi (đi qua) là như sau:

describe("zen switcher", function() { 

beforeEach(function() { 
    loadFixtures('zen_switcher.html'); 
    spyOnEvent($('.theme-picker'), 'click'); 
}); 

it("clicks the .theme-picker", function() { 
    $('.theme-picker').click(); 
    expect('click').toHaveBeenTriggeredOn($('.theme-picker')); 
}); 
});

Nguồn

2012-06-01 21:24:08 coreballs

"Nghiên cứu đã hiển thị" => Trích dẫn cần thiết. –

nghiệm một sự kiện nhấp chuột với Jasmine đó gắn thêm một style sheet cho người đứng đầu

Trả lời

Các vấn đề liên quan