11325553061

Committed 14 Oct 2024 10:19AM UTC coverage: 84.745% (-1.7%) from 86.415%

Build # 11325553061

Build Type

Pull #256

github

Committed by

nevendyulgerov

Commit Message

test(apps/web): Add unit tests for GenericInput form

Pull Request Pull Request #256: #251 Add ABI encoding for raw input form

Run Details

1303 of 1565 branches covered (83.26%)

Branch coverage included in aggregate %.

710 of 904 new or added lines in 13 files covered. (78.54%)

135 existing lines in 1 file now uncovered.

9185 of 10811 relevant lines covered (84.96%)

46.11 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

92.44

/packages/ui/src/GenericInputForm/AbiFunctionName.tsx

import { useFormContext } from "./context";
import {
    Alert,
    Combobox,
    Input,
    InputBase,
    Text,
    useCombobox,
} from "@mantine/core";
import { AbiFunction } from "viem";
import { useCallback } from "react";
import { FunctionSignature } from "./FunctionSignature";
import { TbAlertCircle } from "react-icons/tb";

export const AbiFunctionName = () => {
    const form = useFormContext();
    const { abiMethod, abiFunction, selectedSpecification, specificationMode } =
        form.getTransformedValues();
    const combobox = useCombobox({
        onDropdownClose: () => combobox.resetSelectedOption(),
    });
    const specificationFunctions = (
        (selectedSpecification?.abi as AbiFunction[]) ?? []
    ).filter((item) => item.type === "function");

    const onChangeAbiFunctionName = useCallback(
        (abiFunctionName: string) => {
            combobox.closeDropdown();

            form.setFieldValue("abiFunctionName", abiFunctionName);

            const nextAbiFunction = (
                (selectedSpecification?.abi as AbiFunction[]) ?? []
            ).find((abiFunction) => abiFunction.name === abiFunctionName);

            if (nextAbiFunction) {
                const emptyFunctionParams = nextAbiFunction.inputs.map(
                    (input) => ({
                        ...input,
                        value: "",
                    }),
                );

                form.setFieldValue("abiFunctionParams", emptyFunctionParams);
            }
        },
        [combobox, form, selectedSpecification],
    );

    return (
        <>
            {(abiMethod === "existing" || specificationMode === "json_abi") &&
                selectedSpecification && (
                    <>
                        {specificationFunctions.length > 0 ? (
                            <Combobox
                                store={combobox}
                                onOptionSubmit={onChangeAbiFunctionName}
                            >
                                <Combobox.Target>
                                    <InputBase
                                        component="button"
                                        type="button"
                                        pointer
                                        label="ABI Function"
                                        description="Available ABI functions"
                                        rightSection={<Combobox.Chevron />}
                                        rightSectionPointerEvents="none"
                                        withAsterisk
                                        {...form.getInputProps(
                                            "abiFunctionName",
                                        )}
                                        onClick={() =>
                                            combobox.toggleDropdown()
                                        }
                                    >
                                        {abiFunction ? (
                                            <FunctionSignature
                                                abiFunction={abiFunction}
                                            />
                                        ) : (
                                            <Input.Placeholder>
                                                Select function
                                            </Input.Placeholder>
                                        )}
                                    </InputBase>
                                </Combobox.Target>

                                <Combobox.Dropdown>
                                    <Combobox.Options>
                                        {specificationFunctions.map(
                                            (abiFunction) => {
                                                const params =
                                                    abiFunction.inputs
                                                        .map(
                                                            (input) =>
                                                                `${input.type} ${input.name}`,
                                                        )
                                                        .join(", ");

                                                return (
                                                    <Combobox.Option
                                                        key={`${abiFunction.name}-${params}`}
                                                        value={abiFunction.name}
                                                    >
                                                        <FunctionSignature
                                                            abiFunction={
                                                                abiFunction
                                                            }
                                                        />
                                                    </Combobox.Option>
                                                );
                                            },
                                        )}
                                    </Combobox.Options>
                                </Combobox.Dropdown>
                            </Combobox>
                        ) : (
                            <Alert
                                variant="light"
                                color="blue"
                                icon={<TbAlertCircle />}
                                data-testid="no-functions-alert"
                            >
                                No ABI functions available for this
                                specification.
                            </Alert>
                        )}
                    </>
                )}
        </>
    );
};

