[Documentation]: Angular - The documentation for handing event emitters is non existant. about storybook HOT 2 OPEN

import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
import { ButtonComponent } from './button.component';
import { userEvent, within } from '@storybook/testing-library';

const meta: Meta<ButtonComponent> = {
  title: 'Button Test',
  component: ButtonComponent,
  tags: ['autodocs'],
  decorators: [
    moduleMetadata({
      imports: []
    })
  ]
};

export default meta;

type Story = StoryObj<ButtonComponent>;

export const Primary: Story = {
  args: {},
  play: async ({ canvasElement, args }) => {
    const element = within(canvasElement);
    const clickCountSpy = jest.fn();
    args.clickCount = { emit: clickCountSpy };
    userEvent.click(element.getByText('Click Me'));
    expect(clickCountSpy).toHaveBeenCalledWith(1);
  }
};

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'cv-button',
  standalone: true,
  template: `
    <button (click)="onClick()">Click Me</button>
  `,
  imports: [],
})
export class ButtonComponent {
  private count = 0
  @Output() clickCount = new EventEmitter<number>

  onClick() {
    this.count++
    this.clickCount.emit(this.count)
  }
}

import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
import { ButtonComponent } from './button.component';
import { userEvent, within, expect, fn } from '@storybook/test';

const meta:Meta<ButtonComponent> = {
  title: 'Button Test',
  component: ButtonComponent,
  tags: ['autodocs'],
  args: {
    clickCount: fn()
  },
  decorators: [
    moduleMetadata({
      imports: []
    })
  ]
}

export default meta

type Story = StoryObj<ButtonComponent>

export const Primary: Story = {
  args: {},
  play: async ({canvasElement, args}) => {
    const element = within(canvasElement)   
    await userEvent.click(element.getByText('Click Me'))
    expect(args.clickCount).toHaveBeenCalledWith(1)
    await userEvent.click(element.getByText('Click Me'))
    expect(args.clickCount).toHaveBeenCalledWith(2)
  }
}