From 921a1d683df1730237a232b157e677ca9de07e3c Mon Sep 17 00:00:00 2001
From: milan-deepfence <rkmilansingh@gmail.com>
Date: Mon, 4 Mar 2024 19:35:45 +0530
Subject: [PATCH] added registries test id

---
 .../features/registries/pages/Registries.tsx  | 27 +++++++++++++++----
 .../registries/pages/RegistryAccounts.tsx     | 25 ++++++++++++++---
 .../src/components/pagination/Pagination.tsx  | 12 ++++++---
 .../src/components/table/Table.tsx            |  5 +++-
 4 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/deepfence_frontend/apps/dashboard/src/features/registries/pages/Registries.tsx b/deepfence_frontend/apps/dashboard/src/features/registries/pages/Registries.tsx
index ac359084d8..2161e959cc 100644
--- a/deepfence_frontend/apps/dashboard/src/features/registries/pages/Registries.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/registries/pages/Registries.tsx
@@ -71,7 +71,12 @@ const CardHeader = ({ registry }: { registry: RegistryResponseType }) => {
 
 const Registry = ({ registry }: { registry: RegistryResponseType }) => {
   return (
-    <DFLink className="flex flex-col" to={`/registries/${registry.type}`} unstyled>
+    <DFLink
+      className="flex flex-col"
+      to={`/registries/${registry.type}`}
+      unstyled
+      data-testid={registry?.type + 'Id'}
+    >
       <Card
         className={cn(
           'relative group p-2 pb-3 flex flex-col',
@@ -85,19 +90,28 @@ const Registry = ({ registry }: { registry: RegistryResponseType }) => {
         <CardHeader registry={registry} />
         <div className="flex mt-6 gap-x-[48px] justify-center items-center w-[322px]">
           <div className="flex flex-col justify-center text-p4 text-gray-900 dark:text-text-text-and-icon">
-            <span className="text-h1 text-gray-900 dark:text-text-input-value">
+            <span
+              className="text-h1 text-gray-900 dark:text-text-input-value"
+              data-testid="totalRegistriesId"
+            >
               {abbreviateNumber(registry.registries ?? 0)}
             </span>
             Registries
           </div>
           <div className="flex flex-col justify-center text-p4 text-gray-900 dark:text-text-text-and-icon">
-            <span className="text-h1 text-gray-900 dark:text-text-input-value">
+            <span
+              className="text-h1 text-gray-900 dark:text-text-input-value"
+              data-testid="totalRepositoriesId"
+            >
               {abbreviateNumber(registry.images ?? 0)}
             </span>
             Images
           </div>
           <div className="flex flex-col justify-center text-p4 text-gray-900 dark:text-text-text-and-icon">
-            <span className="text-h1 text-gray-900 dark:text-text-input-value">
+            <span
+              className="text-h1 text-gray-900 dark:text-text-input-value"
+              data-testid="totalImagesId"
+            >
               {abbreviateNumber(registry.tags ?? 0)}
             </span>
             Tags
@@ -133,7 +147,10 @@ const Registries = () => {
       </div>
       <Suspense
         fallback={
-          <div className="mx-4 my-10 flex gap-x-4 gap-y-10 flex-wrap">
+          <div
+            className="mx-4 my-10 flex gap-x-4 gap-y-10 flex-wrap"
+            data-testid="registriesCardSkeletonId"
+          >
             <RegistrySkeleton />
           </div>
         }
diff --git a/deepfence_frontend/apps/dashboard/src/features/registries/pages/RegistryAccounts.tsx b/deepfence_frontend/apps/dashboard/src/features/registries/pages/RegistryAccounts.tsx
index c1ccfda053..6eea5c7085 100644
--- a/deepfence_frontend/apps/dashboard/src/features/registries/pages/RegistryAccounts.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/registries/pages/RegistryAccounts.tsx
@@ -340,7 +340,10 @@ const CountWidget = () => {
         </div>
 
         <div className="flex flex-col items-start">
-          <span className="text-h1 dark:text-text-input-value">
+          <span
+            className="text-h1 dark:text-text-input-value"
+            data-testid="totalRegistriesId"
+          >
             {abbreviateNumber(registries)}
           </span>
           <span className="text-p1">Total registries</span>
@@ -352,7 +355,10 @@ const CountWidget = () => {
         </div>
 
         <div className="flex flex-col items-start">
-          <span className="text-h1 dark:text-text-input-value">
+          <span
+            className="text-h1 dark:text-text-input-value"
+            data-testid="totalRepositoriesId"
+          >
             {abbreviateNumber(images)}
           </span>
           <span className="text-p1">Total images</span>
@@ -364,7 +370,10 @@ const CountWidget = () => {
         </div>
 
         <div className="flex flex-col items-start">
-          <span className="text-h1 dark:text-text-input-value">
+          <span
+            className="text-h1 dark:text-text-input-value"
+            data-testid="totalImagesId"
+          >
             {abbreviateNumber(tags)}
           </span>
           <span className="text-p1">Total tags</span>
@@ -540,7 +549,15 @@ const RegistryAccountsResults = () => {
           }
         />
       </div>
-      <Suspense fallback={<TableSkeleton columns={7} rows={DEFAULT_PAGE_SIZE} />}>
+      <Suspense
+        fallback={
+          <TableSkeleton
+            columns={7}
+            rows={DEFAULT_PAGE_SIZE}
+            data-testid="registryAccountSkeletonId"
+          />
+        }
+      >
         <RegistryAccountsTable
           onTableAction={onTableAction}
           setShowDeleteDialog={setShowDeleteDialog}
diff --git a/deepfence_frontend/packages/ui-components/src/components/pagination/Pagination.tsx b/deepfence_frontend/packages/ui-components/src/components/pagination/Pagination.tsx
index 8fc96228be..1e2c788301 100644
--- a/deepfence_frontend/packages/ui-components/src/components/pagination/Pagination.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/pagination/Pagination.tsx
@@ -131,17 +131,23 @@ export const Pagination = ({
     <div className="flex justify-end items-center gap-4">
       <div className={`text-gray-500 dark:text-text-text-and-icon text-p4`}>
         Showing{' '}
-        <span className="text-black dark:text-text-input-value">
+        <span className="text-black dark:text-text-input-value" data-testid="showingId">
           {currentShowing[0]}-{currentShowing[1]}
         </span>
         {!approximatePagination ? (
           <>
             <span> of</span>
-            <span className="text-black dark:text-text-input-value"> {totalRows}</span>
+            <span
+              className="text-black dark:text-text-input-value"
+              data-testid="ofTotalRowsId"
+            >
+              {' '}
+              {totalRows}
+            </span>
           </>
         ) : null}
       </div>
-      <div className={cn(`flex flex-row flex-nowrap`)}>
+      <div className={cn(`flex flex-row flex-nowrap`)} data-testid="pageButtonId">
         <PageButton
           data-testid="pagination-prev"
           label={
diff --git a/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx b/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx
index 3d56a6832b..e2508834f9 100644
--- a/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx
@@ -298,7 +298,10 @@ const CustomTable = <TData extends RowData>(
                       );
                     })}
                   >
-                    <button className="dark:text-text-input-value flex items-center gap-1">
+                    <button
+                      className="dark:text-text-input-value flex items-center gap-1"
+                      data-testid="showRowId"
+                    >
                       {table.getState().pagination.pageSize}{' '}
                       <div className="h-3 w-3">
                         <TableChevronDown />