2012-05-30 8 views
5

jQueryun evento de clic con el jazmín que anexa una hoja de estilo a la cabeza

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

Soy nuevo a jazmín y la prueba es actualmente fallando. No estoy seguro de si es el accesorio, el evento desencadenante o algo completamente diferente.

Respuesta

6

Creo que la respuesta elegida es engañosa e incorrecta (aunque sea por la OP!). No estoy seguro de por qué sería "deficiente" probar el efecto que tiene una parte de javascript en algún html específico. A menudo, ese es el único resultado que puede usar para verificar si un método funciona.

La prueba que se utiliza como ejemplo en realidad no prueba nada: por supuesto, se activó el clic, ¡simplemente lo activó! Lo que quiere hacer es probar algo que se desprende de ese clic, p. un cambio en un DOM u otra estructura de datos, que fue el instinto original (correcto de la OMI).

Lo que se quiere es utilizar una prueba asíncrono (https://github.com/pivotal/jasmine/wiki/Asynchronous-specs) para esperar a un cambio en el DOM y luego renunciar, similar a la forma en la biblioteca de Ruby Carpincho (https://github.com/jnicklas/capybara/) funciona:

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

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

theme_switcher es el id de su enlace. toContain toma un selector, es decir, debe escribir toContain('#theme_switcher').

También asegúrese de que se agrega en la caja de arena y también revisa el encabezado del arenero, no el de su documento.

EDIT:

Asumo que utiliza jasmine-jquery

+0

estaba sin tener en cuenta que 'toContain()' podría tomar un selector de CSS como argumento. ¿Tiene alguna referencia a la que pueda vincular? –

+0

Tenía curiosidad acerca de esto, así que hice algunas búsquedas. Bajo el capó, 'toContain()' llama a 'jasmine.Env.prototype.contains _()' que [se define aquí] (https://github.com/pivotal/jasmine/blob/master/src/core/Env. js). No veo nada que indique que aceptará un selector de CSS, ¡pero me encantaba que se demostrara que estaba equivocado! –

+0

¿Cómo se comprueba el encabezado de la caja de arena? Creo que la única cabeza que aparecerá en la prueba es el documento. caja de arena(); devuelve

coreballs

2

La investigación ha demostrado que está en forma pobre a página de prueba elementos específicos.

Mi prueba actual (paso) es el siguiente:

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

"La investigación ha demostrado" => Citación necesaria. –

Cuestiones relacionadas