mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-01-06 21:12:56 +00:00
feat: Initial release v0.1.0 - 52 Leptos ShadCN UI components
This commit is contained in:
224
tests/integration_test.rs
Normal file
224
tests/integration_test.rs
Normal file
@@ -0,0 +1,224 @@
|
||||
//! Integration tests for shadcn-ui component implementations.
|
||||
|
||||
use shadcn_ui_test_utils::{
|
||||
ComponentTester, ComponentComparator, ThemeValidator, ParityChecker,
|
||||
Framework, Theme, FrameworkImplementation, ComponentSpec, PropSpec
|
||||
};
|
||||
use std::collections::HashMap;
|
||||
|
||||
#[cfg(test)]
|
||||
mod component_parity_tests {
|
||||
use super::*;
|
||||
|
||||
#[test]
|
||||
fn test_button_cross_framework_parity() {
|
||||
let mut props = HashMap::new();
|
||||
props.insert("variant".to_string(), PropSpec {
|
||||
prop_type: "ButtonVariant".to_string(),
|
||||
required: false,
|
||||
default_value: Some("Default".to_string()),
|
||||
});
|
||||
props.insert("disabled".to_string(), PropSpec {
|
||||
prop_type: "bool".to_string(),
|
||||
required: false,
|
||||
default_value: Some("false".to_string()),
|
||||
});
|
||||
|
||||
let button_spec = ComponentSpec {
|
||||
name: "Button".to_string(),
|
||||
props,
|
||||
events: vec!["on_click".to_string()],
|
||||
variants: vec!["Default".to_string(), "Primary".to_string(), "Secondary".to_string()],
|
||||
sizes: vec!["Small".to_string(), "Medium".to_string(), "Large".to_string()],
|
||||
};
|
||||
|
||||
let yew_impl = FrameworkImplementation {
|
||||
framework: Framework::Yew,
|
||||
component_spec: button_spec.clone(),
|
||||
css_classes: vec![
|
||||
"inline-flex".to_string(),
|
||||
"items-center".to_string(),
|
||||
"justify-center".to_string(),
|
||||
"bg-primary".to_string(),
|
||||
"text-primary-foreground".to_string(),
|
||||
],
|
||||
dependencies: vec!["yew".to_string(), "tailwind_fuse".to_string()],
|
||||
};
|
||||
|
||||
let leptos_impl = FrameworkImplementation {
|
||||
framework: Framework::Leptos,
|
||||
component_spec: button_spec,
|
||||
css_classes: vec![
|
||||
"inline-flex".to_string(),
|
||||
"items-center".to_string(),
|
||||
"justify-center".to_string(),
|
||||
"bg-primary".to_string(),
|
||||
"text-primary-foreground".to_string(),
|
||||
],
|
||||
dependencies: vec!["leptos".to_string(), "tailwind_fuse".to_string()],
|
||||
};
|
||||
|
||||
let checker = ParityChecker::new()
|
||||
.add_implementation(yew_impl)
|
||||
.add_implementation(leptos_impl);
|
||||
|
||||
let api_result = checker.check_api_parity();
|
||||
assert!(api_result.frameworks_match, "Button API should match across frameworks");
|
||||
assert_eq!(api_result.score, 1.0, "Button should have perfect parity score");
|
||||
|
||||
let theme_result = checker.check_theme_parity();
|
||||
assert!(theme_result.frameworks_match, "Button themes should match across frameworks");
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_checkbox_implementation_parity() {
|
||||
let mut props = HashMap::new();
|
||||
props.insert("checked".to_string(), PropSpec {
|
||||
prop_type: "bool".to_string(),
|
||||
required: false,
|
||||
default_value: Some("false".to_string()),
|
||||
});
|
||||
props.insert("disabled".to_string(), PropSpec {
|
||||
prop_type: "bool".to_string(),
|
||||
required: false,
|
||||
default_value: Some("false".to_string()),
|
||||
});
|
||||
|
||||
let checkbox_spec = ComponentSpec {
|
||||
name: "Checkbox".to_string(),
|
||||
props,
|
||||
events: vec!["on_checked_change".to_string()],
|
||||
variants: vec![], // Checkbox doesn't have variants
|
||||
sizes: vec![], // Checkbox doesn't have size variations
|
||||
};
|
||||
|
||||
let yew_impl = FrameworkImplementation {
|
||||
framework: Framework::Yew,
|
||||
component_spec: checkbox_spec.clone(),
|
||||
css_classes: vec![
|
||||
"peer".to_string(),
|
||||
"h-4".to_string(),
|
||||
"w-4".to_string(),
|
||||
"rounded-sm".to_string(),
|
||||
"border".to_string(),
|
||||
"border-primary".to_string(),
|
||||
],
|
||||
dependencies: vec!["yew".to_string(), "tailwind_fuse".to_string(), "web-sys".to_string()],
|
||||
};
|
||||
|
||||
let leptos_impl = FrameworkImplementation {
|
||||
framework: Framework::Leptos,
|
||||
component_spec: checkbox_spec,
|
||||
css_classes: vec![
|
||||
"peer".to_string(),
|
||||
"h-4".to_string(),
|
||||
"w-4".to_string(),
|
||||
"rounded-sm".to_string(),
|
||||
"border".to_string(),
|
||||
"border-primary".to_string(),
|
||||
],
|
||||
dependencies: vec!["leptos".to_string(), "tailwind_fuse".to_string(), "web-sys".to_string()],
|
||||
};
|
||||
|
||||
let checker = ParityChecker::new()
|
||||
.add_implementation(yew_impl)
|
||||
.add_implementation(leptos_impl);
|
||||
|
||||
let api_result = checker.check_api_parity();
|
||||
assert!(api_result.frameworks_match, "Checkbox API should match across frameworks");
|
||||
|
||||
let theme_result = checker.check_theme_parity();
|
||||
assert!(theme_result.frameworks_match, "Checkbox themes should match across frameworks");
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod theme_validation_tests {
|
||||
use super::*;
|
||||
|
||||
#[test]
|
||||
fn test_theme_consistency_validation() {
|
||||
let validator = ThemeValidator::new()
|
||||
.add_component_classes("button", vec![
|
||||
"inline-flex".to_string(),
|
||||
"items-center".to_string(),
|
||||
"justify-center".to_string(),
|
||||
"bg-primary".to_string(),
|
||||
"text-primary-foreground".to_string(),
|
||||
"focus-visible:ring-2".to_string(),
|
||||
"disabled:opacity-50".to_string(),
|
||||
]);
|
||||
|
||||
let default_result = validator.validate_theme_classes("button", Theme::Default);
|
||||
assert!(default_result.passed, "Button should have valid default theme classes");
|
||||
|
||||
let new_york_result = validator.validate_theme_classes("button", Theme::NewYork);
|
||||
assert!(new_york_result.passed, "Button should have valid New York theme classes");
|
||||
|
||||
let consistency_result = validator.validate_theme_consistency("button");
|
||||
assert!(consistency_result.passed, "Button should maintain theme consistency");
|
||||
|
||||
let accessibility_result = validator.validate_accessibility_consistency("button");
|
||||
assert!(accessibility_result.passed, "Button should maintain accessibility features");
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod component_testing {
|
||||
use super::*;
|
||||
|
||||
#[test]
|
||||
fn test_component_tester_framework_comparison() {
|
||||
let comparator = ComponentComparator::new("button")
|
||||
.add_framework(Framework::Yew, Theme::Default)
|
||||
.add_framework(Framework::Leptos, Theme::Default);
|
||||
|
||||
let result = comparator.compare_frameworks();
|
||||
assert!(result.score > 0.8, "Framework implementations should have high similarity");
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_individual_component_validation() {
|
||||
let yew_tester = ComponentTester::new("button", Framework::Yew)
|
||||
.with_theme(Theme::Default)
|
||||
.with_property("variant", "primary")
|
||||
.with_property("disabled", "false");
|
||||
|
||||
let rendering_result = yew_tester.test_rendering();
|
||||
assert!(rendering_result.passed, "Yew button should render successfully");
|
||||
|
||||
let interaction_result = yew_tester.test_interactions();
|
||||
assert!(interaction_result.passed, "Yew button interactions should work");
|
||||
|
||||
let accessibility_result = yew_tester.test_accessibility();
|
||||
assert!(accessibility_result.passed, "Yew button should be accessible");
|
||||
|
||||
let theme_result = yew_tester.test_theme_consistency(Theme::NewYork);
|
||||
assert!(theme_result.passed, "Yew button themes should be consistent");
|
||||
}
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_registry_completeness() {
|
||||
// This test validates that our registry contains all expected components
|
||||
use shadcn_registry::{FrameworkName, UI};
|
||||
|
||||
let yew_registry = UI.get(&FrameworkName::Yew).expect("Yew registry should exist");
|
||||
let leptos_registry = UI.get(&FrameworkName::Leptos).expect("Leptos registry should exist");
|
||||
|
||||
// Test that both registries have button and checkbox components
|
||||
let yew_has_button = yew_registry.iter().any(|entry| entry.name == "button");
|
||||
let yew_has_checkbox = yew_registry.iter().any(|entry| entry.name == "checkbox");
|
||||
|
||||
let leptos_has_button = leptos_registry.iter().any(|entry| entry.name == "button");
|
||||
let leptos_has_checkbox = leptos_registry.iter().any(|entry| entry.name == "checkbox");
|
||||
|
||||
assert!(yew_has_button, "Yew registry should contain button component");
|
||||
assert!(yew_has_checkbox, "Yew registry should contain checkbox component");
|
||||
assert!(leptos_has_button, "Leptos registry should contain button component");
|
||||
assert!(leptos_has_checkbox, "Leptos registry should contain checkbox component");
|
||||
|
||||
println!("✅ Registry validation passed");
|
||||
println!(" Yew components: {}", yew_registry.len());
|
||||
println!(" Leptos components: {}", leptos_registry.len());
|
||||
}
|
||||
Reference in New Issue
Block a user