fix: unit tests of inventory form, refactor contexts

splunk · Jul 14, 2023 · edc60a3 · edc60a3
1 parent 163a598
commit edc60a3
Show file tree

Hide file tree

Showing 32 changed files with 1,247 additions and 157 deletions.
diff --git a/frontend/packages/manager/jest.config.js b/frontend/packages/manager/jest.config.js
@@ -1,3 +1,7 @@
 module.exports = {
-    testMatch: ['**/*.unit.[jt]s?(x)'],
+    testMatch: ['**/*.test.[jt]s?(x)'],
+    testEnvironment: "jsdom",
+    setupFilesAfterEnv: [
+    "@testing-library/jest-dom/extend-expect"
+  ]
 };
diff --git a/frontend/packages/manager/package.json b/frontend/packages/manager/package.json
@@ -35,6 +35,11 @@
     "@splunk/splunk-utils": "^2.3.4",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/webpack-configs": "^5.0.0",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/dom": "9.3.1",
+    "@testing-library/jest-dom": "5.16.5",
+    "@jest/globals": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.4",
     "chai": "^3.5.0",

diff --git a/frontend/packages/manager/src/Manager.jsx b/frontend/packages/manager/src/Manager.jsx
@@ -5,8 +5,6 @@ import ErrorsModal from "./components/ErrorsModal";
 import Menu from "./components/menu_header/Menu";
 import Header from "./components/menu_header/Header";
 import TabPanels from "./components/menu_header/TabPanels";
-import MenuHeaderContxt from './store/menu-header-contxt';
-
 
 import { ButtonsContextProvider } from "./store/buttons-contx";
 import { ErrorsModalContextProvider } from "./store/errors-modal-contxt";
