javascript - How to pass function as prop in stenciljs e2e tests?

admin管理员组
文章数量:1023242

its mentioned as using $evalfrom puppetry. But when I inspect the testing browser I cant see the "click" event assigned to the button.

import { Component, h, Host, Prop } from '@stencil/core';
 

@Component({
  tag: 'custom-button', 
  shadow: true,
})
export class CustomButton {
  @Prop() onClick!: (event: UIEvent) => void;

  render() {
    return (
      <Host>
        <button
          onClick={this.onClick} 
        >
          <slot />
        </button>
      </Host>
    );
  }
}

and here is my test case

it('should render the button and click ', async () => {
    const props = {
    onClick: jest.fn(),
    };
    const page = await newE2EPage({
      waitUntil: 'networkidle2',
    }); 
    await page.setViewport({ width: 400, height: 800 });
    await page.setContent('<custom-button>some text</custom-button>');
    await page.$eval(
      'custom-button',
      (elm, { onClick }) => {
        elm.onClick = onClick;
      },
      props,
    );
 

    const customButton = await page.find('custom-button');
    customButton.setProperty('onClick', props.onClick);
    expect(customButton).not.toBeFalsy();

    const buttonElement = await page.find('custom-button >>> button');
    buttonElement.triggerEvent('onClick');
    console.log('buttonElement ', buttonElement.triggerEvent('onClick'));
    await buttonElement?.click();
    await page.waitForChanges();

    expect(props.onClick).toHaveBeenCalled();
  });

https://stenciljs/docs/end-to-end-testing#set-a-prop-on-a-component-using-an-external-reference its mentioned as using $evalfrom puppetry. But when I inspect the testing browser I cant see the "click" event assigned to the button.

import { Component, h, Host, Prop } from '@stencil/core';
 

@Component({
  tag: 'custom-button', 
  shadow: true,
})
export class CustomButton {
  @Prop() onClick!: (event: UIEvent) => void;

  render() {
    return (
      <Host>
        <button
          onClick={this.onClick} 
        >
          <slot />
        </button>
      </Host>
    );
  }
}

and here is my test case

it('should render the button and click ', async () => {
    const props = {
    onClick: jest.fn(),
    };
    const page = await newE2EPage({
      waitUntil: 'networkidle2',
    }); 
    await page.setViewport({ width: 400, height: 800 });
    await page.setContent('<custom-button>some text</custom-button>');
    await page.$eval(
      'custom-button',
      (elm, { onClick }) => {
        elm.onClick = onClick;
      },
      props,
    );
 

    const customButton = await page.find('custom-button');
    customButton.setProperty('onClick', props.onClick);
    expect(customButton).not.toBeFalsy();

    const buttonElement = await page.find('custom-button >>> button');
    buttonElement.triggerEvent('onClick');
    console.log('buttonElement ', buttonElement.triggerEvent('onClick'));
    await buttonElement?.click();
    await page.waitForChanges();

    expect(props.onClick).toHaveBeenCalled();
  });

Share Improve this question asked Nov 19, 2024 at 9:31 wasilikoslow 1,9932 gold badges12 silver badges16 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

Apparently you need to expose the function and do some typing to "this". https://github/ionic-team/stencil/issues/1174

it('should render the button and click ', async () => {
    const page = await newE2EPage({
      waitUntil: 'networkidle2',
    });
    await page.setViewport({ width: 400, height: 800 });
    await page.setContent('<custom-button>some text</custom-button>');
    const onClick = jest.fn();
    await page.exposeFunction('onClick', onClick);
    await page.$eval(
      'custom-button',
      (elm, { onClick }) => {
        elm.disabled = false;
        elm.onClick = (this as any).onClick;
      },
      props,
    );
    await page.waitForSelector('.hydrated');

    const customButton = await page.find('custom-button');
    await customButton?.click();
    customButton.setProperty('onClick', props.onClick);
    await page.waitForChanges();
    expect(customButton).not.toBeFalsy();

    const buttonElement = await page.find('custom-button >>> button');

    await buttonElement?.click();
    await page.waitForChanges();

    expect(onClick).toHaveBeenCalled();
    expect(onClick).toHaveBeenCalledTimes(1);
  });

