Merge pull request meshery#13211 from THEBOSS0369/data-testid

Added Data Test IDs in components for Playwright E2E Tests Verifications
josephmidura · Jan 24, 2025 · 5974af6 · 5974af6
2 parents 4796887 + df6e123
commit 5974af6
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 9 deletions.
diff --git a/ui/components/DatabaseSummary.js b/ui/components/DatabaseSummary.js
@@ -154,6 +154,7 @@ const DatabaseSummary = (props) => {
           <Button
             type="submit"
             variant="contained"
+            data-testid="database-reset-button"
             color="primary"
             size="medium"
             disabled={!CAN(keys.RESET_DATABASE.action, keys.RESET_DATABASE.subject)}

diff --git a/ui/components/MeshAdapterConfigComponent.js b/ui/components/MeshAdapterConfigComponent.js
@@ -495,6 +495,7 @@ const MeshAdapterConfigComponent = (props) => {
               <Button
                 type="submit"
                 variant="contained"
+                data-testid="adapter-undeploy-button"
                 color="primary"
                 size="large"
                 onClick={handleAdapterUndeploy}
@@ -511,6 +512,7 @@ const MeshAdapterConfigComponent = (props) => {
               <Button
                 type="submit"
                 variant="contained"
+                data-testid="adapter-connect-button"
                 color="primary"
                 size="large"
                 onClick={handleSubmit}
@@ -530,6 +532,7 @@ const MeshAdapterConfigComponent = (props) => {
                 value={selectedAvailableAdapter}
                 // placeholder={'Mesh Adapter URL'}
                 label="Available Adapters"
+                data-testid="adapters-available-label"
                 error={selectedAvailableAdapterError}
               />
             </Grid>
@@ -550,6 +553,7 @@ const MeshAdapterConfigComponent = (props) => {
                 <Button
                   type="submit"
                   variant="contained"
+                  data-testid="adapter-deploy-button"
                   color="primary"
                   size="large"
                   onClick={handleAdapterDeploy}

diff --git a/ui/components/MesheryMetrics.js b/ui/components/MesheryMetrics.js
@@ -56,6 +56,7 @@ function MesheryMetrics({
       </Typography>
       <Button
         aria-label="Add Grafana Charts"
+        data-testid="configure-metrics-button"
         variant="contained"
         color="primary"
         size="large"

diff --git a/ui/components/MesherySettings.js b/ui/components/MesherySettings.js
@@ -269,7 +269,12 @@ const MesherySettings = (props) => {
                     // disabled={!CAN(keys.VIEW_OVERVIEW.action, keys.VIEW_OVERVIEW.subject)}
                   />
                 </CustomTooltip>
-                <CustomTooltip title="Connect Meshery Adapters" placement="top" value={ADAPTERS}>
+                <CustomTooltip
+                  title="Connect Meshery Adapters"
+                  data-testid="settings-tab-adapters"
+                  placement="top"
+                  value={ADAPTERS}
+                >
                   <Tab
                     icon={<FontAwesomeIcon icon={faMendeley} style={iconMedium} />}
                     label="Adapters"
@@ -287,6 +292,7 @@ const MesherySettings = (props) => {
                   <Tab
                     icon={<FontAwesomeIcon icon={faPoll} style={iconMedium} />}
                     label="Metrics"
+                    data-testid="settings-tab-metrics"
                     // tab="tabMetrics"
                     value={METRICS}
                     disabled={!CAN(keys.VIEW_METRICS.action, keys.VIEW_METRICS.subject)}
@@ -296,6 +302,7 @@ const MesherySettings = (props) => {
                   <Tab
                     icon={<FontAwesomeIcon icon={faFileInvoice} style={iconMedium} />}
                     label="Registry"
+                    data-testid="settings-tab-registry"
                     // tab="registry"
                     value={REGISTRY}
                     disabled={!CAN(keys.VIEW_REGISTRY.action, keys.VIEW_REGISTRY.subject)}
@@ -306,6 +313,7 @@ const MesherySettings = (props) => {
                   <Tab
                     icon={<FontAwesomeIcon icon={faDatabase} style={iconMedium} />}
                     label="Reset"
+                    data-testid="settings-tab-reset"
                     // tab="systemReset"
                     value={RESET}
                     // disabled={!CAN(keys.VIEW_SYSTEM_RESET.action, keys.VIEW_SYSTEM_RESET.subject)} TODO: uncomment when key get seeded

diff --git a/ui/components/telemetry/grafana/GrafanaConfigComponent.js b/ui/components/telemetry/grafana/GrafanaConfigComponent.js
@@ -75,6 +75,7 @@ function GrafanaConfigComponent({
                     }))}
                     value={grafanaURL}
                     label="Grafana Base URL"
+                    data-testid="grafana-base-url"
                     error={urlError}
                     placeholder="Address of Grafana Server"
                     noOptionsMessage="No Grafana servers discovered"
@@ -85,6 +86,7 @@ function GrafanaConfigComponent({
                 <TextField
                   id="grafanaAPIKey"
                   name="grafanaAPIKey"
+                  data-testid="grafana-api-key"
                   label="API Key"
                   fullWidth
                   value={grafanaAPIKey}

diff --git a/ui/pages/extensions.js b/ui/pages/extensions.js
@@ -29,7 +29,12 @@ const MeshMapSignUpcard = ({ classes, hasAccessToMeshMap = false }) => {
     <UsesSistent>
       <Grid item {...LARGE_6_MED_12_GRID_STYLE}>
         <CardContainer>
-          <Typography className={classes.frontContent} variant="h5" component="div">
+          <Typography
+            className={classes.frontContent}
+            data-testid="kanvas-signup-heading"
+            variant="h5"
+            component="div"
+          >
             Kanvas
           </Typography>
 
@@ -43,6 +48,7 @@ const MeshMapSignUpcard = ({ classes, hasAccessToMeshMap = false }) => {
             <div style={{ textAlign: 'right' }}>
               <Button
                 variant="contained"
+                data-testid="kanvas-signup-btn"
                 disabled={hasAccessToMeshMap}
                 onClick={(e) => handleSignUp(e)}
               >
@@ -66,6 +72,7 @@ const MeshMapSnapShotLogo = () => {
         maxWidth: '220px',
         maxHeight: '150px',
       }}
+      data-testid="kanvas-snapshot-image"
       src="/static/img/meshmap-snapshot-logo.svg"
     />
   );
@@ -81,11 +88,16 @@ const MeshMapSnapShotCard = ({ classes, githubActionEnabled = false }) => {
     <UsesSistent>
       <Grid item {...LARGE_6_MED_12_GRID_STYLE}>
         <CardContainer>
-          <Typography className={classes.frontContent} variant="h5" component="div">
+          <Typography
+            className={classes.frontContent}
+            data-testid="kanvas-snapshot-heading"
+            variant="h5"
+            component="div"
+          >
             GitHub Action: Kanvas Snapshot
           </Typography>
 
-          <FrontSideDescription variant="body">
+          <FrontSideDescription data-testid="kanvas-snapshot-description" variant="body">
             <MeshMapSnapShotLogo />
             Connect Kanvas to your GitHub repo and see changes pull request-to-pull request. Get
             snapshots of your infrastructure directly in your PRs.
@@ -95,6 +107,7 @@ const MeshMapSnapShotCard = ({ classes, githubActionEnabled = false }) => {
             <Button
               variant="contained"
               color="primary"
+              data-testid="kanvas-snapshot-enable-btn"
               disabled={githubActionEnabled}
               onClick={(e) => handleEnable(e)}
             >
@@ -135,7 +148,12 @@ const MesheryPerformanceAction = ({ classes, githubActionEnabled = false }) => {
     <UsesSistent>
       <Grid item {...LARGE_6_MED_12_GRID_STYLE}>
         <CardContainer>
-          <Typography className={classes.frontContent} variant="h5" component="div">
+          <Typography
+            className={classes.frontContent}
+            data-testid="performance-analysis-heading"
+            variant="h5"
+            component="div"
+          >
             GitHub Action: Performance Analysis
           </Typography>
 
@@ -148,6 +166,7 @@ const MesheryPerformanceAction = ({ classes, githubActionEnabled = false }) => {
           <div style={{ textAlign: 'right' }}>
             <Button
               variant="contained"
+              data-testid="performance-analysis-enable-btn"
               disabled={githubActionEnabled}
               onClick={(e) => handleEnable(e)}
             >
@@ -185,7 +204,12 @@ const MesheryDockerExtension = ({ classes }) => {
     <UsesSistent>
       <Grid item {...LARGE_6_MED_12_GRID_STYLE}>
         <CardContainer>
-          <Typography className={classes.frontContent} variant="h5" component="div">
+          <Typography
+            className={classes.frontContent}
+            data-testid="docker-extension-heading"
+            variant="h5"
+            component="div"
+          >
             Meshery Docker Extension
           </Typography>
 
@@ -197,7 +221,12 @@ const MesheryDockerExtension = ({ classes }) => {
           </FrontSideDescription>
           {
             <div style={{ textAlign: 'right' }}>
-              <Button variant="contained" color="primary" onClick={(e) => handleDownload(e)}>
+              <Button
+                variant="contained"
+                color="primary"
+                data-testid="docker-extension-download-btn"
+                onClick={(e) => handleDownload(e)}
+              >
                 Download
               </Button>
             </div>
@@ -245,7 +274,12 @@ const MesheryDesignEmbedExtension = ({ classes }) => {
           </FrontSideDescription>
           {
             <div style={{ textAlign: 'right' }}>
-              <Button variant="contained" color="primary" onClick={(e) => handleLearnMore(e)}>
+              <Button
+                variant="contained"
+                color="primary"
+                data-testid="design-embed-learn-more-btn"
+                onClick={(e) => handleLearnMore(e)}
+              >
                 Learn More
               </Button>
             </div>
@@ -334,12 +368,18 @@ const Extensions = ({ classes, toggleCatalogContent, capabilitiesRegistry }) =>
             <WrappedMesheryEmbedDesignExtension />
             <Grid item {...INITIAL_GRID_SIZE}>
               <CardContainer>
-                <Typography className={classes.frontContent} variant="h5" component="div">
+                <Typography
+                  className={classes.frontContent}
+                  data-testid="catalog-section-heading"
+                  variant="h5"
+                  component="div"
+                >
                   {'Meshery Catalog'}
                 </Typography>
 
                 <FrontSideDescription variant="body">
                   <CatalogIcon
+                    data-testid="catalog-toggle-switch"
                     style={{
                       paddingRight: '1rem',
                       height: '80px',