Stencil: Mock a Method Call / specific function

Question

Should be the latest stencil version Date 15.02.:

When running a spec-test, the test can't be run because it fails at:

MockHTMLElement is missing assignedElements() method

The spec-test is currently written as follows:

import { newSpecPage } from '@stencil/core/testing';
import { mySelect } from '../my-select';

describe('my-select', () => {
  it('renders', async () => {
    const page = await newSpecPage({
      components: [mySelect],
      html: `<my-select></my-select>`,
    });
    expect(page.root).toEqualHtml(`
      <my-select>
        <mock:shadow-root>
          <select class='my-select'></select>
        </mock:shadow-root>
      </my-select>
    `);
  });
});

my-select contains several parts, the control itself is working "in real", but the test can't be performed because of:

componentDidLoad() {
    const slotElement = this.host.shadowRoot.querySelector('slot') as HTMLSlotElement
    this.select = this.host.shadowRoot.querySelector('select') as HTMLSelectElement;

    let options = slotElement.assignedElements() as Element[];

    options.forEach(opt => this.select.appendChild(opt));

    this.select.removeChild(slotElement);

    this.select.value = this.value;
    this.initialized = true;
}

After debugging, the reason because the test fails is because the slotElement is created as MockHTMLElement (by stencil), which does not provide the .assignedElements() method.

So, what can be done here? In java i'd simply mock "HTMLSlotElement" and create a spy on the assignedElements-Method in order to perform further test.

I have absolutly no idea on how to achieve this in a stencil typescript test.

Stencil: Mock a Method Call / specific function

0 Answers0