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