測試茉莉點擊事件附加一個樣式表頭

jQuery的測試茉莉點擊事件附加一個樣式表頭

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

茉莉花

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"); 
}); 
});

我是新茉莉和測試，目前沒有。我不確定這是否是夾具，觸發事件或其他事情。

來源

2012-05-30 coreballs

我想選擇的答案是誤導和不正確的（即使它是由OP！）。我不知道爲什麼它會是「糟糕的形式」來測試一段JavaScript對某些有針對性的html的影響。通常這是您可以用來驗證方法是否有效的唯一輸出。

用作示例的測試實際上並未證明任何內容：當然點擊已觸發，您剛觸發它！您想要做的是證明點擊後的內容，例如DOM或其他數據結構的變化，這是原始的（IMO正確的）本能。

你想要什麼是使用異步測試（https://github.com/pivotal/jasmine/wiki/Asynchronous-specs）等待DOM中的變化，然後放棄了，類似這樣的Ruby庫水豚（https://github.com/jnicklas/capybara/）工作原理：

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

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

來源

2012-07-25 05:31:51 method

theme_switcher是您的鏈接的ID。 toContain需要一個選擇器，即你應該寫toContain('#theme_switcher')。

此外，請確保您正在追加沙盒，並檢查沙盒的頭部，而不是您的文檔。

編輯：

我假設你使用jasmine-jquery

來源

2012-06-01 19:00:43 ggozad

我不知道'toContain（）'可以將CSS選擇器作爲參數。你有可以鏈接到的參考嗎？ –

我很好奇這個，所以我做了一些搜索。在引擎蓋下，'toContain（）'調用'[jasmine.Env.prototype.contains _（）'] [在這裏定義]（https://github.com/pivotal/jasmine/blob/master/src/core/Env。 JS）。我沒有看到任何表明它會接受CSS選擇器的內容，但我喜歡被證明是錯誤的！ –

你如何檢查沙箱的頭部？我認爲在測試中出現的唯一頭像就是文件。 sandbox（）; 返回

– coreballs

研究已經表明，它在形式上是差測試頁面的特定元素。

我目前的測試（通過）如下：

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')); 
}); 
});

來源

2012-06-01 21:24:08 coreballs

「研究表明」=>需要引用。 –

測試茉莉點擊事件附加一個樣式表頭

回答

相關問題