Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding data-test-ids for the explorer #885

Merged
merged 3 commits into from
Nov 11, 2021
Merged

Adding data-test-ids for the explorer #885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b8e295
Adding all the data-test-ids
tommyv1987 Nov 9, 2021
ce8e4ed
Applied lint-fix
tommyv1987 Nov 9, 2021
0ab5231
More data ids
tommyv1987 Nov 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions explorer/src/components/BondBreakdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,11 +126,15 @@ export const BondBreakdownTable: React.FC = () => {
>
Bond total
</TableCell>
<TableCell align="left">{bonds.bondsTotal}</TableCell>
<TableCell align="left" data-testid="bond-total-amount">
{bonds.bondsTotal}
</TableCell>
</TableRow>
<TableRow>
<TableCell align="left">Pledge total</TableCell>
<TableCell align="left">{bonds.pledges}</TableCell>
<TableCell align="left" data-testid="pledge-total-amount">
{bonds.pledges}
</TableCell>
</TableRow>
<TableRow>
<TableCell onClick={expandDelegations} align="left">
Expand All @@ -146,7 +150,9 @@ export const BondBreakdownTable: React.FC = () => {
)}
</Box>
</TableCell>
<TableCell align="left">{bonds.delegations}</TableCell>
<TableCell align="left" data-testid="delegation-total-amount">
{bonds.delegations}
</TableCell>
</TableRow>
</TableBody>
</Table>
Expand Down
1 change: 1 addition & 0 deletions explorer/src/components/ComponentError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export const ComponentError: React.FC<{ text: string }> = ({ text }) => (
<Typography
sx={{ marginTop: 2, color: 'primary.main', fontSize: 10 }}
variant="body1"
data-testid="delegation-total-amount"
>
{text}
</Typography>
Expand Down
1 change: 1 addition & 0 deletions explorer/src/components/CustomColumnHeading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const CustomColumnHeading: React.FC<{ headingTitle: string }> = ({
fontSize: 14,
padding: 0,
}}
data-testid={headingTitle}
>
{headingTitle}&nbsp;
</Typography>
Expand Down
2 changes: 2 additions & 0 deletions explorer/src/components/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ const ExpandableButton: React.FC<ExpandableButtonType> = ({
url={each.url}
key={each.title}
title={each.title}
data-testid={each.title}
openDrawer={openDrawer}
drawIsOpen={drawIsOpen}
closeDrawer={closeDrawer}
Expand Down Expand Up @@ -369,6 +370,7 @@ export const Nav: React.FC = ({ children }) => {
ml: '7px',
color: theme.palette.nym.networkExplorer.nav.text,
}}
data-testid="menu-buttons"
>
{open ? <ChevronLeft /> : <Menu />}
</IconButton>
Expand Down
21 changes: 18 additions & 3 deletions explorer/src/components/Socials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,28 @@ export const Socials: React.FC<{ isFooter?: boolean }> = ({ isFooter }) => {
: theme.palette.nym.networkExplorer.topNav.socialIcons;
return (
<Box>
<IconButton component="a" href={TELEGRAM_LINK} target="_blank">
<IconButton
component="a"
href={TELEGRAM_LINK}
target="_blank"
data-testid="telegram"
>
<TelegramIcon sx={{ color }} />
</IconButton>
<IconButton component="a" href={GITHUB_LINK} target="_blank">
<IconButton
component="a"
href={GITHUB_LINK}
target="_blank"
data-testid="github"
>
<GitHubIcon sx={{ color }} />
</IconButton>
<IconButton component="a" href={TWITTER_LINK} target="_blank">
<IconButton
component="a"
href={TWITTER_LINK}
target="_blank"
data-testid="twitter"
>
<TwitterIcon sx={{ color }} />
</IconButton>
</Box>
Expand Down
9 changes: 7 additions & 2 deletions explorer/src/components/StatsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,15 @@ export const StatsCard: React.FC<StatsCardProps> = ({
sx={{ color: (theme) => theme.palette.text.primary, fontSize: 18 }}
>
{icon}
<Typography ml={3} mr={0.75} fontSize="inherit">
<Typography
ml={3}
mr={0.75}
fontSize="inherit"
data-testid={`${title}-amount`}
>
{count}
</Typography>
<Typography mr={1} fontSize="inherit">
<Typography mr={1} fontSize="inherit" data-testid={title}>
{title}
</Typography>
<IconButton color="inherit">
Expand Down
4 changes: 2 additions & 2 deletions explorer/src/components/Switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const DarkLightSwitch = styled(Switch)(({ theme }) => ({
export const DarkLightSwitchMobile: React.FC = () => {
const { toggleMode } = useMainContext();
return (
<Button onClick={() => toggleMode()}>
<Button onClick={() => toggleMode()} data-testid="switch-button">
<LightSwitchSVG />
</Button>
);
Expand All @@ -65,7 +65,7 @@ export const DarkLightSwitchDesktop: React.FC<{ defaultChecked: boolean }> = ({
}) => {
const { toggleMode } = useMainContext();
return (
<Button onClick={() => toggleMode()}>
<Button onClick={() => toggleMode()} data-testid="switch-button">
<DarkLightSwitch defaultChecked={defaultChecked} />
</Button>
);
Expand Down
21 changes: 15 additions & 6 deletions explorer/src/components/TableToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,32 @@ export const TableToolbar: React.FC<TableToolBarProps> = ({
}}
>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
labelId="simple-select-label"
id="simple-select"
tommyv1987 marked this conversation as resolved.
Show resolved Hide resolved
value={pageSize}
onChange={onChangePageSize}
sx={{
width: 200,
marginBottom: matches ? 2 : 0,
}}
>
<MenuItem value={10}>10</MenuItem>
<MenuItem value={30}>30</MenuItem>
<MenuItem value={50}>50</MenuItem>
<MenuItem value={100}>100</MenuItem>
<MenuItem value={10} data-testid="ten">
10
</MenuItem>
<MenuItem value={30} data-testid="thirty">
30
</MenuItem>
<MenuItem value={50} data-testid="fifty">
50
</MenuItem>
<MenuItem value={100} data-testid="hundred">
100
</MenuItem>
</Select>
<TextField
sx={{ width: 350 }}
value={searchTerm}
data-testid="search-box"
placeholder="search"
onChange={(event) => onChangeSearch(event.target.value)}
/>
Expand Down
1 change: 1 addition & 0 deletions explorer/src/components/Title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const Title: React.FC<{ text: string }> = ({ text }) => (
sx={{
mb: 3,
}}
data-testid={text}
>
{text}
</Typography>
Expand Down
13 changes: 11 additions & 2 deletions explorer/src/components/TwoColSmallTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,17 @@ export const TwoColSmallTable: React.FC<TableProps> = ({
{icons[i] ? <CheckCircleSharpIcon /> : <ErrorIcon />}
</TableCell>
)}
<TableCell sx={error ? { opacity: 0.4 } : null}>{each}</TableCell>
<TableCell sx={error ? { opacity: 0.4 } : null} align="right">
<TableCell
sx={error ? { opacity: 0.4 } : null}
data-testid={each.replace(/ /g, '')}
>
{each}
</TableCell>
<TableCell
sx={error ? { opacity: 0.4 } : null}
align="right"
data-testid={`${each.replace(/ /g, '-')}-value`}
>
{values[i]}
</TableCell>
{error && (
Expand Down
20 changes: 16 additions & 4 deletions explorer/src/pages/Gateways/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ export const PageGateways: React.FC = () => {
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<Typography sx={cellStyles}>{params.value}</Typography>
<Typography sx={cellStyles} data-testid="owner">
{params.value}
</Typography>
),
},
{
Expand All @@ -64,7 +66,9 @@ export const PageGateways: React.FC = () => {
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<Typography sx={cellStyles}>{params.value}</Typography>
<Typography sx={cellStyles} data-testid="identity-key">
{params.value}
</Typography>
),
},
{
Expand All @@ -79,7 +83,11 @@ export const PageGateways: React.FC = () => {
amount: params.value as string,
denom: 'upunk',
});
return <Typography sx={cellStyles}>{bondAsPunk}</Typography>;
return (
<Typography sx={cellStyles} data-testid="bond-amount">
{bondAsPunk}
</Typography>
);
},
},
{
Expand All @@ -89,7 +97,9 @@ export const PageGateways: React.FC = () => {
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<Typography sx={cellStyles}>{params.value}</Typography>
<Typography sx={cellStyles} data-testid="host">
{params.value}
</Typography>
),
},
{
Expand All @@ -102,6 +112,7 @@ export const PageGateways: React.FC = () => {
<Button
onClick={() => handleSearch(params.value as string)}
sx={{ ...cellStyles, justifyContent: 'flex-start' }}
data-testid="location-button"
>
{params.value}
</Button>
Expand Down Expand Up @@ -133,6 +144,7 @@ export const PageGateways: React.FC = () => {
pageSize={pageSize}
pagination={gateways?.data?.length >= 12}
hideFooter={gateways?.data?.length < 12}
data-testid="gateway-data-grid"
sortModel={[
{
field: 'bond',
Expand Down
8 changes: 6 additions & 2 deletions explorer/src/pages/MixnodeDetail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,9 @@ const columns: GridColDef[] = [
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<div>
<Typography sx={cellStyles}>{params.value}</Typography>
<Typography sx={cellStyles} data-testid="location-value">
{params.value}
</Typography>
</div>
),
},
Expand All @@ -106,7 +108,9 @@ const columns: GridColDef[] = [
headerClassName: 'MuiDataGrid-header-override',
type: 'number',
renderCell: (params: GridRenderCellParams) => (
<Typography sx={cellStyles}>{params.value}</Typography>
<Typography sx={cellStyles} data-testid="node-layer">
{params.value}
</Typography>
),
},
];
Expand Down
2 changes: 2 additions & 0 deletions explorer/src/pages/Mixnodes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export const PageMixnodes: React.FC = () => {
href={`${BIG_DIPPER}/account/${params.value}`}
target="_blank"
sx={cellStyles}
data-testid="big-dipper-link"
>
{params.value}
</MuiLink>
Expand All @@ -76,6 +77,7 @@ export const PageMixnodes: React.FC = () => {
sx={cellStyles}
component={RRDLink}
to={`/network-components/mixnodes/${params.value}`}
data-testid="identity-link"
>
{params.value}
</MuiLink>
Expand Down
14 changes: 10 additions & 4 deletions explorer/src/pages/MixnodesMap/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,9 @@ export const PageMixnodesMap: React.FC = () => {
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<Typography sx={cellStyles}>{params.value}</Typography>
<Typography sx={cellStyles} data-testid="country-name">
{params.value}
</Typography>
),
},
{
Expand All @@ -56,7 +58,9 @@ export const PageMixnodesMap: React.FC = () => {
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<Typography sx={cellStyles}>{params.value}</Typography>
<Typography sx={cellStyles} data-testid="number-of-nodes">
{params.value}
</Typography>
),
},
{
Expand All @@ -66,7 +70,9 @@ export const PageMixnodesMap: React.FC = () => {
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<Typography sx={cellStyles}>{params.value}</Typography>
<Typography sx={cellStyles} data-testid="percentage">
{params.value}
</Typography>
),
},
];
Expand Down Expand Up @@ -101,7 +107,7 @@ export const PageMixnodesMap: React.FC = () => {
return (
<Box component="main" sx={{ flexGrow: 1 }}>
<Grid container spacing={1} sx={{ mb: 4 }}>
<Grid item xs={12}>
<Grid item xs={12} data-testid="mixnodes-globe">
<Title text="Mixnodes Around the Globe" />
</Grid>
<Grid item xs={12} lg={9}>
Expand Down