jasminejasmine-jqueryjasmine2.0

Jasmine: How to test a user input?

I wrote the following html file: 

<!DOCTYPE html> <html lang="en"> <head>
    <meta charset="UTF-8">
    <title></title> </head> <body>
    <h1> HELLO WORLD </h1>
    <button type="button"> CLICK HERE</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $('button').click(function() {
            $('h1').text("Thank you");
            var ans = prompt("Please type your age");
            if (ans > 80) {
                $('h1').text("You're old");
            }
        })
    </script> </body> </html>

I want to test that once the user clicks on the button and gives an age older than 80, the page behaves as expected and the h1-tag text changes to "You're old".

My question is how to write a Jasmine spec to test this feature?

Solution

  • You need to use "Spy" object to intercept "prompt" function and return your own value. After check the caption text. The code may look like ...

    deascribe("test inline function:", function() {
  it("caption should be 'too old' for age of more than 80", function () {
    spyOn(window, 'prompt').and.returnValue(81);
    $('button').click();
    expect($('h1').text()).toBe("You're old");
  });
});