Merge pull request #1844 from epam/apply-comments-for-input-tests

[Inputs] Apply comments for input tests
epam · Dec 12, 2023 · 443e1eb · 443e1eb
2 parents 4e4d466 + 10a6896
commit 443e1eb
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 28 deletions.
diff --git a/uui-components/src/inputs/__tests__/Checkbox.test.tsx b/uui-components/src/inputs/__tests__/Checkbox.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Checkbox, CheckboxProps } from '../Checkbox';
-import { render, screen, fireEvent, setupComponentForTest } from '@epam/uui-test-utils';
+import { render, screen, fireEvent, setupComponentForTest, userEvent } from '@epam/uui-test-utils';
 
 async function setupCheckbox(params: Partial<CheckboxProps>) {
     const { mocks, setProps } = await setupComponentForTest<CheckboxProps>(
@@ -38,6 +38,39 @@ describe('Checkbox', () => {
         expect(getValueChangeAnalyticsEvent).toHaveBeenCalled();
     });
 
+    it('should handle keyboard click', async () => {
+        const onValueChange = jest.fn();
+        const getValueChangeAnalyticsEvent = jest.fn();
+        await setupCheckbox({
+            value: false,
+            onValueChange,
+            getValueChangeAnalyticsEvent,
+        });
+        const input = screen.getByRole('checkbox');
+
+        await userEvent.type(input, '{space}');
+
+        expect(onValueChange).toHaveBeenCalledWith(true);
+        expect(getValueChangeAnalyticsEvent).toHaveBeenCalled();
+    });
+
+    it('should handle label click', async () => {
+        const onValueChange = jest.fn();
+        const getValueChangeAnalyticsEvent = jest.fn();
+        await setupCheckbox({
+            value: false,
+            onValueChange,
+            getValueChangeAnalyticsEvent,
+            label: 'Label',
+        });
+        const label = screen.getByText('Label');
+
+        label.click();
+
+        expect(onValueChange).toHaveBeenCalledWith(true);
+        expect(getValueChangeAnalyticsEvent).toHaveBeenCalled();
+    });
+
     it('should not handle change event when readonly', () => {
         const onValueChange = jest.fn();
         render(<Checkbox value={ false } onValueChange={ onValueChange } isReadonly />);
@@ -55,6 +88,7 @@ describe('Checkbox', () => {
         input.focus();
 
         expect(onFocus).toHaveBeenCalled();
+        expect(input).toHaveFocus();
     });
 
     it('should handle blur event', () => {
@@ -63,8 +97,10 @@ describe('Checkbox', () => {
         const input = screen.getByRole('checkbox');
 
         input.focus();
+        expect(input).toHaveFocus();
         input.blur();
 
         expect(onBlur).toHaveBeenCalled();
+        expect(input).not.toHaveFocus();
     });
 });
diff --git a/uui-components/src/inputs/__tests__/InputAddon.test.tsx b/uui-components/src/inputs/__tests__/InputAddon.test.tsx
diff --git a/uui-components/src/inputs/__tests__/RadioInput.test.tsx b/uui-components/src/inputs/__tests__/RadioInput.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { RadioInput, RadioInputProps } from '../RadioInput';
-import { screen, setupComponentForTest } from '@epam/uui-test-utils';
+import { screen, setupComponentForTest, userEvent } from '@epam/uui-test-utils';
 
 async function setupRadioInput(params: Partial<RadioInputProps>) {
     const { mocks, setProps } = await setupComponentForTest<RadioInputProps>(
@@ -30,6 +30,26 @@ describe('RadioInput', () => {
         expect(onValueChange).toHaveBeenCalledWith(true);
     });
 
+    it('should call onValueChange on keyboard click', async () => {
+        const onValueChange = jest.fn();
+        await setupRadioInput({ value: false, onValueChange });
+        const input = screen.getByRole('radio');
+
+        await userEvent.type(input, '{space}');
+
+        expect(onValueChange).toHaveBeenCalledWith(true);
+    });
+
+    it('should call onValueChange on label click', async () => {
+        const onValueChange = jest.fn();
+        await setupRadioInput({ value: false, onValueChange, label: 'RadioLabel' });
+        const label = screen.getByText('RadioLabel');
+
+        label.click();
+
+        expect(onValueChange).toHaveBeenCalledWith(true);
+    });
+
     it('should not call onValueChange when clicked if isReadonly is true', async () => {
         const onValueChange = jest.fn();
 
@@ -48,4 +68,23 @@ describe('RadioInput', () => {
         input.click();
         expect(getValueChangeAnalyticsEvent).toHaveBeenCalled();
     });
+
+    it('should handle focus event', async () => {
+        const onFocus = jest.fn();
+        await setupRadioInput({ value: false, onFocus });
+        const input = screen.getByRole('radio');
+        input.focus();
+        expect(onFocus).toHaveBeenCalled();
+        expect(input).toHaveFocus();
+    });
+
+    it('should handle blur event', async () => {
+        const onBlur = jest.fn();
+        await setupRadioInput({ value: false, onBlur });
+        const input = screen.getByRole('radio');
+        input.focus();
+        input.blur();
+        expect(onBlur).toHaveBeenCalled();
+        expect(input).not.toHaveFocus();
+    });
 });
diff --git a/uui-components/src/inputs/__tests__/Switch.test.tsx b/uui-components/src/inputs/__tests__/Switch.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { fireEvent, setupComponentForTest, screen } from '@epam/uui-test-utils';
+import { fireEvent, setupComponentForTest, screen, userEvent } from '@epam/uui-test-utils';
 import { Switch, SwitchProps } from '../Switch';
 
 async function setupSwitch(params: Partial<SwitchProps>) {
@@ -29,7 +29,7 @@ describe('Switch', () => {
         expect(switchElement).toBeInTheDocument();
     });
 
-    it('should toggle the switch when clicked', async () => {
+    it('should toggle switch when clicked', async () => {
         await setupSwitch({ label: 'Test Switch' });
         const switchElement: HTMLInputElement = screen.getByLabelText('Test Switch');
 
@@ -38,6 +38,15 @@ describe('Switch', () => {
         expect(switchElement.checked).toBe(true);
     });
 
+    it('should toggle switch on keyboard click', async () => {
+        await setupSwitch({ label: 'Test Switch' });
+        const switchElement: HTMLInputElement = screen.getByLabelText('Test Switch');
+
+        await userEvent.type(switchElement, '{space}');
+
+        expect(switchElement.checked).toBe(true);
+    });
+
     it('should call onChange handler when the switch is toggled', async () => {
         const handleChange = jest.fn();
         await setupSwitch({ label: 'Test Switch', onValueChange: handleChange });
@@ -59,4 +68,38 @@ describe('Switch', () => {
 
         expect(getValueChangeAnalyticsEvent).toHaveBeenCalled();
     });
+
+    it('should handle focus event', async () => {
+        const onFocus = jest.fn();
+        await setupSwitch({ label: 'Test Switch', onFocus });
+        const switchElement = screen.getByLabelText('Test Switch');
+
+        switchElement.focus();
+
+        expect(onFocus).toHaveBeenCalled();
+        expect(switchElement).toHaveFocus();
+    });
+
+    it('should handle blur event', async () => {
+        const onBlur = jest.fn();
+        await setupSwitch({ label: 'Test Switch', onBlur });
+        const switchElement = screen.getByLabelText('Test Switch');
+
+        switchElement.focus();
+        switchElement.blur();
+
+        expect(onBlur).toHaveBeenCalled();
+        expect(switchElement).not.toHaveFocus();
+    });
+
+    it('should handle label click', async () => {
+        const handleChange = jest.fn();
+        await setupSwitch({ label: 'Test Switch', onValueChange: handleChange });
+        const label = screen.getByText('Test Switch');
+
+        label.click();
+
+        expect(handleChange).toHaveBeenCalledTimes(1);
+        expect(handleChange).toHaveBeenCalledWith(true);
+    });
 });
diff --git a/uui-editor/src/plugins/tablePlugin/MergeToolbarContent.tsx b/uui-editor/src/plugins/tablePlugin/MergeToolbarContent.tsx
@@ -2,15 +2,18 @@ import React from 'react';
 
 import { ReactComponent as TableMerge } from '../../icons/table-merge.svg';
 import { ToolbarButton } from '../../implementation/ToolbarButton';
-import { useEditorState } from '@udecode/plate-common';
+import { collapseSelection, useEditorState } from '@udecode/plate-common';
 import { mergeTableCells } from '@udecode/plate-table';
 
 export function MergeToolbarContent() {
     const editor = useEditorState();
 
     return (
         <ToolbarButton
-            onClick={ () => mergeTableCells(editor) }
+            onClick={ () => {
+                mergeTableCells(editor);
+                collapseSelection(editor);
+            } }
             icon={ TableMerge }
         />
     );

diff --git a/uui/components/inputs/__tests__/InputAddon.test.tsx b/uui/components/inputs/__tests__/InputAddon.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { renderer } from '@epam/uui-test-utils';
+import { InputAddon } from '../InputAddon';
+
+describe('InputAddon', () => {
+    describe('InputAddon', () => {
+        it('should be rendered correctly', () => {
+            const tree = renderer.create(<InputAddon content="Test Content" cx="custom-class" />).toJSON();
+            expect(tree).toMatchSnapshot();
+        });
+    });
+});
diff --git a/uui/components/inputs/__tests__/__snapshots__/InputAddon.test.tsx.snap b/uui/components/inputs/__tests__/__snapshots__/InputAddon.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputAddon InputAddon should be rendered correctly 1`] = `
+<div
+  className="prefixWrapper root custom-class uui-input-addon"
+>
+  Test Content
+</div>
+`;