its mentioned as using $evalfrom puppetry. But when I inspect the testing browser I cant see the "click" event assigned to the button.

import { Component, h, Host, Prop } from '@stencil/core';
 

@Component({
  tag: 'custom-button', 
  shadow: true,
})
export class CustomButton {
  @Prop() onClick!: (event: UIEvent) => void;

  render() {
    return (
      <Host>
        <button
          onClick={this.onClick} 
        >
          <slot />
        </button>
      </Host>
    );
  }
}

and here is my test case

it('should render the button and click ', async () => {
    const props = {
    onClick: jest.fn(),
    };
    const page = await newE2EPage({
      waitUntil: 'networkidle2',
    }); 
    await page.setViewport({ width: 400, height: 800 });
    await page.setContent('<custom-button>some text</custom-button>');
    await page.$eval(
      'custom-button',
      (elm, { onClick }) => {
        elm.onClick = onClick;
      },
      props,
    );
 

    const customButton = await page.find('custom-button');
    customButton.setProperty('onClick', props.onClick);
    expect(customButton).not.toBeFalsy();

    const buttonElement = await page.find('custom-button >>> button');
    buttonElement.triggerEvent('onClick');
    console.log('buttonElement ', buttonElement.triggerEvent('onClick'));
    await buttonElement?.click();
    await page.waitForChanges();

    expect(props.onClick).toHaveBeenCalled();
  });

import { Component, h, Host, Prop } from '@stencil/core';
 

@Component({
  tag: 'custom-button', 
  shadow: true,
})
export class CustomButton {
  @Prop() onClick!: (event: UIEvent) => void;

  render() {
    return (
      <Host>
        <button
          onClick={this.onClick} 
        >
          <slot />
        </button>
      </Host>
    );
  }
}

and here is my test case

it('should render the button and click ', async () => {
    const props = {
    onClick: jest.fn(),
    };
    const page = await newE2EPage({
      waitUntil: 'networkidle2',
    }); 
    await page.setViewport({ width: 400, height: 800 });
    await page.setContent('<custom-button>some text</custom-button>');
    await page.$eval(
      'custom-button',
      (elm, { onClick }) => {
        elm.onClick = onClick;
      },
      props,
    );
 

    const customButton = await page.find('custom-button');
    customButton.setProperty('onClick', props.onClick);
    expect(customButton).not.toBeFalsy();

    const buttonElement = await page.find('custom-button >>> button');
    buttonElement.triggerEvent('onClick');
    console.log('buttonElement ', buttonElement.triggerEvent('onClick'));
    await buttonElement?.click();
    await page.waitForChanges();

    expect(props.onClick).toHaveBeenCalled();
  });

Share Improve this question asked Nov 19, 2024 at 9:31 wasilikoslow 1,9932 gold badges12 silver badges16 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

Apparently you need to expose the function and do some typing to "this". https://github/ionic-team/stencil/issues/1174

it('should render the button and click ', async () => {
    const page = await newE2EPage({
      waitUntil: 'networkidle2',
    });
    await page.setViewport({ width: 400, height: 800 });
    await page.setContent('<custom-button>some text</custom-button>');
    const onClick = jest.fn();
    await page.exposeFunction('onClick', onClick);
    await page.$eval(
      'custom-button',
      (elm, { onClick }) => {
        elm.disabled = false;
        elm.onClick = (this as any).onClick;
      },
      props,
    );
    await page.waitForSelector('.hydrated');

    const customButton = await page.find('custom-button');
    await customButton?.click();
    customButton.setProperty('onClick', props.onClick);
    await page.waitForChanges();
    expect(customButton).not.toBeFalsy();

    const buttonElement = await page.find('custom-button >>> button');

    await buttonElement?.click();
    await page.waitForChanges();

    expect(onClick).toHaveBeenCalled();
    expect(onClick).toHaveBeenCalledTimes(1);
  });

本文标签： javascriptHow to pass function as prop in stenciljs e2e testsStack Overflow

版权声明：本文标题：javascript - How to pass function as prop in stenciljs e2e tests? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745570764a2156721.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - How to pass function as prop in stenciljs e2e tests? - Stack Overflow

1 Answer 1

1 Answer 1

更多相关文章