gluestack Test Component Workflow
Comprehensive testing workflow for gluestack-ui components to ensure cross-platform compatibility, accessibility, and quality.
Testing Scope
This skill helps you test:
- Component functionality across iOS, Android, and Web
- Visual rendering and styling
- Accessibility features
- Performance
- Documentation and examples
- Integration in different apps
Workflow
PHASE 1: Test Environment Setup
Step 1.1: Identify Component to Test
Ask the user which component needs testing.
Step 1.2: Setup Development Environment
# Ensure dependencies are installed
yarn
# Sync source files to apps
yarn sync
# Start watch mode for live updates
yarn dev
Step 1.3: Link Packages (if testing core changes)
# If testing core package changes
yarn link:create
yarn link:apps
PHASE 2: Kitchen Sink App Testing
Step 2.1: Start Kitchen Sink App
cd apps/kitchen-sink
yarn dev
Step 2.2: iOS Testing
Test on iOS Simulator:
## iOS Testing Checklist
### Rendering
- [ ] Component renders correctly
- [ ] All variants display properly
- [ ] Styles are applied correctly
- [ ] Dark mode works (if supported)
- [ ] Responsive to screen sizes
### Functionality
- [ ] All interactive elements work (buttons, inputs, etc.)
- [ ] Animations smooth (60fps)
- [ ] Touch gestures work
- [ ] State changes work correctly
- [ ] Event handlers fire correctly
### Accessibility (VoiceOver)
- [ ] Component is focusable
- [ ] VoiceOver reads labels correctly
- [ ] Navigation with gestures works
- [ ] Announcements are clear
- [ ] All interactive elements accessible
### Performance
- [ ] No frame drops during animations
- [ ] Smooth scrolling (if applicable)
- [ ] Fast initial render
- [ ] No memory leaks
- [ ] Small bundle impact
### Edge Cases
- [ ] Long text content
- [ ] Missing optional props
- [ ] Extreme variant combinations
- [ ] Rapid interactions
- [ ] Network delays (if applicable)
Step 2.3: Android Testing
Test on Android Emulator:
## Android Testing Checklist
### Rendering
- [ ] Component renders correctly
- [ ] All variants display properly
- [ ] Styles are applied correctly
- [ ] Dark mode works (if supported)
- [ ] Responsive to screen sizes
### Functionality
- [ ] All interactive elements work
- [ ] Animations smooth
- [ ] Touch/press gestures work
- [ ] State changes work correctly
- [ ] Event handlers fire correctly
### Accessibility (TalkBack)
- [ ] Component is focusable
- [ ] TalkBack reads labels correctly
- [ ] Navigation works
- [ ] Announcements are clear
- [ ] All interactive elements accessible
### Performance
- [ ] No frame drops
- [ ] Smooth scrolling
- [ ] Fast initial render
- [ ] Memory efficient
- [ ] Works on low-end devices
### Android-Specific
- [ ] Back button behavior (if applicable)
- [ ] Hardware menu button (if applicable)
- [ ] Different screen densities
- [ ] Various Android versions
Step 2.4: Web Testing
Test in web browsers:
## Web Testing Checklist
### Rendering (Chrome)
- [ ] Component renders correctly
- [ ] All variants display properly
- [ ] Styles match native
- [ ] Dark mode works
- [ ] Responsive design works
### Rendering (Safari)
- [ ] Component renders correctly
- [ ] All variants display properly
- [ ] Styles match native
- [ ] iOS Safari works
### Rendering (Firefox)
- [ ] Component renders correctly
- [ ] All variants work
### Functionality
- [ ] Click events work
- [ ] Hover states work (if applicable)
- [ ] Keyboard navigation works
- [ ] Focus states visible
- [ ] State management works
### Accessibility (Web)
- [ ] Semantic HTML used
- [ ] ARIA attributes correct
- [ ] Keyboard navigation complete
- [ ] Tab order logical
- [ ] Focus indicators visible
- [ ] Screen reader announcements clear
### Performance
- [ ] Fast initial load
- [ ] Smooth animations
- [ ] Small bundle size
- [ ] No layout shifts
- [ ] Good Lighthouse score
PHASE 3: Website App Testing
Step 3.1: Start Website App
cd apps/website
yarn dev
Step 3.2: Documentation Testing
## Documentation Testing Checklist
### Page Load
- [ ] Documentation page loads without errors
- [ ] No console warnings
- [ ] All sections render
### Content
- [ ] Component description clear
- [ ] Installation instructions present
- [ ] API reference table complete
- [ ] Props documented accurately
- [ ] Examples render correctly
### Interactive Examples
- [ ] Basic example works
- [ ] All variant examples work
- [ ] Code is copy-pasteable
- [ ] Examples are self-contained
- [ ] No missing imports
### Navigation
- [ ] Sidebar navigation works
- [ ] Component appears in correct category
- [ ] Links to related components work
- [ ] Search finds component
### Code Blocks
- [ ] Syntax highlighting works
- [ ] Copy button works
- [ ] Code is formatted correctly
- [ ] TypeScript types shown
PHASE 4: Accessibility Testing
Step 4.1: Keyboard Navigation
## Keyboard Navigation Checklist
### Focus Management
- [ ] Tab moves focus forward
- [ ] Shift+Tab moves focus backward
- [ ] Focus visible (outline/ring)
- [ ] Focus order logical
- [ ] Focus trapped (if modal/dialog)
- [ ] Focus returns correctly (after close)
### Keyboard Shortcuts
- [ ] Enter activates buttons/links
- [ ] Space activates buttons/checkboxes
- [ ] Escape closes overlays
- [ ] Arrow keys navigate (if applicable)
- [ ] Home/End keys work (if applicable)
### Form Controls
- [ ] Tab to next input works
- [ ] Arrow keys work in select/radio
- [ ] Space checks checkbox
- [ ] Enter submits form
Step 4.2: Screen Reader Testing
Test with VoiceOver (macOS/iOS) and TalkBack (Android):
## Screen Reader Checklist
### Labels and Descriptions
- [ ] All interactive elements have labels
- [ ] Labels are descriptive
- [ ] Descriptions provide context
- [ ] Dynamic content announced
### ARIA Attributes
- [ ] role attribute correct
- [ ] aria-label present where needed
- [ ] aria-describedby used correctly
- [ ] aria-expanded for expandable elements
- [ ] aria-disabled for disabled elements
- [ ] aria-checked for checkboxes/radios
- [ ] aria-selected for selectable items
### Navigation
- [ ] Logical reading order
- [ ] Headings structure correct
- [ ] Landmarks present (if applicable)
- [ ] Lists announced correctly
### State Changes
- [ ] Loading states announced
- [ ] Error messages announced
- [ ] Success messages announced
- [ ] Dynamic content changes announced
PHASE 5: Variant Testing
Step 5.1: Test All Variant Combinations
## Variant Testing Matrix
For each variant dimension (size, variant, color, etc.):
### Size Variants
- [ ] sm renders correctly
- [ ] md renders correctly
- [ ] lg renders correctly
- [ ] xl renders correctly (if exists)
### Visual Variants
- [ ] default renders correctly
- [ ] outline renders correctly
- [ ] ghost renders correctly
- [ ] destructive renders correctly
- [ ] [other variants...]
### State Variants
- [ ] Default state
- [ ] Hover state (web)
- [ ] Active/Pressed state
- [ ] Disabled state
- [ ] Loading state (if applicable)
- [ ] Error state (if applicable)
### Combination Testing
Test critical combinations:
- [ ] sm + outline
- [ ] lg + destructive
- [ ] disabled + all variants
- [ ] [other important combinations]
PHASE 6: Performance Testing
Step 6.1: Rendering Performance
## Performance Checklist
### Initial Render
- [ ] Time to first render < 100ms
- [ ] No unnecessary re-renders
- [ ] Memoization used correctly
### Animation Performance
- [ ] Animations run at 60fps
- [ ] No jank during transitions
- [ ] react-native-reanimated on UI thread
- [ ] Smooth on low-end devices
### Bundle Size
- [ ] Component bundle size reasonable
- [ ] No duplicate dependencies
- [ ] Tree-shaking works
- [ ] Only imports needed
### Memory
- [ ] No memory leaks
- [ ] Event listeners cleaned up
- [ ] Timers cleared
- [ ] Subscriptions unsubscribed
### Runtime Performance
- [ ] Fast re-renders
- [ ] Efficient event handlers
- [ ] Optimized list rendering (if applicable)
Step 6.2: Load Testing
Test with many instances:
- Render 50+ instances of component
- Check for performance degradation
- Monitor memory usage
- Check frame rate
PHASE 7: Edge Cases & Error Handling
Step 7.1: Test Edge Cases
## Edge Cases Checklist
### Content
- [ ] Empty content
- [ ] Very long text (overflow handling)
- [ ] Special characters (emoji, unicode)
- [ ] RTL text (if applicable)
- [ ] Multiline text
### Props
- [ ] All props undefined
- [ ] Invalid prop values (should have defaults)
- [ ] Conflicting props
- [ ] Missing required props (TypeScript should catch)
### State
- [ ] Rapid state changes
- [ ] Concurrent updates
- [ ] State during unmount
### Interaction
- [ ] Rapid clicks/taps
- [ ] Double clicks
- [ ] Long press (mobile)
- [ ] Gesture conflicts
### Environment
- [ ] Slow network (if network-dependent)
- [ ] Offline mode
- [ ] Low memory
- [ ] Low battery (mobile)
PHASE 8: Integration Testing
Step 8.1: Test in Starter Kits
Test component installation via CLI:
# Create test project
npx create-gluestack@latest test-project
# Initialize gluestack-ui
cd test-project
npx gluestack-ui init
# Add component
npx gluestack-ui add [component-name]
# Verify installation
# - Check component files copied
# - Check dependencies installed
# - Run the project
# - Test component works
Step 8.2: Test with Other Components
Test component alongside other components:
- Does it play well with other components?
- Any style conflicts?
- Z-index issues (overlays)?
- Event handling conflicts?
PHASE 9: Report Results
Step 9.1: Generate Test Report
Create comprehensive report:
## Component Testing Report: [ComponentName]
**Date:** [Date]
**Tester:** [Your name]
**Component Version:** [Version]
### Summary
- ✅ Overall Status: [PASS/FAIL/PARTIAL]
- ✅ Tested Platforms: iOS, Android, Web
- ✅ Issues Found: [Number]
### Platform Testing
#### iOS
- ✅ Rendering: PASS
- ✅ Functionality: PASS
- ✅ Accessibility: PASS
- ✅ Performance: PASS
- ⚠️ Issues: [List any issues]
#### Android
- ✅ Rendering: PASS
- ✅ Functionality: PASS
- ✅ Accessibility: PASS
- ✅ Performance: PASS
- ⚠️ Issues: [List any issues]
#### Web
- ✅ Rendering: PASS
- ✅ Functionality: PASS
- ✅ Accessibility: PASS
- ✅ Performance: PASS
- ⚠️ Issues: [List any issues]
### Documentation
- ✅ Page loads: PASS
- ✅ Examples work: PASS
- ✅ API reference: PASS
- ⚠️ Issues: [List any issues]
### Accessibility
- ✅ Keyboard navigation: PASS
- ✅ Screen reader: PASS
- ✅ ARIA attributes: PASS
- ⚠️ Issues: [List any issues]
### Performance
- ✅ Render time: [X]ms
- ✅ Bundle size: [X]KB
- ✅ Frame rate: 60fps
- ⚠️ Issues: [List any issues]
### Issues Found
#### Critical Issues
[List critical issues that block usage]
#### Major Issues
[List major issues that impact UX]
#### Minor Issues
[List minor issues or improvements]
### Recommendations
[Provide recommendations for fixes or improvements]
### Screenshots
[Include relevant screenshots if issues found]
Step 9.2: Present to User
Show the user:
- Complete test report
- Any issues found
- Recommendations for fixes
- Overall assessment (ready to ship / needs work)
CHECKPOINT: Confirm with user if issues need to be fixed
PHASE 10: Fix Issues (if needed)
If issues were found:
- Prioritize issues (critical > major > minor)
- Fix critical and major issues
- Re-test after fixes
- Update test report
- Confirm all critical issues resolved
Quick Test Commands
# Full test workflow
yarn sync
yarn dev
# Kitchen sink
cd apps/kitchen-sink && yarn dev
# Website
cd apps/website && yarn dev
# Build test
yarn build
# Type check
yarn tsc --noEmit
Best Practices
- Test on real devices when possible, not just simulators
- Test with screen readers enabled, don't just check ARIA attributes
- Test performance on low-end devices to ensure accessibility
- Test all variants, not just the default
- Test edge cases that users might encounter
- Document all issues with reproduction steps
- Re-test after fixes to ensure resolution
- Test cross-browser on web (Chrome, Safari, Firefox)
- Test with real content (long text, images, etc.)
- Test accessibility early in development, not as an afterthought
Let's ensure quality! 🧪