测试单击“ Web-Component”上的事件。故事书的按钮

Question

我在互联网上寻找有关如何测试单击事件的示例在按钮上（ Web组件/打字稿），但我找不到清晰的一。 您能建议我一些指南/文章或代码片段吗？

我已经创建了 story.ts 文件；这样的是：

import { html, TemplateResult } from 'lit';
import './index.ts';
import { Properties } from './model/button.interfaces';

export default {
  title: 'My button',
  component: 'my-button',
};

interface Story<T> {
  (args: T): TemplateResult;
  args?: Partial<T>;
  argTypes?: Record<string, unknown>;
  parameters?: any;
}

interface ArgTypes extends Properties{}

const Template: Story<ArgTypes> = (args: ArgTypes) => html`
      <my-button 
          ?disabled="${args.disabled}"
          color=${args.color}>
        ${args.text}
      </my-button>`

export const Button = Template.bind({});

Button.args = {
  label: "This is the text",
  color: "primary"
}

Button.argTypes = {
  color: {
    control: 'select',
    options: ['primary', 'secondary'],
    table: {
      category: 'Modifiers',
    },
  }, 
  disabled: {
    control: 'boolean',
    options: [true, false],
    table: {
      category: 'Modifiers',
    },
  }
}

谢谢

Answer 1

由于Web组件可作为本机HTML元素起作用，因此您可以将onclick属性附加到＆lt; my-button＆gt;。
尝试在组件上方添加脚本标签，在该组件上定义一个单击处理程序，然后将其添加到组件中。

const Template: Story<ArgTypes> = (args: ArgTypes) => html`
      <script>
          const clickHandler = () => console.log('clicked')
      </script>
      <my-button 
          ?disabled="${args.disabled}"
          color=${args.color}
          onclick="clickHandler()">
        ${args.text}
      </my-button>`

现在，每当单击按钮时，都应该看到日志。