Javascript 开放式wc试验中使用sinon的短截线照明单元法

我正在使用OpenWC对使用lit元素编写的自定义元素进行单元测试。我们正在使用卡玛、摩卡、西农和柴。我正在尝试测试元素的构造函数：

constructor() {
  super();
  window.addEventListener(
    'click',
     this._handleClickOutside
  );
}

作为参考，试验中使用的功能包括：

 _handleClickOutside = () => {
    console.log('calling real')
    this.active = false;
  };

disconnectedCallback() {
    window.removeEventListener('click', this._handleClickOutside);
  }

为了测试这一点，我需要存根this.\u handleClickOutside，并检查在调度click事件时是否调用this.\u handleClickOutside。下面是我在测试中的尝试，其中el是我的自定义元素，已使用open wc初始化：

    it('should add event listener to window for click', () => {
      const clickEvent = new Event('click');
      el.disconnectedCallback();
      const spy = sinon.stub(el, '_handleClickOutside').callsFake( () => {console.log('calling fake')});
      el._handleClickOutside = spy;
      el.constructor();
      window.dispatchEvent(clickEvent);
      expect(spy.callCount).to.equal(1);
     });

我知道，当我使用OpenWC创建元素时，构造函数将在存根就位之前被调用，因此我尝试使用el.disconnectedCallback（）删除事件侦听器，存根函数，然后再次调用构造函数以使用存根添加事件侦听器。然而，这仍然是调用真正的函数

---

通过在调用此函数的构造函数中使用匿名函数，我已经能够使测试正常工作。\u handleClickOutside但如果我这样做，我看不到在断开连接的回调中删除事件侦听器的方法。想知道为什么在存根就位时再次调用构造函数无法存根函数。

您需要进行一些重构。您需要将

\u handleClickOutside

类属性方法更改为类原型方法。以便可以在实例化元素之前对其进行存根

例如

element.ts

：

类MyElement{
主动=真；
构造函数（）{
this.\u handleclickout=this.\u handleclickout.bind（this）；
window.addEventListener（“单击”，此.\u handleclickout）；
}
_handleClickOutside（）{
console.log（“调用real”）；
this.active=false；
}
}
导出默认MyElement；

element.test.ts

：

从“/element”导入MyElement；
从“sinon”进口sinon；
从“chai”导入{expect}；
//您不需要在浏览器测试环境中设置jsdom
//jsdom启动
从“jsdom”导入jsdom；
常量html=“”+“”；
常量url=”http://localhost";
const document=new jsdom.jsdom（html，{url}）；
const window=document.window；
（全局，如有）。文档=window.document；
（全局，如有）。窗口=窗口；
//jsdom端
描述（“MyElement”，（）=>{
之后（（）=>{
sinon.restore（）；
});
描述（“#construtor”，（）=>{
它（“应该通过”，（）=>{
const addEventListenerStub=sinon.stub（窗口，“addEventListener”）；
const handleClickOutsideStub=sinon.stub（MyElement.prototype，“\u handleClickOutside”）.callsFake（（）=>{
console.log（“调用假”）；
});
新MyElement（）；
addEventListenerStub.yield（）；
sinon.assert.calledWithJustice（addEventListenerStub，“click”，sinon.match.func）；
sinon.assert.calledOnce（handleClickOutsideStub）；
});
});
描述（“###u handleclickout”，（）=>{
它（“应该通过”，（）=>{
const el=新的MyElement（）；
el._handleclickout（）；
期望（el.active）.to.be.false；
});
});
});

100%覆盖率的单元测试结果：

MyElement
#承包商
冒牌货
✓ 应该通过
#_外把手
呼唤真实
✓ 应该通过
2次通过（11毫秒）
-----------------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
-----------------|----------|----------|----------|----------|-------------------|
所有文件| 100 | 100 | 100 | 100 ||
element.test.ts | 100 | 100 | 100 | 100 ||
元素.ts | 100 | 100 | 100 | 100 ||
-----------------|----------|----------|----------|----------|-------------------|

---

源代码：

谢谢，我刚刚读到关于模拟和函数作为属性的问题。这个解决方案的问题是我们没有使用类本身进行测试，而是使用OpenWC初始化元素。你知道如何使用OpenWC访问MyElement.prototype吗？el.prototype未定义。