feat(kiali): add tests for the overview page

plugins/kiali/dev/__fixtures__/general/istioValidations.json

@@ -32,8 +32,8 @@
     },
     "travel-control": {
       "errors": 0,
-      "objectCount": 0,
-      "warnings": 0
+      "objectCount": 1,
+      "warnings": 1
     },
     "travel-portal": {
       "errors": 0,

plugins/kiali/dev/__fixtures__/namespaces/travel-agency/health/app.json

@@ -50,7 +50,7 @@
         "desiredReplicas": 1,
         "currentReplicas": 1,
         "availableReplicas": 1,
-        "syncedProxies": 1
+        "syncedProxies": 0
       }
     ],
     "requests": {

plugins/kiali/dev/__fixtures__/namespaces/travel-control/health/app.json

@@ -4,7 +4,7 @@
       {
         "name": "control",
         "desiredReplicas": 1,
-        "currentReplicas": 1,
+        "currentReplicas": 0,
         "availableReplicas": 1,
         "syncedProxies": 1
       }

plugins/kiali/src/components/About/AboutUIModal.tsx

@@ -86,7 +86,12 @@ export const AboutUIModal = (props: AboutUIModalProps) => {
         <Grid item xs={8} key={`component_${name}`}>
           {name}
         </Grid>
-        <Grid item xs={4} key={`component_version_${name}`}>
+        <Grid
+          data-test={`${externalService.name}`}
+          item
+          xs={4}
+          key={`component_version_${name}`}
+        >
           {additionalInfo}
         </Grid>
       </>
@@ -157,19 +162,19 @@ export const AboutUIModal = (props: AboutUIModalProps) => {
             <Grid item xs={4}>
               Kiali
             </Grid>
-            <Grid item xs={8}>
+            <Grid item xs={8} data-test="Kiali">
               {coreVersion || 'Unknown'}
             </Grid>
             <Grid item xs={4}>
               Kiali Container
             </Grid>
-            <Grid item xs={8}>
+            <Grid item xs={8} data-test="Kiali container">
               {containerVersion || 'Unknown'}
             </Grid>
             <Grid item xs={4}>
               Service Mesh
             </Grid>
-            <Grid item xs={8}>
+            <Grid item xs={8} data-test="Service Mesh">
               {meshVersion || 'Unknown'}
             </Grid>
           </Grid>

plugins/kiali/src/components/MessageCenter/AlertDrawer.tsx

@@ -61,7 +61,7 @@ const noNotificationsMessage = (
 
 export const AlertDrawer = (props: AlertDrawerProps) => {
   return (
-    <Card className={drawer}>
+    <Card className={drawer} data-test="message-center-modal">
       <CardMedia>
         <ItemCardHeader title="MessageCenter" subtitle="" />
       </CardMedia>
@@ -74,6 +74,7 @@ export const AlertDrawer = (props: AlertDrawerProps) => {
                   <AccordionSummary
                     key={`${group.id}_item`}
                     expandIcon={<ExpandMoreRounded />}
+                    data-test="message-center-summary"
                   >
                     <Typography>
                       {group.title} {getUnreadMessageLabel(group.messages)}

plugins/kiali/src/components/MessageCenter/AlertDrawerGroup.tsx

@@ -59,18 +59,29 @@ export const AlertDrawerGroup = (props: AlertDrawerGroupProps) => {
 
   return (
     <Card elevation={0}>
-      <CardContent style={{ paddingTop: 0 }}>
+      <CardContent
+        style={{ paddingTop: 0 }}
+        data-test="message-center-messages"
+      >
         {group.messages.length === 0 && noNotificationsMessage}
         {getMessages().map(message => (
           <AlertDrawerMessage key={message.id} message={message} />
         ))}
       </CardContent>
       {group.showActions && group.messages.length > 0 && (
         <CardActions>
-          <Button variant="text" onClick={() => markGroupAsRead(group.id)}>
+          <Button
+            data-test="mark-as-read"
+            variant="text"
+            onClick={() => markGroupAsRead(group.id)}
+          >
             Mark All Read
           </Button>
-          <Button variant="text" onClick={() => clearGroup(group.id)}>
+          <Button
+            data-test="clear-all"
+            variant="text"
+            onClick={() => clearGroup(group.id)}
+          >
             Clear All
           </Button>
         </CardActions>

plugins/kiali/src/components/MessageCenter/AlertDrawerMessage.tsx

@@ -46,7 +46,7 @@ export const AlertDrawerMessage = (props: AlertDrawerMessageProps) => {
 
   return (
     <Card>
-      <CardContent>
+      <CardContent data-test="drawer-message">
         {getIcon(props.message.type)}{' '}
         {props.message.seen ? (
           props.message.content
@@ -60,11 +60,17 @@ export const AlertDrawerMessage = (props: AlertDrawerMessageProps) => {
               onClick={() => toggleMessageDetail(props.message)}
               expandIcon={<ExpandMoreRounded />}
             >
-              <Typography>
+              <Typography
+                data-test={
+                  props.message.showDetail
+                    ? 'hide-message-detail'
+                    : 'show-message-detail'
+                }
+              >
                 {props.message.showDetail ? 'Hide Detail' : 'Show Detail'}
               </Typography>
             </AccordionSummary>
-            <AccordionDetails>
+            <AccordionDetails data-test="message-detail">
               <pre style={{ whiteSpace: 'pre-wrap' }}>
                 {props.message.detail}
               </pre>

plugins/kiali/src/components/MessageCenter/MessageCenter.tsx

@@ -89,7 +89,11 @@ export const MessageCenter = (props: { color?: string }) => {
   */
   return (
     <>
-      <Button onClick={() => toggleDrawer(true)} style={{ marginTop: '-15px' }}>
+      <Button
+        onClick={() => toggleDrawer(true)}
+        style={{ marginTop: '-15px' }}
+        data-test="message-center"
+      >
         <Badge
           overlap="circular"
           badgeContent={

plugins/kiali/src/components/Validations/ValidationSummary.tsx

@@ -128,6 +128,7 @@ export const ValidationSummary = (props: Props) => {
   return (
     <Tooltip
       aria-label="Validations list"
+      data-test={`validation-icon-${severity()}`}
       placement="right"
       title={tooltipContent()}
     >

plugins/kiali/src/pages/Kiali/Header/HelpKiali.tsx

@@ -16,7 +16,11 @@ export const HelpKiali = (props: { color?: string }) => {
 
   return (
     <>
-      <Button onClick={openAbout} style={{ marginTop: '-5px' }}>
+      <Button
+        onClick={openAbout}
+        style={{ marginTop: '-5px' }}
+        data-test="help-button"
+      >
         <QuestionCircleIcon color={`${props.color}`} />
       </Button>
       <AboutUIModal

plugins/kiali/src/pages/Kiali/Header/KialiHeader.tsx

@@ -24,6 +24,7 @@ export const KialiHeader = () => {
           color="primary"
           icon={<ClusterIcon />}
           label={homeCluster?.name}
+          data-test="home-cluster"
         />
       </Tooltip>
       <HelpKiali />
@@ -35,6 +36,7 @@ export const KialiHeader = () => {
             flexDirection: 'row',
             justifyContent: 'space-between',
           }}
+          data-test="user"
         >
           <span style={{ margin: '10px' }}>
             <b>User : </b>

plugins/kiali/src/pages/Kiali/Header/NamespaceSelector.tsx

@@ -56,6 +56,7 @@ export const NamespaceSelector = (props: { page?: boolean }) => {
         onChange={handleChange}
         renderValue={selected => (selected as string[]).join(', ')}
         MenuProps={MenuProps}
+        data-test="namespace-selector"
       >
         {(kialiState.namespaces.items || []).map(ns => (
           <MenuItem key={ns.name} value={ns.name}>

plugins/kiali/src/pages/Overview/OverviewCard/NamespaceLabels.tsx

@@ -13,7 +13,7 @@ export const NamespaceLabels = (props: NamespaceLabelsprops) => {
     ? `${Object.entries(props.labels).length}`
     : 'No';
   const tooltipTitle = (
-    <ul>
+    <ul data-test="namespace-labels">
       {Object.entries(props.labels || []).map(([key, value]) => (
         <li key={key}>
           {key}={value}
@@ -27,7 +27,7 @@ export const NamespaceLabels = (props: NamespaceLabelsprops) => {
         {labelsLength} label{labelsLength !== '1' ? 's' : ''}
       </div>
       <Tooltip title={tooltipTitle} placement="right">
-        <span>
+        <span data-test="labels-info-icon">
           <KialiIcon.Info className={infoStyle} />
         </span>
       </Tooltip>

plugins/kiali/src/pages/Overview/OverviewCard/OverviewCard.tsx

@@ -106,12 +106,13 @@ export const OverviewCard = (props: OverviewCardProps) => {
         errors={validations.errors}
         warnings={validations.warnings}
         objectCount={validations.objectCount}
+        data-test="validation-summary"
       />
     );
   };
 
   return (
-    <Card>
+    <Card data-test={`overview-card-${props.namespace.name}`}>
       {!props.entity && <NamespaceHeader {...props} />}
       <CardContent>
         {!props.entity && isMultiCluster && props.namespace.cluster && (

plugins/kiali/src/pages/Overview/OverviewStatus.tsx

@@ -43,8 +43,10 @@ export class OverviewStatus extends React.Component<Props, {}> {
       items.push(`and ${length - items.length} more...`);
     }
     const tooltipContent = (
-      <div>
-        <strong>{this.props.status.name}</strong>
+      <div data-test="overview-status">
+        <strong data-test={`${this.props.status.name}-status`}>
+          {this.props.status.name}
+        </strong>
         {items.map((app, idx) => {
           return (
             <div

plugins/kiali/tests/kialiHelper.ts

@@ -1,5 +1,7 @@
 import { expect, type Locator, type Page } from '@playwright/test';
 
+export { kialiData } from '../dev/__fixtures__';
+
 export class Common {
   page: Page;