From 576f15e692faa998a94e4d88fd03205cf076c070 Mon Sep 17 00:00:00 2001 From: Damir Abdulganiev Date: Fri, 14 Jan 2022 17:54:08 +0300 Subject: [PATCH 1/8] CustomParams: Fixed condition error. Now existingFields updates correctly when one of CustomParamsFields is deleted --- kafka-ui-react-app/src/components/Topics/New/New.tsx | 2 +- .../components/Topics/shared/Form/CustomParams/CustomParams.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/New/New.tsx b/kafka-ui-react-app/src/components/Topics/New/New.tsx index de4075912c2..7d596e63c1a 100644 --- a/kafka-ui-react-app/src/components/Topics/New/New.tsx +++ b/kafka-ui-react-app/src/components/Topics/New/New.tsx @@ -37,7 +37,7 @@ const New: React.FC = () => { history.push(clusterTopicPath(clusterName, data.name)); } catch (error) { - const response = await getResponse(error); + const response = await getResponse(error as Response); const alert: FailurePayload = { subject: ['schema', data.name].join('-'), title: `Schema ${data.name}`, diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx index f1a6be62bde..7349228223c 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx @@ -22,7 +22,7 @@ const CustomParams: React.FC = ({ isSubmitting }) => { const [existingFields, setExistingFields] = React.useState([]); const removeField = (index: number): void => { setExistingFields( - existingFields.filter((field) => field === fields[index].name) + existingFields.filter((field) => field !== fields[index].name) ); remove(index); }; From 3201aaaf855bb219f2b31f08131039a76a7337ce Mon Sep 17 00:00:00 2001 From: Damir Abdulganiev Date: Sun, 16 Jan 2022 20:48:49 +0300 Subject: [PATCH 2/8] Resolves bug when you select option and after select another - existingFields do not update correctly --- .../Form/CustomParams/CustomParamField.tsx | 19 +-- .../shared/Form/CustomParams/CustomParams.tsx | 4 +- .../__tests__/CustomParams.spec.tsx | 149 ++++++++++++++++++ 3 files changed, 159 insertions(+), 13 deletions(-) create mode 100644 kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParams.spec.tsx diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx index c2a023ba0e8..587691ebd91 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import React, { useRef } from 'react'; import { ErrorMessage } from '@hookform/error-message'; import { TOPIC_CUSTOM_PARAMS } from 'lib/constants'; import { FieldArrayWithId, useFormContext } from 'react-hook-form'; -import { remove as _remove } from 'lodash'; import { TopicFormData } from 'redux/interfaces'; import { InputLabel } from 'components/common/Input/InputLabel.styled'; import { FormError } from 'components/common/Input/Input.styled'; @@ -37,19 +36,17 @@ const CustomParamField: React.FC = ({ watch, } = useFormContext(); const nameValue = watch(`customParams.${index}.name`); - let prevName = ''; + const prevName = useRef(nameValue); React.useEffect(() => { - prevName = nameValue; - }, []); - - React.useEffect(() => { - if (nameValue !== prevName) { + if (nameValue !== prevName.current) { let newExistingFields = [...existingFields]; - if (prevName) { - newExistingFields = _remove(newExistingFields, (el) => el === prevName); + if (prevName.current) { + newExistingFields = newExistingFields.filter((name) => { + return name !== prevName.current; + }); } - prevName = nameValue; + prevName.current = nameValue; newExistingFields.push(nameValue); setExistingFields(newExistingFields); setValue(`customParams.${index}.value`, TOPIC_CUSTOM_PARAMS[nameValue]); diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx index 7349228223c..3b405129b15 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx @@ -8,12 +8,12 @@ import * as S from './CustomParams.styled'; export const INDEX_PREFIX = 'customParams'; -interface Props { +export interface CustomParamsProps { isSubmitting: boolean; config?: TopicConfigByName; } -const CustomParams: React.FC = ({ isSubmitting }) => { +const CustomParams: React.FC = ({ isSubmitting }) => { const { control } = useFormContext(); const { fields, append, remove } = useFieldArray({ control, diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParams.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParams.spec.tsx new file mode 100644 index 00000000000..98ffd4137c1 --- /dev/null +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParams.spec.tsx @@ -0,0 +1,149 @@ +import React from 'react'; +import { screen, within } from '@testing-library/react'; +import { render } from 'lib/testHelpers'; +import CustomParams, { + CustomParamsProps, +} from 'components/Topics/shared/Form/CustomParams/CustomParams'; +import { FormProvider, useForm } from 'react-hook-form'; +import userEvent from '@testing-library/user-event'; + +// https://github.com/react-hook-form/react-hook-form/discussions/3815 +describe('CustomParams', () => { + const setupComponent = (props: CustomParamsProps) => { + const Wrapper: React.FC = ({ children }) => { + const methods = useForm(); + return {children}; + }; + + render( + + + + ); + }; + + beforeEach(() => { + setupComponent({ isSubmitting: false }); + }); + + it('renders with props', () => { + const addParamButton = screen.getByRole('button'); + expect(addParamButton).toBeInTheDocument(); + expect(addParamButton).toHaveTextContent('Add Custom Parameter'); + }); + + describe('works with user inputs correctly', () => { + it('button click creates custom param fieldset', () => { + const addParamButton = screen.getByRole('button'); + userEvent.click(addParamButton); + + const listbox = screen.getByRole('listbox'); + expect(listbox).toBeInTheDocument(); + + const textbox = screen.getByRole('textbox'); + expect(textbox).toBeInTheDocument(); + }); + + it('can select option', () => { + const addParamButton = screen.getByRole('button'); + userEvent.click(addParamButton); + + const listbox = screen.getByRole('listbox'); + + userEvent.selectOptions(listbox, ['compression.type']); + + const option = screen.getByRole('option', { + selected: true, + }); + expect(option).toHaveValue('compression.type'); + expect(option).toBeDisabled(); + + const textbox = screen.getByRole('textbox'); + expect(textbox).toHaveValue('producer'); + }); + + it('when selected option changes disabled options update correctly', () => { + const addParamButton = screen.getByRole('button'); + userEvent.click(addParamButton); + + const listbox = screen.getByRole('listbox'); + + userEvent.selectOptions(listbox, ['compression.type']); + + const option = screen.getByRole('option', { + name: 'compression.type', + }); + expect(option).toBeDisabled(); + + userEvent.selectOptions(listbox, ['delete.retention.ms']); + const newOption = screen.getByRole('option', { + name: 'delete.retention.ms', + }); + expect(newOption).toBeDisabled(); + + expect(option).toBeEnabled(); + }); + + it('multiple button clicks create multiple fieldsets', () => { + const addParamButton = screen.getByRole('button'); + userEvent.click(addParamButton); + userEvent.click(addParamButton); + userEvent.click(addParamButton); + + const listboxes = screen.getAllByRole('listbox'); + expect(listboxes.length).toBe(3); + + const textboxes = screen.getAllByRole('textbox'); + expect(textboxes.length).toBe(3); + }); + + it("can't select already selected option", () => { + const addParamButton = screen.getByRole('button'); + userEvent.click(addParamButton); + userEvent.click(addParamButton); + + const listboxes = screen.getAllByRole('listbox'); + + const firstListbox = listboxes[0]; + userEvent.selectOptions(firstListbox, ['compression.type']); + + const firstListboxOption = within(firstListbox).getByRole('option', { + selected: true, + }); + expect(firstListboxOption).toBeDisabled(); + + const secondListbox = listboxes[1]; + const secondListboxOption = within(secondListbox).getByRole('option', { + name: 'compression.type', + }); + expect(secondListboxOption).toBeDisabled(); + userEvent.selectOptions(secondListbox, ['compression.type']); + }); + + // it('multiple button clicks create multiple fieldsets', () => { + // const addParamButton = screen.getByRole('button'); + // userEvent.click(addParamButton); + // userEvent.click(addParamButton); + // userEvent.click(addParamButton); + + // const listboxes = screen.getAllByRole('listbox'); + + // const firstListbox = listboxes[0]; + // userEvent.selectOptions(firstListbox, ['compression.type']); + // const option = screen.getByRole('option', { + // selected: true, + // }); + // expect(option).toHaveValue('compression.type'); + // expect(option).toBeDisabled(); + + // const textbox = screen.getByRole('textbox'); + // expect(textbox).toHaveValue('producer'); + + // const secondListbox = listboxes[1]; + // const thirdListbox = listboxes[2]; + + // const textboxes = screen.getAllByRole('textbox'); + // expect(textboxes.length).toBe(3); + // }); + }); +}); From 9695e280b7a4a4546a6bcc7e9ca385af3378f5c4 Mon Sep 17 00:00:00 2001 From: Damir Abdulganiev Date: Sun, 16 Jan 2022 20:49:50 +0300 Subject: [PATCH 3/8] cleanup --- .../Topics/shared/Form/CustomParams/CustomParamField.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx index 587691ebd91..9e7827d4f38 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx @@ -42,9 +42,9 @@ const CustomParamField: React.FC = ({ if (nameValue !== prevName.current) { let newExistingFields = [...existingFields]; if (prevName.current) { - newExistingFields = newExistingFields.filter((name) => { - return name !== prevName.current; - }); + newExistingFields = newExistingFields.filter( + (name) => name !== prevName.current + ); } prevName.current = nameValue; newExistingFields.push(nameValue); From c732372ed557a6169065671d99bae41cf22e6b2a Mon Sep 17 00:00:00 2001 From: Damir Abdulganiev Date: Mon, 17 Jan 2022 11:03:34 +0300 Subject: [PATCH 4/8] CustomParams fields update correctly --- .../Form/CustomParams/CustomParamField.tsx | 17 +++-- .../Form/CustomParams/CustomParams.styled.ts | 8 +-- .../shared/Form/CustomParams/CustomParams.tsx | 19 +++++- .../__tests__/CustomParams.spec.tsx | 65 ++++++++++++------- .../common/Icons/IconButtonWrapper.ts | 5 +- 5 files changed, 80 insertions(+), 34 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx index 9e7827d4f38..f8370bcc41a 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx @@ -80,7 +80,10 @@ const CustomParamField: React.FC = ({ ))} - + @@ -88,7 +91,7 @@ const CustomParamField: React.FC = ({
Value = ({
- remove(index)} aria-hidden> - + remove(index)} + onKeyDown={(e: React.KeyboardEvent) => + e.code === 'Space' && remove(index) + } + title={`Delete customParam field ${index}`} + > + diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.styled.ts b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.styled.ts index 092f6d08573..86536c8d46c 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.styled.ts +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.styled.ts @@ -6,11 +6,11 @@ export const ParamsWrapper = styled.div` `; export const DeleteButtonWrapper = styled.div` - height: 32px; + min-height: 32px; display: flex; flex-direction: column; - justify-content: center; + /* justify-content: center; */ align-items: center; - align-self: flex-end; - flex-grow: 0.25 !important; + justify-self: flex-start; + margin-top: 32px; `; diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx index 3b405129b15..1eb4dbe4a92 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { TopicConfigByName, TopicFormData } from 'redux/interfaces'; -import { useFieldArray, useFormContext } from 'react-hook-form'; +import { useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import { Button } from 'components/common/Button/Button'; import CustomParamField from './CustomParamField'; @@ -19,17 +19,30 @@ const CustomParams: React.FC = ({ isSubmitting }) => { control, name: INDEX_PREFIX, }); + const watchFieldArray = useWatch({ + control, + name: INDEX_PREFIX, + defaultValue: fields, + }); + const controlledFields = fields.map((field, index) => { + return { + ...field, + ...watchFieldArray[index], + }; + }); + const [existingFields, setExistingFields] = React.useState([]); + const removeField = (index: number): void => { setExistingFields( - existingFields.filter((field) => field !== fields[index].name) + existingFields.filter((field) => field !== controlledFields[index].name) ); remove(index); }; return ( - {fields.map((field, idx) => ( + {controlledFields.map((field, idx) => ( { const setupComponent = (props: CustomParamsProps) => { const Wrapper: React.FC = ({ children }) => { @@ -117,33 +116,55 @@ describe('CustomParams', () => { name: 'compression.type', }); expect(secondListboxOption).toBeDisabled(); - userEvent.selectOptions(secondListbox, ['compression.type']); }); - // it('multiple button clicks create multiple fieldsets', () => { - // const addParamButton = screen.getByRole('button'); - // userEvent.click(addParamButton); - // userEvent.click(addParamButton); - // userEvent.click(addParamButton); + it('when fieldset with selected custom property type is deleted disabled options update correctly', async () => { + const addParamButton = screen.getByRole('button'); + userEvent.click(addParamButton); + userEvent.click(addParamButton); + userEvent.click(addParamButton); - // const listboxes = screen.getAllByRole('listbox'); + const listboxes = screen.getAllByRole('listbox'); - // const firstListbox = listboxes[0]; - // userEvent.selectOptions(firstListbox, ['compression.type']); - // const option = screen.getByRole('option', { - // selected: true, - // }); - // expect(option).toHaveValue('compression.type'); - // expect(option).toBeDisabled(); + const firstListbox = listboxes[0]; + userEvent.selectOptions(firstListbox, ['compression.type']); - // const textbox = screen.getByRole('textbox'); - // expect(textbox).toHaveValue('producer'); + const firstListboxOption = within(firstListbox).getByRole('option', { + selected: true, + }); + expect(firstListboxOption).toBeDisabled(); - // const secondListbox = listboxes[1]; - // const thirdListbox = listboxes[2]; + const secondListbox = listboxes[1]; + userEvent.selectOptions(secondListbox, ['delete.retention.ms']); + const secondListboxOption = within(secondListbox).getByRole('option', { + selected: true, + }); + expect(secondListboxOption).toBeDisabled(); - // const textboxes = screen.getAllByRole('textbox'); - // expect(textboxes.length).toBe(3); - // }); + const thirdListbox = listboxes[2]; + userEvent.selectOptions(thirdListbox, ['file.delete.delay.ms']); + const thirdListboxOption = within(thirdListbox).getByRole('option', { + selected: true, + }); + expect(thirdListboxOption).toBeDisabled(); + + const deleteSecondFieldsetButton = screen.getByTitle( + 'Delete customParam field 1' + ); + userEvent.click(deleteSecondFieldsetButton); + expect(secondListbox).not.toBeInTheDocument(); + + expect( + within(firstListbox).getByRole('option', { + name: 'delete.retention.ms', + }) + ).toBeEnabled(); + + expect( + within(thirdListbox).getByRole('option', { + name: 'delete.retention.ms', + }) + ).toBeEnabled(); + }); }); }); diff --git a/kafka-ui-react-app/src/components/common/Icons/IconButtonWrapper.ts b/kafka-ui-react-app/src/components/common/Icons/IconButtonWrapper.ts index 6cae47935a4..7804071f6f7 100644 --- a/kafka-ui-react-app/src/components/common/Icons/IconButtonWrapper.ts +++ b/kafka-ui-react-app/src/components/common/Icons/IconButtonWrapper.ts @@ -1,6 +1,9 @@ import styled from 'styled-components'; -const IconButtonWrapper = styled.span` +const IconButtonWrapper = styled.span.attrs(() => ({ + role: 'button', + tabIndex: '0', +}))` height: 16px !important; display: inline-block; &:hover { From d593ca02b95b1e30a8943e63a66d7a8fc395493f Mon Sep 17 00:00:00 2001 From: Damir Abdulganiev Date: Mon, 17 Jan 2022 11:31:26 +0300 Subject: [PATCH 5/8] cleanup --- .../Topics/shared/Form/CustomParams/CustomParamField.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx index f8370bcc41a..bd52af0eed9 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx @@ -91,7 +91,7 @@ const CustomParamField: React.FC = ({
Value = ({ disabled={isDisabled} /> - +
From e4f4ddbcf1c552ddbd7f3e73164b254851b17666 Mon Sep 17 00:00:00 2001 From: Damir Abdulganiev Date: Mon, 17 Jan 2022 11:49:47 +0300 Subject: [PATCH 6/8] cleanup --- .../Topics/shared/Form/CustomParams/CustomParams.styled.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.styled.ts b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.styled.ts index 86536c8d46c..5c7d1debcd1 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.styled.ts +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.styled.ts @@ -9,7 +9,6 @@ export const DeleteButtonWrapper = styled.div` min-height: 32px; display: flex; flex-direction: column; - /* justify-content: center; */ align-items: center; justify-self: flex-start; margin-top: 32px; From 506b9d575392e48fc5206b343c8be7c1c7c189b9 Mon Sep 17 00:00:00 2001 From: Damir Abdulganiev Date: Tue, 18 Jan 2022 12:13:15 +0300 Subject: [PATCH 7/8] Increases coverage --- .../Form/CustomParams/CustomParamField.tsx | 2 +- .../__tests__/CustomParamField.spec.tsx | 107 ++++++++++++++++++ .../__tests__/CustomParams.spec.tsx | 5 +- 3 files changed, 111 insertions(+), 3 deletions(-) create mode 100644 kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParamField.spec.tsx diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx index bd52af0eed9..1c3163bf6d1 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx @@ -13,7 +13,7 @@ import * as C from 'components/Topics/shared/Form/TopicForm.styled'; import * as S from './CustomParams.styled'; -interface Props { +export interface Props { isDisabled: boolean; index: number; existingFields: string[]; diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParamField.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParamField.spec.tsx new file mode 100644 index 00000000000..b56323b1911 --- /dev/null +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParamField.spec.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import { screen, within } from '@testing-library/react'; +import { render } from 'lib/testHelpers'; +import CustomParamsField, { + Props, +} from 'components/Topics/shared/Form/CustomParams/CustomParamField'; +import { FormProvider, useForm } from 'react-hook-form'; +import userEvent from '@testing-library/user-event'; +import { TOPIC_CUSTOM_PARAMS } from 'lib/constants'; + +const isDisabled = false; +const index = 0; +const existingFields: string[] = []; +const field = { name: 'name', value: 'value', id: 'id' }; +const remove = jest.fn(); +const setExistingFields = jest.fn(); + +describe('CustomParamsField', () => { + const setupComponent = (props: Props) => { + const Wrapper: React.FC = ({ children }) => { + const methods = useForm(); + return {children}; + }; + + return render( + + + + ); + }; + + it('renders with props', () => { + setupComponent({ + field, + isDisabled, + index, + remove, + existingFields, + setExistingFields, + }); + expect(screen.getByRole('listbox')).toBeInTheDocument(); + expect(screen.getByRole('textbox')).toBeInTheDocument(); + expect(screen.getByRole('button')).toBeInTheDocument(); + }); + + describe('core functionality works', () => { + it('click on button triggers remove', () => { + setupComponent({ + field, + isDisabled, + index, + remove, + existingFields, + setExistingFields, + }); + userEvent.click(screen.getByRole('button')); + expect(remove.mock.calls.length).toBe(1); + }); + + it('can select option', () => { + setupComponent({ + field, + isDisabled, + index, + remove, + existingFields, + setExistingFields, + }); + const listbox = screen.getByRole('listbox'); + userEvent.selectOptions(listbox, ['compression.type']); + + const option = within(listbox).getByRole('option', { selected: true }); + expect(option).toHaveValue('compression.type'); + }); + + it('selecting option updates textbox value', () => { + setupComponent({ + field, + isDisabled, + index, + remove, + existingFields, + setExistingFields, + }); + const listbox = screen.getByRole('listbox'); + userEvent.selectOptions(listbox, ['compression.type']); + + const textbox = screen.getByRole('textbox'); + expect(textbox).toHaveValue(TOPIC_CUSTOM_PARAMS['compression.type']); + }); + + it('selecting option updates triggers setExistingFields', () => { + setupComponent({ + field, + isDisabled, + index, + remove, + existingFields, + setExistingFields, + }); + const listbox = screen.getByRole('listbox'); + userEvent.selectOptions(listbox, ['compression.type']); + + expect(setExistingFields.mock.calls.length).toBe(1); + }); + }); +}); diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParams.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParams.spec.tsx index 18d37647622..d803e65e4b0 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParams.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParams.spec.tsx @@ -6,6 +6,7 @@ import CustomParams, { } from 'components/Topics/shared/Form/CustomParams/CustomParams'; import { FormProvider, useForm } from 'react-hook-form'; import userEvent from '@testing-library/user-event'; +import { TOPIC_CUSTOM_PARAMS } from 'lib/constants'; describe('CustomParams', () => { const setupComponent = (props: CustomParamsProps) => { @@ -14,7 +15,7 @@ describe('CustomParams', () => { return {children}; }; - render( + return render( @@ -58,7 +59,7 @@ describe('CustomParams', () => { expect(option).toBeDisabled(); const textbox = screen.getByRole('textbox'); - expect(textbox).toHaveValue('producer'); + expect(textbox).toHaveValue(TOPIC_CUSTOM_PARAMS['compression.type']); }); it('when selected option changes disabled options update correctly', () => { From 02d05c6ef0105bbbae70fa6b62eb71158cb48b68 Mon Sep 17 00:00:00 2001 From: Damir Abdulganiev Date: Tue, 18 Jan 2022 12:23:34 +0300 Subject: [PATCH 8/8] Increases coverage --- .../__tests__/CustomParamField.spec.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParamField.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParamField.spec.tsx index b56323b1911..7d9ea036a0a 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParamField.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/CustomParamField.spec.tsx @@ -15,6 +15,8 @@ const field = { name: 'name', value: 'value', id: 'id' }; const remove = jest.fn(); const setExistingFields = jest.fn(); +const SPACE_KEY = ' '; + describe('CustomParamsField', () => { const setupComponent = (props: Props) => { const Wrapper: React.FC = ({ children }) => { @@ -57,6 +59,20 @@ describe('CustomParamsField', () => { expect(remove.mock.calls.length).toBe(1); }); + it('pressing space on button triggers remove', () => { + setupComponent({ + field, + isDisabled, + index, + remove, + existingFields, + setExistingFields, + }); + userEvent.type(screen.getByRole('button'), SPACE_KEY); + // userEvent.type triggers remove two times as at first it clicks on element and then presses space + expect(remove.mock.calls.length).toBe(2); + }); + it('can select option', () => { setupComponent({ field,