113 lines
3.9 KiB
TypeScript
113 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { describe, expect, it, vi } from 'vitest';
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
|
|
vi.mock('@tamagui/core', () => ({
|
|
useTheme: () => ({
|
|
color: { val: '#111827' },
|
|
gray: { val: '#6b7280' },
|
|
borderColor: { val: '#e5e7eb' },
|
|
primary: { val: '#FF5A5F' },
|
|
surface: { val: '#ffffff' },
|
|
red10: { val: '#b91c1c' },
|
|
}),
|
|
}));
|
|
|
|
vi.mock('@tamagui/stacks', () => ({
|
|
YStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
|
|
XStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
|
|
}));
|
|
|
|
vi.mock('@tamagui/text', () => ({
|
|
SizableText: ({ children, ...props }: { children: React.ReactNode }) => <span {...props}>{children}</span>,
|
|
}));
|
|
|
|
vi.mock('tamagui', () => ({
|
|
Input: ({ ...props }: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
|
|
TextArea: ({ ...props }: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => <textarea {...props} />,
|
|
}));
|
|
|
|
vi.mock('@tamagui/select', () => {
|
|
const SelectContext = React.createContext<{ onValueChange?: (value: string) => void } | null>(null);
|
|
const Select = ({ children, onValueChange }: { children: React.ReactNode; onValueChange?: (value: string) => void }) => (
|
|
<SelectContext.Provider value={{ onValueChange }}>
|
|
<div>{children}</div>
|
|
</SelectContext.Provider>
|
|
);
|
|
const Trigger = ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>;
|
|
const Value = ({ placeholder }: { placeholder?: React.ReactNode }) => <span>{placeholder}</span>;
|
|
const Content = ({ children }: { children: React.ReactNode }) => <div>{children}</div>;
|
|
const Viewport = ({ children }: { children: React.ReactNode }) => <div>{children}</div>;
|
|
const Group = ({ children }: { children: React.ReactNode }) => <div>{children}</div>;
|
|
const Item = ({ children, value }: { children: React.ReactNode; value: string }) => {
|
|
const ctx = React.useContext(SelectContext);
|
|
return (
|
|
<button type="button" data-value={value} onClick={() => ctx?.onValueChange?.(value)}>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
const ItemText = ({ children }: { children: React.ReactNode }) => <span>{children}</span>;
|
|
|
|
Select.Trigger = Trigger;
|
|
Select.Value = Value;
|
|
Select.Content = Content;
|
|
Select.Viewport = Viewport;
|
|
Select.Group = Group;
|
|
Select.Item = Item;
|
|
Select.ItemText = ItemText;
|
|
|
|
return { Select };
|
|
});
|
|
|
|
import { MobileColorInput, MobileDateTimeInput, MobileFileInput, MobileSelect } from './FormControls';
|
|
|
|
describe('MobileSelect', () => {
|
|
it('maps options and forwards selection changes', () => {
|
|
const handleChange = vi.fn();
|
|
|
|
render(
|
|
<MobileSelect value="" onChange={handleChange}>
|
|
<option value="">None</option>
|
|
<option value="one">One</option>
|
|
</MobileSelect>,
|
|
);
|
|
|
|
const items = screen.getAllByRole('button');
|
|
fireEvent.click(items[1]);
|
|
|
|
expect(handleChange).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
target: expect.objectContaining({ value: 'one' }),
|
|
}),
|
|
);
|
|
});
|
|
});
|
|
|
|
describe('MobileColorInput', () => {
|
|
it('renders a color input with default sizing', () => {
|
|
render(<MobileColorInput value="#ff0000" onChange={vi.fn()} />);
|
|
|
|
const input = screen.getByDisplayValue('#ff0000');
|
|
expect(input).toHaveAttribute('type', 'color');
|
|
});
|
|
});
|
|
|
|
describe('MobileFileInput', () => {
|
|
it('renders a hidden file input', () => {
|
|
render(<MobileFileInput data-testid="file-input" />);
|
|
|
|
const input = screen.getByTestId('file-input');
|
|
expect(input).toHaveAttribute('type', 'file');
|
|
});
|
|
});
|
|
|
|
describe('MobileDateTimeInput', () => {
|
|
it('renders a datetime-local input', () => {
|
|
render(<MobileDateTimeInput value="2024-10-20T14:30" onChange={vi.fn()} />);
|
|
|
|
const input = screen.getByDisplayValue('2024-10-20T14:30');
|
|
expect(input).toHaveAttribute('type', 'datetime-local');
|
|
});
|
|
});
|