2599f31115
* fix: prevent value empty string on slider right panel * chore: add build joi into test electron linter
106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
import React from 'react'
|
|
import { render } from '@testing-library/react'
|
|
import { fireEvent } from '@testing-library/dom'
|
|
import SliderRightPanel from './index'
|
|
import '@testing-library/jest-dom'
|
|
|
|
class ResizeObserverMock {
|
|
observe() {}
|
|
unobserve() {}
|
|
disconnect() {}
|
|
}
|
|
|
|
global.ResizeObserver = ResizeObserverMock
|
|
|
|
jest.mock('@janhq/joi', () => ({
|
|
...jest.requireActual('@janhq/joi'),
|
|
Slider: ({ children, onValueChange, ...props }: any) => (
|
|
<div data-testid="slider-root" {...props}>
|
|
<input
|
|
data-testid="slider-input"
|
|
type="number"
|
|
{...props}
|
|
onChange={(e: any) =>
|
|
onValueChange && onValueChange([parseInt(e.target.value)])
|
|
}
|
|
/>
|
|
{children}
|
|
</div>
|
|
),
|
|
}))
|
|
|
|
describe('SliderRightPanel', () => {
|
|
const defaultProps = {
|
|
title: 'Test Slider',
|
|
disabled: false,
|
|
min: 0,
|
|
max: 100,
|
|
step: 1,
|
|
description: 'This is a test slider',
|
|
value: 50,
|
|
onValueChanged: jest.fn(),
|
|
}
|
|
|
|
it('renders correctly with given props', () => {
|
|
const { getByText } = render(<SliderRightPanel {...defaultProps} />)
|
|
expect(getByText('Test Slider')).toBeInTheDocument()
|
|
})
|
|
|
|
it('calls onValueChanged with correct value when input is changed', () => {
|
|
defaultProps.onValueChanged = jest.fn()
|
|
const { getByRole } = render(<SliderRightPanel {...defaultProps} />)
|
|
|
|
const input = getByRole('textbox')
|
|
fireEvent.change(input, { target: { value: '75' } })
|
|
expect(defaultProps.onValueChanged).toHaveBeenCalledWith(75)
|
|
})
|
|
|
|
it('calls onValueChanged with correct value when slider is changed', () => {
|
|
defaultProps.onValueChanged = jest.fn()
|
|
const { getByTestId } = render(<SliderRightPanel {...defaultProps} />)
|
|
|
|
const input = getByTestId('slider-input')
|
|
fireEvent.change(input, { target: { value: '75' } })
|
|
expect(defaultProps.onValueChanged).toHaveBeenCalledWith(75)
|
|
})
|
|
|
|
it('calls onValueChanged with max value when input exceeds max', () => {
|
|
defaultProps.onValueChanged = jest.fn()
|
|
const { getByRole } = render(<SliderRightPanel {...defaultProps} />)
|
|
const input = getByRole('textbox') as HTMLInputElement
|
|
fireEvent.change(input, { target: { value: '150' } })
|
|
fireEvent.focusOut(input)
|
|
expect(defaultProps.onValueChanged).toHaveBeenCalledWith(100)
|
|
expect(input.value).toEqual('100')
|
|
})
|
|
|
|
it('calls onValueChanged with min value when input is below min', () => {
|
|
defaultProps.onValueChanged = jest.fn()
|
|
const { getByRole } = render(<SliderRightPanel {...defaultProps} />)
|
|
const input = getByRole('textbox') as HTMLInputElement
|
|
fireEvent.change(input, { target: { value: '0' } })
|
|
fireEvent.focusOut(input)
|
|
expect(defaultProps.onValueChanged).toHaveBeenCalledWith(0)
|
|
expect(input.value).toEqual('0')
|
|
})
|
|
|
|
it('calls onValueChanged when input value is empty string', () => {
|
|
defaultProps.onValueChanged = jest.fn()
|
|
const { getByRole } = render(<SliderRightPanel {...defaultProps} />)
|
|
const input = getByRole('textbox') as HTMLInputElement
|
|
fireEvent.change(input, { target: { value: '' } })
|
|
fireEvent.focusOut(input)
|
|
expect(defaultProps.onValueChanged).toHaveBeenCalledWith(0)
|
|
expect(input.value).toEqual('0')
|
|
})
|
|
|
|
it('does not call onValueChanged when input is invalid', () => {
|
|
defaultProps.onValueChanged = jest.fn()
|
|
const { getByRole } = render(<SliderRightPanel {...defaultProps} />)
|
|
const input = getByRole('textbox') as HTMLInputElement
|
|
fireEvent.change(input, { target: { value: 'invalid' } })
|
|
expect(defaultProps.onValueChanged).not.toHaveBeenCalledWith(0)
|
|
expect(input.value).toEqual('50')
|
|
})
|
|
})
|