From 32750fa2af522e1aea9eb9b9f407fc2de629efa8 Mon Sep 17 00:00:00 2001
From: pal-sig <88981777+pal-sig@users.noreply.github.com>
Date: Thu, 2 Dec 2021 18:38:49 +0530
Subject: [PATCH] FEAT(UI): Test case for alerts  (#414)

* chore(UI): test case is fixed

* chore(UI): test case for the alerts is updated
---
 frontend/cypress/fixtures/defaultRules.json   |  28 ++++
 .../integration/globalTime/default.spec.ts    |   2 +-
 .../cypress/integration/rules/index.spec.ts   | 128 ++++++++++++++++++
 frontend/src/pages/EditRules/index.tsx        |  12 +-
 4 files changed, 163 insertions(+), 7 deletions(-)
 create mode 100644 frontend/cypress/fixtures/defaultRules.json
 create mode 100644 frontend/cypress/integration/rules/index.spec.ts

diff --git a/frontend/cypress/fixtures/defaultRules.json b/frontend/cypress/fixtures/defaultRules.json
new file mode 100644
index 0000000000..bc0ca42ec9
--- /dev/null
+++ b/frontend/cypress/fixtures/defaultRules.json
@@ -0,0 +1,28 @@
+{
+	"status": "success",
+	"data": {
+		"rules": [
+			{
+				"labels": { "severity": "warning" },
+				"annotations": {},
+				"state": "firing",
+				"name": "First Rule",
+				"id": 1
+			},
+			{
+				"labels": { "severity": "warning" },
+				"annotations": {},
+				"state": "firing",
+				"name": "Second Rule",
+				"id": 2
+			},
+			{
+				"labels": { "severity": "P0" },
+				"annotations": {},
+				"state": "firing",
+				"name": "Third Rule",
+				"id": 3
+			}
+		]
+	}
+}
diff --git a/frontend/cypress/integration/globalTime/default.spec.ts b/frontend/cypress/integration/globalTime/default.spec.ts
index 249bcf30c6..70e03e9221 100644
--- a/frontend/cypress/integration/globalTime/default.spec.ts
+++ b/frontend/cypress/integration/globalTime/default.spec.ts
@@ -20,7 +20,7 @@ describe('default time', () => {
 
 	it('Trace Page default time', () => {
 		cy.checkDefaultGlobalOption({
-			route: ROUTES.TRACES,
+			route: ROUTES.TRACE,
 		});
 	});
 
diff --git a/frontend/cypress/integration/rules/index.spec.ts b/frontend/cypress/integration/rules/index.spec.ts
new file mode 100644
index 0000000000..0ac59b3052
--- /dev/null
+++ b/frontend/cypress/integration/rules/index.spec.ts
@@ -0,0 +1,128 @@
+/// <reference types="cypress" />
+
+import ROUTES from 'constants/routes';
+
+import defaultRules from '../../fixtures/defaultRules.json';
+
+describe('Alerts', () => {
+	beforeEach(() => {
+		window.localStorage.setItem('isLoggedIn', 'yes');
+
+		cy
+			.intercept('get', '*rules*', {
+				fixture: 'defaultRules',
+			})
+			.as('defaultRules');
+
+		cy.visit(Cypress.env('baseUrl') + `${ROUTES.LIST_ALL_ALERT}`);
+
+		cy.wait('@defaultRules');
+	});
+
+	it('Edit Rules Page Failure', async () => {
+		cy
+			.intercept('**/rules/**', {
+				statusCode: 500,
+			})
+			.as('Get Rules Error');
+
+		cy.get('button.ant-btn.ant-btn-link:nth-child(2)').then((e) => {
+			const firstDelete = e[0];
+			firstDelete.click();
+
+			cy.waitFor('@Get Rules Error');
+
+			cy
+				.window()
+				.location()
+				.then((e) => {
+					expect(e.pathname).to.be.equals(`/alerts/edit/1`);
+				});
+
+			cy.findByText('Something went wrong').then((e) => {
+				expect(e.length).to.be.equals(1);
+			});
+		});
+	});
+
+	it('Edit Rules Page Success', async () => {
+		const text = 'this is the sample value';
+
+		cy
+			.intercept('**/rules/**', {
+				statusCode: 200,
+				body: {
+					data: {
+						data: text,
+					},
+				},
+			})
+			.as('Get Rules Success');
+
+		cy.get('button.ant-btn.ant-btn-link:nth-child(2)').then((e) => {
+			const firstDelete = e[0];
+			firstDelete.click();
+
+			cy.waitFor('@Get Rules Success');
+
+			cy.wait(1000);
+
+			cy.findByText('Save').then((e) => {
+				const [el] = e.get();
+
+				el.click();
+			});
+		});
+	});
+
+	it('All Rules are rendered correctly', async () => {
+		cy
+			.window()
+			.location()
+			.then(({ pathname }) => {
+				expect(pathname).to.be.equals(ROUTES.LIST_ALL_ALERT);
+
+				cy.get('tbody').then((e) => {
+					const tarray = e.children().get();
+
+					expect(tarray.length).to.be.equals(3);
+
+					tarray.forEach(({ children }, index) => {
+						const name = children[1]?.textContent;
+						const label = children[2]?.textContent;
+
+						expect(name).to.be.equals(defaultRules.data.rules[index].name);
+
+						const defaultLabels = defaultRules.data.rules[index].labels;
+
+						expect(label).to.be.equals(defaultLabels['severity']);
+					});
+				});
+			});
+	});
+
+	it('Rules are Deleted', async () => {
+		cy
+			.intercept('**/rules/**', {
+				body: {
+					data: 'Deleted',
+					message: 'Success',
+				},
+				statusCode: 200,
+			})
+			.as('deleteRules');
+
+		cy.get('button.ant-btn.ant-btn-link:first-child').then((e) => {
+			const firstDelete = e[0];
+
+			firstDelete.click();
+		});
+
+		cy.wait('@deleteRules');
+
+		cy.get('tbody').then((e) => {
+			const trray = e.children().get();
+			expect(trray.length).to.be.equals(2);
+		});
+	});
+});
diff --git a/frontend/src/pages/EditRules/index.tsx b/frontend/src/pages/EditRules/index.tsx
index 699b4ac92e..dd4e28e231 100644
--- a/frontend/src/pages/EditRules/index.tsx
+++ b/frontend/src/pages/EditRules/index.tsx
@@ -2,11 +2,11 @@ import get from 'api/alerts/get';
 import Spinner from 'components/Spinner';
 import EditRulesContainer from 'container/EditRules';
 import useFetch from 'hooks/useFetch';
-import React, { useCallback, useRef } from 'react';
+import React from 'react';
 import { useParams } from 'react-router';
 import { PayloadProps, Props } from 'types/api/alerts/get';
 
-const EditRules = () => {
+const EditRules = (): JSX.Element => {
 	const { ruleId } = useParams<EditRulesParam>();
 
 	const { loading, error, payload, errorMessage } = useFetch<
@@ -16,14 +16,14 @@ const EditRules = () => {
 		id: parseInt(ruleId),
 	});
 
-	if (loading || payload === undefined) {
-		return <Spinner tip="Loading Rules..." />;
-	}
-
 	if (error) {
 		return <div>{errorMessage}</div>;
 	}
 
+	if (loading || payload === undefined) {
+		return <Spinner tip="Loading Rules..." />;
+	}
+
 	return <EditRulesContainer ruleId={ruleId} initialData={payload.data} />;
 };