@@ -18,7 +16,6 @@ import { GroupContextProvider } from "./store/group-contxt";
 import { FontStyles } from "./styles/FontsStyles";
 
 function Uncontrolled() {
-    const MenuCtx = useContext(MenuHeaderContxt);
     return (
         <ButtonsContextProvider>
             <FontStyles/>

diff --git a/frontend/packages/manager/src/components/groups/AddDeviceModal.jsx b/frontend/packages/manager/src/components/groups/AddDeviceModal.jsx
@@ -9,10 +9,11 @@ import validateInventoryAndGroup from "../validation/ValidateInventoryAndGroup";
 import InventoryDevicesValidationContxt from "../../store/inventory-devices-validation-contxt";
 import { createDOMID } from '@splunk/ui-utils/id';
 import P from '@splunk/react-ui/Paragraph';
-import { validationGroup, validationMessage } from "../../styles/ValidationStyles";
+import { validationMessage } from "../../styles/ValidationStyles";
 import { backendHost } from "../../host";
 import { StyledControlGroup, StyledModalBody, StyledModalHeader } from "../../styles/inventory/InventoryStyle";
 import ErrorsModalContext from "../../store/errors-modal-contxt";
+import ValidationGroup from "../validation/ValidationGroup";
 
 
 function AddDeviceModal(){
@@ -120,16 +121,16 @@ function AddDeviceModal(){
                 <StyledModalHeader title={((GrCtx.isDeviceEdit) ? `Edit device` : `Add new device to group ${GrCtx.groupName}`)} onRequestClose={handleRequestClose} />
                 <StyledModalBody>
                     <StyledControlGroup labelWidth={140} label="IP address">
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <Text value={GrCtx.address} onChange={handleChangeAddress} error={((ValCtx.addressErrors) ? true : false)}/>
                             {((ValCtx.addressErrors) ? ValCtx.addressErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
                     <StyledControlGroup labelWidth={140} label="Port" >
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <Text value={GrCtx.port} onChange={handleChangePort} error={((ValCtx.portErrors) ? true : false)}/>
                             {((ValCtx.portErrors) ? ValCtx.portErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <StyledControlGroup
@@ -146,24 +147,24 @@ function AddDeviceModal(){
                     </StyledControlGroup>
 
                     <StyledControlGroup labelWidth={140} label="Community">
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <Text value={GrCtx.community} onChange={handleChangeCommunity} error={((ValCtx.communityErrors) ? true : false)}/>
                             {((ValCtx.communityErrors) ? ValCtx.communityErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <StyledControlGroup labelWidth={140} label="Secret">
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <Text value={GrCtx.secret} onChange={handleChangeSecret} error={((ValCtx.secretErrors) ? true : false)}/>
                             {((ValCtx.secretErrors) ? ValCtx.secretErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <StyledControlGroup labelWidth={140} label="Security Engine">
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <Text value={GrCtx.securityEngine} onChange={handleChangeSecurityEngine} error={((ValCtx.securityEngineErrors) ? true : false)}/>
                             {((ValCtx.securityEngineErrors) ? ValCtx.securityEngineErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                 </StyledModalBody>

diff --git a/frontend/packages/manager/src/components/groups/AddGroupModal.jsx b/frontend/packages/manager/src/components/groups/AddGroupModal.jsx
@@ -11,9 +11,10 @@ import axios from "axios";
 import validateInventoryAndGroup from "../validation/ValidateInventoryAndGroup";
 import InventoryDevicesValidationContxt from "../../store/inventory-devices-validation-contxt";
 import { createDOMID } from '@splunk/ui-utils/id';
-import { validationGroup, validationMessage } from "../../styles/ValidationStyles";
+import { validationMessage } from "../../styles/ValidationStyles";
 import { backendHost } from "../../host";
 import ErrorsModalContext from "../../store/errors-modal-contxt";
+import ValidationGroup from "../validation/ValidationGroup";
 
 function AddGroupModal() {
     const GrCtx = useContext(GroupContext);
@@ -91,10 +92,10 @@ function AddGroupModal() {
                 <Modal.Header title="Add a new group" onRequestClose={handleRequestClose} />
                 <Modal.Body>
                     <ControlGroup label="Group Name">
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <Text value={GrCtx.groupName} onChange={handleGroupNameChange} error={((ValCtx.groupNameErrors) ? true : false)}/>
                             {((ValCtx.groupNameErrors) ? ValCtx.groupNameErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </ControlGroup>
                 </Modal.Body>
                 <Modal.Footer>

diff --git a/frontend/packages/manager/src/components/inventory/AddInventoryModal.jsx b/frontend/packages/manager/src/components/inventory/AddInventoryModal.jsx
@@ -6,23 +6,24 @@ import Select from '@splunk/react-ui/Select';
 import Multiselect from '@splunk/react-ui/Multiselect';
 import Text from '@splunk/react-ui/Text';
 import RadioBar from '@splunk/react-ui/RadioBar';
-import InventoryContext from "../../store/inventory-contxt";
+import {useInventoryContext} from "../../store/inventory-contxt";
 import axios from "axios";
 import Button from '@splunk/react-ui/Button';
 import validateInventoryAndGroup from "../validation/ValidateInventoryAndGroup";
 import P from '@splunk/react-ui/Paragraph';
 import { createDOMID } from '@splunk/ui-utils/id';
-import InventoryDevicesValidationContxt from "../../store/inventory-devices-validation-contxt";
-import { validationGroup, validationMessage } from "../../styles/ValidationStyles";
+import {useInventoryDevicesValidationContxt} from "../../store/inventory-devices-validation-contxt";
+import { validationMessage } from "../../styles/ValidationStyles";
+import ValidationGroup from "../validation/ValidationGroup";
 import { backendHost } from "../../host";
-import ErrorsModalContext from "../../store/errors-modal-contxt";
+import {useErrorsModalContext} from "../../store/errors-modal-contxt";
 
 
 function AddInventoryModal() {
     const [initProfiles, setInitProfiles] = useState([]);
-    const InvCtx = useContext(InventoryContext);
-    const ValCtx = useContext(InventoryDevicesValidationContxt);
-    const ErrCtx = useContext(ErrorsModalContext);
+    const InvCtx = useInventoryContext();
+    const ValCtx = useInventoryDevicesValidationContxt();
+    const ErrCtx = useErrorsModalContext();
 
     const handleChangeAddress = useCallback((e, { value: val }) => {
         InvCtx.setAddress(val);
@@ -160,65 +161,65 @@ function AddInventoryModal() {
                 <StyledModalHeader title={((InvCtx.isEdit) ? `Edit device/group` : "Add a new device/group")} onRequestClose={handleRequestClose} />
                 <StyledModalBody>
                     <StyledControlGroup labelWidth={140} label="IP address/Group">
-                        <div style={validationGroup}>
-                            <Text value={InvCtx.address} onChange={handleChangeAddress} error={((ValCtx.addressErrors) ? true : false)}/>
-                            {((ValCtx.addressErrors) ? ValCtx.addressErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        <ValidationGroup>
+                            <Text data-test="form:group-ip-input" value={InvCtx.address} onChange={handleChangeAddress} error={((ValCtx.addressErrors) ? true : false)}/>
+                            {((ValCtx.addressErrors) ? ValCtx.addressErrors.map((el) => <P data-test="ip-group-error" key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
+                        </ValidationGroup>
                     </StyledControlGroup>
                     <StyledControlGroup labelWidth={140} label="Port">
-                        <div style={validationGroup}>
-                            <Text value={InvCtx.port} onChange={handleChangePort} error={((ValCtx.portErrors) ? true : false)}/>
+                        <ValidationGroup>
+                            <Text data-test="form:port-input" value={InvCtx.port} onChange={handleChangePort} error={((ValCtx.portErrors) ? true : false)}/>
                             {((ValCtx.portErrors) ? ValCtx.portErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <StyledControlGroup
                     label="SNMP version"
                     labelFor="customized-select-after"
                     labelWidth={140}
                     >
-                        <Select defaultValue={InvCtx.version} inputId="customized-select-after" value={InvCtx.version} onChange={handleChangeVersion}>
+                        <Select data-test="form:version" defaultValue={InvCtx.version} inputId="customized-select-after" value={InvCtx.version} onChange={handleChangeVersion}>
                             <Select.Option label="1" value="1"/>
                             <Select.Option label="2c" value="2c"/>
                             <Select.Option label="3" value="3"/>
                         </Select>
                     </StyledControlGroup>
 
                     <StyledControlGroup label="Community" labelWidth={140}>
-                        <div style={validationGroup}>
-                            <Text value={InvCtx.community} onChange={handleChangeCommunity} error={((ValCtx.communityErrors) ? true : false)}/>
+                        <ValidationGroup>
+                            <Text data-test="form:community-input" value={InvCtx.community} onChange={handleChangeCommunity} error={((ValCtx.communityErrors) ? true : false)}/>
                             {((ValCtx.communityErrors) ? ValCtx.communityErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <StyledControlGroup label="Secret" labelWidth={140}>
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <Text value={InvCtx.secret} onChange={handleChangeSecret} error={((ValCtx.secretErrors) ? true : false)}/>
                             {((ValCtx.secretErrors) ? ValCtx.secretErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <StyledControlGroup label="Security Engine" labelWidth={140}>
-                        <div style={validationGroup}>
-                            <Text value={InvCtx.securityEngine} onChange={handleChangeSecurityEngine} error={((ValCtx.securityEngineErrors) ? true : false)}/>
+                        <ValidationGroup>
+                            <Text data-test="form:security-engine-input" value={InvCtx.securityEngine} onChange={handleChangeSecurityEngine} error={((ValCtx.securityEngineErrors) ? true : false)}/>
                             {((ValCtx.securityEngineErrors) ? ValCtx.securityEngineErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <StyledControlGroup label="Walk Interval (s)" labelWidth={140}>
-                        <div style={validationGroup}>
-                            <Number value={InvCtx.walkInterval} onChange={handleChangeWalkInterval} error={((ValCtx.walkIntervalErrors) ? true : false)}/>
+                        <ValidationGroup>
+                            <Number data-test="form:walk-interval-input" value={InvCtx.walkInterval} onChange={handleChangeWalkInterval} error={((ValCtx.walkIntervalErrors) ? true : false)}/>
                             {((ValCtx.walkIntervalErrors) ? ValCtx.walkIntervalErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <StyledControlGroup label="Profiles" labelWidth={140}>
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <Multiselect onChange={handleChange} defaultValues={InvCtx.profiles} error={((ValCtx.profilesErrors) ? true : false)}>
                                 {initProfiles.map((v) => (<Multiselect.Option key={createDOMID()} label={v} value={v} />))}
                             </Multiselect>
                             {((ValCtx.profilesErrors) ? ValCtx.profilesErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <StyledControlGroup label="Smart Profiles enabled" labelWidth={140}>
@@ -231,7 +232,7 @@ function AddInventoryModal() {
                 </StyledModalBody>
                 <Modal.Footer>
                     <Button appearance="secondary" onClick={handleRequestClose} label="Cancel" />
-                    <Button appearance="primary" label="Submit" onClick={handleApply} />
+                    <Button data-test="form:submit-form-button" appearance="primary" label="Submit" onClick={handleApply} />
                 </Modal.Footer>
             </Modal>
         </div>

diff --git a/frontend/packages/manager/src/components/menu_header/Menu.jsx b/frontend/packages/manager/src/components/menu_header/Menu.jsx
@@ -1,11 +1,11 @@
-import React, {useCallback, useContext, useState} from 'react';
-import MenuHeaderContxt from '../../store/menu-header-contxt';
+import React, {useCallback} from 'react';
+import {useMenuHeaderContxt} from '../../store/menu-header-contxt';
 import { StyledTab, StyledMenuBar, StyledMenuBarLeft, StyledMenuBarRight } from "../../styles/menu_header/MenuBarStyle";
 import P from '@splunk/react-ui/Paragraph';
 import TabBar from '@splunk/react-ui/TabBar';
 
 function Menu(){
-    const MenuCtx = useContext(MenuHeaderContxt);
+    const MenuCtx = useMenuHeaderContxt();
 
     const handleMenuChange = useCallback((e, { selectedTabId }) => {
         MenuCtx.setActiveTabId(selectedTabId);

diff --git a/frontend/packages/manager/src/components/profiles/AddProfileModal.jsx b/frontend/packages/manager/src/components/profiles/AddProfileModal.jsx
@@ -1,4 +1,4 @@
-import React, {useState, useRef, useCallback, useContext} from 'react';
+import React, {useState, useCallback, useContext} from 'react';
 import Button from '@splunk/react-ui/Button';
 import Modal from '@splunk/react-ui/Modal';
 import Number from '@splunk/react-ui/Number';
@@ -8,19 +8,20 @@ import P from '@splunk/react-ui/Paragraph';
 import VarBinds from "./VarBinds";
 import Condition from "./Condition";
 import axios from "axios";
-import ProfileContext from "../../store/profile-contxt";
+import {useProfileContext} from "../../store/profile-contxt";
 import validateProfiles from "../validation/ValidateProfiles";
-import ProfilesValidationContxt from "../../store/profiles-validation-contxt";
-import { validationGroup, validationMessage } from "../../styles/ValidationStyles";
+import {useProfilesValidationContxt} from "../../store/profiles-validation-contxt";
+import { validationMessage } from "../../styles/ValidationStyles";
 import { backendHost } from "../../host";
-import ErrorsModalContext from "../../store/errors-modal-contxt";
+import {useErrorsModalContext} from "../../store/errors-modal-contxt";
 import { StyledControlGroup, StyledModalBody, StyledModalHeader } from "../../styles/inventory/InventoryStyle";
+import ValidationGroup from "../validation/ValidationGroup";
 
 
 function AddProfileModal(props) {
-    const ProfCtx = useContext(ProfileContext);
-    const ValCtx = useContext(ProfilesValidationContxt);
-    const ErrCtx = useContext(ErrorsModalContext);
+    const ProfCtx = useProfileContext();
+    const ValCtx = useProfilesValidationContxt();
+    const ErrCtx = useErrorsModalContext();
     const [newSubmit, setNewSubmit] = useState(false);
 
 
@@ -125,28 +126,28 @@ function AddProfileModal(props) {
                 <StyledModalBody>
 
                     <StyledControlGroup label="Profile name">
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <Text value={ProfCtx.profileName} onChange={handleProfileName} error={((ValCtx.profileNameErrors) ? true : false)}/>
                             {((ValCtx.profileNameErrors) ? ValCtx.profileNameErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <StyledControlGroup label="Frequency of polling (s)" >
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <Number value={ProfCtx.frequency} onChange={handleFrequency} error={((ValCtx.frequencyErrors) ? true : false)}/>
                             {((ValCtx.frequencyErrors) ? ValCtx.frequencyErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                     <Condition newSubmit={newSubmit}/>
 
                     <StyledControlGroup label="VarBinds">
-                        <div style={validationGroup}>
+                        <ValidationGroup>
                             <VarBinds newSubmit={newSubmit}/>
                             {((ValCtx.varBindsExistErrors) ?
                             <P key={createDOMID()} style={validationMessage}>{ValCtx.varBindsExistErrors}</P>
                             : null)}
-                        </div>
+                        </ValidationGroup>
                     </StyledControlGroup>
 
                 </StyledModalBody>