1import { SupportUs } from "@marzneshin/features/support-us";
 2import type { Meta, StoryObj } from "@storybook/react";
 3import { within, userEvent, expect } from '@storybook/test';
 4
 5const meta: Meta<typeof SupportUs> = {
 6    title: "Features/Support Us",
 7    component: SupportUs,
 8    tags: ["autodocs"]
 9};
10
11export default meta;
12
13type Story = StoryObj<typeof SupportUs>;
14const donationLink = "https://localhost.com/donation";
15
16/**
17 * This variation does not provide X button to close the card.
18 * */
19export const View: Story = {
20    args: {
21        open: true,
22        variant: "view",
23        donationLink
24    }
25}
26
27/**
28 * This variation does provide X button to close the card. However,
29 * the card will not be restored incase the component is refersh. Since
30 * its using browser local storage.
31 * */
32export const LocalStorage: Story = {
33    args: {
34        open: true,
35        variant: "local-storage",
36        donationLink
37
38    }
39}
40
41
42/**
43 * This variation does provide X button to close the card. However,
44 * the card will be restored incase the component is refersh.
45 * */
46export const Status: Story = {
47    args: {
48        open: true,
49        variant: "status",
50        donationLink
51    }
52}
53
54Status.play = async ({ canvasElement }) => {
55    const canvas = within(canvasElement);
56
57    // Check if the component is rendered
58    await expect(canvas.getByText(/Support Us/i)).toBeInTheDocument();
59
60    // Check the Donation link
61    const donationLinkButton = canvas.getByRole('link', { name: /donate/i });
62    await expect(donationLinkButton).toHaveAttribute('href', donationLink);
63
64    // Simulate closing the support card
65    const closeButton = canvas.getByRole('button', { name: /Close/i });
66    await userEvent.click(closeButton);
67
68    // Check if the component is removed from the DOM
69    expect(canvas.queryByText(/Support Us/i)).not.toBeInTheDocument();
70};