test(embed): write unit tests for embed generator utility functions

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,

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', () => {});
+});

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', () => {});
+});

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()', () => {});
+});

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)]);