Testowanie zdarzenie click z Jasmine, która dołącza arkusz stylów do głowy

jQueryTestowanie zdarzenie click z Jasmine, która dołącza arkusz stylów do głowy

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

Jestem nowy jaśminu, a test jest obecnie niepowodzeniem. Nie jestem pewien, czy to jest urządzenie, zdarzenie wyzwalające czy coś zupełnie innego.

Źródło

2012-05-30 coreballs

myślę wybraną odpowiedź jest mylące i błędne (choć to przez PO!). Nie jestem pewien, dlaczego byłaby to "słaba forma", aby sprawdzić wpływ, jaki fragment javascript ma na jakiś ukierunkowany html. Często jest to jedyne wyjście, które można wykorzystać do sprawdzenia, czy metoda działa.

Test, który został użyty jako przykład, niczego nie dowodzi: kliknięcie zostało uruchomione, po prostu go uruchomiłeś! To, co chcesz zrobić, to udowodnić coś, co wynika z tego kliknięcia, np. zmiana w DOM lub innej strukturze danych, która była oryginalna (instynkt IMO poprawny).

Co chcesz jest użycie asynchronicznego test (https://github.com/pivotal/jasmine/wiki/Asynchronous-specs) czekać na zmiany w DOM, a następnie zrezygnować, w podobny sposób biblioteki Ruby Kapibara (https://github.com/jnicklas/capybara/) działa:

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

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

Źródło

2012-07-25 05:31:51 method

theme_switcher to identyfikator twojego linku. toContain przyjmuje selektor, tj. Powinieneś pisać toContain('#theme_switcher').

Upewnij się również, że dodajesz w piaskownicy, a także sprawdzasz głowę piaskownicy, a nie dokument.

EDIT:

Zakładam użyć jasmine-jquery

Źródło

2012-06-01 19:00:43 ggozad

byłem nie zdaje sobie sprawy, że 'toContain()' może przyjąć selektor CSS jako argument. Czy masz referencję, do której możesz utworzyć link? –

Ciekawi mnie to, więc szukałem. Pod maską 'toContain()' wywołuje 'jaśmin.Env.prototype.contains _()', który [jest zdefiniowany tutaj] (https://github.com/pivotal/jasmine/blob/master/src/core/Env. js). Nie widzę niczego, co by wskazywało na to, że zaakceptuje selektor CSS, ale bardzo mi się spodobało, że się udowodniłem źle! –

Jak sprawdzić głowę piaskownicy? Myślę, że jedyną głową, która pojawi się w teście, jest dokument. sandbox(); zwraca

– coreballs

Badania wykazały, że jest w słabej formie przetestowania konkretnych elementów strony.

Mój obecny testu (mijania) jest następujący:

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

Źródło

2012-06-01 21:24:08 coreballs

"Badania wykazały" => Wymagane cytowanie. –

Testowanie zdarzenie click z Jasmine, która dołącza arkusz stylów do głowy

Odpowiedz

Powiązane problemy