Skip to content

Commit

Permalink
fix: added proper synthetic event emitter NO-JIRA (#130)
Browse files Browse the repository at this point in the history
* fix: added proper synthetic event emitter NO-JIRA

* chore: removed unnecessary exports NO-JIRA

* feat(text input): test update NO-JIRA

* feat(text input inherited components): tests update NO-JIRA

* fix: cr issue NO-JIRA
  • Loading branch information
adrian-potepa authored Mar 26, 2024
1 parent 8d0c57e commit e07b9bb
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 21 deletions.
14 changes: 7 additions & 7 deletions src/components/InlineSearchInput/InlineSearchInput.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,18 +96,18 @@ describe('InlineSearchInput', () => {

it('should clear controlled text input', () => {
const { input, clearButton } = getInlineSearchInput(
<InlineSearchInput value="1234" onChange={handleEventMock} />,
<InlineSearchInput onChange={handleEventMock} />,
);

if (input && clearButton) {
fireEvent.change(input, { target: { value: 'test' } });
if (!input || !clearButton) return;

expect(input.value).toBe('1234');
fireEvent.change(input, { target: { value: 'test' } });

fireEvent.click(clearButton);
expect(input.value).toBe('test');

expect(handleEventMock).toBeCalledWith({ target: { value: '' } });
}
fireEvent.click(clearButton);

expect(handleEventMock).toBeCalledWith({ target: { value: '' } });

expect(input).toBeDefined();
});
Expand Down
4 changes: 2 additions & 2 deletions src/components/SearchInput/SearchInput.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,13 +103,13 @@ describe('SearchInput', () => {

it('should clear controlled text input', () => {
const { input, clearButton } = getSearchInput(
<SearchInput value="1234" onChange={handleEventMock} />,
<SearchInput onChange={handleEventMock} />,
);

if (input && clearButton) {
fireEvent.change(input, { target: { value: 'test' } });

expect(input.value).toBe('1234');
expect(input.value).toBe('test');

fireEvent.click(clearButton);

Expand Down
15 changes: 11 additions & 4 deletions src/components/TextInput/TextInput.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -126,18 +126,25 @@ describe('TextInput', () => {
});

it('should clear controlled text input', () => {
const mockedOnChanged = vi.fn();

const { input, clearButton } = getTextInput(
<TextInput value="1234" onChange={handleEventMock} hasClearButton />,
<TextInput onChange={mockedOnChanged} hasClearButton />,
);

if (input && clearButton) {
fireEvent.change(input, { target: { value: 'test' } });
fireEvent.change(input, { target: { value: 'test value' } });

expect(input.value).toBe('1234');
expect(input.value).toBe('test value');

fireEvent.click(clearButton);

expect(handleEventMock).toBeCalledWith({ target: { value: '' } });
expect(mockedOnChanged).toHaveBeenCalledWith(
expect.objectContaining({
_reactName: 'onChange',
target: expect.objectContaining({ value: '' }),
}),
);
}

expect(input).toBeDefined();
Expand Down
35 changes: 27 additions & 8 deletions src/components/TextInput/useTextInput.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
ChangeEvent,
ChangeEventHandler,
MouseEventHandler,
FocusEvent,
Expand Down Expand Up @@ -53,13 +52,33 @@ export const useTextInput = ({
[onChange],
);

const handleOnClear: MouseEventHandler<HTMLButtonElement> =
useCallback(() => {
setInnerValue('');
onChange?.({
target: { value: '' },
} as ChangeEvent<HTMLInputElement>);
}, [onChange]);
const handleOnClear: MouseEventHandler<HTMLButtonElement> = () => {
setInnerValue('');

const input = containerRef.current?.querySelector('input');

if (!input) return;

const valueSetter = Object.getOwnPropertyDescriptor(
input.constructor.prototype,
'value',
)?.set;

const prototype = Object.getPrototypeOf(input);
const prototypeValueSetter = Object.getOwnPropertyDescriptor(
prototype,
'value',
)?.set;

if (valueSetter && valueSetter !== prototypeValueSetter) {
prototypeValueSetter?.call(input, '');
} else {
valueSetter?.call(input, '');
}

input.dispatchEvent(new Event('input', { bubbles: true }));
};

return {
innerValue,
styles,
Expand Down

0 comments on commit e07b9bb

Please sign in to comment.