Add tests without Intl.Segmenter

packages/mermaid/src/rendering-util/createText.ts

@@ -14,11 +14,7 @@ function applyStyle(dom, styleFn) {
 
 function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const fo = element.append('foreignObject');
-  // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-  // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
   const div = fo.append('xhtml:div');
-  // const div = body.append('div');
-  // const div = fo.append('div');
 
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
@@ -130,7 +126,6 @@ function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) {
       .attr('font-style', word.type === 'emphasis' ? 'italic' : 'normal')
       .attr('class', 'text-inner-tspan')
       .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
-    // const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
     if (index === 0) {
       innerTspan.text(word.content);
     } else {

packages/mermaid/src/rendering-util/splitText.spec.ts

@@ -1,7 +1,8 @@
 import { splitTextToChars, splitLineToFitWidth, splitLineToWords } from './splitText.js';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import type { CheckFitFunction, MarkdownLine, MarkdownWordType } from './types.js';
 
+describe('when Intl.Segmenter is available', () => {
   describe('splitText', () => {
     it.each([
       { str: '', split: [] },
@@ -14,20 +15,6 @@ describe('splitText', () => {
   });
 
   describe('split lines', () => {
-  /**
-   * Creates a checkFunction for a given width
-   * @param width - width of characters to fit in a line
-   * @returns checkFunction
-   */
-  const createCheckFn = (width: number): CheckFitFunction => {
-    return (text: MarkdownLine) => {
-      // Join all words into a single string
-      const joinedContent = text.map((w) => w.content).join('');
-      const characters = splitTextToChars(joinedContent);
-      return characters.length <= width;
-    };
-  };
-
     it('should create valid checkFit function', () => {
       const checkFit5 = createCheckFn(5);
       expect(checkFit5([{ content: 'hello', type: 'normal' }])).toBe(true);
@@ -68,10 +55,60 @@ describe('split lines', () => {
         const checkFn = createCheckFn(width);
         const line: MarkdownLine = getLineFromString(str);
         expect(splitLineToFitWidth(line, checkFn)).toEqual(
-        split.map((str) => splitLineToWords(str).map((content) => ({ content, type: 'normal' })))
+          split.map((str) => getLineFromString(str))
         );
       }
     );
+  });
+});
+
+describe('when Intl.segmenter is not available', () => {
+  beforeAll(() => {
+    vi.stubGlobal('Intl', { Segmenter: undefined });
+  });
+  afterAll(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it.each([
+    { str: '', split: [] },
+    {
+      str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻',
+      split: [...'🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻'],
+    },
+    { str: 'ok', split: ['o', 'k'] },
+    { str: 'abc', split: ['a', 'b', 'c'] },
+  ])('should split $str into characters', ({ str, split }: { str: string; split: string[] }) => {
+    expect(splitTextToChars(str)).toEqual(split);
+  });
+
+  it.each([
+    // empty string
+    { str: 'hello world', width: 7, split: ['hello', 'world'] },
+    // width > full line
+    { str: 'hello world', width: 20, split: ['hello world'] },
+    // width < individual word
+    { str: 'hello world', width: 3, split: ['hel', 'lo', 'wor', 'ld'] },
+    { str: 'hello 12 world', width: 4, split: ['hell', 'o 12', 'worl', 'd'] },
+    { str: 'hello  1 2 world', width: 4, split: ['hell', 'o  1', '2', 'worl', 'd'] },
+    { str: 'hello  1 2 world', width: 6, split: ['hello', ' 1 2', 'world'] },
+    // width = 0, impossible, so split into individual characters
+    { str: 'abc', width: 0, split: ['a', 'b', 'c'] },
+    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 1, split: [...'🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻'] },
+    { str: '中文中', width: 1, split: ['中', '文', '中'] },
+    { str: '中文中', width: 2, split: ['中文', '中'] },
+    { str: '中文中', width: 3, split: ['中文中'] },
+  ])(
+    'should split $str into lines of $width characters',
+    ({ str, split, width }: { str: string; width: number; split: string[] }) => {
+      const checkFn = createCheckFn(width);
+      const line: MarkdownLine = getLineFromString(str);
+      expect(splitLineToFitWidth(line, checkFn)).toEqual(
+        split.map((str) => getLineFromString(str))
+      );
+    }
+  );
+});
 
 it('should handle strings with newlines', () => {
   const checkFn: CheckFitFunction = createCheckFn(6);
@@ -83,7 +120,6 @@ describe('split lines', () => {
     '"splitLineToFitWidth does not support newlines in the line"'
   );
 });
-});
 
 const getLineFromString = (str: string, type: MarkdownWordType = 'normal'): MarkdownLine => {
   return splitLineToWords(str).map((content) => ({
@@ -91,3 +127,17 @@ const getLineFromString = (str: string, type: MarkdownWordType = 'normal'): Mark
     type,
   }));
 };
+
+/**
+ * Creates a checkFunction for a given width
+ * @param width - width of characters to fit in a line
+ * @returns checkFunction
+ */
+const createCheckFn = (width: number): CheckFitFunction => {
+  return (text: MarkdownLine) => {
+    // Join all words into a single string
+    const joinedContent = text.map((w) => w.content).join('');
+    const characters = splitTextToChars(joinedContent);
+    return characters.length <= width;
+  };
+};

packages/mermaid/src/rendering-util/splitText.ts

@@ -22,7 +22,7 @@ export function splitLineToWords(text: string): string[] {
   // Split by ' ' removes the ' 's from the result.
   const words = text.split(' ');
   // Add the ' 's back to the result.
-  const wordsWithSpaces = words.flatMap((s) => [s, ' ']);
+  const wordsWithSpaces = words.flatMap((s) => [s, ' ']).filter((s) => s);
   // Remove last space.
   wordsWithSpaces.pop();
   return wordsWithSpaces;