From ff35be7ae1f52060d8b1663e41fa9bd66105802a Mon Sep 17 00:00:00 2001
From: Eric Cabrel TIOGO <tericcabrel@yahoo.com>
Date: Fri, 14 Oct 2022 23:44:16 +0200
Subject: [PATCH] test(embed): write unit tests for embed generator utility
 functions

---
 .../src/renderer/content/html-generator.ts    | 11 +--
 .../content/tests/html-generator.test.ts      |  5 ++
 .../content/tests/preview-template.test.ts    |  5 ++
 .../src/renderer/content/tests/utils.test.ts  | 81 +++++++++++++++++++
 packages/embed/src/renderer/content/utils.ts  | 13 ++-
 5 files changed, 105 insertions(+), 10 deletions(-)
 create mode 100644 packages/embed/src/renderer/content/tests/html-generator.test.ts
 create mode 100644 packages/embed/src/renderer/content/tests/preview-template.test.ts
 create mode 100644 packages/embed/src/renderer/content/tests/utils.test.ts

diff --git a/packages/embed/src/renderer/content/html-generator.ts b/packages/embed/src/renderer/content/html-generator.ts
index 043dd707..d82fd49f 100644
--- a/packages/embed/src/renderer/content/html-generator.ts
+++ b/packages/embed/src/renderer/content/html-generator.ts
@@ -2,7 +2,7 @@ import { Snippet } from '@sharingan/database';
 import { Lang } from 'shiki';
 
 import { Shiki } from '../types';
