Test di un evento click con Jasmine che aggiunge un foglio di stile alla testa

jQueryTest di un evento click con Jasmine che aggiunge un foglio di stile alla testa

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

Sono nuovo di gelsomino e il test è attualmente fallendo. Non sono sicuro se sia il dispositivo, l'evento di innesco o qualcos'altro interamente.

fonte

2012-05-30 coreballs

Penso che la risposta scelto è fuorviante e scorretto (anche se è dal PO!). Non sono sicuro del motivo per cui sarebbe "una cattiva forma" per testare l'effetto che un pezzo di javascript ha su qualche html mirato. Spesso questo è l'unico output che è possibile utilizzare per verificare se un metodo funziona.

Il test che viene utilizzato come esempio in realtà non prova nulla: ovviamente il clic è stato attivato, l'hai appena attivato! Quello che vuoi fare è provare qualcosa che deriva da quel clic, ad es. un cambiamento in un DOM o in un'altra struttura dati, che era l'istinto originale (IMO corretto).

quello che vuoi è di utilizzare un test asincrono (https://github.com/pivotal/jasmine/wiki/Asynchronous-specs) di attesa per un cambiamento nel DOM e poi rinunciare, simile al modo in cui la libreria Ruby Capybara (https://github.com/jnicklas/capybara/) funziona:

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

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

fonte

2012-07-25 05:31:51 method

theme_switcher è l'ID del collegamento. toContain prende un selettore, ad esempio dovresti scrivere toContain('#theme_switcher').

Assicurati inoltre di aggiungerlo nella sandbox e di controllare anche la testata della sandbox, non quella del documento.

EDIT:

presumo si utilizza jasmine-jquery

fonte

2012-06-01 19:00:43 ggozad

ero non sapendo che 'toContain()' potrebbe prendere un selettore CSS come argomento. Hai un riferimento a cui potresti collegarti? –

Ero curioso di questo, quindi ho fatto qualche ricerca. Sotto il cofano, 'toContain()' chiama 'jasmine.Env.prototype.contains _()' che [è definito qui] (https://github.com/pivotal/jasmine/blob/master/src/core/Env. js). Non vedo nulla che indicherebbe che accetterà un selettore CSS, ma mi sarebbe piaciuto essere smentito! –

Come controllate la testata della sandbox? Penso che l'unica testa che verrà mostrata nel test sia quella del documento. sandbox(); restituisce

– coreballs

La ricerca ha dimostrato che è in cattiva forma di testare elementi specifici della pagina.

mio test corrente (che passa) è la seguente:

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

fonte

2012-06-01 21:24:08 coreballs

"La ricerca ha mostrato" => Citazione necessaria. –

Test di un evento click con Jasmine che aggiunge un foglio di stile alla testa

risposta

Problemi correlati