Question

我是单位测试程序的新手，我正试图弄清楚如何正确地完成它。

在我的项目中，我写的javascript基本上是通过事件与dom对象进行交互，所以我需要编写一个基本上操纵DOM的测试。

现在，我有这个项目结构：

init
|--node_modules
|--spec
|--src
    |--assets
    |--dist
    |--js
    |--scss
    |--index.html
|--gulpfile.js
|--package.lock.json
|--package.json

我在root中设置了jasmine spec文件夹，但也许，因为我需要使用dom工作，我是否要在scr路径中设置spec文件夹？然后在我的index.html末尾插入test.spec.js？

现在我创建这个测试文件，用于测试Contacts.js：

const contactsHandler              = require('../src/js/Contacts.js');

const contacts = new contactsHandler.Contacts();


describe("A suite", function() {
  it("contains spec with an expectation", function() {
    expect(typeof(contactsHandler)).toBe('object');
  });
});

现在，如果我删除第二行：const contacts = new contactsHandler.Contacts();测试通过，相反我会收到错误。这是我的联系人课程：

class Contacts{
  constructor(){
    this.contactsButton = document.getElementById('contacts-button');
    this.contactsContainer = document.getElementById('contacts-container');
    this.phoneTrigger = document.getElementById('phone-trigger');
    this.mailTrigger = document.getElementById('mail-trigger');
    this.phone = document.getElementById('phone');
    this.mail = document.getElementById('mail');
    this.close = Array.from(document.querySelectorAll('.close-contact'));
    this.mailText = '.contacts--mail--text';
    this.phoneText = '.contacts--phone--text';
    this.init()
  }
  init(){
    this._initContacts();
    this._initPhone();
    this._initMail();
    this._close();
    this._textAnimation();

  }

  _initContacts(){
    let self = this;
    this.contactsButton.addEventListener('click',function(){
      TweenLite.from(self.contactsContainer,2,
        {
          autoAlpha:0,
        })
    })
  }

  _initPhone(){
    let self = this;
    this.phoneTrigger.addEventListener('click',function(){
      TweenLite.to(self.phone,1,{autoAlpha:1,top:'0',left:'0',zIndex:20})
      $(self.phoneText).textillate('start')
    })
  }
  _close(){
    this.close.forEach(function(el){
      el.addEventListener('click',function(){
        if(this.parentElement.classList.contains('contacts--mail')){
          TweenLite.to(this.parentElement,1,{autoAlpha:0,top:'-50%'})
        }else{
          TweenLite.to(this.parentElement,1,{autoAlpha:0,top:'50%'})
        }
      })
    })
  }

  _initMail(){
    let self = this;
    this.mailTrigger.addEventListener('click',function(){
      TweenLite.to(self.mail,.7,{autoAlpha:1,top:'0',left:'0',zIndex:20})
      $(self.mailText).textillate('start')
    })
  }

  _textAnimation(){
    $(this.phoneText).textillate({
        in: { effect: 'bounceIn' },
        autoStart:false
    })
    $(this.mailText).textillate({
        in: { effect: 'bounceIn' },
        autoStart:false
    })
  }
}




module.exports = {
  Contacts
}

我认为我得到了一个错误，因为当我调用构造函数时，它会尝试访问一些DOM元素，当然这些元素无法找到。那么：我要将test.spec.js文件放入src文件夹然后在html文件中调用它吗？这是一个很好的程序吗？感谢

在javascript中进行单元测试，第一种方法

0 个答案: