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>;
14
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    }
24}
25
26/**
27 * This variation does provide X button to close the card. However,
28 * the card will not be restored incase the component is refersh. Since
29 * its using browser local storage.
30 * */
31export const LocalStorage: Story = {
32    args: {
33        open: true,
34        variant: "local-storage"
35    }
36}
37
38
39/**
40 * This variation does provide X button to close the card. However,
41 * the card will be restored incase the component is refersh.
42 * */
43export const Status: Story = {
44    args: {
45        open: true,
46        variant: "status"
47    }
48}
49
50Status.play = async ({ canvasElement }) => {
51    const canvas = within(canvasElement);
52
53    // Check if the component is rendered
54    await expect(canvas.getByText(/Support Us/i)).toBeInTheDocument();
55
56    // Check the Donation link
57    const donationLink = canvas.getByRole('link', { name: /donate/i });
58    await expect(donationLink).toHaveAttribute('href', 'https://github.com/khodedawsh/marzneshin#donation');
59
60    // Simulate closing the support card
61    const closeButton = canvas.getByRole('button', { name: /Close/i });
62    await userEvent.click(closeButton);
63
64    // Check if the component is removed from the DOM
65    expect(canvas.queryByText(/Support Us/i)).not.toBeInTheDocument();
66};