How to test JavaScript code that references a html element in a html file
up vote
0
down vote
favorite
I am new to JavaScript and its testing libraries. I have been trying to run a unit test using mocha, chai and JSDOM.I have tried different resources to learn, but none explains in a way that is easy to understand for a beginner. I came up with a simple test. I know i have done a lot of things wrong in the test and am hoping someone can help on how to do the test or even a nice resource that covers my need.
my test
const JSDOM = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
const Auths = require('../UI/js/login.js')
auth = Auths("sammy@gmail.com","sa!@##$")
var assert = require('chai').assert;
describe('Login', function()
it('should return a wrong email or password for invalid login', function()
assert.equal(document.getElementById("erroMessage").value,"wrong email or password")
);
);
The code that am trying to test
class Auths
constructor(email,password)
this.email = email
this.password = password
// this function is called when the litsener responds to submit eve
login()
// url for endpoint
let url = "http://127.0.0.1:5000/api/v2/users/login"
// get login data from ui
let data =
email : this.email,
password : this.password
;
// define data to be used in options section
let fetchData =
method: 'POST',
headers:
"Content-Type": "application/json"
,
body:JSON.stringify(data)
;
// use the fetch api
fetch(url,fetchData)
.then(function(response)return response.json())
.then(function(response)
// store data fore use after login
localStorage.setItem('token',response.token);
localStorage.setItem('role',response.role);
localStorage.setItem('names',response.names);
// login the user
if(response.message === "wellcome "+response.names +", "+"you are loged in as "+response.role)
// login admin
if(response.role == "admin")
window.location.href = 'UI/Admin/admin.html';
// login store attendant
else
window.location.href = 'UI/Attendant.html';
// respond to wrong cridentials
else
document.getElementById("erroMessage").innerHTML = response.message;
)
let login = document.getElementById('login');
login.addEventListener('submit', function getTarget(e)
e.preventDefault()
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
auth = new Auths(email, password);
auth.login();
)
module.exports = Auths;
The error i have encountered
TypeError: Cannot read property 'addEventListener' of null
at Object. (A:sammyNew folderADC1-ADC4_Store_ManagerUIjslogin.js:70:7)
javascript unit-testing mocha chai jsdom
asked Nov 10 at 4:28
sammy mbugua
35
add a comment |
up vote
0
down vote
favorite
I am new to JavaScript and its testing libraries. I have been trying to run a unit test using mocha, chai and JSDOM.I have tried different resources to learn, but none explains in a way that is easy to understand for a beginner. I came up with a simple test. I know i have done a lot of things wrong in the test and am hoping someone can help on how to do the test or even a nice resource that covers my need.
my test
const JSDOM = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
const Auths = require('../UI/js/login.js')
auth = Auths("sammy@gmail.com","sa!@##$")
var assert = require('chai').assert;
describe('Login', function()
it('should return a wrong email or password for invalid login', function()
assert.equal(document.getElementById("erroMessage").value,"wrong email or password")
);
);
The code that am trying to test
class Auths
constructor(email,password)
this.email = email
this.password = password
// this function is called when the litsener responds to submit eve
login()
// url for endpoint
let url = "http://127.0.0.1:5000/api/v2/users/login"
// get login data from ui
let data =
email : this.email,
password : this.password
;
// define data to be used in options section
let fetchData =
method: 'POST',
headers:
"Content-Type": "application/json"
,
body:JSON.stringify(data)
;
// use the fetch api
fetch(url,fetchData)
.then(function(response)return response.json())
.then(function(response)
// store data fore use after login
localStorage.setItem('token',response.token);
localStorage.setItem('role',response.role);
localStorage.setItem('names',response.names);
// login the user
if(response.message === "wellcome "+response.names +", "+"you are loged in as "+response.role)
// login admin
if(response.role == "admin")
window.location.href = 'UI/Admin/admin.html';
// login store attendant
else
window.location.href = 'UI/Attendant.html';
// respond to wrong cridentials
else
document.getElementById("erroMessage").innerHTML = response.message;
)
let login = document.getElementById('login');
login.addEventListener('submit', function getTarget(e)
e.preventDefault()
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
auth = new Auths(email, password);
auth.login();
)
module.exports = Auths;
The error i have encountered
TypeError: Cannot read property 'addEventListener' of null
at Object. (A:sammyNew folderADC1-ADC4_Store_ManagerUIjslogin.js:70:7)
javascript unit-testing mocha chai jsdom
asked Nov 10 at 4:28
sammy mbugua
35
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am new to JavaScript and its testing libraries. I have been trying to run a unit test using mocha, chai and JSDOM.I have tried different resources to learn, but none explains in a way that is easy to understand for a beginner. I came up with a simple test. I know i have done a lot of things wrong in the test and am hoping someone can help on how to do the test or even a nice resource that covers my need.
my test
const JSDOM = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
const Auths = require('../UI/js/login.js')
auth = Auths("sammy@gmail.com","sa!@##$")
var assert = require('chai').assert;
describe('Login', function()
it('should return a wrong email or password for invalid login', function()
assert.equal(document.getElementById("erroMessage").value,"wrong email or password")
);
);
The code that am trying to test
class Auths
constructor(email,password)
this.email = email
this.password = password
// this function is called when the litsener responds to submit eve
login()
// url for endpoint
let url = "http://127.0.0.1:5000/api/v2/users/login"
// get login data from ui
let data =
email : this.email,
password : this.password
;
// define data to be used in options section
let fetchData =
method: 'POST',
headers:
"Content-Type": "application/json"
,
body:JSON.stringify(data)
;
// use the fetch api
fetch(url,fetchData)
.then(function(response)return response.json())
.then(function(response)
// store data fore use after login
localStorage.setItem('token',response.token);
localStorage.setItem('role',response.role);
localStorage.setItem('names',response.names);
// login the user
if(response.message === "wellcome "+response.names +", "+"you are loged in as "+response.role)
// login admin
if(response.role == "admin")
window.location.href = 'UI/Admin/admin.html';
// login store attendant
else
window.location.href = 'UI/Attendant.html';
// respond to wrong cridentials
else
document.getElementById("erroMessage").innerHTML = response.message;
)
let login = document.getElementById('login');
login.addEventListener('submit', function getTarget(e)
e.preventDefault()
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
auth = new Auths(email, password);
auth.login();
)
module.exports = Auths;
The error i have encountered
TypeError: Cannot read property 'addEventListener' of null
at Object. (A:sammyNew folderADC1-ADC4_Store_ManagerUIjslogin.js:70:7)
javascript unit-testing mocha chai jsdom
asked Nov 10 at 4:28
sammy mbugua
35
I am new to JavaScript and its testing libraries. I have been trying to run a unit test using mocha, chai and JSDOM.I have tried different resources to learn, but none explains in a way that is easy to understand for a beginner. I came up with a simple test. I know i have done a lot of things wrong in the test and am hoping someone can help on how to do the test or even a nice resource that covers my need.
my test
const JSDOM = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
const Auths = require('../UI/js/login.js')
auth = Auths("sammy@gmail.com","sa!@##$")
var assert = require('chai').assert;
describe('Login', function()
it('should return a wrong email or password for invalid login', function()
assert.equal(document.getElementById("erroMessage").value,"wrong email or password")
);
);
The code that am trying to test
class Auths
constructor(email,password)
this.email = email
this.password = password
// this function is called when the litsener responds to submit eve
login()
// url for endpoint
let url = "http://127.0.0.1:5000/api/v2/users/login"
// get login data from ui
let data =
email : this.email,
password : this.password
;
// define data to be used in options section
let fetchData =
method: 'POST',
headers:
"Content-Type": "application/json"
,
body:JSON.stringify(data)
;
// use the fetch api
fetch(url,fetchData)
.then(function(response)return response.json())
.then(function(response)
// store data fore use after login
localStorage.setItem('token',response.token);
localStorage.setItem('role',response.role);
localStorage.setItem('names',response.names);
// login the user
if(response.message === "wellcome "+response.names +", "+"you are loged in as "+response.role)
// login admin
if(response.role == "admin")
window.location.href = 'UI/Admin/admin.html';
// login store attendant
else
window.location.href = 'UI/Attendant.html';
// respond to wrong cridentials
else
document.getElementById("erroMessage").innerHTML = response.message;
)
let login = document.getElementById('login');
login.addEventListener('submit', function getTarget(e)
e.preventDefault()
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
auth = new Auths(email, password);
auth.login();
)
module.exports = Auths;
The error i have encountered
TypeError: Cannot read property 'addEventListener' of null
at Object. (A:sammyNew folderADC1-ADC4_Store_ManagerUIjslogin.js:70:7)
javascript unit-testing mocha chai jsdom
javascript unit-testing mocha chai jsdom
asked Nov 10 at 4:28
sammy mbugua
35
asked Nov 10 at 4:28
sammy mbugua
35
asked Nov 10 at 4:28
sammy mbugua
35
asked Nov 10 at 4:28
sammy mbugua
35
asked Nov 10 at 4:28
sammy mbugua
35
35
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53235995%2fhow-to-test-javascript-code-that-references-a-html-element-in-a-html-file%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
