I'm currently testing a stepper component integrated with redux toolkit. Whithin this component, there's a method called postLogOfDocument, please review the provided code:
My Stepper component:
const StepperDownloader = ({ propietario, useremail, ordenCliente }) => {
const {
data: { activeStep, activeStepFailed, messagesStepper, showTextAreaMotivo },
} = useAppSelector(selectStepperDownloader);
const { motivos } = useMotivosDocumentosLogs();
const dispatch = useAppDispatch();
const [motivo, setMotivo] = useState("");
const isStepFailed = (step) => {
return step === activeStep;
};
const postLogOfDocument = useCallback(
);
const handleGetDocument = useCallback(
async () => {
try {
getRemitoByPropietarioAndOrdenCliente
("Getting document...");
getRemitoAdicional("Getting additional document...");
await postLogOfDocument(3, true, true);
} catch (error) {
}
},
[]
);
useEffect(() => {
handleGetDocument();
}, [handleGetDocument]);
const handleButton = async () => {
if (motivo.length > 0) {
("Button clicked, handling action...");
// dispatching nextStep and setShowTextAreaMotivo
}
};
return (
<Box data-testid="stepper-container">
<Stepper activeStep={activeStep}>
<Step key="StepLabel">
<StepLabel>Step Label</StepLabel>
</Step>
</Stepper>
<Box>
{!showTextAreaMotivo && activeStep !== 1 && (
<Typography>Message Step: {messagesStepper.messageStep}</Typography>
)}
{showTextAreaMotivo && (
<Box data-testid="select-container">
<Select
value={motivo}
onChange={(e) => setMotivo(e.target.value)}
>
<MenuItem value="Motivo1">Motivo 1</MenuItem>
<MenuItem value="Motivo2">Motivo 2</MenuItem>
</Select>
<Button onClick={handleButton}>Descargar</Button>
</Box>
)}
</Box>
</Box>
);
};
export default StepperDownloader;
Need to be pass in Sonar:
const postLogOfDocument = useCallback(
async (maxRetries: number, pdfInBlob?: Blob | null, pdfAdicionalBlob?: Blob | null) => {
try {
await postDocumentosLogs({
motivo,
ordenCliente,
propietario,
username: useremail,
});
if (pdfInBlob) {
openFileInNewWindows(pdfInBlob);
}
if (pdfAdicionalBlob) {
openFileInNewWindows(pdfAdicionalBlob);
}
if (pdfInBlob || pdfAdicionalBlob) {
dispatch(setMessageStep("text"));
}
} catch (error) {
if (maxRetries > 0) {
await postLogOfDocument(maxRetries - 1, pdfInBlob);
}
if (pdfInBlob) {
dispatch(setMessageStep("some text"));
}
}
},
[motivo, ordenCliente, propietario, useremail, dispatch]
);
I need guidance on how to effectively test the behavior of this function. Specifically, I want to ensure that if a blob is successfully received, it opens in a new window. How can I test this functionality in a React and ensure that the code compiles with Sonarqube's standards?
below is my test:
test("should display success message and open PDFs in new windows when receiving blob successfully", async () => {
jest.clearAllMocks();
const openSpy = jest.spyOn(window, "open").mockImplementation();
(useAppSelector as jest.Mock).mockReturnValue({
data: {
activeStep: 2,
activeStepFailed: null,
messagesStepper: { messageStep: "success message." },
showTextAreaMotivo: false,
},
}); renderWithProviders(<StepperDownloader {...props} />);
expect(screen.getByText("success message.")).toBeInTheDocument();// test passed
In the test part, I enable mock the success message, but it's not enough. Any insights or suggestions would be greatly appreciated. Thank you!