Dan Ditomaso
1 year ago
12 changed files with 597 additions and 386 deletions
@ -1,152 +1,154 @@ |
|||||
import { MessageInput } from '@components/PageComponents/Messages/MessageInput.tsx'; |
|
||||
import { useDevice } from "@core/stores/deviceStore.ts"; |
|
||||
import { vi, describe, it, expect, beforeEach, Mock } from 'vitest'; |
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react'; |
import { render, screen, fireEvent, waitFor } from '@testing-library/react'; |
||||
import userEvent from '@testing-library/user-event'; |
import { vi, describe, it, expect, beforeEach } from 'vitest'; |
||||
|
import { MessageInput } from './MessageInput.tsx'; |
||||
vi.mock("@core/stores/deviceStore.ts", () => ({ |
import { useDevice } from '@core/stores/deviceStore.ts'; |
||||
useDevice: vi.fn(), |
import { useMessageStore } from '@core/stores/messageStore.ts'; |
||||
|
import { debounce } from '@core/utils/debounce.ts'; |
||||
|
import { Types } from "@meshtastic/core"; |
||||
|
|
||||
|
vi.mock('@components/UI/Button.tsx', () => ({ |
||||
|
Button: vi.fn(({ type, className, children, onClick, onSubmit }) => ( |
||||
|
<button type={type} className={className} onClick={onClick} onSubmit={onSubmit}> |
||||
|
{children} |
||||
|
</button> |
||||
|
)), |
||||
})); |
})); |
||||
|
|
||||
vi.mock("@core/utils/debounce.ts", () => ({ |
vi.mock('@components/UI/Input.tsx', () => ({ |
||||
debounce: (fn: () => void) => fn, |
Input: vi.fn(({ autoFocus, minLength, name, placeholder, value, onChange }) => ( |
||||
|
<input |
||||
|
autoFocus={autoFocus} |
||||
|
minLength={minLength} |
||||
|
name={name} |
||||
|
placeholder={placeholder} |
||||
|
value={value} |
||||
|
onChange={onChange} |
||||
|
/> |
||||
|
)), |
||||
})); |
})); |
||||
|
|
||||
vi.mock("@components/UI/Button.tsx", () => ({ |
vi.mock('@core/stores/deviceStore.ts', () => ({ |
||||
Button: ({ children, ...props }: { children: React.ReactNode }) => <button {...props}>{children}</button> |
useDevice: vi.fn(), |
||||
})); |
})); |
||||
|
|
||||
vi.mock("@components/UI/Input.tsx", () => ({ |
vi.mock('@core/stores/messageStore.ts', () => ({ |
||||
Input: (props: any) => <input {...props} /> |
useMessageStore: vi.fn(), |
||||
|
MessageState: { |
||||
|
Ack: 'ack', |
||||
|
Waiting: 'waiting', |
||||
|
Failed: 'failed', |
||||
|
}, |
||||
|
MessageType: { |
||||
|
Direct: 'direct', |
||||
|
Broadcast: 'broadcast', |
||||
|
}, |
||||
})); |
})); |
||||
|
|
||||
vi.mock("lucide-react", () => ({ |
vi.mock('@core/utils/debounce.ts', () => ({ |
||||
SendIcon: () => <div data-testid="send-icon">Send</div> |
debounce: vi.fn((fn) => fn), |
||||
})); |
})); |
||||
|
|
||||
// TODO: getting an error with this test
|
vi.mock('lucide-react', () => ({ |
||||
describe('MessageInput Component', () => { |
SendIcon: vi.fn(() => <svg data-testid="send-icon" />), |
||||
const mockProps = { |
})); |
||||
to: "broadcast" as const, |
|
||||
channel: 0 as const, |
|
||||
maxBytes: 100, |
|
||||
}; |
|
||||
|
|
||||
const mockSetMessageDraft = vi.fn(); |
describe('MessageInput', () => { |
||||
const mockSetMessageState = vi.fn(); |
const mockSetMessageState = vi.fn(); |
||||
const mockSendText = vi.fn().mockResolvedValue(123); |
const mockSetActiveChat = vi.fn(); |
||||
|
const mockSetDraft = vi.fn(); |
||||
|
const mockGetDraft = vi.fn(); |
||||
|
const mockClearDraft = vi.fn(); |
||||
|
const mockSendText = vi.fn(); |
||||
|
|
||||
beforeEach(() => { |
beforeEach(() => { |
||||
vi.clearAllMocks(); |
(useDevice as ReturnType<typeof vi.fn>).mockReturnValue({ |
||||
|
|
||||
(useDevice as Mock).mockReturnValue({ |
|
||||
connection: { |
connection: { |
||||
sendText: mockSendText, |
sendText: mockSendText, |
||||
}, |
}, |
||||
setMessageState: mockSetMessageState, |
|
||||
messageDraft: "", |
|
||||
setMessageDraft: mockSetMessageDraft, |
|
||||
hardware: { |
|
||||
myNodeNum: 1234567890, |
|
||||
}, |
|
||||
}); |
}); |
||||
}); |
|
||||
|
|
||||
it('renders correctly with initial state', () => { |
|
||||
render(<MessageInput {...mockProps} />); |
|
||||
|
|
||||
expect(screen.getByPlaceholderText('Enter Message')).toBeInTheDocument(); |
|
||||
expect(screen.getByTestId('send-icon')).toBeInTheDocument(); |
|
||||
|
|
||||
expect(screen.getByText('0/100')).toBeInTheDocument(); |
(useMessageStore as unknown as ReturnType<typeof vi.fn>).mockReturnValue({ |
||||
|
setMessageState: mockSetMessageState, |
||||
|
activeChat: 123, |
||||
|
setDraft: mockSetDraft, |
||||
|
getDraft: mockGetDraft, |
||||
|
clearDraft: mockClearDraft, |
||||
}); |
}); |
||||
|
|
||||
it('updates local draft and byte count when typing', () => { |
mockSetMessageState.mockClear(); |
||||
render(<MessageInput {...mockProps} />); |
mockSetActiveChat.mockClear(); |
||||
|
mockSetDraft.mockClear(); |
||||
const inputField = screen.getByPlaceholderText('Enter Message'); |
mockGetDraft.mockClear(); |
||||
fireEvent.change(inputField, { target: { value: 'Hello' } }) |
mockClearDraft.mockClear(); |
||||
|
mockSendText.mockClear(); |
||||
expect(screen.getByText('5/100')).toBeInTheDocument(); |
(debounce as ReturnType<typeof vi.fn>).mockImplementation((fn) => fn); |
||||
expect(inputField).toHaveValue('Hello'); |
|
||||
expect(mockSetMessageDraft).toHaveBeenCalledWith('Hello'); |
|
||||
}); |
}); |
||||
|
|
||||
it.skip('does not allow input exceeding max bytes', () => { |
const renderComponent = (props: { to: Types.Destination; channel: Types.ChannelNumber; maxBytes: number }) => { |
||||
render(<MessageInput {...mockProps} maxBytes={5} />); |
render(<MessageInput {...props} />); |
||||
|
}; |
||||
const inputField = screen.getByPlaceholderText('Enter Message'); |
|
||||
|
|
||||
expect(screen.getByText('0/100')).toBeInTheDocument(); |
|
||||
|
|
||||
userEvent.type(inputField, 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis p') |
it.skip('sends text message and updates state to Ack on submit', async () => { |
||||
|
renderComponent({ to: 2, channel: 3, maxBytes: 256 }); |
||||
|
const inputElement = screen.getByPlaceholderText('Enter Message') as HTMLInputElement; |
||||
|
fireEvent.change(inputElement, { target: { value: 'Hello' } }); |
||||
|
const formElement = screen.getByRole('form'); |
||||
|
fireEvent.submit(formElement); |
||||
|
|
||||
expect(screen.getByText('100/100')).toBeInTheDocument(); |
await waitFor(() => { |
||||
expect(inputField).toHaveValue('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m'); |
expect(mockSendText).toHaveBeenCalledWith('Hello', 2, true, 3); |
||||
|
expect(mockSetMessageState).toHaveBeenCalledWith({ |
||||
|
type: 'direct', |
||||
|
key: 123, |
||||
|
messageId: undefined, |
||||
|
newState: 'ack', |
||||
|
}); |
||||
|
expect(mockClearDraft).toHaveBeenCalledWith(2); |
||||
|
expect(inputElement.value).toBe(''); |
||||
|
expect(screen.getByTestId('byte-counter')).toHaveTextContent('0/256'); |
||||
|
}); |
||||
}); |
}); |
||||
|
|
||||
it.skip('sends message and resets form when submitting', async () => { |
it.skip('sends broadcast message if to is "broadcast" and updates state to Ack', async () => { |
||||
try { |
renderComponent({ to: 'broadcast', channel: 5, maxBytes: 256 }); |
||||
render(<MessageInput {...mockProps} />); |
const inputElement = screen.getByPlaceholderText('Enter Message') as HTMLInputElement; |
||||
|
fireEvent.change(inputElement, { target: { value: 'Broadcast message' } }); |
||||
const inputField = screen.getByPlaceholderText('Enter Message'); |
const formElement = screen.getByRole('form'); |
||||
const submitButton = screen.getByText('Send'); |
fireEvent.submit(formElement); |
||||
|
|
||||
fireEvent.change(inputField, { target: { value: 'Test Message' } }); |
|
||||
fireEvent.click(submitButton); |
|
||||
|
|
||||
const form = screen.getByRole('form'); |
|
||||
fireEvent.submit(form); |
|
||||
|
|
||||
expect(mockSendText).toHaveBeenCalledWith('Test message', 'broadcast', true, 0); |
|
||||
|
|
||||
await waitFor(() => { |
await waitFor(() => { |
||||
expect(mockSetMessageState).toHaveBeenCalledWith( |
expect(mockSendText).toHaveBeenCalledWith('Broadcast message', 'broadcast', true, 5); |
||||
'broadcast', |
expect(mockSetMessageState).toHaveBeenCalledWith({ |
||||
0, |
type: 'broadcast', |
||||
'broadcast', |
key: 123, |
||||
1234567890, |
messageId: undefined, |
||||
123, |
newState: 'ack', |
||||
'ack' |
}); |
||||
); |
expect(mockClearDraft).toHaveBeenCalledWith('broadcast'); |
||||
|
expect(inputElement.value).toBe(''); |
||||
|
expect(screen.getByTestId('byte-counter')).toHaveTextContent('0/256'); |
||||
}); |
}); |
||||
|
|
||||
expect(inputField).toHaveValue(''); |
|
||||
expect(screen.getByText('0/100')).toBeInTheDocument(); |
|
||||
expect(mockSetMessageDraft).toHaveBeenCalledWith(''); |
|
||||
} catch (e) { |
|
||||
console.error(e); |
|
||||
} |
|
||||
}); |
}); |
||||
it('prevents sending empty messages', () => { |
|
||||
render(<MessageInput {...mockProps} />); |
|
||||
|
|
||||
const form = screen.getByPlaceholderText('Enter Message') |
it('updates state to Failed if sendText throws an error', async () => { |
||||
fireEvent.submit(form); |
mockSendText.mockRejectedValue({ id: 456 }); |
||||
|
renderComponent({ to: 3, channel: 1, maxBytes: 256 }); |
||||
|
const inputElement = screen.getByPlaceholderText('Enter Message') as HTMLInputElement; |
||||
|
fireEvent.change(inputElement, { target: { value: 'Error message' } }); |
||||
|
const formElement = screen.getByRole('form'); |
||||
|
fireEvent.submit(formElement); |
||||
|
|
||||
expect(mockSendText).not.toHaveBeenCalled(); |
await waitFor(() => { |
||||
|
expect(mockSendText).toHaveBeenCalledWith('Error message', 3, true, 1); |
||||
|
expect(mockSetMessageState).toHaveBeenCalledWith({ |
||||
|
type: 'direct', |
||||
|
key: 123, |
||||
|
messageId: 456, |
||||
|
newState: 'failed', |
||||
}); |
}); |
||||
|
expect(mockClearDraft).toHaveBeenCalledWith(3); |
||||
it('initializes with existing message draft', () => { |
expect(inputElement.value).toBe(''); |
||||
(useDevice as Mock).mockReturnValue({ |
expect(screen.getByTestId('byte-counter')).toHaveTextContent('0/256'); |
||||
connection: { |
|
||||
sendText: mockSendText, |
|
||||
}, |
|
||||
setMessageState: mockSetMessageState, |
|
||||
messageDraft: "Existing draft", |
|
||||
setMessageDraft: mockSetMessageDraft, |
|
||||
isQueueingMessages: false, |
|
||||
queueStatus: { free: 10 }, |
|
||||
hardware: { |
|
||||
myNodeNum: 1234567890, |
|
||||
}, |
|
||||
}); |
}); |
||||
|
|
||||
render(<MessageInput {...mockProps} />); |
|
||||
|
|
||||
const inputField = screen.getByRole('textbox'); |
|
||||
|
|
||||
expect(inputField).toHaveValue('Existing draft'); |
|
||||
}); |
}); |
||||
}); |
}); |
||||
Loading…
Reference in new issue