Repository: mermaid-js/mermaid
File: packages/mermaid/src/mermaidAPI.spec.ts (TypeScript)

Code before:
      expect(svgNode.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
    });
    jsdomIt('sets the  svg xlink if one is given', ({ body }) => {
      appendDivSvgG(body, 'theId', 'dtheId', 'div style', 'given x link');
      const svgNode = ensureNodeFromSelector('div > svg');
      expect(svgNode.getAttribute('xmlns:xlink')).toBe('given x link');
    });
    jsdomIt('returns the given parentRoot d3 nodes', ({ body }) => {
      expect(appendDivSvgG(body, 'theId', 'dtheId')).toEqual(body);
    });
  });

  describe('createCssStyles', () => {
    const serif = 'serif';
    const sansSerif = 'sans-serif';
    const mocked_config_with_htmlLabels: MermaidConfig = {
      themeCSS: 'default',
      fontFamily: serif,
      altFontFamily: sansSerif,
      htmlLabels: true,
    };

    beforeEach(() => {
      configApi.reset();
      configApi.saveConfigFromInitialize({});
    });

    it('gets the cssStyles from the theme', () => {
      configApi.setSiteConfig(mocked_config_with_htmlLabels);
      const config = configApi.getConfig();
      const styles = createCssStyles(config, null);
      expect(styles).toMatch(/^\ndefault(.*)/);
    });
    it('gets the fontFamily from the config', () => {
      configApi.setSiteConfig(mocked_config_with_htmlLabels);
      const config = configApi.getConfig();
      const styles = createCssStyles(config, new Map());
      expect(styles).toMatch(/(.*)\n:root { --mermaid-font-family: serif(.*)/);
    });
    it('gets the alt fontFamily from the config', () => {
      configApi.setSiteConfig(mocked_config_with_htmlLabels);
      const config = configApi.getConfig();
      const styles = createCssStyles(config, undefined);
      expect(styles).toMatch(/(.*)\n:root { --mermaid-alt-font-family: sans-serif(.*)/);
    });

    describe('there are some classDefs', () => {
      const classDef1 = { id: 'classDef1', styles: ['style1-1', 'style1-2'], textStyles: [] };
      const classDef2 = { id: 'classDef2', styles: [], textStyles: ['textStyle2-1'] };
      const classDef3 = { id: 'classDef3', textStyles: ['textStyle3-1', 'textStyle3-2'] };
      const classDefs = { classDef1, classDef2, classDef3 };

Review comment (bug):
**suggestion**: Same here, I ran `git restore --source=develop packages/mermaid/src/mermaidAPI.spec.ts` and the only failing test was `no htmlLabels in the configuration`, so that's the only one we need to change.

Code after:
      expect(svgNode.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
    });
    jsdomIt('sets the  svg xlink if one is given', ({ body }) => {
      appendDivSvgG(body, 'theId', 'dtheId', 'div style', 'given x link');
      const svgNode = ensureNodeFromSelector('div > svg');
      expect(svgNode.getAttribute('xmlns:xlink')).toBe('given x link');
    });
    jsdomIt('returns the given parentRoot d3 nodes', ({ body }) => {
      expect(appendDivSvgG(body, 'theId', 'dtheId')).toEqual(body);
    });
  });

  describe('createCssStyles', () => {
    const serif = 'serif';
    const sansSerif = 'sans-serif';
    const mocked_config_with_htmlLabels: MermaidConfig = {
      themeCSS: 'default',
      fontFamily: serif,
      altFontFamily: sansSerif,
      htmlLabels: true,
    };

    it('gets the cssStyles from the theme', () => {
      const styles = createCssStyles(mocked_config_with_htmlLabels, null);
      expect(styles).toMatch(/^\ndefault(.*)/);
    });
    it('gets the fontFamily from the config', () => {
      const styles = createCssStyles(mocked_config_with_htmlLabels, new Map());
      expect(styles).toMatch(/(.*)\n:root { --mermaid-font-family: serif(.*)/);
    });
    it('gets the alt fontFamily from the config', () => {
      const styles = createCssStyles(mocked_config_with_htmlLabels, undefined);
      expect(styles).toMatch(/(.*)\n:root { --mermaid-alt-font-family: sans-serif(.*)/);
    });

    describe('there are some classDefs', () => {
      const classDef1 = { id: 'classDef1', styles: ['style1-1', 'style1-2'], textStyles: [] };
      const classDef2 = { id: 'classDef2', styles: [], textStyles: ['textStyle2-1'] };
      const classDef3 = { id: 'classDef3', textStyles: ['textStyle3-1', 'textStyle3-2'] };
      const classDefs = { classDef1, classDef2, classDef3 };

      describe('the graph supports classDefs', () => {
        const REGEXP_SPECIALS = ['^', '$', '?', '(', '{', '[', '.', '*', '!'];

        // prefix any special RegExp characters in the given string with a \ so we can use the literal character in a RegExp
        function escapeForRegexp(str: string) {
          const strChars = [...str]; // split into array of every char
          const strEscaped = strChars.map((char) => {
            if (REGEXP_SPECIALS.includes(char)) {
              return `\\${char}`;
            } else {