xertica-ui 2.0.3 → 2.0.4

package/components/ui/switch/switch.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from 'storybook/test';
 import { Switch } from './switch';
 import { Label } from '../label';
 import React from 'react';
@@ -64,4 +65,22 @@ export const Sizes: Story = {
       </div>
     </div>
   ),
-};
+};
+
+export const Toggle: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Switch id="play-switch" />
+      <Label htmlFor="play-switch">Airplane Mode</Label>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const switchEl = canvas.getByRole('switch');
+    await expect(switchEl).toHaveAttribute('aria-checked', 'false');
+    await userEvent.click(switchEl);
+    await expect(switchEl).toHaveAttribute('aria-checked', 'true');
+    await userEvent.click(switchEl);
+    await expect(switchEl).toHaveAttribute('aria-checked', 'false');
+  },
+};

package/components/ui/tabs/tabs.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from 'storybook/test';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../card';
 import { Button } from '../button';
@@ -105,4 +106,28 @@ export const Analytics: Story = {
       </TabsContent>
     </Tabs>
   ),
-};
+};
+
+export const SwitchTab: Story = {
+  args: { defaultValue: 'account', className: 'w-[400px]' },
+  render: (args) => (
+    <Tabs {...args}>
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account"><p className="p-4 text-sm">Account content</p></TabsContent>
+      <TabsContent value="password"><p className="p-4 text-sm">Password content</p></TabsContent>
+    </Tabs>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const accountTab = canvas.getByRole('tab', { name: 'Account' });
+    const passwordTab = canvas.getByRole('tab', { name: 'Password' });
+    await expect(accountTab).toHaveAttribute('aria-selected', 'true');
+    await expect(passwordTab).toHaveAttribute('aria-selected', 'false');
+    await userEvent.click(passwordTab);
+    await expect(passwordTab).toHaveAttribute('aria-selected', 'true');
+    await expect(accountTab).toHaveAttribute('aria-selected', 'false');
+  },
+};