TWD + shadcn/ui Testing Guide

A comprehensive interactive guide demonstrating how to test shadcn/ui components using TWD (Testing While Developing).

🎯 What is This?

This repository showcases testing patterns for 22+ shadcn/ui components. Each component page displays:

• Live Component Preview – Interactive demonstration
• Component Code – Reusable implementation example
• TWD Test Code – Complete test patterns with recommended selectors

Perfect for developers learning how to test shadcn/ui components effectively.

📦 Features

• 21 Fully Documented Components with TWD tests
• 2 WIP Placeholder Pages (Range Calendar, Data Table)

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

npm install

Development

npm run dev

Opens at http://localhost:5173 with TWD test sidebar enabled in dev mode.

Build

npm run build

Optimized production build ready for GitHub Pages or any static host.

📋 Component Coverage

✅ Fully Implemented (With TWD Tests)

• Accordion
• Alert Dialog
• Breadcrumb
• Button
• Calendar
• Checkbox
• Collapsible
• Command
• Context Menu
• Dialog
• Drawer
• Dropdown Menu
• Pagination
• Popover
• Radio Group
• Select
• Slider
• Sonner
• Switch
• Table (Basic)
• Tabs
• Tooltip

🚧 Work in Progress (WIP)

• Range Calendar
• Data Table (TanStack)

🧪 Testing Patterns

Key Testing Concepts

screenDom – Standard DOM queries

await screenDom.findByRole('button', { name: 'Click me' });

screenDomGlobal – Portal-rendered elements (dialogs, popovers, tooltips)

await screenDomGlobal.findByText('Tooltip content');

Assertions

twd.should(element, 'be.visible');
expect(element).eql(null);  // For non-existence

Selector Best Practices

• Tables: Use role:'table', columnheader, text content for rows
• Portals: Use screenDomGlobal for dialogs, drawers, popovers, tooltips
• Forms: Use findByLabelText(), findByRole() for inputs
• Navigation: Use link text and button names

📖 Resources

• TWD Official Docs
• shadcn/ui Documentation
• React Router v7
• Tailwind CSS

📝 License

MIT

---

Happy TWD Testing! 🎉