¿Puede alguien darme un ejemplo de cómo escribir un caso de prueba para verificar si la función dentro del evento keyup se llama en jquery y jasmine? Soy bastante nuevo en jquery y jasmine lo siento por los errores. Este progtwig muestra el recuento de caracteres restantes a medida que el usuario ingresa los caracteres en el campo de entrada.
fixture.html : Este es el accesorio
script.js : este es el archivo de script con código para calcular los caracteres restantes
$(document).ready(function () { var txt = $('#text'); var remainingChar = $('#count'); var maxLengthBox = txt.attr('maxLength'); remainingChar.html(maxLengthBox); txt.keyup(function () { updateChars(remainingChar, maxLengthBox, txt) }); }); function updateChars(remainingChar, maxLengthBox, txt) { var remChar = maxLengthBox - $(txt).val().length; if (remChar < 0) { remChar = 0; } remainingChar.html(remChar); return remChar; }
Este es uno de los casos de prueba. Por favor, ayúdeme aquí porque no está llamando a la función después de activar el teclado. ¿Cómo puedo probarlo?
1. si la función updateChars(remainingChar,maxLengthBox,txt) se llama y ejecuta
2. Cómo comprobar que se devuelve el recuento de Char remainingChar correcto
TestCase comienza aquí:
El código funciona bien, pero necesito ayuda para escribir el caso de prueba para “verificar si se muestra el recuento de caracteres correcto”, ya que en la función de activación de keyup no se llama a la función interna de updateChars en el caso de prueba
beforeEach(function () { loadFixtures('Fixture.html'); txt = $('#text'); remainingChar = $('#count'); maxLengthBox = txt.attr('maxLength'); remainingChar.html(maxLengthBox); }); it("checking remaining characters", function () { txt.val('hello'); //entering hello into that text field //triggering keyup and expecting this to call the updateChars function txt.trigger('keyup'); expect(updateChars).toHaveBeenCalled(): });
Ok, supongo que está ejecutando su prueba directamente en el navegador, ¿verdad? Y según su código, updateChars que la función updateChars es global, por lo que se adjunta a la window .
Dicho esto, lo que necesitas es un spy , en jasmine usamos la función spyOn , aquí hay un ejemplo:
beforeEach(function() { //here we setup the "spy" spyOn(window, 'updateChars'); }); it("checking remaining characters", function() { txt.val('hello'); txt.trigger('keyup'); expect(updateChars).toHaveBeenCalled(): });
Este es solo un ejemplo ilustrativo de que necesita ajustarse a sus necesidades.
Algunas notas
Veo en tu código esta línea loadFixtures('Fixture.html'); , No sé lo que realmente hace, pero si es una llamada asíncrona, entonces tendrá que usar la callback done en el beforeEach .
Otro ejemplo ilustrativo con una llamada asíncrona:
beforeEach(function(done) { //here we setup the "spy" spyOn(window, 'updateChars'); //supose this is a promise and we can call .then loadFixtures('Fixture.html') .then(function(){ txt = $('#text'); remainingChar = $('#count'); maxLengthBox = txt.attr('maxLength'); remainingChar.html(maxLengthBox); done(); //finally }); }); it("checking remaining characters", function(done) { txt.val('hello'); txt.trigger('keyup'); expect(updateChars).toHaveBeenCalled(): done(); });
Espero eso ayude