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/cypress.config.ts

@@ -7,4 +7,10 @@ export default defineConfig({
       bundler: "vite",
     },
   },
-});
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

frontend/cypress/e2e/addRepository.cy.ts

@@ -0,0 +1,53 @@
+describe("Adding repository flow", () => {
+  const addChartNameInput = "[data-cy='add-chart-name']";
+  const addChartUrlInput = "[data-cy='add-chart-url']";
+  const addChartRepositoryButton = "[data-cy='add-chart-repository-button']";
+
+  it("Adding new chart repository", () => {
+    cy.intercept("GET", "http://localhost:5173/status", {
+      fixture: "status.json",
+    }).as("status");
+
+    cy.intercept("GET", "http://localhost:5173/api/helm/releases", {
+      fixture: "releases.json",
+    }).as("releases");
+
+    cy.visit(
+      "http://localhost:5173/#/minikube/installed?filteredNamespace=default"
+    );
+
+    cy.get("[data-cy='navigation-link']").contains("Repository").click();
+    cy.get("[data-cy='install-repository-button']").click();
+
+    cy.get(addChartNameInput).type("Komodorio");
+    cy.get(addChartUrlInput).type("https://helm-charts.komodor.io");
+
+    cy.intercept("GET", "http://localhost:5173/api/helm/repositories", {
+      fixture: "repositories.json",
+    }).as("repositories");
+
+    cy.get(addChartRepositoryButton).click();
+
+    cy.contains("https://helm-charts.komodor.io");
+
+    cy.get("[data-cy='chart-viewer-install-button']")
+      .eq(0)
+      .click({ force: true })
+      .contains("Install")
+      .click();
+
+    cy.intercept("POST", "http://localhost:5173/api/helm/releases/default", {
+      fixture: "defaultReleases.json",
+    }).as("defaultReleases");
+
+    cy.intercept(
+      "GET",
+      "http://localhost:5173/api/helm/releases/default/helm-dashboard/history",
+      { fixture: "history.json" }
+    ).as("history");
+
+    cy.contains("Confirm").click();
+
+    cy.wait(["@defaultReleases", "@history"]);
+  });
+});

frontend/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

frontend/cypress/fixtures/history.json

@@ -0,0 +1,13 @@
+[
+  {
+      "revision": 1,
+      "updated": "2024-01-17T22:39:07.2371554+02:00",
+      "status": "deployed",
+      "chart": "helm-dashboard-0.1.10",
+      "app_version": "1.3.3",
+      "description": "Install complete",
+      "chart_name": "helm-dashboard",
+      "chart_ver": "0.1.10",
+      "has_tests": true
+  }
+]

frontend/cypress/fixtures/releases.json

@@ -0,0 +1 @@
+[]

frontend/cypress/fixtures/repositories.json

@@ -0,0 +1,6 @@
+[
+  {
+    "name": "Komodorio",
+    "url": "https://helm-charts.komodor.io"
+  }
+]

frontend/cypress/fixtures/status.json

@@ -0,0 +1,7 @@
+{
+  "CurVer": "0.0.0",
+  "LatestVer": "v1.3.3",
+  "Analytics": false,
+  "CacheHitRatio": 0,
+  "ClusterMode": false
+}

frontend/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

frontend/package.json

@@ -9,7 +9,7 @@
     "@types/luxon": "^3.3.0",
     "@types/marked": "^5.0.0",
     "compare-versions": "^6.0.0-rc.2",
-    "diff2html": "^3.4.35",
+    "diff2html": "^3.4.46",
     "eslint-config-enpitech": "^1.0.9",
     "flowbite": "^1.6.6",
     "flowbite-react": "^0.4.9",
@@ -78,7 +78,7 @@
     "prettier": "npx prettier src/ --check",
     "prettier:fix": "npm run prettier -- --write",
     "cypress:open": "cypress open",
-    "cypress:run": "cypress run"  
+    "cypress:run": "cypress run"
   },
   "keywords": [],
   "author": "",

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"