add test for github issue and setup msw

ui/package.json

@@ -46,7 +46,6 @@
 		"papaparse": "^5.4.1",
 		"react": "^18.2.0",
 		"react-cookie-consent": "^8.0.1",
-		"react-csv": "^2.2.2",
 		"react-dom": "^18.2.0",
 		"react-error-boundary": "^4.0.10",
 		"react-ga4": "^2.1.0",
@@ -104,6 +103,7 @@
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-react-refresh": "^0.4.3",
 		"jsdom": "^22.1.0",
+		"msw": "^1.3.2",
 		"typescript": "^5.0.2",
 		"vite": "^4.4.6",
 		"vite-plugin-svgr": "^3.2.0",

ui/src/mocks/handlers.ts

@@ -0,0 +1,15 @@
+import { rest } from "msw";
+
+export const handlers = [
+	rest.post(
+		"https://api.github.com/repos/:owner/:repo/issues",
+		(_, res, ctx) => {
+			return res(
+				ctx.json({
+					title: "Created Issue",
+					html_url: "https://github.com/owner/repo/issues/1",
+				})
+			);
+		}
+	),
+];

ui/src/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers";
+
+export const server = setupServer(...handlers);

ui/src/pages/Automation/GithubIssue/GithubIssue.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import GithubIssue from ".";
+
+describe(`#GithubIssue`, () => {
+	test("render component without a crash", () => {
+		render(<GithubIssue />);
+	});
+
+	test("Saved Issue", async () => {
+		render(<GithubIssue />);
+
+		const exists = await screen.findByText("Saved Issue");
+		expect(exists).toBeInTheDocument();
+
+		const downloadButton = screen.getByText(/Download csv/i);
+
+		expect(downloadButton).toBeInTheDocument();
+		expect(downloadButton).not.toBeDisabled();
+	});
+});

ui/src/pages/Automation/GithubIssue/components/DownloadCsv.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { SavedIssueType } from "pages/Automation/GithubIssue/types";
+import { Button } from "antd";
+import { saveAs } from "file-saver";
+import { generateCsvData } from "pages/Automation/GithubIssue/utils/helper";
+
+interface DownloadCsvProps {
+	savedIssues: SavedIssueType[];
+}
+
+const DownloadCsv: React.FC<DownloadCsvProps> = ({ savedIssues }) => {
+	const downloadCSV = () => {
+		const csvContent = generateCsvData(savedIssues);
+
+		const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8" });
+		saveAs(blob, "data.csv");
+	};
+	return (
+		<Button disabled={savedIssues.length === 0} onClick={downloadCSV}>
+			Download CSV
+		</Button>
+	);
+};
+
+export default DownloadCsv;

ui/src/pages/Automation/GithubIssue/index.tsx

@@ -5,11 +5,11 @@ import PageGrid from "components/Layouts/PageGrid";
 import React, { useState } from "react";
 import Papa from "papaparse";
 import CsvTable from "./components/CsvTable";
-import { CSVLink } from "react-csv";
 import { calculateSteps, createGitHubIssue } from "./utils/helper";
 import { steps } from "./utils/constants";
 import { IssueType, SavedIssueType } from "./types";
 import ErrorComponent from "components/General/ErrorComponent";
+import DownloadCsv from "./components/DownloadCsv";
 
 const GithubIssue: React.FC = () => {
 	//? input state
@@ -164,11 +164,8 @@ const GithubIssue: React.FC = () => {
 
 				<CsvTable data={savedIssues} />
 				<br />
-				<CSVLink data={savedIssues} filename={"csv_data.csv"}>
-					<Button disabled={savedIssues.length === 0}>
-						Download CSV
-					</Button>
-				</CSVLink>
+
+				<DownloadCsv savedIssues={savedIssues} />
 			</Card>
 		</PageGrid>
 	);

ui/src/pages/Automation/GithubIssue/utils/helper.ts

@@ -71,4 +71,19 @@ const calculateSteps = (
 	}
 };
 
-export { createGitHubIssue, calculateSteps };
+function generateCsvData(data: SavedIssueType[]) {
+	// Create a CSV header
+	const csvHeader = ["title", "url"];
+
+	// Convert the data to a CSV string
+	const csvContent = [
+		csvHeader,
+		...data.map((item) => [item.title, item.url]),
+	]
+		.map((row) => row.join(","))
+		.join("\n");
+
+	return csvContent;
+}
+
+export { createGitHubIssue, calculateSteps, generateCsvData };

ui/src/test/setup.ts

@@ -1,4 +1,6 @@
 import "@testing-library/jest-dom";
+import { server } from "mocks/server";
+import { afterAll, afterEach, beforeAll } from "vitest";
 
 Object.defineProperty(window, "matchMedia", {
 	value: () => {
@@ -9,3 +11,9 @@ Object.defineProperty(window, "matchMedia", {
 		};
 	},
 });
+
+beforeAll(() => server.listen());
+
+afterEach(() => server.resetHandlers());
+
+afterAll(() => server.close());