web/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx

import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { expect, fn } from 'storybook/test'

import { PaymentOptionsGroup } from './PaymentOptionsGroup'
import { PaymentOption } from './PaymentOption'
import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'

const meta: Meta<typeof PaymentOptionsGroup> = {
  title: 'Components/Payment/PaymentOptionsGroup',
  component: PaymentOptionsGroup,
  decorators: [FormDecorator],
}
export default meta

type Story = StoryObj<typeof PaymentOptionsGroup>

export const Default: Story = {
  args: {
    label: 'Select Payment Method',
    name: 'paymentMethod',
    onChange: fn(),
    children: (
      <>
        <PaymentOption
          label="Visa"
          value={PaymentMethodEnum.visa}
          type={PaymentMethodEnum.visa}
        />
        <PaymentOption
          label="American Express"
          value={PaymentMethodEnum.americanExpress}
          type={PaymentMethodEnum.americanExpress}
        />
        <PaymentOption
          label="MasterCard"
          value={PaymentMethodEnum.masterCard}
          cardNumber="1234"
          type={PaymentMethodEnum.masterCard}
        />
      </>
    ),
  },
  play: async ({ canvas, userEvent, args }) => {
    const visaOption = await canvas.findByRole('radio', { name: 'Visa' })
    expect(visaOption).toBeInTheDocument()

    expect(args.onChange).not.toHaveBeenCalled()
    await userEvent.click(visaOption)
    expect(args.onChange).toHaveBeenCalledWith('visa')
  },
}