ESLint no-undef on imported element class

Question

I have an element (display-enter-button.html) that I want to test:

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

I want to verify that the _btnClick method gets called when I click on the enter button. This is my unit test:

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

The test runs, but I can't get past this ESLint error:

'DisplayEnterButton' is not defined no-undef

I'd like to avoid ESLint rule exceptions (such as global) if possible because I'm going to be using this pattern a lot in the future. How could I resolve this error?

score 2 · Accepted Answer · answered Jun 25 '17 at 15:02

2

An alternative to Xavier's solution that doesn't involve creating another instance of the test element is to fetch the actual element under test from the test fixture:

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

answered Jun 25 '17 at 15:02

tony19

125,647
18
229
307

Thanks, after reading your code this is the solution I want to implement. Although I can't get it to work: Error: Cannot read property 'constructor' of null – Xavier Hendrickx Jun 25 '17 at 15:27
Odd. It works for me. Did you give your test element an ID of `testEl`? – tony19 Jun 25 '17 at 15:28
– Xavier Hendrickx Jun 25 '17 at 15:29
Hmm. What browser version? – tony19 Jun 25 '17 at 15:31
Chrome Version 59.0.3071.109 (Official Build) (64-bit). – Xavier Hendrickx Jun 25 '17 at 15:31
Maybe grab it over fixture? Something like var proto = fixture('fixture-one').shadowRoot.querySelector('#testEl').constructor.prototype; – Xavier Hendrickx Jun 25 '17 at 15:38
I can't seem to reproduce the error. Try this: https://github.com/tony19-sandbox/wct-prototype-fetch – tony19 Jun 25 '17 at 15:46
Awh I'm so sorry! Your solution works, I had commented out circle.click()... Thanks a lot for your awesome help! – Xavier Hendrickx Jun 25 '17 at 16:02
@XavierHendrickx No problem :) – tony19 Jun 25 '17 at 16:04

Xavier Hendrickx · Answer 2 · 2017-06-25T16:42:56.393

EDIT: Tony's accepted answer is the best solution

This worked as well, but creates a new instance instead of using fixture instance.

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

ESLint no-undef on imported element class

2 Answers2