9656272020

Committed 25 Jun 2024 04:06AM CUT coverage: 94.098% (+0.001%) from 94.097%

Build # 9656272020

Build Type

Pull #187

github

Committed by

brunomenezes

Commit Message

feat(e2e): Add fixture to intercept graphql calls for rollups graphql api by Operation name.

Trust on nodes running makes the e2e tests brittle. Therefore, any call to a Rollups graphQL API will get a mocked response for better control.

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

Run Details

759 of 893 branches covered (84.99%)

Branch coverage included in aggregate %.

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

8408 of 8849 relevant lines covered (95.02%)

55.53 hits per line

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

88.0

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

"use client";
import {
    Button,
    Loader,
    Table,
    Text,
    Transition,
    useMantineColorScheme,
    useMantineTheme,
} from "@mantine/core";
import { FC, useCallback, useRef, useState } from "react";
import type { InputItemFragment } from "../../graphql/explorer/operations";
import { useElementVisibility } from "../../hooks/useElementVisibility";
import TableResponsiveWrapper from "../tableResponsiveWrapper";
import InputRow from "./inputRow";

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

const InputsTable: FC<InputsTableProps> = ({
    inputs,
    fetching,
    totalCount,
}) => {
    const [timeType, setTimeType] = useState("age");
    const theme = useMantineTheme();
    const { colorScheme } = useMantineColorScheme();
    const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;
    const onChangeTimeColumnType = useCallback(() => {
        setTimeType((timeType) => (timeType === "age" ? "timestamp" : "age"));
    }, []);
    const tableRowRef = useRef<HTMLDivElement>(null);
    const { childrenRef, isVisible } = useElementVisibility({
        element: tableRowRef,
    });

    return (
        <TableResponsiveWrapper ref={tableRowRef}>
            <Table width={"100%"} style={{ borderCollapse: "collapse" }}>
                <Table.Thead>
                    <Table.Tr>
                        <Table.Th>From</Table.Th>
                        <Table.Th></Table.Th>
                        <Table.Th>To</Table.Th>
                        <Table.Th>Method</Table.Th>
                        <Table.Th>Index</Table.Th>
                        <Table.Th>
                            <Button
                                variant="transparent"
                                px={0}
                                onClick={onChangeTimeColumnType}
                            >
                                {timeType === "age" ? "Age" : "Timestamp (UTC)"}
                            </Button>
                        </Table.Th>
                        <Table.Th ref={childrenRef}>Data</Table.Th>
                        <Transition
                            mounted={isVisible}
                            transition="scale-x"
                            duration={500}
                            timingFunction="ease-out"
                        >
                            {(styles) => (
                                <th
                                    style={{
                                        ...styles,
                                        position: "sticky",
                                        top: 0,
                                        right: 0,
                                        backgroundColor: bgColor,
                                        padding:
                                            "var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-lg))",
                                    }}
                                >
                                    Data
                                </th>
                            )}
                        </Transition>
                    </Table.Tr>
                </Table.Thead>
                <Table.Tbody>
                    {fetching ? (
                        <Table.Tr>
                            <Table.Td align="center" colSpan={7}>
                                <Loader data-testid="inputs-table-spinner" />
                            </Table.Td>
                        </Table.Tr>
                    ) : (
                        totalCount === 0 && (
                            <Table.Tr>
                                <Table.Td colSpan={7} align="center">
                                    <Text fw={700}> No inputs</Text>
                                </Table.Td>
                            </Table.Tr>
                        )
                    )}
                    {inputs.map((input) => (
                        <InputRow
                            key={input.id}
                            input={input}
                            timeType={timeType}
                            keepDataColVisible={!isVisible}
                        />
                    ))}
                </Table.Tbody>
            </Table>
        </TableResponsiveWrapper>
    );
};

export default InputsTable;

