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

* Adding all the data-test-ids Test ID's for doing automation on explorer * Applied lint-fix Linting * More data ids
nymtech · Nov 11, 2021 · 1f1d91b · 1f1d91b
1 parent 9d63a30
commit 1f1d91b
Show file tree

Hide file tree

Showing 14 changed files with 101 additions and 28 deletions.
diff --git a/explorer/src/components/BondBreakdown.tsx b/explorer/src/components/BondBreakdown.tsx
@@ -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>

diff --git a/explorer/src/components/ComponentError.tsx b/explorer/src/components/ComponentError.tsx
@@ -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>

diff --git a/explorer/src/components/CustomColumnHeading.tsx b/explorer/src/components/CustomColumnHeading.tsx
@@ -18,6 +18,7 @@ export const CustomColumnHeading: React.FC<{ headingTitle: string }> = ({
           fontSize: 14,
           padding: 0,
         }}
+        data-testid={headingTitle}
       >
         {headingTitle}&nbsp;
       </Typography>

diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
@@ -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>

diff --git a/explorer/src/components/Socials.tsx b/explorer/src/components/Socials.tsx
@@ -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>

diff --git a/explorer/src/components/StatsCard.tsx b/explorer/src/components/StatsCard.tsx
@@ -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">

diff --git a/explorer/src/components/Switch.tsx b/explorer/src/components/Switch.tsx
@@ -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>
   );

diff --git a/explorer/src/components/TableToolbar.tsx b/explorer/src/components/TableToolbar.tsx
@@ -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"
           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)}
         />

diff --git a/explorer/src/components/Title.tsx b/explorer/src/components/Title.tsx
@@ -7,6 +7,7 @@ export const Title: React.FC<{ text: string }> = ({ text }) => (
     sx={{
       mb: 3,
     }}
+    data-testid={text}
   >
     {text}
   </Typography>

diff --git a/explorer/src/components/TwoColSmallTable.tsx b/explorer/src/components/TwoColSmallTable.tsx
@@ -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 && (

diff --git a/explorer/src/pages/Gateways/index.tsx b/explorer/src/pages/Gateways/index.tsx
@@ -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',

diff --git a/explorer/src/pages/MixnodeDetail/index.tsx b/explorer/src/pages/MixnodeDetail/index.tsx
@@ -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>
     ),
   },
 ];

diff --git a/explorer/src/pages/Mixnodes/index.tsx b/explorer/src/pages/Mixnodes/index.tsx
@@ -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>

diff --git a/explorer/src/pages/MixnodesMap/index.tsx b/explorer/src/pages/MixnodesMap/index.tsx
@@ -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}>
-Original file line number
+Diff line change
@@ Expand Up @@
         sx={{
           mb: 3,
         }}
+        data-testid={text}
       >
         {text}
       </Typography>
@@ Expand Down @@