导入元素上的 ESLint no-undef class

Question

我有一个要测试的元素 (display-enter-button.html):

<template>
    <data-local-storage id="localStorage"></data-local-storage>
    <app-location route="{{route}}"></app-location>
    <span role="button" tabindex="0" class="btn" on-click="_btnClick" on-KeyPress="_btnKeyPress">enter here</span>
</template>

<script>
    class DisplayEnterButton extends Polymer.Element {
        _btnClick() {
            // Something happens
        });
    }
</script>

我想验证 _btnClick 方法在我单击回车按钮时被调用。这是我的单元测试：

<head>
 <title>display-enter-button</title>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../bower_components/web-component-tester/browser.js"></script>
<!--
    Load component to test
-->
<link rel="import" href="../../src/displays/display-enter-button.html">
</head>
<body>
<!--
    Add component to test fixure and give it an incrementing id
-->
<test-fixture id="fixture-one">
    <template>
        <display-enter-button></display-enter-button>
    </template>
</test-fixture>

<script>
// Name the suite the same as the type of tests
suite('Query Selector Tests', function() {
    test('On click function called', function() {
        // Select element to trigger event
        var circle = fixture('fixture-one').shadowRoot.querySelector('.btn');
        // Spy on the method that should run
        var clickButton = sinon.spy(DisplayEnterButton.prototype, '_btnClick');
        // Trigger the event
        circle.click();
        // Test it
        sinon.assert.called(clickButton);
    });
});
</script>

测试运行，但我无法克服这个 ESLint 错误：

'DisplayEnterButton' is not defined no-undef

我想尽可能避免 ESLint 规则异常（例如 global），因为我将来会经常使用这种模式。我该如何解决这个错误？

Answer 1

编辑：Tony 接受的答案是最佳解决方案

这也有效，但创建了一个新实例而不是使用 fixture 实例。

test('On click function called', function() {
        // Create instance of the class we want to test the methods of
        var proto = document.createElement('display-enter-button')
        .constructor.prototype;
        // Replace the method with a spy
        var func = sinon.spy(proto, '_btnClick');
        // Select the elemen to test
        var btn = fixture('fixture-one').shadowRoot.querySelector('.btn');
        // Simulate the trigger
        btn.click();
        // Check if the function was called
        sinon.assert.called(func);
    });

Answer 2

不涉及创建测试元素的另一个实例的 Xavier 解决方案的替代方法是从测试夹具中获取实际的被测元素：

<test-fixture id="BasicView">
  <template>
    <!-- give the test element an ID to query for it in tests -->
    <my-view1 id="testEl"></my-view1>
  </template>
</test-fixture>

<script>
  suite('my-view1 tests', function() {
    test('on click', function() {
      var proto = document.getElementById('testEl').constructor.prototype;
      var clickButton = sinon.spy(proto, '_btnClick');
      // ...
    });
  });
</script>

导入元素上的 ESLint no-undef class

ESLint no-undef on imported element class

polymer

eslint

polymer-2.x

web-component-tester