Ive been trying for a while to test js and dom elements and finally came across karma which helps to test dom elements. However anything I have so far just doesn't work. Any help would be very much appreciated. I have been using this tutorial: / but can't get it to work..
js:
window.calculator = window.calculator || {};
(function() {
var result;
var adding = function(one, two) {
var one1 = document.forms["myForm"]["one"].value;
var two2 = document.forms["myForm"]["two"].value;
var one=parseFloat(one.replace(/\,/g,''));
var two=parseFloat(two.replace(/\,/g,''));
result = parseInt(one1) + parseInt(two2);
console.log(result);
var number = document.getElementById("number");
number.innerHTML = result;
console.log(one, two, result)
return result;
}
window.calculator.init = function() {
document.getElementById('add').addEventListener('click', adding);
};
})();
html:
<body>
<form name="myForm">
<h4>numner 1</h4>
<input type="text" name="one" id="one"></input>
<h4>number 2</h4>
<input type="text" name="two" id="two"></input>
<input type="button" id="add">
</form>
<p id="number"> </p>
<script type="text/javascript" src="public/adder.js"></script>
<script>
calculator.init()
</script>
</body>
</html>
test spec:
beforeEach(function() {
var fixture = '<div id="fixture"> <input type="text" name="one" id="one">' +
'<input type="text" name="two" id="two">' +
'<input type="button" id="add" >' +
'<p id="number"> </p></div>';
document.body.insertAdjacentHTML(
'afterbegin',
fixture);
});
// remove the html fixture from the DOM
afterEach(function() {
document.body.removeChild(document.getElementById('fixture'));
});
// call the init function of calculator to register DOM elements
beforeEach(function() {
window.calculator.init();
});
it('should return 3 for 1 + 2', function() {
var x = document.getElementById('one').value = 1;
var y = document.getElementById('two').value = 2;
document.getElementById('add').click();
expect(document.getElementById('number').innerHTML).toBe('3');
});
Ive been trying for a while to test js and dom elements and finally came across karma which helps to test dom elements. However anything I have so far just doesn't work. Any help would be very much appreciated. I have been using this tutorial: http://www.bradoncode./blog/2015/02/27/karma-tutorial/ but can't get it to work..
js:
window.calculator = window.calculator || {};
(function() {
var result;
var adding = function(one, two) {
var one1 = document.forms["myForm"]["one"].value;
var two2 = document.forms["myForm"]["two"].value;
var one=parseFloat(one.replace(/\,/g,''));
var two=parseFloat(two.replace(/\,/g,''));
result = parseInt(one1) + parseInt(two2);
console.log(result);
var number = document.getElementById("number");
number.innerHTML = result;
console.log(one, two, result)
return result;
}
window.calculator.init = function() {
document.getElementById('add').addEventListener('click', adding);
};
})();
html:
<body>
<form name="myForm">
<h4>numner 1</h4>
<input type="text" name="one" id="one"></input>
<h4>number 2</h4>
<input type="text" name="two" id="two"></input>
<input type="button" id="add">
</form>
<p id="number"> </p>
<script type="text/javascript" src="public/adder.js"></script>
<script>
calculator.init()
</script>
</body>
</html>
test spec:
beforeEach(function() {
var fixture = '<div id="fixture"> <input type="text" name="one" id="one">' +
'<input type="text" name="two" id="two">' +
'<input type="button" id="add" >' +
'<p id="number"> </p></div>';
document.body.insertAdjacentHTML(
'afterbegin',
fixture);
});
// remove the html fixture from the DOM
afterEach(function() {
document.body.removeChild(document.getElementById('fixture'));
});
// call the init function of calculator to register DOM elements
beforeEach(function() {
window.calculator.init();
});
it('should return 3 for 1 + 2', function() {
var x = document.getElementById('one').value = 1;
var y = document.getElementById('two').value = 2;
document.getElementById('add').click();
expect(document.getElementById('number').innerHTML).toBe('3');
});
-
does
document.getElementById('add').click()not work for you? I see you have it mented out and assume you've already tried it? – tehbeardedone Commented Mar 22, 2017 at 13:46 - i made a few changes now (edited my code) and I keep getting the error of 'Cannot read property 'one' of undefined' I think the problem is here : var one1 = document.forms["myForm"]["one"].value; however I don't understand why and I can't change that as I need that. – javascript2016 Commented Mar 22, 2017 at 14:10
-
That's probably because
myFormdoesn't exist in your test. Your test only knows about thefixtureelement you supplied. From the looks of it, thefixtureelement needs to be exactly the same as the element you want to test. I bet if you add the html formyForminfixtureit will start working. – tehbeardedone Commented Mar 22, 2017 at 14:39 - Thank you. I had trouble adding html elements to the fixture as I would get errors and couldn't find much information as to how adding it. What I mean is when I add lets say the entire html document - do I put it all in ' ' (that gives me an error, if I put quotes around each single element i include, I also get errors.Its always: Invalid or unexpected token in the line (var fixture=...) As it is now I'm not getting any errors and I have no idea why. – javascript2016 Commented Mar 22, 2017 at 15:31
- I'll try to see if I can get a working example on my lunch break and post that as an answer unless someone beats me to it. – tehbeardedone Commented Mar 22, 2017 at 15:49
1 Answer
Reset to default 4Here is a working example. Basically all I did was add <form name="myForm"> and </form> to the HTML in the fixture variable and it started working. You want to supply an element to your test that is essentially the same as the element you want to test in the DOM. You can leave out items that aren't important like the <h4> elements that you already did. Otherwise you need to include all the elements that will be required for the tests.
In this case you are looking for values in the form element:
var one1 = document.forms["myForm"]["one"].value;
var two2 = document.forms["myForm"]["two"].value;
var one=parseFloat(one1.replace(/\,/g,''));
var two=parseFloat(two2.replace(/\,/g,''));
But you weren't including the form in your test. You only had the two input elements, the button, and the element where the results are displayed. The following should get you on the right path.
beforeEach(function() {
var fixture = '<div id="fixture">' +
'<form name="myForm">' +
'<input type="text" name="one" id="one">' +
'<input type="text" name="two" id="two">' +
'<input type="button" id="add" >' +
'</form>' +
'<p id="number"> </p></div>';
document.body.insertAdjacentHTML(
'afterbegin',
fixture);
});
// remove the html fixture from the DOM
afterEach(function() {
document.body.removeChild(document.getElementById('fixture'));
});
// call the init function of calculator to register DOM elements
beforeEach(function() {
window.calculator.init();
});
it('should return 3 for 1 + 2', function() {
var x = document.getElementById('one').value = 1;
var y = document.getElementById('two').value = 2;
document.getElementById('add').click();
expect(document.getElementById('number').innerHTML).toBe('3');
});