c2aa6895d6
This commit represents the complete foundational codebase for Nimbus Alpha, a Laravel package that provides an integrated, in-browser API client with automatic schema discovery from validation rules. IMPORTANT: This is a squashed commit representing the culmination of extensive development, refactoring, and architectural iterations. All previous commit history has been intentionally removed to provide a clean foundation for the public alpha release. The development of Nimbus involved: - Multiple architectural refactorings - Significant structural changes - Experimental approaches that were later abandoned - Learning iterations on the core concept - Migration between different design patterns This messy history would: - Make git blame confusing and unhelpful - Obscure the actual intent behind current implementation - Create noise when reviewing changes - Reference deleted or refactored code If git blame brought you to this commit, it means you're looking at code that was part of the initial alpha release. Here's what to do: 1. Check Current Documentation - See `/wiki/contribution-guide/README.md` for architecture details - Review the specific module's README if available - Look for inline comments explaining the reasoning 2. Look for Related Code - Check other files in the same module - Look for tests that demonstrate intended behavior - Review interfaces and contracts 3. Context Matters - This code may have been updated since alpha - Check git log for subsequent changes to this file - Look for related issues or PRs on GitHub --- This commit marks the beginning of Nimbus's public journey. All future commits will build upon this foundation with clear, traceable history. Thank you for using or contributing to Nimbus!
110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
import { AppButton } from '@/components/base/button';
|
|
import { mountWithPlugins } from '@/tests/_utils/test-utils';
|
|
import { describe, expect, it } from 'vitest';
|
|
|
|
describe('AppButton Snapshots', () => {
|
|
it('renders default button snapshot', () => {
|
|
const wrapper = mountWithPlugins(AppButton, {
|
|
slots: { default: 'Default Button' },
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
});
|
|
|
|
it('renders destructive variant snapshot', () => {
|
|
const wrapper = mountWithPlugins(AppButton, {
|
|
props: { variant: 'destructive' },
|
|
slots: { default: 'Delete Button' },
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
});
|
|
|
|
it('renders outline variant snapshot', () => {
|
|
const wrapper = mountWithPlugins(AppButton, {
|
|
props: { variant: 'outline' },
|
|
slots: { default: 'Outline Button' },
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
});
|
|
|
|
it('renders large size snapshot', () => {
|
|
const wrapper = mountWithPlugins(AppButton, {
|
|
props: { size: 'lg' },
|
|
slots: { default: 'Large Button' },
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
});
|
|
|
|
it('renders icon size snapshot', () => {
|
|
const wrapper = mountWithPlugins(AppButton, {
|
|
props: { size: 'icon' },
|
|
slots: { default: '🚀' },
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
});
|
|
|
|
it('renders disabled button snapshot', () => {
|
|
const wrapper = mountWithPlugins(AppButton, {
|
|
props: { disabled: true },
|
|
slots: { default: 'Disabled Button' },
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
});
|
|
|
|
it('renders button as link snapshot', () => {
|
|
const wrapper = mountWithPlugins(AppButton, {
|
|
props: { as: 'a', href: 'https://example.com' },
|
|
slots: { default: 'Link Button' },
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
});
|
|
|
|
it('renders button with custom class snapshot', () => {
|
|
const wrapper = mountWithPlugins(AppButton, {
|
|
props: { class: 'custom-button-class' },
|
|
slots: { default: 'Custom Button' },
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
});
|
|
|
|
it('renders all variants snapshot', () => {
|
|
const variants = [
|
|
'default',
|
|
'destructive',
|
|
'outline',
|
|
'secondary',
|
|
'ghost',
|
|
'link',
|
|
] as const;
|
|
|
|
variants.forEach(variant => {
|
|
const wrapper = mountWithPlugins(AppButton, {
|
|
props: { variant },
|
|
slots: { default: `${variant} button` },
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot(`button-variant-${variant}`);
|
|
});
|
|
});
|
|
|
|
it('renders all sizes snapshot', () => {
|
|
const sizes = ['xs', 'sm', 'default', 'lg', 'icon'] as const;
|
|
|
|
sizes.forEach(size => {
|
|
const wrapper = mountWithPlugins(AppButton, {
|
|
props: { size },
|
|
slots: { default: `${size} button` },
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot(`button-size-${size}`);
|
|
});
|
|
});
|
|
});
|