administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 01:05:20 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

improved Select.test.jsx

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-12-11 12:15:24 +01:00
parent 4e5a368a97
commit 313deb986b
4 changed files with 81 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/DatePicker.jsx
View File

@ -53,7 +53,7 @@ export const DateFilterOptions = [
},
{
label: 'Custom Range',
value: null,
value: 'custom_range',
},
];
@ -134,6 +134,7 @@ export default function DatePicker({
tabIndex="0"
onClick={onClick}
value={propValue}
{...props}
/>
<div
className={`absolute top-3 transition transform text-gray-600 dark:text-gray-400 ${

53
web/src/components/Select.jsx
View File

@ -76,19 +76,20 @@ export default function Select({
const ref = useRef(null);
const handleSelect = useCallback(
(value, label) => {
(value) => {
setSelected(options.findIndex(({ value }) => Object.values(propSelected).includes(value)));
setShowMenu(false);
if (!value) return setShowDatePicker(true);
onChange && onChange(value, label);
//show calender date range picker
if (value === 'custom_range') return setShowDatePicker(true);
onChange && onChange(value);
},
[onChange, options, propSelected, setSelected]
);
const handleDateRange = useCallback(
(range) => {
onChange && onChange(range, 'range');
onChange && onChange(range);
setShowMenu(false);
},
[onChange]
@ -98,6 +99,44 @@ export default function Select({
setShowMenu(true);
}, [setShowMenu]);
const handleKeydownDatePicker = useCallback(
(event) => {
switch (event.key) {
case 'Enter': {
if (!showMenu) {
setShowMenu(true);
setFocused(selected);
} else {
setSelected(focused);
if (options[focused].value === 'custom_range') {
setShowMenu(false);
return setShowDatePicker(true);
}
onChange && onChange(options[focused].value);
setShowMenu(false);
}
break;
}
case 'ArrowDown': {
const newIndex = focused + 1;
newIndex < options.length && setFocused(newIndex);
break;
}
case 'ArrowUp': {
const newIndex = focused - 1;
newIndex > -1 && setFocused(newIndex);
break;
}
// no default
}
},
[onChange, options, showMenu, setShowMenu, setFocused, focused, selected]
);
const handleKeydown = useCallback(
(event) => {
switch (event.key) {
@ -107,7 +146,7 @@ export default function Select({
setFocused(selected);
} else {
setSelected(focused);
onChange && onChange(options[focused].value, options[focused].label);
onChange && onChange({ [paramName]: options[focused].value });
setShowMenu(false);
}
break;
@ -146,7 +185,7 @@ export default function Select({
}
};
window.addEventListener('click', addBackDrop);
// setDateToInput(state.selectedDay);
return function cleanup() {
window.removeEventListener('click', addBackDrop);
};
@ -161,7 +200,7 @@ export default function Select({
label={label}
onchange={onChange}
onclick={handleClick}
onkeydown={handleKeydown}
onkeydown={handleKeydownDatePicker}
trailingIcon={showMenu ? ArrowDropup : ArrowDropdown}
value={datePickerValue}
/>

50
web/src/components/__tests__/Select.test.jsx
View File

@ -4,6 +4,30 @@ import { fireEvent, render, screen } from '@testing-library/preact';
describe('Select', () => {
test('on focus, shows a menu', async () => {
const handleChange = jest.fn();
render(
<Select
label="Tacos"
type="dropdown"
onChange={handleChange}
options={['all', 'tacos', 'burritos']}
paramName={['dinner']}
selected=""
/>
);
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
fireEvent.click(screen.getByRole('textbox'));
expect(screen.queryByRole('listbox')).toBeInTheDocument();
expect(screen.queryByRole('option', { name: 'all' })).toBeInTheDocument();
expect(screen.queryByRole('option', { name: 'tacos' })).toBeInTheDocument();
expect(screen.queryByRole('option', { name: 'burritos' })).toBeInTheDocument();
fireEvent.click(screen.queryByRole('option', { name: 'tacos' }));
expect(handleChange).toHaveBeenCalledWith({ dinner: 'tacos' });
});
test('allows keyboard navigation', async () => {
const handleChange = jest.fn();
render(
<Select
@ -17,27 +41,13 @@ describe('Select', () => {
);
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
fireEvent.click(screen.getByRole('textbox'));
const input = screen.getByRole('textbox');
fireEvent.focus(input);
fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
expect(screen.queryByRole('listbox')).toBeInTheDocument();
expect(screen.queryByRole('option', { name: 'tacos' })).toBeInTheDocument();
expect(screen.queryByRole('option', { name: 'burritos' })).toBeInTheDocument();
fireEvent.click(screen.queryByRole('option', { name: 'tacos' }));
expect(handleChange).toHaveBeenCalledWith({ dinner: 'tacos' }, 'tacos');
fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' });
fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
expect(handleChange).toHaveBeenCalledWith({ dinner: 'burritos' });
});
// test('allows keyboard navigation', async () => {
// const handleChange = jest.fn();
// render(<Select label="Tacos" onChange={handleChange} options={['tacos', 'burritos']} paramName={['burritos']} />);
// expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
// const input = screen.getByRole('textbox');
// fireEvent.focus(input);
// fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
// expect(screen.queryByRole('listbox')).toBeInTheDocument();
// fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' });
// fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
// expect(handleChange).toHaveBeenCalledWith('burritos', 'burritos');
// });
});

9
web/src/routes/Events/components/filter.jsx
View File

@ -2,7 +2,7 @@ import { h } from 'preact';
import Select from '../../../components/Select';
import { useCallback } from 'preact/hooks';
function Filter({ onChange, searchParams, paramName, options, type, ...rest }) {
function Filter({ onChange, searchParams, paramName, options, ...rest }) {
const handleSelect = useCallback(
(key) => {
const newParams = new URLSearchParams(searchParams.toString());
@ -20,10 +20,7 @@ function Filter({ onChange, searchParams, paramName, options, type, ...rest }) {
);
const obj = {};
paramName.map((p) => Object.assign(obj, { [p]: searchParams.get(p) }), [searchParams]);
return (
<Select onChange={handleSelect} options={options} selected={obj} paramName={paramName} type={type} {...rest} />
);
paramName.map((name) => Object.assign(obj, { [name]: searchParams.get(name) }), [searchParams]);
return <Select onChange={handleSelect} options={options} selected={obj} paramName={paramName} {...rest} />;
}
export default Filter;