9808504507

Committed 05 Jul 2024 12:44PM CUT coverage: 94.266% (+0.06%) from 94.209%

Build # 9808504507

Build Type

Pull #198

github

Committed by

nevendyulgerov

Commit Message

test(apps/web): Fix e2e tests

Pull Request Pull Request #198: #186 Add input completion status

Run Details

808 of 946 branches covered (85.41%)

Branch coverage included in aggregate %.

95 of 95 new or added lines in 3 files covered. (100.0%)

8908 of 9361 relevant lines covered (95.16%)

53.8 hits per line

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

86.67

/apps/web/src/components/applications/latestInputsTable.tsx

"use client";
import { Badge, Box, Button, Group, Loader, Table, Text } from "@mantine/core";
import type { Address as AddressType } from "abitype/dist/types/abi";
import prettyMilliseconds from "pretty-ms";
import { FC, useCallback, useState } from "react";
import Address from "../address";
import { InputItemFragment } from "../../graphql/explorer/operations";
import { TbArrowRight } from "react-icons/tb";
import { methodResolver } from "../../lib/methodResolver";

export interface Entry {
    appId: AddressType;
    timestamp: number;
    href: string;
}

export interface LatestInputsTableProps {
    inputs: InputItemFragment[];
    fetching: boolean;
    totalCount: number;
}

const LatestInputsTable: FC<LatestInputsTableProps> = ({
    inputs,
    fetching,
    totalCount,
}) => {
    const [timeType, setTimeType] = useState("age");

    const onChangeTimeColumnType = useCallback(() => {
        setTimeType((timeType) => (timeType === "age" ? "timestamp" : "age"));
    }, []);

    return (
        <Table>
            <Table.Thead>
                <Table.Tr>
                    <Table.Th>From</Table.Th>
                    <Table.Th>Method</Table.Th>
                    <Table.Th>
                        <Button
                            variant="transparent"
                            px={0}
                            onClick={onChangeTimeColumnType}
                        >
                            {timeType === "age" ? "Age" : "Timestamp (UTC)"}
                        </Button>
                    </Table.Th>
                </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
                {fetching ? (
                    <Table.Tr>
                        <Table.Td align="center" colSpan={2}>
                            <Loader data-testid="inputs-table-spinner" />
                        </Table.Td>
                    </Table.Tr>
                ) : (
                    totalCount === 0 && (
                        <Table.Tr>
                            <Table.Td colSpan={3} align="center" fw={700}>
                                No inputs
                            </Table.Td>
                        </Table.Tr>
                    )
                )}
                {inputs.map((input) => (
                    <Table.Tr key={`${input.application}-${input.timestamp}`}>
                        <Table.Td>
                            <Box
                                display="flex"
                                w="max-content"
                                style={{
                                    alignItems: "center",
                                    justifyContent: "center",
                                }}
                            >
                                {input.erc20Deposit ? (
                                    <Group>
                                        <Address
                                            value={
                                                input.erc20Deposit
                                                    .from as AddressType
                                            }
                                            icon
                                            shorten
                                        />
                                        <TbArrowRight />
                                        <Address
                                            value={
                                                input.msgSender as AddressType
                                            }
                                            icon
                                            shorten
                                        />
                                    </Group>
                                ) : (
                                    <Address
                                        value={input.msgSender as AddressType}
                                        icon
                                        shorten
                                    />
                                )}
                            </Box>
                        </Table.Td>
                        <Table.Td>
                            <Badge
                                variant="default"
                                style={{ textTransform: "none" }}
                            >
                                {methodResolver(input) ?? "?"}
                            </Badge>
                        </Table.Td>
                        <Table.Td>
                            <Text>
                                {timeType === "age"
                                    ? `${prettyMilliseconds(
                                          Date.now() - input.timestamp * 1000,
                                          {
                                              unitCount: 2,
                                              secondsDecimalDigits: 0,
                                              verbose: true,
                                          },
                                      )} ago`
                                    : new Date(
                                          input.timestamp * 1000,
                                      ).toISOString()}
                            </Text>
                        </Table.Td>
                    </Table.Tr>
                ))}
            </Table.Tbody>
        </Table>
    );
};

export default LatestInputsTable;

