feat/DS-15531_clear

.changeset/sour-pants-drive.md

@@ -0,0 +1,14 @@
+---
+'@alfalab/core-components': minor
+'@alfalab/core-components-input': minor
+---
+
+##### Input
+
+Раобота пропа `clear` разделена на 2 механики: 
+- `false` или `never` — не отображается
+- `true` или `always` — отображается всегда
+- `auto` — отображается только при взаимодействии c input (hover, focus)
+- Исправлен размер контейнера иконки статусов (success, error)
+
+Булевы значения будут удалены в core-components@51

packages/input/src/Component.test.tsx

@@ -41,7 +41,7 @@ describe('Input', () => {
         expect(ref.current.classList.contains('wrapperClassName'));
     });
 
-    it('should set `data-test-id` atribute to input', () => {
+    it('should set `data-test-id` attribute to input', () => {
         const dti = 'input-dti';
         const { getByTestId } = render(
             <Input
@@ -75,10 +75,21 @@ describe('Input', () => {
         );
 
         expect(getByTestIdHint(testIds.hint)).toBeInTheDocument();
-        expect(getByTestId(testIds.successIcon)).toBeInTheDocument();
         expect(getByTestId(testIds.clearIcon)).toBeInTheDocument();
     });
 
+    it('should set success `data-test-id` attribute to input', () => {
+        const dti = 'input-dti';
+
+        const { getByTestId } = render(
+            <Input dataTestId={dti} value='value' clear='auto' success={true} />,
+        );
+
+        const testIds = getInputTestIds(dti);
+
+        expect(getByTestId(testIds.successIcon)).toBeInTheDocument();
+    });
+
     it('should set `aria-label` atribute to input', () => {
         const label = 'label';
         const { getByLabelText } = render(<Input block={true} label={label} />);
@@ -425,4 +436,124 @@ describe('Input', () => {
 
         expect(unmount).not.toThrow();
     });
+
+    describe('clearButton tests', () => {
+        const dti = 'input-dti';
+
+        describe('auto', () => {
+            it('should not render if status icon and empty input', () => {
+                const { queryByTestId } = render(
+                    <Input dataTestId={dti} value='' clear='auto' success={true} />,
+                );
+
+                const testIds = getInputTestIds(dti);
+
+                expect(queryByTestId(testIds.clearIcon)).not.toBeInTheDocument();
+                expect(queryByTestId(testIds.successIcon)).toBeInTheDocument();
+            });
+
+            it('should not render if status icon', () => {
+                const { queryByTestId } = render(
+                    <Input dataTestId={dti} value='value' clear='auto' success={true} />,
+                );
+
+                const testIds = getInputTestIds(dti);
+
+                expect(queryByTestId(testIds.clearIcon)).not.toBeInTheDocument();
+                expect(queryByTestId(testIds.successIcon)).toBeInTheDocument();
+            });
+
+            it('should render if status icon and focus input', async () => {
+                const { queryByTestId } = render(
+                    <Input dataTestId={dti} value='value' clear='auto' success={true} />,
+                );
+
+                const testIds = getInputTestIds(dti);
+
+                const inputElement = queryByTestId(testIds.input);
+
+                if (inputElement) {
+                    await userEvent.click(inputElement);
+                }
+
+                expect(queryByTestId(testIds.clearIcon)).toBeInTheDocument();
+                expect(queryByTestId(testIds.successIcon)).not.toBeInTheDocument();
+            });
+
+            it('should render if status icons and hover input', async () => {
+                const { queryByTestId } = render(
+                    <Input dataTestId={dti} value='value' clear='auto' success={true} />,
+                );
+
+                const testIds = getInputTestIds(dti);
+
+                const inputElement = queryByTestId(testIds.input);
+
+                if (inputElement) {
+                    await userEvent.hover(inputElement);
+                }
+
+                expect(queryByTestId(testIds.clearIcon)).toBeInTheDocument();
+                expect(queryByTestId(testIds.successIcon)).not.toBeInTheDocument();
+            });
+        });
+
+        describe('always', () => {
+            it('should render if status icon', () => {
+                const { queryByTestId } = render(
+                    <Input dataTestId={dti} value='value' clear='always' success={true} />,
+                );
+
+                const testIds = getInputTestIds(dti);
+
+                expect(queryByTestId(testIds.clearIcon)).toBeInTheDocument();
+                expect(queryByTestId(testIds.successIcon)).not.toBeInTheDocument();
+            });
+
+            it('should render if status icon and focus input', async () => {
+                const { queryByTestId } = render(
+                    <Input dataTestId={dti} value='value' clear='always' success={true} />,
+                );
+
+                const testIds = getInputTestIds(dti);
+
+                const inputElement = queryByTestId(testIds.input);
+
+                if (inputElement) {
+                    await userEvent.click(inputElement);
+                }
+
+                expect(queryByTestId(testIds.clearIcon)).toBeInTheDocument();
+                expect(queryByTestId(testIds.successIcon)).not.toBeInTheDocument();
+            });
+
+            it('should render if status icon and hover input', async () => {
+                const { queryByTestId } = render(
+                    <Input dataTestId={dti} value='value' clear='always' success={true} />,
+                );
+
+                const testIds = getInputTestIds(dti);
+
+                const inputElement = queryByTestId(testIds.input);
+
+                if (inputElement) {
+                    await userEvent.hover(inputElement);
+                }
+
+                expect(queryByTestId(testIds.clearIcon)).toBeInTheDocument();
+                expect(queryByTestId(testIds.successIcon)).not.toBeInTheDocument();
+            });
+
+            it('should not render if status and empty input', async () => {
+                const { queryByTestId } = render(
+                    <Input dataTestId={dti} value='' clear='always' success={true} />,
+                );
+
+                const testIds = getInputTestIds(dti);
+
+                expect(queryByTestId(testIds.clearIcon)).not.toBeInTheDocument();
+                expect(queryByTestId(testIds.successIcon)).toBeInTheDocument();
+            });
+        });
+    });
 });