From 313724f1a4863a6abae94e2dd1193ccb40375c4b Mon Sep 17 00:00:00 2001 From: Ekaterina Petrova Date: Mon, 17 Jan 2022 16:04:19 +0300 Subject: [PATCH 1/7] added trim to json config --- .../src/components/Connect/New/New.styled.ts | 12 +++++++++++ .../src/components/Connect/New/New.tsx | 20 +++++-------------- .../__tests__/__snapshots__/New.spec.tsx.snap | 3 +-- kafka-ui-react-app/src/lib/yupExtended.ts | 8 +++++--- 4 files changed, 23 insertions(+), 20 deletions(-) create mode 100644 kafka-ui-react-app/src/components/Connect/New/New.styled.ts diff --git a/kafka-ui-react-app/src/components/Connect/New/New.styled.ts b/kafka-ui-react-app/src/components/Connect/New/New.styled.ts new file mode 100644 index 00000000000..c24eff561a3 --- /dev/null +++ b/kafka-ui-react-app/src/components/Connect/New/New.styled.ts @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +export const NewConnectFormStyled = styled.form` + padding: 0 16px 16px; + display: flex; + flex-direction: column; + gap: 16px; + + & > button:last-child { + align-self: flex-start; + } +`; diff --git a/kafka-ui-react-app/src/components/Connect/New/New.tsx b/kafka-ui-react-app/src/components/Connect/New/New.tsx index 7b09a8f04e7..d7b3a5fa161 100644 --- a/kafka-ui-react-app/src/components/Connect/New/New.tsx +++ b/kafka-ui-react-app/src/components/Connect/New/New.tsx @@ -14,9 +14,10 @@ import Select from 'components/common/Select/Select'; import { FormError } from 'components/common/Input/Input.styled'; import Input from 'components/common/Input/Input'; import { Button } from 'components/common/Button/Button'; -import styled from 'styled-components'; import PageHeading from 'components/common/PageHeading/PageHeading'; +import * as S from './New.styled'; + const validationSchema = yup.object().shape({ name: yup.string().required(), config: yup.string().required().isJsonObject(), @@ -26,17 +27,6 @@ interface RouterParams { clusterName: ClusterName; } -const NewConnectFormStyled = styled.form` - padding: 16px; - padding-top: 0; - display: flex; - flex-direction: column; - gap: 16px; - & > button:last-child { - align-self: flex-start; - } -`; - export interface NewProps { fetchConnects(clusterName: ClusterName): void; areConnectsFetching: boolean; @@ -99,7 +89,7 @@ const New: React.FC = ({ async (values: FormValues) => { const connector = await createConnector(clusterName, values.connectName, { name: values.name, - config: JSON.parse(values.config), + config: JSON.parse(values.config.trim()), }); if (connector) { history.push( @@ -125,7 +115,7 @@ const New: React.FC = ({ return ( - +
Connect *

-

- , -] + + `; -exports[`New view matches snapshot when fetching connects 1`] = ``; +exports[`New view matches snapshot when fetching connects 1`] = ` + + .c0 { + height: 56px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0px 16px; +} + +.c0 h1 { + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: #000; +} + +.c0 > div { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 16px; +} + +
+

+ Create new connector +

+
+
+ .c1 { + font-weight: 500; + font-size: 12px; + line-height: 20px; + color: #454F54; +} + +.c3 { + height: 32px; + border: 1px #ABB5BA solid; + border-radius: 4px; + font-size: 14px; + width: 100%; + padding-left: 12px; + padding-right: 16px; + color: #171A1C; + min-width: auto; + background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important; + background-repeat: no-repeat !important; + background-position-x: calc(100% - 8px) !important; + background-position-y: 55% !important; + -webkit-appearance: none !important; + -moz-appearance: none !important; + appearance: none !important; +} + +.c3:hover { + color: #171A1C; + border-color: #73848C; +} + +.c3:focus { + outline: none; + color: #171A1C; + border-color: #454F54; +} + +.c3:disabled { + color: #ABB5BA; + border-color: #E3E6E8; + cursor: not-allowed; +} + +.c2 { + position: relative; +} + +.c6 { + border: 1px #ABB5BA solid; + border-radius: 4px; + height: 32px; + width: 100%; + padding-left: 12px; + font-size: 14px; +} + +.c6::-webkit-input-placeholder { + color: #ABB5BA; + font-size: 14px; +} + +.c6::-moz-placeholder { + color: #ABB5BA; + font-size: 14px; +} + +.c6:-ms-input-placeholder { + color: #ABB5BA; + font-size: 14px; +} + +.c6::placeholder { + color: #ABB5BA; + font-size: 14px; +} + +.c6:hover { + border-color: #73848C; +} + +.c6:focus { + outline: none; + border-color: #454F54; +} + +.c6:focus::-webkit-input-placeholder { + color: transparent; +} + +.c6:focus::-moz-placeholder { + color: transparent; +} + +.c6:focus:-ms-input-placeholder { + color: transparent; +} + +.c6:focus::placeholder { + color: transparent; +} + +.c6:disabled { + color: #ABB5BA; + border-color: #E3E6E8; + cursor: not-allowed; +} + +.c6:read-only { + color: #171A1C; + border: none; + background-color: #F1F2F3; + cursor: not-allowed; +} + +.c6:-moz-read-only:focus::placeholder { + color: #ABB5BA; +} + +.c6:read-only:focus::placeholder { + color: #ABB5BA; +} + +.c4 { + color: #E51A1A; + font-size: 12px; +} + +.c5 { + position: relative; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0px 12px; + border: none; + border-radius: 4px; + white-space: nowrap; + background: #4F4FFF; + color: #FFFFFF; + font-size: 14px; + font-weight: 500; + height: 32px; +} + +.c7:hover:enabled { + background: #1717CF; + color: #FFFFFF; + cursor: pointer; +} + +.c7:active:enabled { + background: #1414B8; + color: #FFFFFF; +} + +.c7:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.c7 a { + color: white; +} + +.c7 i { + margin-right: 7px; +} + +.c0 { + padding: 0 16px 16px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 16px; +} + +.c0 > button:last-child { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; +} + +
+
+ +
+ +
+

+

+
+ +
+ +
+

+

+
+ + +

+

+ +
+ +`; From 6ae113ee52e05c011ccb2e01ad2bc0361f6fd266 Mon Sep 17 00:00:00 2001 From: Ekaterina Petrova Date: Tue, 18 Jan 2022 17:44:39 +0300 Subject: [PATCH 3/7] refactored edit tests --- .../src/components/Connect/Edit/Edit.tsx | 4 +- .../Connect/Edit/__tests__/Edit.spec.tsx | 68 +++-- .../__snapshots__/Edit.spec.tsx.snap | 112 ++++---- .../src/components/Connect/New/New.tsx | 7 +- .../Connect/New/__tests__/New.spec.tsx | 8 +- .../__tests__/__snapshots__/New.spec.tsx.snap | 248 ++++++++++++++++-- 6 files changed, 321 insertions(+), 126 deletions(-) diff --git a/kafka-ui-react-app/src/components/Connect/Edit/Edit.tsx b/kafka-ui-react-app/src/components/Connect/Edit/Edit.tsx index 0f3f5f693a9..7e8e33b4985 100644 --- a/kafka-ui-react-app/src/components/Connect/Edit/Edit.tsx +++ b/kafka-ui-react-app/src/components/Connect/Edit/Edit.tsx @@ -88,7 +88,7 @@ const Edit: React.FC = ({ clusterName, connectName, connectorName, - JSON.parse(values.config) + JSON.parse(values.config.trim()) ); if (connector) { history.push( @@ -116,7 +116,7 @@ const Edit: React.FC = ({ accidentally breaking your connector config! )} -
+
'mock-PageLoader'); - jest.mock('components/common/JSONEditor/JSONEditor', () => 'mock-JSONEditor'); const mockHistoryPush = jest.fn(); @@ -38,12 +35,9 @@ describe('Edit', () => { const connectName = 'my-connect'; const connectorName = 'my-connector'; - const setupWrapper = (props: Partial = {}) => ( - - + const renderComponent = (props: Partial = {}) => + render( + { updateConfig={jest.fn()} {...props} /> - - - ); + , + { + pathname: clusterConnectConnectorEditPath( + clusterName, + connectName, + connectorName + ), + } + ); it('matches snapshot', () => { - const wrapper = create(setupWrapper()); - expect(wrapper.toJSON()).toMatchSnapshot(); + const { asFragment } = renderComponent(); + expect(asFragment()).toMatchSnapshot(); }); it('matches snapshot when fetching config', () => { - const wrapper = create(setupWrapper({ isConfigFetching: true })); - expect(wrapper.toJSON()).toMatchSnapshot(); + const { asFragment } = renderComponent({ isConfigFetching: true }); + expect(asFragment()).toMatchSnapshot(); }); it('matches snapshot when config has credentials', () => { - const wrapper = create( - setupWrapper({ config: { ...connector.config, password: '******' } }) - ); - expect(wrapper.toJSON()).toMatchSnapshot(); + const { asFragment } = renderComponent({ + config: { ...connector.config, password: '******' }, + }); + expect(asFragment()).toMatchSnapshot(); }); it('fetches config on mount', () => { const fetchConfig = jest.fn(); - mount(setupWrapper({ fetchConfig })); + renderComponent({ fetchConfig }); expect(fetchConfig).toHaveBeenCalledTimes(1); expect(fetchConfig).toHaveBeenCalledWith( clusterName, @@ -85,10 +85,8 @@ describe('Edit', () => { it('calls updateConfig on form submit', async () => { const updateConfig = jest.fn(); - const wrapper = mount(setupWrapper({ updateConfig })); - await act(async () => { - wrapper.find('form').simulate('submit'); - }); + renderComponent({ updateConfig }); + await waitFor(() => fireEvent.submit(screen.getByRole('form'))); expect(updateConfig).toHaveBeenCalledTimes(1); expect(updateConfig).toHaveBeenCalledWith( clusterName, @@ -100,10 +98,8 @@ describe('Edit', () => { it('redirects to connector config view on successful submit', async () => { const updateConfig = jest.fn().mockResolvedValueOnce(connector); - const wrapper = mount(setupWrapper({ updateConfig })); - await act(async () => { - wrapper.find('form').simulate('submit'); - }); + renderComponent({ updateConfig }); + await waitFor(() => fireEvent.submit(screen.getByRole('form'))); expect(mockHistoryPush).toHaveBeenCalledTimes(1); expect(mockHistoryPush).toHaveBeenCalledWith( clusterConnectConnectorConfigPath( @@ -116,10 +112,8 @@ describe('Edit', () => { it('does not redirect to connector config view on unsuccessful submit', async () => { const updateConfig = jest.fn().mockResolvedValueOnce(undefined); - const wrapper = mount(setupWrapper({ updateConfig })); - await act(async () => { - wrapper.find('form').simulate('submit'); - }); + renderComponent({ updateConfig }); + await waitFor(() => fireEvent.submit(screen.getByRole('form'))); expect(mockHistoryPush).not.toHaveBeenCalled(); }); }); diff --git a/kafka-ui-react-app/src/components/Connect/Edit/__tests__/__snapshots__/Edit.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Edit/__tests__/__snapshots__/Edit.spec.tsx.snap index 2ed2f533303..747f5bb2827 100644 --- a/kafka-ui-react-app/src/components/Connect/Edit/__tests__/__snapshots__/Edit.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/Connect/Edit/__tests__/__snapshots__/Edit.spec.tsx.snap @@ -1,7 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Edit view matches snapshot 1`] = ` -.c1 { + + .c1 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -61,39 +62,39 @@ exports[`Edit view matches snapshot 1`] = ` }
- -
- +
+ -
-
- - -
+ /> +
+
+ + +
+ `; exports[`Edit view matches snapshot when config has credentials 1`] = ` -.c2 { + + .c2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -169,41 +170,44 @@ exports[`Edit view matches snapshot when config has credentials 1`] = ` }
-
- Please replace ****** with the real credential values to avoid accidentally breaking your connector config! -
-
-
- + Please replace ****** with the real credential values to avoid accidentally breaking your connector config! +
+ +
+ -
-
- - -
+ /> +
+
+ + +
+ `; -exports[`Edit view matches snapshot when fetching config 1`] = ``; +exports[`Edit view matches snapshot when fetching config 1`] = ` + + + +`; diff --git a/kafka-ui-react-app/src/components/Connect/New/New.tsx b/kafka-ui-react-app/src/components/Connect/New/New.tsx index bdc2a815419..5fed0aa386d 100644 --- a/kafka-ui-react-app/src/components/Connect/New/New.tsx +++ b/kafka-ui-react-app/src/components/Connect/New/New.tsx @@ -115,7 +115,10 @@ const New: React.FC = ({ return ( - +
Connect *