1	"use client";	1✔
2	import { Badge, Box, Button, Group, Loader, Table, Text } from "@mantine/core";	1✔
3	import type { Address as AddressType } from "abitype/dist/types/abi";	1✔
4	import prettyMilliseconds from "pretty-ms";	1✔
5	import { FC, useCallback, useState } from "react";	1✔
6	import Address from "../address";	1✔
7	import { InputItemFragment } from "../../graphql/explorer/operations";	1✔
8	import { TbArrowRight } from "react-icons/tb";	1✔
9	import { methodResolver } from "../../lib/methodResolver";	1✔
10		1✔
11	export interface Entry {	1✔
12	appId: AddressType;	1✔
13	timestamp: number;	1✔
14	href: string;	1✔
15	}	1✔
16		1✔
17	export interface LatestInputsTableProps {	1✔
18	inputs: InputItemFragment[];	1✔
19	fetching: boolean;	1✔
20	totalCount: number;	1✔
21	}	1✔
22		1✔
23	const LatestInputsTable: FC<LatestInputsTableProps> = ({	1✔
24	inputs,	26✔
25	fetching,	26✔
26	totalCount,	26✔
27	}) => {	26✔
28	const [timeType, setTimeType] = useState("age");	26✔
29		26✔
30	const onChangeTimeColumnType = useCallback(() => {	26✔
31	setTimeType((timeType) => (timeType === "age" ? "timestamp" : "age"));	2!
32	}, []);	26✔
33		26✔
34	return (	26✔
35	<Table>	26✔
36	<Table.Thead>	26✔
37	<Table.Tr>	26✔
38	<Table.Th>From</Table.Th>	26✔
39	<Table.Th>Method</Table.Th>	26✔
40	<Table.Th>	26✔
41	<Button	26✔
42	variant="transparent"	26✔
43	px={0}	26✔
44	onClick={onChangeTimeColumnType}	26✔
45	>	26✔
46	{timeType === "age" ? "Age" : "Timestamp (UTC)"}	26✔
47	</Button>	26✔
48	</Table.Th>	26✔
49	</Table.Tr>	26✔
50	</Table.Thead>	26✔
51	<Table.Tbody>	26✔
52	{fetching ? (	26✔
53	<Table.Tr>	1✔
54	<Table.Td align="center" colSpan={2}>	1✔
55	<Loader data-testid="inputs-table-spinner" />	1✔
56	</Table.Td>	1✔
57	</Table.Tr>	1✔
58	) : (	25✔
59	totalCount === 0 && (	25✔
60	<Table.Tr>	1✔
61	<Table.Td colSpan={3} align="center" fw={700}>	1✔
62	No inputs	1✔
63	</Table.Td>	1✔
64	</Table.Tr>	1✔
65	)	26✔
66	)}	26✔
67	{inputs.map((input) => (	26✔
68	<Table.Tr key={`${input.application}-${input.timestamp}`}>	115✔
69	<Table.Td>	115✔
70	<Box	115✔
71	display="flex"	115✔
72	w="max-content"	115✔
73	style={{	115✔
74	alignItems: "center",	115✔
75	justifyContent: "center",	115✔
76	}}	115✔
77	>	115✔
78	{input.erc20Deposit ? (	115!
79	<Group>	×
80	<Address	×
81	value={	×
82	input.erc20Deposit	×
83	.from as AddressType	×
84	}	×
85	icon	×
86	shorten	×
87	/>	×
88	<TbArrowRight />	×
89	<Address	×
90	value={	×
91	input.msgSender as AddressType	×
92	}	×
93	icon	×
94	shorten	×
95	/>	×
96	</Group>	×
97	) : (	115✔
98	<Address	115✔
99	value={input.msgSender as AddressType}	115✔
100	icon	115✔
101	shorten	115✔
102	/>	115✔
103	)}	115✔
104	</Box>	115✔
105	</Table.Td>	115✔
106	<Table.Td>	115✔
107	<Badge	115✔
108	variant="default"	115✔
109	style={{ textTransform: "none" }}	115✔
110	>	115✔
111	{methodResolver(input) ?? "?"}	115✔
112	</Badge>	115✔
113	</Table.Td>	115✔
114	<Table.Td>	115✔
115	<Text>	115✔
116	{timeType === "age"	115✔
117	? `${prettyMilliseconds(	113✔
118	Date.now() - input.timestamp * 1000,	113✔
119	{	113✔
120	unitCount: 2,	113✔
121	secondsDecimalDigits: 0,	113✔
122	verbose: true,	113✔
123	},	113✔
124	)} ago`	113✔
125	: new Date(	2✔
126	input.timestamp * 1000,	2✔
127	).toISOString()}	2✔
128	</Text>	115✔
129	</Table.Td>	115✔
130	</Table.Tr>	115✔
131	))}	26✔
132	</Table.Tbody>	26✔
133	</Table>	26✔
134	);	26✔
135	};	26✔
136		1✔
137	export default LatestInputsTable;	1✔

cartesi / rollups-explorer / 9808504507

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