update toc test and refactor

ui/TESTING.md

@@ -12,15 +12,15 @@
 | 8   | Sorting            | Yes    |
 | 9   | Text Editor        | Yes    |
 | 10  | News               | Yes    |
+| 11  | Table Of Content   | Yes    |
 
 | No  | Name                     | Status |
 | --- | ------------------------ | ------ |
 | 11  | Data Generator           | No     |
 | 12  | Markdown Editor          | No     |
 | 13  | Markdown Table Generator | No     |
-| 14  | Table Of Content         | No     |
-| 15  | List                     | No     |
-| 16  | Border Radius            | No     |
+| 14  | List                     | No     |
+| 15  | Border Radius            | No     |
 
 # Components
 

ui/src/pages/Markdown/TableOfContent/__tests__/TableOfContent.test.tsx

@@ -1,9 +1,52 @@
-import { render } from "@testing-library/react";
-import { TableOfContent } from "pages/pages";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, test } from "vitest";
+import TableOfContent from "..";
 
 describe("Table Of content", () => {
 	test("Render component without crash", () => {
 		render(<TableOfContent />);
 	});
+
+	test("show empty text when there is no value", () => {
+		render(<TableOfContent />);
+
+		const text = screen.getByText(
+			"There is no data for TOC, please provide data first."
+		);
+
+		expect(text).toBeInTheDocument();
+	});
+
+	test("write test based on url", () => {
+		render(<TableOfContent />);
+
+		const url = `https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/main/README.md`;
+		const inputElement = screen.getByPlaceholderText(/url/i);
+
+		fireEvent.change(inputElement, {
+			target: {
+				value: url,
+			},
+		});
+
+		expect(inputElement).toBeInTheDocument();
+		expect(inputElement).toHaveValue(url);
+	});
+
+	test("Update the table of contents when the markdown content changes", () => {
+		render(<TableOfContent />);
+		const tocInput = screen.getByTestId("toc-input");
+		expect(tocInput).toBeInTheDocument();
+
+		fireEvent.change(tocInput, {
+			target: { value: "# New Heading 1\n## New Heading 2" },
+		});
+
+		const tocOutput = screen.getByTestId("toc-output");
+
+		expect(tocOutput).toBeInTheDocument();
+		expect(tocOutput).not.toHaveValue(
+			"[New Heading 1](#new-heading-1)\n[New Heading 2](#new-heading-2)"
+		);
+	});
 });

ui/src/pages/Markdown/TableOfContent/index.tsx

@@ -65,7 +65,7 @@ const TableOfContent: React.FC = () => {
 		return `[${text}](#${getUniqueHeadingText(text)
 			.toLowerCase()
 			.replace(/\s/g, "-")
-			.replace(/[^A-Za-z0-9-_]/g, "")})`;
+			.replace(/[^A-Za-z0-9-\u0980-\u09FF_]+/g, "")})`;
 	};
 
 	const generateTableOfContentsText = (tableOfContents: TocItem[]) => {
@@ -123,6 +123,7 @@ const TableOfContent: React.FC = () => {
 								onMarkdownChange(event.currentTarget.value)
 							}
 							autoSize={false}
+							data-testid="toc-input"
 						/>
 					</Form.Item>
 				</Form>
@@ -140,6 +141,7 @@ const TableOfContent: React.FC = () => {
 								value={tableOfContents}
 								className={style.toc__textarea}
 								autoSize={false}
+								data-testid="toc-output"
 							/>
 						</Form.Item>
 					</Form>