如何测试引用 html 文件中的 html 元素的 JavaScript 代码答案

【问题标题】：How to test JavaScript code that references a html element in a html file如何测试引用 html 文件中的 html 元素的 JavaScript 代码
【发布时间】：2018-11-10 04:28:53
【问题描述】：

我是 JavaScript 及其测试库的新手。我一直在尝试使用 mocha、chai 和 JSDOM 运行单元测试。我尝试了不同的资源来学习，但没有一个以易于初学者理解的方式进行解释。我想出了一个简单的测试。我知道我在测试中做错了很多事情，希望有人能帮助我解决如何进行测试，甚至是满足我需求的好资源。

我的测试

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")

  });
});

正在尝试测试的代码

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;

我遇到的错误

TypeError：无法读取 null 的属性“addEventListener” 在对象。 (A:\sammy\新建文件夹\ADC1-ADC4_Store_Manager\UI\js\login.js:70:7)

【问题讨论】：

标签： javascript unit-testing mocha.js chai jsdom

【解决方案1】：

您页面上的元素未定义。您可以将它们写入测试中的文档。请参阅下面的更改代码。但是，您确实想调用 auth.login()，这会导致 login.js 中的 fetch 出错。因此，我会考虑研究一个模拟框架，您可以在其中模拟调用和响应，以便您可以验证您的响应逻辑是否有效。

const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
const assert = require('assert');

global.window = dom.window;
global.document = dom.window.document;
global.document.write('<button type="button" id="login"> Login</button >')
global.document.write('<input id="erroMessage" value="wrong email or password">')

const Auths = require('../js/login.js')
auth = new Auths("sammy@gmail.com", "sa!@##$")

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

【讨论】：