1

Estoy desarrollando un web omponent usando LitElement y a la hora de ejecutar pruebas unitarias me estoy encontrando con que cuando compruebo si un método se ha llamado al añadir un eventListener y éste dice no haber sido llamado.

Este es un ejemplo de lo que estoy intentando hacer.

Mi Componente

import { LitElement, html, css } from 'lit-element';

export default class MyComponent extends LitElement {

    myAction() {
        console.log('hola');
    }

    render() {
        return html`
            <button @click="${this.myAction}">Click Me</button>
        `;
    }

}

customElements.define('my-element', MyElement);

Mi Test

import {
  html,
  fixture,
  expect,
} from '@open-wc/testing';

import './miComponente.js';

describe('test', () => {
  let element;
  let sandbox;

  beforeEach(async () => {
    element = await(fixture(html`<my-element></my-element>`));
    sandbox = sinon.createSandbox();
  })

  afterEach(() => { sandbox.restore(); })

  it('should call myAction method when button is clicked', () => {
    const button = element.shadowRoot.querySelector('button');
    sandbox.spy(element, 'myAction');
    button.click();
    expect(element.myAction.calledOnce).to.be.true;
  })
});

Tambien he probado a poner el espía en sandbox.spy(element.myAction, 'bind') por si fuera que lit-html aplica un bind, pero tampoco es eso.

¿Alguna idea de por qué puede ser y cómo proceder?

Como Test Runner estoy usando Karma y uso Sinon, Chai y las herramientas que ofrece @open-wc.

Tengo constancia de que el método se está llamando, como se puede ver en el siguiente ejemplo.

<script type="module">

// Lo embebo en el HTML porque el editor de SO me está dando error

import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';

export default class MyComponent extends LitElement {

    myAction() {
        console.log('hola');
    }

    render() {
        return html`
            <button @click="${this.myAction}">Click Me</button>
        `;
    }

}

customElements.define('my-component', MyComponent);

</script>

<my-component></my-component>

1 respuesta 1

1

Tras estar investigando y trabajando sobre este problema he descubierto que lo que hace LitElement y lit-html con este @click es añadir el contexto al método mediante un .call(). He modificado el test a

it('should call myAction method when button is clicked', () => {
    const button = element.shadowRoot.querySelector('button');
    sandbox.spy(element.myAction, 'call');
    button.click();
    expect(element.myAction.call.calledOnce).to.be.true;
  })

y para este caso el test pasa correctamente.

No tengo muy claro por qué sinon no es capaz de detectar que el método se ha llamado cuando se le aplica .call() pero así es como he solucionado el problema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.