Added "Add repo" senario testing (#502)

* Adding start of add repository flow

* Adding data-cy instead of css selectors

* Saving progress

* Adding fixture data

* Cleaning the test

frontend/src/components/LinkWithSearchParams.tsx

@@ -13,7 +13,7 @@ const LinkWithSearchParams = ({
 }) => {
   const { search } = useLocation();
   const { context } = useParams();
-  const {clusterMode} = useAppContext();
+  const { clusterMode } = useAppContext();
 
   const params = new URLSearchParams(search);
   // For state we don't want to keep while navigating
@@ -27,7 +27,13 @@ const LinkWithSearchParams = ({
     prefixedUrl = `/${context}${to}`;
   }
 
-  return <NavLink to={`${prefixedUrl}/?${params.toString()}`} {...props} />;
+  return (
+    <NavLink
+      data-cy="navigation-link"
+      to={`${prefixedUrl}/?${params.toString()}`}
+      {...props}
+    />
+  );
 };
 
 export default LinkWithSearchParams;

frontend/src/components/modal/AddRepositoryModal.tsx

@@ -81,6 +81,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
       bottomContent={
         <div className="flex justify-end p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
           <button
+            data-cy="add-chart-repository-button"
             className="flex items-center text-white font-medium px-3 py-1.5 bg-primary hover:bg-add-repo focus:ring-4 focus:outline-none focus:ring-blue-300 disabled:bg-blue-300 rounded-lg text-base text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
             onClick={addRepository}
             disabled={isLoading}
@@ -104,6 +105,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
             }
             required
             id="name"
+            data-cy="add-chart-name"
             type="text"
             placeholder="Komodorio"
             className="rounded-lg p-2 w-full border border-gray-300 focus:outline-none focus:border-sky-500 input-box-shadow"
@@ -121,6 +123,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
             }
             required
             id="url"
+            data-cy="add-chart-url"
             type="text"
             placeholder="https://helm-charts.komodor.io"
             className="rounded-lg p-2 w-full border border-gray-300  focus:outline-none focus:border-sky-500 input-box-shadow"

frontend/src/components/repository/ChartViewer.tsx

@@ -20,6 +20,7 @@ function ChartViewer({ chart }: ChartViewerProps) {
   return (
     <>
       <div
+        data-cy="chart-viewer-install-button"
         className="grid grid-cols-10 gap-3 hover:bg-body-background p-4 text-sm"
         onMouseOver={handleMouseOver}
         onMouseOut={handleMouseOut}

frontend/src/components/repository/RepositoriesList.tsx

@@ -57,6 +57,7 @@ function RepositoriesList({
           ))}
         </div>
         <button
+          data-cy="install-repository-button"
           type="button"
           style={{ marginTop: "10px" }}
           className="h-8 w-fit flex items-center gap-2 border rounded text-muted border-gray-300 px-3 py-1 text-sm font-semibold"