Testing

Commands and strategies for testing sensory-ui components from the shadcn registry.

Quick ReferenceCopy Anchor Link

TypeScript CompilationCopy Anchor Link

The fastest way to validate all modules:

npx tsc --noEmit

This checks:

• All 17 sound roles are correctly typed
• All component sound props accept SoundRole | false
• Pack generator covers all roles
• Registry maps all 9 packs correctly

Development ServerCopy Anchor Link

bun run dev

Open http://localhost:3000 and use the interactive showcase to test:

• Button demo: Click to hear interaction.tap
• Checkbox/Switch demo: Toggle to hear interaction.toggle
• Slider demo: Drag to hear interaction.subtle
• Tabs demo: Switch tabs to hear navigation.tab
• Overlay demos: Dialog/sheet for overlay.open/overlay.close
• Notification demos: Toasts for all notification roles

Component-Level TestingCopy Anchor Link

ButtonCopy Anchor Link

import { Button } from "@/components/ui/sensory-ui/button";

// Default sound (interaction.tap)
<Button>Click me</Button>

// Custom sound
<Button sound="interaction.confirm">Confirm</Button>

// Silenced
<Button sound={false}>Silent</Button>

DialogCopy Anchor Link

import {
  Dialog,
  DialogTrigger,
  DialogContent,
} from "@/components/ui/sensory-ui/dialog";

// Default (overlay.open on open, overlay.close on close)
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>Content</DialogContent>
</Dialog>

TabsCopy Anchor Link

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/components/ui/sensory-ui/tabs";

// Default (navigation.tab on tab switch)
<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
</Tabs>

Config TestingCopy Anchor Link

Disable all soundsCopy Anchor Link

<SensoryUIProvider config={{ enabled: false }}>

Disable a categoryCopy Anchor Link

<SensoryUIProvider config={{ categories: { hero: false, notification: false } }}>

Volume controlCopy Anchor Link

<SensoryUIProvider config={{ volume: 0.1 }}>

Custom overridesCopy Anchor Link

<SensoryUIProvider config={{ overrides: { "interaction.tap": "/sounds/custom/click.mp3" } }}>

Registry ValidationCopy Anchor Link

# Validate GitHub registry
npx shadcn@latest registry validate SatyamVyas04/sensory-ui

# List all items
npx shadcn@latest list SatyamVyas04/sensory-ui

# View a specific item
npx shadcn@latest view SatyamVyas04/sensory-ui/sensory-ui-core

Spam/Rapid-Fire TestingCopy Anchor Link

The engine cancels previous sounds when a new sound is triggered rapidly:

1. Rapidly clicking a button: only the latest click sound plays
2. Rapidly toggling a checkbox: no overlapping toggle sounds
3. Dragging a slider quickly: subtle ticks don't pile up

This is handled by activePlayback tracking in engine.ts.

Accessibility TestingCopy Anchor Link

1. Enable prefers-reduced-motion: reduce in browser dev tools → sounds suppressed
2. Set reducedMotion: "force-off" → sounds suppressed regardless of OS setting
3. Set reducedMotion: "force-on" → sounds play regardless of OS setting
4. Keyboard navigation (Tab + Enter/Space) triggers same sounds as mouse clicks