GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding data-test-ids for the explorer (#885)

Browse Source 
* Adding all the data-test-ids

Test ID's for doing automation on explorer

* Applied lint-fix

Linting

* More data ids
This commit is contained in:
Tommy Verrall
2021-11-11 15:31:30 +00:00
committed by GitHub
parent 9d63a30b07
commit 1f1d91bd1e
14 changed files with 101 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
explorer/src/components/BondBreakdown.tsx
+9 -3
View File
@@ -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">
@@ -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>
explorer/src/components/ComponentError.tsx
+1
View File
@@ -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>
explorer/src/components/CustomColumnHeading.tsx
+1
View File
@@ -18,6 +18,7 @@ export const CustomColumnHeading: React.FC<{ headingTitle: string }> = ({
fontSize: 14,
padding: 0,
}}
data-testid={headingTitle}
>
{headingTitle}&nbsp;
</Typography>
explorer/src/components/Nav.tsx
+2
View File
@@ -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}
@@ -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>
explorer/src/components/Socials.tsx
+18 -3
View File
@@ -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>
explorer/src/components/StatsCard.tsx
+7 -2
View File
@@ -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">
explorer/src/components/Switch.tsx
+2 -2
View File
@@ -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>
);
@@ -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>
);
explorer/src/components/TableToolbar.tsx
+15 -6
View File
@@ -30,8 +30,8 @@ export const TableToolbar: React.FC<TableToolBarProps> = ({
}}
>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
labelId="simple-select-label"
id="simple-select"
value={pageSize}
onChange={onChangePageSize}
sx={{
@@ -39,14 +39,23 @@ export const TableToolbar: React.FC<TableToolBarProps> = ({
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)}
/>
explorer/src/components/Title.tsx
+1
View File
@@ -7,6 +7,7 @@ export const Title: React.FC<{ text: string }> = ({ text }) => (
sx={{
mb: 3,
}}
data-testid={text}
>
{text}
</Typography>
explorer/src/components/TwoColSmallTable.tsx
+11 -2
View File
@@ -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 && (
explorer/src/pages/Gateways/index.tsx
+16 -4
View File
@@ -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>
),
},
{
@@ -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>
),
},
{
@@ -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>
);
},
},
{
@@ -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>
),
},
{
@@ -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>
@@ -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',
explorer/src/pages/MixnodeDetail/index.tsx
+6 -2
View File
@@ -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>
),
},
@@ -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>
),
},
];
explorer/src/pages/Mixnodes/index.tsx
+2
View File
@@ -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>
@@ -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>
explorer/src/pages/MixnodesMap/index.tsx
+10 -4
View File
@@ -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>
),
},
{
@@ -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>
),
},
{
@@ -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>
),
},
];
@@ -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}>