All files / components/Chat ChatMessageCreate.js

100% Statements 14/14
100% Branches 2/2
100% Functions 3/3
100% Lines 13/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58            4x   15x 15x   15x             15x             15x 1x 1x 1x 1x 1x               15x   15x                                  
import React from "react";
import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
 
import { useBackendMutation } from "main/utils/useBackend";
 
const ChatMessageCreate = ({ commonsId, submitAction }) => {
 
    const testid = "ChatMessageCreate";
    const initialMessagePageSize = 10;
 
    const objectToAxiosParams = (newMessage) => ({
        // Stryker disable next-line all : axiosMock post test works when mutated
        url: `/api/chat/post?commonsId=${newMessage.commonsId}&content=${newMessage.content}`,
        method: "POST",
        data: newMessage
    });
   
    const mutation = useBackendMutation(
        objectToAxiosParams,
        { },
        // Stryker disable next-line all : hard to set up test for caching
        [`/api/chat/get?page=0&size=${initialMessagePageSize}&commonsId=${commonsId}`]
    );
 
    submitAction = submitAction || (async (data) => {
        const escapedContent = encodeURIComponent(data.message);
        const escapedCommonsId = encodeURIComponent(Number(commonsId));
        const params = { content: escapedContent, commonsId: escapedCommonsId };
        mutation.mutate(params);
        reset();
    });
 
    const {
        register,
        formState: {errors},
        handleSubmit,
        reset,
    } = useForm( );
 
    return (
        <Form data-testid={testid} onSubmit={handleSubmit(submitAction)} 
            style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Form.Control
                data-testid={`${testid}-Message`}
                id="message"
                type="text"
                {...register("message", { required: "Message cannot be empty" })}
            />
            <Form.Control.Feedback type="invalid">
                {errors.message?.message}
            </Form.Control.Feedback>
            <Button type="submit" data-testid={`${testid}-Send`}>Send</Button>
        </Form>
    );
};
 
export default ChatMessageCreate;