diff --git a/src/elements/FilterButton/FilterButton.test.js b/src/elements/FilterButton/FilterButton.test.js new file mode 100644 index 0000000..d0b64fa --- /dev/null +++ b/src/elements/FilterButton/FilterButton.test.js @@ -0,0 +1,64 @@ +import {shallow} from 'enzyme'; +import React from 'react'; +import FilterButton from './FilterButton'; +import RandomPage from "../../pages/RandomPage/RandomPage"; +import {callAPI} from "../../utils/Api"; + +describe('', function () { + it('renders without crashing ', function () { + const wrapper = shallow( {}}/>); + wrapper.unmount(); + }); + + it('test initial render ', function () { + const wrapper = shallow( {}}/>); + expect(wrapper.find('input')).toHaveLength(0); + }); + + it('test clicking', function () { + const wrapper = shallow( {}}/>); + wrapper.simulate('click'); + + expect(wrapper.find('input')).toHaveLength(1); + }); + + it('test call of callback on textfield change', function () { + let val = ''; + const func = jest.fn((vali => {val = vali})); + + const wrapper = shallow(); + wrapper.simulate('click'); + + wrapper.find('input').simulate('change', {target: {value: 'test'}}); + + expect(func).toHaveBeenCalledTimes(1); + expect(val).toBe('test') + }); + + it('test closing on x button click', function () { + const wrapper = shallow( {}}/>); + wrapper.simulate('click'); + + expect(wrapper.find('input')).toHaveLength(1); + + wrapper.find('Button').simulate('click'); + + expect(wrapper.find('input')).toHaveLength(0); + }); + + it('test shortkey press', function () { + let events = []; + document.addEventListener = jest.fn((event, cb) => { + events[event] = cb; + }); + + shallow(); + + const wrapper = shallow( {}}/>); + expect(wrapper.find('input')).toHaveLength(0); + // trigger the keypress event + events.keyup({key: 'f'}); + + expect(wrapper.find('input')).toHaveLength(1); + }); +}); diff --git a/src/elements/FilterButton/FilterButton.tsx b/src/elements/FilterButton/FilterButton.tsx new file mode 100644 index 0000000..146bb23 --- /dev/null +++ b/src/elements/FilterButton/FilterButton.tsx @@ -0,0 +1,99 @@ +import React from "react"; +import style from "../Popups/AddActorPopup/AddActorPopup.module.css"; +import {Button} from "../GPElements/Button"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faFilter, faTimes} from "@fortawesome/free-solid-svg-icons"; +import {addKeyHandler, removeKeyHandler} from "../../utils/ShortkeyHandler"; + +interface props { + onFilterChange: (filter: string) => void +} + +interface state { + filtervisible: boolean; + filter: string; +} + +class FilterButton extends React.Component { + // filterfield anchor, needed to focus after filter btn click + private filterfield: HTMLInputElement | null | undefined; + + + constructor(props: props) { + super(props); + + this.state = { + filtervisible: false, + filter: '' + } + + this.keypress = this.keypress.bind(this); + this.enableFilterField = this.enableFilterField.bind(this); + } + + componentWillUnmount(): void { + removeKeyHandler(this.keypress); + } + + componentDidMount(): void { + addKeyHandler(this.keypress); + } + + render(): JSX.Element { + if (this.state.filtervisible) { + return ( + <> + { + this.props.onFilterChange(e.target.value); + this.setState({filter: e.target.value}); + }} + ref={(input): void => { + this.filterfield = input; + }}/> +