-import { addWhitespaceForEmptyLine, generateLineHighlightOptions } from './utils';
+import { generateLineHighlightOptions, parseHTMLSnippetCode } from './utils';
 
 export const generateNoSnippetHtmlContent = (webAppUrl: string) => {
   return `<div class="no-content">
@@ -25,14 +25,7 @@ export const generateSnippetHtmlContent = async ({ shiki, snippet }: { shiki: Sh
 
   const backgroundColor = highlighter.getBackgroundColor();
 
-  const html = snippetCodeHtml
-    .replace(/<pre class="shiki" style="background-color: \#[\w]{6}">/, '')
-    .replace('</pre>', '')
-    .split('\n')
-    .map((line: string, i: number) => {
-      return `<span class='line-number'>${i + 1}</span>${addWhitespaceForEmptyLine(line)}`;
-    })
-    .join('\n');
+  const html = parseHTMLSnippetCode(snippetCodeHtml);
 
   return {
     backgroundColor,
diff --git a/packages/embed/src/renderer/content/tests/html-generator.test.ts b/packages/embed/src/renderer/content/tests/html-generator.test.ts
new file mode 100644
index 00000000..168b1a0b
--- /dev/null
+++ b/packages/embed/src/renderer/content/tests/html-generator.test.ts
@@ -0,0 +1,5 @@
+describe('Test HTML generator functions', () => {
+  it('should generates html content for a non existing code snippet', () => {});
+
+  it('should generates html content for a code snippet', () => {});
+});
diff --git a/packages/embed/src/renderer/content/tests/preview-template.test.ts b/packages/embed/src/renderer/content/tests/preview-template.test.ts
new file mode 100644
index 00000000..2df93aad
--- /dev/null
+++ b/packages/embed/src/renderer/content/tests/preview-template.test.ts
@@ -0,0 +1,5 @@
+describe('Test generateHTMLPreview()', () => {
+  it('should generates the html preview for a non existing code snippet', () => {});
+
+  it('should generates the html preview for a code snippet', () => {});
+});
diff --git a/packages/embed/src/renderer/content/tests/utils.test.ts b/packages/embed/src/renderer/content/tests/utils.test.ts
new file mode 100644
index 00000000..d57d0cd5
--- /dev/null
+++ b/packages/embed/src/renderer/content/tests/utils.test.ts
@@ -0,0 +1,81 @@
+import { addWhitespaceForEmptyLine, generateLineHighlightOptions } from '../utils';
+
+describe('Test utils functions', () => {
+  describe('Test addWhitespaceForEmptyLine()', () => {
+    it('should create not whitespace for a simple span tag', () => {
+      // GIVEN
+      const line = `<span></span>`;
+
+      // WHEN
+      const result = addWhitespaceForEmptyLine(line);
+      // THEN
+
+      expect(result).toEqual(`<span></span>`);
+    });
+
+    it('should create whitespace for a code line', () => {
+      // GIVEN
+      const line = `<span class="line"></span>`;
+
+      // WHEN
+      const result = addWhitespaceForEmptyLine(line);
+
+      // THEN
+      expect(result).toEqual(`<span class="line">&nbsp;&nbsp;</span>`);
+    });
+
+    it('should create whitespace for a code line with highlight', () => {
+      // GIVEN
+      const line = `<span class="line line-diff-add"></span>`;
+
+      // WHEN
+      const result = addWhitespaceForEmptyLine(line);
+      // THEN
+
+      expect(result).toEqual(`<span class="line line-diff-add">&nbsp;&nbsp;</span>`);
+    });
+  });
+
+  describe.only('Test generateLineHighlightOptions()', () => {
+    it('should generate no line highlight options from a null string', () => {
+      // GIVEN
+      const lineHighlight: string | null = null;
+
+      // WHEN
+      const result = generateLineHighlightOptions(lineHighlight);
+
+      // THEN
+      expect(result).toMatchObject([]);
+    });
+
+    it('should generate no line highlight options from an empty string', () => {
+      // GIVEN
+      const lineHighlight = `[]`;
+
+      // WHEN
+      const result = generateLineHighlightOptions(lineHighlight);
+
+      // THEN
+      expect(result).toMatchObject([]);
+    });
+
+    it('should generate line highlight options from string', () => {
+      // GIVEN
+      const lineHighlight = `[[3,"delete"],[6,"blur"],[7,"add"]]`;
+
+      // WHEN
+      const result = generateLineHighlightOptions(lineHighlight);
+
+      // THEN
+      const expectedResult = [
+        { classes: ['line-diff line-diff-delete'], line: 3 },
+        { classes: ['line-diff line-diff-blur'], line: 6 },
+        { classes: ['line-diff line-diff-add'], line: 7 },
+      ];
+
+      expect(result).toMatchObject(expectedResult);
+    });
+  });
+
+  describe('Test parseHTMLSnippetCode()', () => {});
+});
diff --git a/packages/embed/src/renderer/content/utils.ts b/packages/embed/src/renderer/content/utils.ts
index 5f5d899c..dd0cbfda 100644
--- a/packages/embed/src/renderer/content/utils.ts
+++ b/packages/embed/src/renderer/content/utils.ts
@@ -13,7 +13,7 @@ export const generateLineHighlightOptions = (lineHighlight: string | null) => {
  * @param line
  */
 export const addWhitespaceForEmptyLine = (line: string) => {
-  if (/<span class="line (line-diff-?[a-z ]*)*"><\/span>/.test(line)) {
+  if (/<span class="line( line-diff-?[a-z ]*)*"><\/span>/.test(line)) {
     const [openingBracket] = line.split('</span>');
 
     return `${openingBracket}&nbsp;&nbsp;</span>`;
@@ -22,6 +22,17 @@ export const addWhitespaceForEmptyLine = (line: string) => {
   return line;
 };
 
+export const parseHTMLSnippetCode = (snippetCodeHtml: string) => {
+  return snippetCodeHtml
+    .replace(/<pre class="shiki" style="background-color: \#[\w]{6}">/, '')
+    .replace('</pre>', '')
+    .split('\n')
+    .map((line: string, i: number) => {
+      return `<span class='line-number'>${i + 1}</span>${addWhitespaceForEmptyLine(line)}`;
+    })
+    .join('\n');
+};
+
 export const generateRandomString = (strLength: number) => {
   const chars = 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890';
   const randomArray = Array.from({ length: strLength }, () => chars[Math.floor(Math.random() * chars.length)]);