Skip to content

Commit

Permalink
Merge pull request #29 from splunk/fix/react-unit-tests
Browse files Browse the repository at this point in the history 
Fix/react unit tests
  • Loading branch information
@wojtekzyla
wojtekzyla authored Jul 18, 2023
2 parents 163a598 + cf3088d commit e1c2e36
Show file tree
Hide file tree
Showing 39 changed files with 2,011 additions and 197 deletions.
6 changes: 5 additions & 1 deletion frontend/packages/manager/jest.config.js
View file
Original file line number Diff line number Diff line change
@@ -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"
]
};
7 changes: 6 additions & 1 deletion frontend/packages/manager/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"start:app": "webpack --watch --config demo/webpack.splunkapp.config.js",
"start:demo": "webpack-dev-server --config demo/webpack.standalone.config.js --port ${DEMO_PORT-8080} --host 0.0.0.0",
"stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js",
"test": "jest",
"test": "DEBUG_PRINT_LIMIT=1000000 jest",
"test:ci": "JEST_JUNIT_OUTPUT_DIR=./test-reports JEST_JUNIT_OUTPUT_NAME=unit-results.xml JEST_JUNIT_CLASSNAME=unit yarn run test --ci --reporters=default jest-junit --coverage --coverageDirectory=coverage_report/coverage_maps_unit --coverageReporters=cobertura",
"test:watch": "jest --watch"
},
Expand All @@ -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",
Expand Down
3 changes: 0 additions & 3 deletions frontend/packages/manager/src/Manager.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -18,7 +16,6 @@ import { GroupContextProvider } from "./store/group-contxt";
import { FontStyles } from "./styles/FontsStyles";

function Uncontrolled() {
const MenuCtx = useContext(MenuHeaderContxt);
return (
<ButtonsContextProvider>
<FontStyles/>
Expand Down
33 changes: 17 additions & 16 deletions frontend/packages/manager/src/components/groups/AddDeviceModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand Down Expand Up @@ -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}>
<Text value={GrCtx.address} onChange={handleChangeAddress} error={((ValCtx.addressErrors) ? true : false)}/>
<ValidationGroup>
<Text data-test='form:ip-input' 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}>
<Text value={GrCtx.port} onChange={handleChangePort} error={((ValCtx.portErrors) ? true : false)}/>
<ValidationGroup>
<Text data-test="form:port-input" 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
Expand All @@ -146,30 +147,30 @@ function AddDeviceModal(){
</StyledControlGroup>

<StyledControlGroup labelWidth={140} label="Community">
<div style={validationGroup}>
<Text value={GrCtx.community} onChange={handleChangeCommunity} error={((ValCtx.communityErrors) ? true : false)}/>
<ValidationGroup>
<Text data-test="form:community-input" 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}>
<Text value={GrCtx.securityEngine} onChange={handleChangeSecurityEngine} error={((ValCtx.securityEngineErrors) ? true : false)}/>
<ValidationGroup>
<Text data-test="form:security-engine-input" 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>
<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>
Expand Down
17 changes: 8 additions & 9 deletions frontend/packages/manager/src/components/groups/AddGroupModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,16 @@ import Button from '@splunk/react-ui/Button';
import ControlGroup from '@splunk/react-ui/ControlGroup';
import Modal from '@splunk/react-ui/Modal';
import P from '@splunk/react-ui/Paragraph';
import Select from '@splunk/react-ui/Select';
import Multiselect from '@splunk/react-ui/Multiselect';
import Text from '@splunk/react-ui/Text';
import GroupContext from "../../store/group-contxt";
import axios from "axios";
import { createDOMID } from '@splunk/ui-utils/id';
import GroupContext from "../../store/group-contxt";
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);
Expand Down Expand Up @@ -91,15 +90,15 @@ function AddGroupModal() {
<Modal.Header title="Add a new group" onRequestClose={handleRequestClose} />
<Modal.Body>
<ControlGroup label="Group Name">
<div style={validationGroup}>
<Text value={GrCtx.groupName} onChange={handleGroupNameChange} error={((ValCtx.groupNameErrors) ? true : false)}/>
<ValidationGroup>
<Text data-test="form:group-name-input" value={GrCtx.groupName} onChange={handleGroupNameChange} error={(!!(ValCtx.groupNameErrors))}/>
{((ValCtx.groupNameErrors) ? ValCtx.groupNameErrors.map((el) => <P key={createDOMID()} style={validationMessage}>{el}</P>) : <P/>)}
</div>
</ValidationGroup>
</ControlGroup>
</Modal.Body>
<Modal.Footer>
<Button appearance="secondary" onClick={handleRequestClose} label="Cancel" />
<Button appearance="primary" onClick={handleRequestSubmit} label="Submit" />
<Button data-test="form:submit-form-button" appearance="primary" onClick={handleRequestSubmit} label="Submit" />
</Modal.Footer>
</Modal>
</div>
Expand Down
65 changes: 33 additions & 32 deletions frontend/packages/manager/src/components/inventory/AddInventoryModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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.Option label="1" value="1"/>
<Select.Option label="2c" value="2c"/>
<Select.Option label="3" value="3"/>
<Select data-test="form:version" defaultValue={InvCtx.version} inputId="customized-select-after" value={InvCtx.version} onChange={handleChangeVersion}>
<Select.Option data-test="form:version-1" label="1" value="1"/>
<Select.Option data-test="form:version-2c" label="2c" value="2c"/>
<Select.Option data-test="form:version-3" 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}>
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions frontend/packages/manager/src/components/menu_header/Menu.jsx
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
Loading

0 comments on commit e1c2e36

Please sign in to comment.