[CHORE] Specs. Improvements (#202)

* [CHORE] Improve types

* [CHORE] Example of actions & thunks specs

* [CHORE] Example of reducer & selectors specs

* [CHORE] Update dependencies

Author: workshur

kafka-ui-react-app/package-lock.json

@@ -3,19 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/error-message": "0.0.5",
+    "@types/node-fetch": "^2.5.8",
     "bulma": "^0.9.2",
     "bulma-switch": "^2.0.0",
     "classnames": "^2.2.6",
-    "date-fns": "^2.16.1",
+    "date-fns": "^2.17.0",
     "eslint-import-resolver-node": "^0.3.4",
-    "eslint-import-resolver-typescript": "^2.3.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
     "immer": "^8.0.1",
     "lodash": "^4.17.20",
+    "node-fetch": "^2.6.1",
     "pretty-ms": "^6.0.1",
     "react": "^17.0.1",
-    "react-datepicker": "^3.3.0",
+    "react-datepicker": "^3.5.0",
     "react-dom": "^17.0.1",
-    "react-hook-form": "^4.10.2",
+    "react-hook-form": "^6.15.1",
     "react-json-tree": "^0.13.0",
     "react-multi-select-component": "^2.0.14",
     "react-redux": "^7.2.2",
@@ -73,39 +76,42 @@
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.165",
-    "@types/node": "^12.19.8",
-    "@types/react": "^17.0.0",
+    "@types/node": "^12.20.2",
+    "@types/react": "^17.0.2",
     "@types/react-datepicker": "^3.1.1",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^17.0.1",
     "@types/react-redux": "^7.1.11",
     "@types/react-router-dom": "^5.1.6",
     "@types/redux": "^3.6.0",
+    "@types/redux-mock-store": "^1.0.2",
     "@types/redux-thunk": "^2.1.0",
     "@types/uuid": "^8.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.9.0",
-    "@typescript-eslint/parser": "^4.9.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
+    "@typescript-eslint/parser": "^4.15.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
     "dotenv": "^8.2.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
-    "eslint": "^7.14.0",
+    "eslint": "^7.20.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^12.0.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^2.5.1",
     "esprint": "^0.6.0",
+    "fetch-mock-jest": "^1.5.1",
     "husky": "^4.3.0",
-    "lint-staged": "^10.5.2",
+    "lint-staged": "^10.5.4",
     "node-sass": "^4.14.1",
     "prettier": "^2.2.1",
     "react-scripts": "4.0.2",
-    "ts-jest": "^26.4.4",
+    "redux-mock-store": "^1.5.4",
+    "ts-jest": "^26.5.1",
     "ts-node": "^9.1.1",
-    "typescript": "~4.1.2"
+    "typescript": "^4.1.5"
   },
   "engines": {
     "node": ">=14.15.4"

kafka-ui-react-app/package.json

@@ -8,7 +8,7 @@ import {
   CleanupPolicy,
 } from 'redux/interfaces';
 import { TopicConfig } from 'generated-sources';
-import { useForm, FormContext } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 import { camelCase } from 'lodash';
 
 import TopicForm from '../shared/Form/TopicForm';
@@ -127,15 +127,15 @@ const Edit: React.FC<Props> = ({
 
       <div className="box">
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-        <FormContext {...methods}>
+        <FormProvider {...methods}>
           <TopicForm
             topicName={topicName}
             config={config}
             isSubmitting={isSubmitting}
             isEditing
             onSubmit={methods.handleSubmit(onSubmit)}
           />
-        </FormContext>
+        </FormProvider>
       </div>
     </div>
   );

kafka-ui-react-app/src/components/Topics/Edit/Edit.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ClusterName, TopicName, TopicFormDataRaw } from 'redux/interfaces';
-import { useForm, FormContext } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { clusterTopicsPath } from 'lib/paths';
@@ -54,12 +54,12 @@ const New: React.FC<Props> = ({
 
       <div className="box">
         {/* eslint-disable react/jsx-props-no-spreading */}
-        <FormContext {...methods}>
+        <FormProvider {...methods}>
           <TopicForm
             isSubmitting={isSubmitting}
             onSubmit={methods.handleSubmit(onSubmit)}
           />
-        </FormContext>
+        </FormProvider>
       </div>
     </div>
   );

kafka-ui-react-app/src/components/Topics/New/New.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { useFormContext, ErrorMessage } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { TopicConfigValue } from 'redux/interfaces';
+import { ErrorMessage } from '@hookform/error-message';
 import CustomParamOptions from './CustomParamOptions';
 import { INDEX_PREFIX } from './CustomParams';
 
@@ -19,11 +20,11 @@ const CustomParamSelect: React.FC<Props> = ({
   existingFields,
   onNameChange,
 }) => {
-  const { register, errors, getValues, triggerValidation } = useFormContext();
+  const { register, errors, getValues, trigger } = useFormContext();
   const optInputName = `${index}[name]`;
 
   const selectedMustBeUniq = (selected: string) => {
-    const values = getValues({ nest: true });
+    const values = getValues();
     const customParamsValues: TopicConfigValue = values.customParams;
 
     const valid = !Object.entries(customParamsValues).some(
@@ -40,7 +41,7 @@ const CustomParamSelect: React.FC<Props> = ({
   const onChange = (inputName: string) => (
     event: React.ChangeEvent<HTMLSelectElement>
   ) => {
-    triggerValidation(inputName);
+    trigger(inputName);
     onNameChange(index, event.target.value);
   };
 

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamSelect.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { useFormContext, ErrorMessage } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { TopicConfig } from 'generated-sources';
+import { ErrorMessage } from '@hookform/error-message';
 import CUSTOM_PARAMS_OPTIONS from './customParamsOptions';
 
 interface Props {
@@ -25,8 +26,7 @@ const CustomParamValue: React.FC<Props> = ({
     if (selectedParamName && !defaultValue) {
       setValue(
         valInputName,
-        CUSTOM_PARAMS_OPTIONS[selectedParamName].defaultValue,
-        true
+        CUSTOM_PARAMS_OPTIONS[selectedParamName].defaultValue
       );
     }
   }, [selectedParamName, setValue, valInputName]);

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamValue.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import prettyMilliseconds from 'pretty-ms';
-import { useFormContext, ErrorMessage } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
+import { ErrorMessage } from '@hookform/error-message';
+
 import { MILLISECONDS_IN_WEEK, MILLISECONDS_IN_SECOND } from 'lib/constants';
 import TimeToRetainBtns from './TimeToRetainBtns';
 

kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetain.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { useFormContext, ErrorMessage } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { TOPIC_NAME_VALIDATION_PATTERN, BYTES_IN_GB } from 'lib/constants';
 import { CleanupPolicy, TopicName, TopicConfigByName } from 'redux/interfaces';
+import { ErrorMessage } from '@hookform/error-message';
 import CustomParamsContainer from './CustomParams/CustomParamsContainer';
 import TimeToRetain from './TimeToRetain';
 

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx

@@ -0,0 +1,28 @@
+import * as actions from '../actions';
+
+describe('Actions', () => {
+  describe('fetchClusterStatsAction', () => {
+    it('creates an REQUEST action', () => {
+      expect(actions.fetchClusterStatsAction.request()).toEqual({
+        type: 'GET_CLUSTER_STATUS__REQUEST',
+      });
+    });
+
+    it('creates an SUCCESS action', () => {
+      expect(
+        actions.fetchClusterStatsAction.success({ brokerCount: 1 })
+      ).toEqual({
+        type: 'GET_CLUSTER_STATUS__SUCCESS',
+        payload: {
+          brokerCount: 1,
+        },
+      });
+    });
+
+    it('creates an FAILURE action', () => {
+      expect(actions.fetchClusterStatsAction.failure()).toEqual({
+        type: 'GET_CLUSTER_STATUS__FAILURE',
+      });
+    });
+  });
+});

kafka-ui-react-app/src/redux/actions/__test__/actions.spec.ts

@@ -0,0 +1,13 @@
+import { ClusterStats } from 'generated-sources';
+
+export const clusterStats: ClusterStats = {
+  brokerCount: 1,
+  zooKeeperStatus: 1,
+  activeControllers: 1,
+  onlinePartitionCount: 6,
+  offlinePartitionCount: 0,
+  inSyncReplicasCount: 6,
+  outOfSyncReplicasCount: 0,
+  underReplicatedPartitionCount: 0,
+  diskUsage: [{ brokerId: 1, segmentSize: 6538, segmentCount: 6 }],
+};