ca6cc5ab6c
feat(SW-3636): Storybook structure * New sections in Storybook sidebar * Group Storybook content files and add token files for spacing, border radius and shadows Approved-by: Joakim Jäderberg
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
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: 'Patterns/Form/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')
|
|
},
|
|
}
|