问题
i am new in react can any one help us to write unit test code for below react code & basically i write test case for this below code but statement & functions coverage very low due to these code campaignGroupListing its is arrray of object in this code i find matching data and updated id record append in a new array ."campaignGroupListing.findIndex((item) => item.id === parseInt(id)); campaignGroupListing.splice(index, 1); campaignGroupListing.splice(index, 0, newArr); "
import React, { useState, forwardRef, useImperativeHandle } from 'react';
import {
Wizard,
useToast,
Button,
Analytics,
Dialog,
} from '@dentsu-ui/components';
import CampaignGroupDetails from './Details';
import SelectCampaigns from './Campaigns';
import PreviewDetails from './Preview';
import GroupingCMS from 'cms/Grouping';
const CampaignGrouping = forwardRef((props, ref) => {
const { campaignGroupList, updateGroupListData } = props;
const [id, setId] = useState(undefined);
let totalCampaigns = [];
let selectedGroup = [];
const campaignGroupListing = JSON.parse(
localStorage.getItem('campaignGroupData'),
);
console.log("campaignGroupListing",campaignGroupListing)
if (id === undefined || id === '') {
} else {
selectedGroup = campaignGroupListing.filter(
(obj) => obj.id === parseInt(id),
);
if (selectedGroup.length > 0) {
totalCampaigns = selectedGroup[0].campaignNumber;
}
}
const [widgetStep, widgetStepCount] = useState(0);
const [isOpen, setIsOpen] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false);
const [btnDisabled, setBtnDisabled] = useState(true);
const [selectedCampaigns, setSelectedCampaigns] = useState([]);
const [forceCall, setForceCall] = useState(false);
useImperativeHandle(ref, () => {
return {
setId: setId,
setIsOpen: setIsOpen,
};
});
const [inputState, setInputState] = useState({
nameSelectedVal: '',
desSelectedVal: '',
goalSelectedVal: '',
kpiSelectedVal: '',
});
const {
dialog: { dialogText },
paragraph: { NoCampaignExist },
} = GroupingCMS;
let campaignGroupData = campaignGroupList;
console.log('campaignGroupData', campaignGroupListing);
let campaignList = props.campaignList;
const removeCampaignGroup = () => {
setInputState({
nameSelectedVal: '',
desSelectedVal: '',
goalSelectedVal: '',
kpiSelectedVal: '',
});
};
const getActiveIndex = (i) => {
widgetStepCount(i);
};
const toast = useToast();
const updateCampaignGroup = async (id) => {
let newArr = {
id: parseInt(id),
campaignGroupName:
inputState.nameSelectedVal === ''
? selectedGroup[0].campaignGroupName
: inputState.nameSelectedVal,
campaignNumber: selectedCampaigns,
goal:
inputState.goalSelectedVal === ''
? selectedGroup[0].goal
: inputState.goalSelectedVal,
kpi:
inputState.kpiSelectedVal === ''
? selectedGroup[0].kpi
: inputState.kpiSelectedVal,
desc:
inputState.desSelectedVal === ''
? selectedGroup[0].desc
: inputState.desSelectedVal,
dailySpend: selectedCampaigns.length === 0 ? 0 : 450,
createdAt: await new Date().toLocaleDateString('en-gb', {
year: 'numeric',
month: 'short',
day: 'numeric',
}),
createdBy: JSON.parse(localStorage.getItem('okta-token-storage')).idToken
.claims.name,
dailySpendofTotal: selectedCampaigns.length === 0 ? 0 : 12,
};
const index = campaignGroupListing.findIndex(
(item) => item.id === parseInt(id),
);
campaignGroupListing.splice(index, 1);
campaignGroupListing.splice(index, 0, newArr);
localStorage.setItem(
'campaignGroupData',
JSON.stringify(campaignGroupListing),
);
await setIsOpen(false);
updateGroupListData(campaignGroupListing);
toast({
duration: 2000,
position: 'top-right',
status: 'success',
title: 'Campaign group has been created successfully',
});
setInputState({
nameSelectedVal: '',
desSelectedVal: '',
goalSelectedVal: '',
kpiSelectedVal: '',
});
};
const saveCampaignGroup = async () => {
campaignGroupData.push({
id: Math.floor(Math.random() * 100),
campaignGroupName: inputState.nameSelectedVal,
campaignNumber: selectedCampaigns,
desc: inputState.desSelectedVal,
createdAt: await new Date().toLocaleDateString('en-gb', {
year: 'numeric',
month: 'short',
day: 'numeric',
}),
createdBy: JSON.parse(localStorage.getItem('okta-token-storage')).idToken
.claims.name,
goal: inputState.goalSelectedVal,
kpi: inputState.kpiSelectedVal,
dailySpend: selectedCampaigns.length === 0 ? '-' : 450,
dailySpendofTotal: selectedCampaigns.length === 0 ? '-' : 12,
});
localStorage.setItem(
'campaignGroupData',
JSON.stringify(campaignGroupData),
);
await setIsOpen(false);
updateGroupListData(campaignGroupData);
toast({
duration: 2000,
position: 'top-right',
status: 'success',
title: 'Campaign group has been created successfully',
});
setInputState({
nameSelectedVal: '',
desSelectedVal: '',
goalSelectedVal: '',
kpiSelectedVal: '',
});
};
const handleChange = (status) => {
setBtnDisabled(status);
};
return (
<>
<Wizard
title="H& M France | Campaign group"
isOpen={isOpen}
actions={{
secondary: {
label: 'Cancel',
onClick: () => {
setDialogOpen(true);
},
},
}}
activeStepIndex={(index) => getActiveIndex(index)}>
<Wizard.Step
title="Campaign group details"
isValid={true}
actions={{
primary: {
label: 'Campaigns',
isDisabled: btnDisabled,
},
}}>
<CampaignGroupDetails
onChange={handleChange}
setInputState={setInputState}
inputState={inputState}
campaignGroupNameList={campaignGroupList}
selectedGroup={selectedGroup}
id={id}
/>
</Wizard.Step>
<Wizard.Step
title="Campaigns"
isValid={true}
actions={{
primary: {
onClick: () => {
setForceCall(!forceCall);
},
},
}}>
<SelectCampaigns
onChange={setSelectedCampaigns}
campaignList={campaignList}
totalCampaigns={totalCampaigns}
id={id}
activeIndex={widgetStep}
selectedGroup={selectedGroup}
forceCall={forceCall}
/>
</Wizard.Step>
{(() => {
if (id === undefined || id === '') {
return (
<Wizard.Step
title="Review and save"
isValid={true}
actions={{
primary: {
label: 'Complete and save',
onClick: () => {
saveCampaignGroup();
},
},
}}>
<PreviewDetails
details={inputState}
campaigns={selectedCampaigns}
NoCampaignExist={NoCampaignExist}
/>
</Wizard.Step>
);
} else {
return (
<Wizard.Step
title="Review and save"
isValid={true}
actions={{
primary: {
label: 'Complete and save',
onClick: () => {
updateCampaignGroup(id);
},
},
}}>
<PreviewDetails
details={inputState}
campaigns={selectedCampaigns}
NoCampaignExist={NoCampaignExist}
/>
</Wizard.Step>
);
}
})()}
</Wizard>
<Dialog
title={dialogText}
isOpen={dialogOpen}
onClose={() => setDialogOpen(false)}>
<Dialog.Footer>
<Button variant="secondary" onClick={() => setDialogOpen(false)}>
No
</Button>
<Button
onClick={() => {
setIsOpen(false);
setDialogOpen(false);
removeCampaignGroup();
}}>
Yes
</Button>
</Dialog.Footer>
</Dialog>
</>
);
});
export default CampaignGrouping;
来源:https://stackoverflow.com/questions/65844760/test-coverage-very-low-due-to-these-code-campaigngrouplisting-findindexitem