1	import { useFormContext } from "./context";	1✔
2	import {
3	Alert,
4	Combobox,
5	Input,
6	InputBase,
7	Text,
8	useCombobox,
9	} from "@mantine/core";	1✔
10	import { AbiFunction } from "viem";
11	import { useCallback } from "react";	1✔
12	import { FunctionSignature } from "./FunctionSignature";	1✔
13	import { TbAlertCircle } from "react-icons/tb";	1✔
14
15	export const AbiFunctionName = () => {	1✔
16	const form = useFormContext();	65✔
17	const { abiMethod, abiFunction, selectedSpecification, specificationMode } =	65✔
18	form.getTransformedValues();	65✔
19	const combobox = useCombobox({	65✔
20	onDropdownClose: () => combobox.resetSelectedOption(),	65✔
21	});	65✔
22	const specificationFunctions = (	65✔
23	(selectedSpecification?.abi as AbiFunction[]) ?? []	65✔
24	).filter((item) => item.type === "function");	65✔
25
26	const onChangeAbiFunctionName = useCallback(	65✔
27	(abiFunctionName: string) => {	65✔
28	combobox.closeDropdown();	4✔
29
30	form.setFieldValue("abiFunctionName", abiFunctionName);	4✔
31
32	const nextAbiFunction = (	4✔
33	(selectedSpecification?.abi as AbiFunction[]) ?? []	4!
34	).find((abiFunction) => abiFunction.name === abiFunctionName);	4✔
35
36	if (nextAbiFunction) {	4✔
37	const emptyFunctionParams = nextAbiFunction.inputs.map(	4✔
38	(input) => ({	4✔
39	...input,	8✔
40	value: "",	8✔
41	}),	8✔
42	);	4✔
43
44	form.setFieldValue("abiFunctionParams", emptyFunctionParams);	4✔
45	}	4✔
46	},	4✔
47	[combobox, form, selectedSpecification],	65✔
48	);	65✔
49
50	return (	65✔
51	<>	65✔
52	{(abiMethod === "existing" \|\| specificationMode === "json_abi") &&	65✔
53	selectedSpecification && (	48✔
54	<>	32✔
55	{specificationFunctions.length > 0 ? (	32✔
56	<Combobox	32✔
57	store={combobox}	32✔
58	onOptionSubmit={onChangeAbiFunctionName}	32✔
59	>
60	<Combobox.Target>	32✔
61	<InputBase	32✔
62	component="button"	32✔
63	type="button"	32✔
64	pointer	32✔
65	label="ABI Function"	32✔
66	description="Available ABI functions"	32✔
67	rightSection={<Combobox.Chevron />}	32✔
68	rightSectionPointerEvents="none"	32✔
69	withAsterisk	32✔
70	{...form.getInputProps(	32✔
71	"abiFunctionName",	32✔
72	)}	32✔
73	onClick={() =>	32✔
74	combobox.toggleDropdown()	6✔
75	}
76	>
77	{abiFunction ? (	32✔
78	<FunctionSignature	20✔
79	abiFunction={abiFunction}	20✔
80	/>	20✔
81	) : (
82	<Input.Placeholder>	12✔
83	Select function
84	</Input.Placeholder>	12✔
85	)}
86	</InputBase>	32✔
87	</Combobox.Target>	32✔
88
89	<Combobox.Dropdown>	32✔
90	<Combobox.Options>	32✔
91	{specificationFunctions.map(	32✔
92	(abiFunction) => {	32✔
93	const params =	32✔
94	abiFunction.inputs	32✔
95	.map(	32✔
96	(input) =>	32✔
97	`${input.type} ${input.name}`,	64✔
98	)	32✔
99	.join(", ");	32✔
100
101	return (	32✔
102	<Combobox.Option	32✔
103	key={`${abiFunction.name}-${params}`}	32✔
104	value={abiFunction.name}	32✔
105	>
106	<FunctionSignature	32✔
107	abiFunction={	32✔
108	abiFunction	32✔
109	}
110	/>	32✔
111	</Combobox.Option>	32✔
112	);
113	},	32✔
114	)}	32✔
115	</Combobox.Options>	32✔
116	</Combobox.Dropdown>	32✔
117	</Combobox>	32!
118	) : (
NEW 119	<Alert	×
NEW 120	variant="light"	×
NEW 121	color="blue"	×
NEW 122	icon={<TbAlertCircle />}	×
NEW 123	data-testid="no-functions-alert"	×
NEW 124	>	×
125	No ABI functions available for this
126	specification.
NEW 127	</Alert>	×
128	)}
129	</>	32✔
130	)}
131	</>	65✔
132	);
133	};	65✔

cartesi / rollups-explorer / 11325553061

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous