9258825908

Committed 27 May 2024 06:13PM UTC coverage: 94.072% (+0.002%) from 94.07%

Build # 9258825908

Build Type

Pull #187

github

Committed by

nevendyulgerov

Commit Message

test(apps/web): Add e2e tests for inputs page

Pull Request Pull Request #187: #183 Add e2e tests for inputs page

Run Details

758 of 892 branches covered (84.98%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

1 existing line in 1 file now uncovered.

8366 of 8807 relevant lines covered (94.99%)

55.75 hits per line

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

88.36

/apps/web/src/components/inputs/inputRow.tsx

"use client";
import {
    ActionIcon,
    Badge,
    Box,
    Collapse,
    Group,
    Paper,
    Table,
    Text,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import prettyMilliseconds from "pretty-ms";
import { FC } from "react";
import { TbArrowRight, TbFileText, TbX } from "react-icons/tb";
import { Address as AddressType, formatUnits } from "viem";
import { InputItemFragment } from "../../graphql/explorer/operations";
import Address from "../address";
import InputDetailsView from "./inputDetailsView";
import { methodResolver } from "../../lib/methodResolver";

export type InputRowProps = {
    input: InputItemFragment;
    timeType: string;
    keepDataColVisible: boolean;
};

const InputRow: FC<InputRowProps> = ({
    input,
    timeType,
    keepDataColVisible,
}) => {
    const [opened, { toggle }] = useDisclosure(false);
    const from = input.msgSender as AddressType;
    const to = input.application.id as AddressType;

    const erc20Deposit = (input: InputItemFragment) =>
        input.erc20Deposit ? (
            <Text size="xs">
                {formatUnits(
                    input.erc20Deposit.amount,
                    input.erc20Deposit.token.decimals,
                )}{" "}
                {input.erc20Deposit.token.symbol}
            </Text>
        ) : (
            <></>
        );

    const method = (
        <Badge variant="default" style={{ textTransform: "none" }}>
            {methodResolver(input) ?? "?"}
        </Badge>
    );
    return (
        <>
            <Table.Tr>
                <Table.Td>
                    <Box
                        display="flex"
                        w="max-content"
                        style={{
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                        data-testid="application-from-address"
                    >
                        {input.erc20Deposit ? (
                            <Group>
                                <Address
                                    value={
                                        input.erc20Deposit.from as AddressType
                                    }
                                    icon
                                    shorten
                                />
                                <TbArrowRight />
                                <Address value={from} icon shorten />
                            </Group>
                        ) : (
                            <Address value={from} icon shorten />
                        )}
                    </Box>
                </Table.Td>
                <Table.Td>
                    <Box
                        display="flex"
                        w="max-content"
                        style={{
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                    >
                        <Group justify="right">
                            {erc20Deposit(input)}
                            <TbArrowRight />
                        </Group>
                    </Box>
                </Table.Td>
                <Table.Td>
                    <Box
                        display="flex"
                        w="max-content"
                        style={{
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                        data-testid="application-inputs-link"
                    >
                        <Address
                            value={to}
                            icon
                            href={`/applications/${to}/inputs`}
                            shorten
                        />
                    </Box>
                </Table.Td>
                <Table.Td>{method}</Table.Td>
                <Table.Td>
                    <Text>{input.index}</Text>
                </Table.Td>
                <Table.Td>
                    <Box
                        display="flex"
                        w="max-content"
                        style={{
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                    >
                        <Text>
                            {timeType === "age"
                                ? `${prettyMilliseconds(
                                      Date.now() - input.timestamp * 1000,
                                      {
                                          unitCount: 2,
                                          secondsDecimalDigits: 0,
                                          verbose: true,
                                      },
                                  )} ago`
                                : new Date(
                                      input.timestamp * 1000,
                                  ).toISOString()}
                        </Text>
                    </Box>
                </Table.Td>
                <Table.Td
                    pos={keepDataColVisible ? "initial" : "sticky"}
                    top={0}
                    right={0}
                    p={0}
                >
                    <Paper
                        shadow={keepDataColVisible ? undefined : "xl"}
                        radius={0}
                        p="var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs))"
                        data-testid="input-row-toggle"
                    >
                        <ActionIcon variant="default" onClick={toggle}>
                            {opened ? <TbX /> : <TbFileText />}
                        </ActionIcon>
                    </Paper>
                </Table.Td>
            </Table.Tr>
            <Table.Tr></Table.Tr>
            <Table.Tr>
                <Table.Td colSpan={8} p={0}>
                    <Collapse in={opened}>
                        {opened && <InputDetailsView input={input} />}
                    </Collapse>
                </Table.Td>
            </Table.Tr>
        </>
    );
};

export default InputRow;

1	"use client";	1✔
2	import {	1✔
3	ActionIcon,	1✔
4	Badge,	1✔
5	Box,	1✔
6	Collapse,	1✔
7	Group,	1✔
8	Paper,	1✔
9	Table,	1✔
10	Text,	1✔
11	} from "@mantine/core";	1✔
12	import { useDisclosure } from "@mantine/hooks";	1✔
13	import prettyMilliseconds from "pretty-ms";	1✔
14	import { FC } from "react";	1✔
15	import { TbArrowRight, TbFileText, TbX } from "react-icons/tb";	1✔
16	import { Address as AddressType, formatUnits } from "viem";	1✔
17	import { InputItemFragment } from "../../graphql/explorer/operations";	1✔
18	import Address from "../address";	1✔
19	import InputDetailsView from "./inputDetailsView";	1✔
20	import { methodResolver } from "../../lib/methodResolver";	1✔
21		1✔
22	export type InputRowProps = {	1✔
23	input: InputItemFragment;	1✔
24	timeType: string;	1✔
25	keepDataColVisible: boolean;	1✔
26	};	1✔
27		1✔
28	const InputRow: FC<InputRowProps> = ({	1✔
29	input,	6✔
30	timeType,	6✔
31	keepDataColVisible,	6✔
32	}) => {	6✔
33	const [opened, { toggle }] = useDisclosure(false);	6✔
34	const from = input.msgSender as AddressType;	6✔
35	const to = input.application.id as AddressType;	6✔
36		6✔
37	const erc20Deposit = (input: InputItemFragment) =>	6✔
38	input.erc20Deposit ? (	6!
39	<Text size="xs">	×
40	{formatUnits(	×
41	input.erc20Deposit.amount,	×
42	input.erc20Deposit.token.decimals,	×
43	)}{" "}	×
44	{input.erc20Deposit.token.symbol}	×
45	</Text>	×
46	) : (	6✔
47	<></>	6✔
48	);	6✔
49		6✔
50	const method = (	6✔
51	<Badge variant="default" style={{ textTransform: "none" }}>	6✔
52	{methodResolver(input) ?? "?"}	6✔
53	</Badge>	6✔
54	);	6✔
55	return (	6✔
56	<>	6✔
57	<Table.Tr>	6✔
58	<Table.Td>	6✔
59	<Box	6✔
60	display="flex"	6✔
61	w="max-content"	6✔
62	style={{	6✔
63	alignItems: "center",	6✔
64	justifyContent: "center",	6✔
65	}}	6✔
66	data-testid="application-from-address"	6✔
67	>	6✔
68	{input.erc20Deposit ? (	6!
69	<Group>	×
70	<Address	×
71	value={	×
72	input.erc20Deposit.from as AddressType	×
73	}	×
74	icon	×
75	shorten	×
76	/>	×
77	<TbArrowRight />	×
78	<Address value={from} icon shorten />	×
UNCOV 79	</Group>	×
80	) : (	6✔
81	<Address value={from} icon shorten />	6✔
82	)}	6✔
83	</Box>	6✔
84	</Table.Td>	6✔
85	<Table.Td>	6✔
86	<Box	6✔
87	display="flex"	6✔
88	w="max-content"	6✔
89	style={{	6✔
90	alignItems: "center",	6✔
91	justifyContent: "center",	6✔
92	}}	6✔
93	>	6✔
94	<Group justify="right">	6✔
95	{erc20Deposit(input)}	6✔
96	<TbArrowRight />	6✔
97	</Group>	6✔
98	</Box>	6✔
99	</Table.Td>	6✔
100	<Table.Td>	6✔
101	<Box	6✔
102	display="flex"	6✔
103	w="max-content"	6✔
104	style={{	6✔
105	alignItems: "center",	6✔
106	justifyContent: "center",	6✔
107	}}	6✔
108	data-testid="application-inputs-link"	6✔
109	>	6✔
110	<Address	6✔
111	value={to}	6✔
112	icon	6✔
113	href={`/applications/${to}/inputs`}	6✔
114	shorten	6✔
115	/>	6✔
116	</Box>	6✔
117	</Table.Td>	6✔
118	<Table.Td>{method}</Table.Td>	6✔
119	<Table.Td>	6✔
120	<Text>{input.index}</Text>	6✔
121	</Table.Td>	6✔
122	<Table.Td>	6✔
123	<Box	6✔
124	display="flex"	6✔
125	w="max-content"	6✔
126	style={{	6✔
127	alignItems: "center",	6✔
128	justifyContent: "center",	6✔
129	}}	6✔
130	>	6✔
131	<Text>	6✔
132	{timeType === "age"	6✔
133	? `${prettyMilliseconds(	4✔
134	Date.now() - input.timestamp * 1000,	4✔
135	{	4✔
136	unitCount: 2,	4✔
137	secondsDecimalDigits: 0,	4✔
138	verbose: true,	4✔
139	},	4✔
140	)} ago`	4✔
141	: new Date(	2✔
142	input.timestamp * 1000,	2✔
143	).toISOString()}	2✔
144	</Text>	6✔
145	</Box>	6✔
146	</Table.Td>	6✔
147	<Table.Td	6✔
148	pos={keepDataColVisible ? "initial" : "sticky"}	6✔
149	top={0}	6✔
150	right={0}	6✔
151	p={0}	6✔
152	>	6✔
153	<Paper	6✔
154	shadow={keepDataColVisible ? undefined : "xl"}	6✔
155	radius={0}	6✔
156	p="var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs))"	6✔
157	data-testid="input-row-toggle"	6✔
158	>	6✔
159	<ActionIcon variant="default" onClick={toggle}>	6✔
160	{opened ? <TbX /> : <TbFileText />}	6!
161	</ActionIcon>	6✔
162	</Paper>	6✔
163	</Table.Td>	6✔
164	</Table.Tr>	6✔
165	<Table.Tr></Table.Tr>	6✔
166	<Table.Tr>	6✔
167	<Table.Td colSpan={8} p={0}>	6✔
168	<Collapse in={opened}>	6✔
169	{opened && <InputDetailsView input={input} />}	6!
170	</Collapse>	6✔
171	</Table.Td>	6✔
172	</Table.Tr>	6✔
173	</>	6✔
174	);	6✔
175	};	6✔
176		1✔
177	export default InputRow;	1✔

cartesi / rollups-explorer / 9258825908

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