1	"use client";	1✔
2	import {	1✔
3	Button,	1✔
4	Loader,	1✔
5	Table,	1✔
6	Text,	1✔
7	Transition,	1✔
8	useMantineColorScheme,	1✔
9	useMantineTheme,	1✔
10	} from "@mantine/core";	1✔
11	import { FC, useCallback, useRef, useState } from "react";	1✔
12	import type { InputItemFragment } from "../../graphql/explorer/operations";	1✔
13	import { useElementVisibility } from "../../hooks/useElementVisibility";	1✔
14	import TableResponsiveWrapper from "../tableResponsiveWrapper";	1✔
15	import InputRow from "./inputRow";	1✔
16		1✔
17	export interface InputsTableProps {	1✔
18	inputs: InputItemFragment[];	1✔
19	fetching: boolean;	1✔
20	totalCount: number;	1✔
21	}	1✔
22		1✔
23	const InputsTable: FC<InputsTableProps> = ({	1✔
24	inputs,	7✔
25	fetching,	7✔
26	totalCount,	7✔
27	}) => {	7✔
28	const [timeType, setTimeType] = useState("age");	7✔
29	const theme = useMantineTheme();	7✔
30	const { colorScheme } = useMantineColorScheme();	7✔
31	const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;	7!
32	const onChangeTimeColumnType = useCallback(() => {	7✔
33	setTimeType((timeType) => (timeType === "age" ? "timestamp" : "age"));	1!
34	}, []);	7✔
35	const tableRowRef = useRef<HTMLDivElement>(null);	7✔
36	const { childrenRef, isVisible } = useElementVisibility({	7✔
37	element: tableRowRef,	7✔
38	});	7✔
39		7✔
40	return (	7✔
41	<TableResponsiveWrapper ref={tableRowRef}>	7✔
42	<Table width={"100%"} style={{ borderCollapse: "collapse" }}>	7✔
43	<Table.Thead>	7✔
44	<Table.Tr>	7✔
45	<Table.Th>From</Table.Th>	7✔
46	<Table.Th></Table.Th>	7✔
47	<Table.Th>To</Table.Th>	7✔
48	<Table.Th>Method</Table.Th>	7✔
49	<Table.Th>Index</Table.Th>	7✔
50	<Table.Th>	7✔
51	<Button	7✔
52	variant="transparent"	7✔
53	px={0}	7✔
54	onClick={onChangeTimeColumnType}	7✔
55	>	7✔
56	{timeType === "age" ? "Age" : "Timestamp (UTC)"}	7✔
57	</Button>	7✔
58	</Table.Th>	7✔
59	<Table.Th ref={childrenRef}>Data</Table.Th>	7✔
60	<Transition	7✔
61	mounted={isVisible}	7✔
62	transition="scale-x"	7✔
63	duration={500}	7✔
64	timingFunction="ease-out"	7✔
65	>	7✔
66	{(styles) => (	7✔
67	<th	×
68	style={{	×
69	...styles,	×
70	position: "sticky",	×
71	top: 0,	×
72	right: 0,	×
73	backgroundColor: bgColor,	×
74	padding:	×
75	"var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-lg))",	×
76	}}	×
77	>	×
78	Data	×
79	</th>	×
80	)}	7✔
81	</Transition>	7✔
82	</Table.Tr>	7✔
83	</Table.Thead>	7✔
84	<Table.Tbody>	7✔
85	{fetching ? (	7✔
86	<Table.Tr>	1✔
87	<Table.Td align="center" colSpan={7}>	1✔
88	<Loader data-testid="inputs-table-spinner" />	1✔
89	</Table.Td>	1✔
90	</Table.Tr>	1✔
91	) : (	6✔
92	totalCount === 0 && (	6✔
93	<Table.Tr>	1✔
94	<Table.Td colSpan={7} align="center">	1✔
95	<Text fw={700}> No inputs</Text>	1✔
96	</Table.Td>	1✔
97	</Table.Tr>	1✔
98	)	7✔
99	)}	7✔
100	{inputs.map((input) => (	7✔
101	<InputRow	6✔
102	key={input.id}	6✔
103	input={input}	6✔
104	timeType={timeType}	6✔
105	keepDataColVisible={!isVisible}	6✔
106	/>	6✔
107	))}	7✔
108	</Table.Tbody>	7✔
109	</Table>	7✔
110	</TableResponsiveWrapper>	7✔
111	);	7✔
112	};	7✔
113		1✔
114	export default InputsTable;	1✔

cartesi / rollups-explorer / 9656272020

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