diff2html/src/__tests__/side-by-side-printer-tests.ts

import SideBySideRenderer from '../side-by-side-renderer';
import HoganJsUtils from '../hoganjs-utils';
import { LineType, DiffLine, DiffFile, LineMatchingType } from '../types';
import { CSSLineClass } from '../render-utils';

describe('SideBySideRenderer', () => {
  describe('generateEmptyDiff', () => {
    it('should return an empty diff', () => {
      const hoganUtils = new HoganJsUtils({});
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});
      const fileHtml = sideBySideRenderer.generateEmptyDiff();
      expect(fileHtml).toMatchInlineSnapshot(`
        Object {
          "left": "<tr>
            <td class=\\"d2h-info\\">
                <div class=\\"d2h-code-side-line d2h-info\\">
                    File without changes
                </div>
            </td>
        </tr>",
          "right": "",
        }
      `);
    });
  });

  describe('_generateTooBigDiff', () => {
    it('should return a diff with default "too big" message when no `diffTooBigMessage` is defined', () => {
      const hoganUtils = new HoganJsUtils({});
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});
      const fileHtml = sideBySideRenderer.generateTooBigDiff(0);
      expect(fileHtml).toMatchInlineSnapshot(`
        Object {
          "left": "<tr>
            <td class=\\"d2h-info\\">
                <div class=\\"d2h-code-side-line d2h-info\\">
                    Diff too big to be displayed
                </div>
            </td>
        </tr>",
          "right": "",
        }
      `);
    });

    it('should return a diff with custom "too big" message when `diffTooBigMessage` is defined', () => {
      const hoganUtils = new HoganJsUtils({});
      const customMessageFn = (fIndex: number) => `Custom message for file ${fIndex} diff too big`;
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { diffTooBigMessage: customMessageFn });
      const fileHtml = sideBySideRenderer.generateTooBigDiff(0);
      expect(fileHtml).toMatchInlineSnapshot(`
        Object {
          "left": "<tr>
            <td class=\\"d2h-info\\">
                <div class=\\"d2h-code-side-line d2h-info\\">
                    Custom message for file 0 diff too big
                </div>
            </td>
        </tr>",
          "right": "",
        }
      `);
    });
  });

  describe('generateSideBySideFileHtml', () => {
    it('should generate lines with the right prefixes', () => {
      const hoganUtils = new HoganJsUtils({});
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});

      const file: DiffFile = {
        isGitDiff: true,
        blocks: [
          {
            lines: [
              {
                content: ' context',
                type: LineType.CONTEXT,
                oldNumber: 19,
                newNumber: 19,
              },
              {
                content: '-removed',
                type: LineType.DELETE,
                oldNumber: 20,
                newNumber: undefined,
              },
              {
                content: '+added',
                type: LineType.INSERT,
                oldNumber: undefined,
                newNumber: 20,
              },
              {
                content: '+another added',
                type: LineType.INSERT,
                oldNumber: undefined,
                newNumber: 21,
              },
            ],
            oldStartLine: 19,
            newStartLine: 19,
            header: '@@ -19,7 +19,7 @@',
          },
        ],
        deletedLines: 1,
        addedLines: 2,
        checksumBefore: 'fc56817',
        checksumAfter: 'e8e7e49',
        mode: '100644',
        oldName: 'coverage.init',
        language: 'init',
        newName: 'coverage.init',
        isCombined: false,
      };

      const fileHtml = sideBySideRenderer.generateFileHtml(file);

      expect(fileHtml).toMatchInlineSnapshot(`
        Object {
          "left": "<tr>
            <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
            <td class=\\"d2h-info\\">
                <div class=\\"d2h-code-side-line d2h-info\\">@@ -19,7 +19,7 @@</div>
            </td>
        </tr><tr>
            <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
              19
            </td>
            <td class=\\"d2h-cntx\\">
                <div class=\\"d2h-code-side-line d2h-cntx\\">
                    <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
                    <span class=\\"d2h-code-line-ctn\\">context</span>
                </div>
            </td>
        </tr><tr>
            <td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
              20
            </td>
            <td class=\\"d2h-del d2h-change\\">
                <div class=\\"d2h-code-side-line d2h-del d2h-change\\">
                    <span class=\\"d2h-code-line-prefix\\">-</span>
                    <span class=\\"d2h-code-line-ctn\\"><del>removed</del></span>
                </div>
            </td>
        </tr><tr>
            <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
              
            </td>
            <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
                <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
                    <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
                    <span class=\\"d2h-code-line-ctn\\"><br></span>
                </div>
            </td>
        </tr>",
          "right": "<tr>
            <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
            <td class=\\"d2h-info\\">
                <div class=\\"d2h-code-side-line d2h-info\\"></div>
            </td>
        </tr><tr>
            <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
              19
            </td>
            <td class=\\"d2h-cntx\\">
                <div class=\\"d2h-code-side-line d2h-cntx\\">
                    <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
                    <span class=\\"d2h-code-line-ctn\\">context</span>
                </div>
            </td>
        </tr><tr>
            <td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
              20
            </td>
            <td class=\\"d2h-ins d2h-change\\">
                <div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
                    <span class=\\"d2h-code-line-prefix\\">+</span>
                    <span class=\\"d2h-code-line-ctn\\"><ins>added</ins></span>
                </div>
            </td>
        </tr><tr>
            <td class=\\"d2h-code-side-linenumber d2h-ins\\">
              21
            </td>
            <td class=\\"d2h-ins\\">
                <div class=\\"d2h-code-side-line d2h-ins\\">
                    <span class=\\"d2h-code-line-prefix\\">+</span>
                    <span class=\\"d2h-code-line-ctn\\">another added</span>
                </div>
            </td>
        </tr>",
        }
      `);
    });
  });

  describe('generateSingleLineHtml', () => {
    it('should work for insertions', () => {
      const hoganUtils = new HoganJsUtils({});
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});
      const fileHtml = sideBySideRenderer.generateLineHtml(undefined, {
        type: CSSLineClass.INSERTS,
        prefix: '+',
        content: 'test',
        number: 30,
      });

      expect(fileHtml).toMatchInlineSnapshot(`
        Object {
          "left": "<tr>
            <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
              
            </td>
            <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
                <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
                    <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
                    <span class=\\"d2h-code-line-ctn\\"><br></span>
                </div>
            </td>
        </tr>",
          "right": "<tr>
            <td class=\\"d2h-code-side-linenumber d2h-ins\\">
              30
            </td>
            <td class=\\"d2h-ins\\">
                <div class=\\"d2h-code-side-line d2h-ins\\">
                    <span class=\\"d2h-code-line-prefix\\">+</span>
                    <span class=\\"d2h-code-line-ctn\\">test</span>
                </div>
            </td>
        </tr>",
        }
      `);
    });
    it('should work for deletions', () => {
      const hoganUtils = new HoganJsUtils({});
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});
      const fileHtml = sideBySideRenderer.generateLineHtml(
        {
          type: CSSLineClass.DELETES,
          prefix: '-',
          content: 'test',
          number: 30,
        },
        undefined,
      );

      expect(fileHtml).toMatchInlineSnapshot(`
        Object {
          "left": "<tr>
            <td class=\\"d2h-code-side-linenumber d2h-del\\">
              30
            </td>
            <td class=\\"d2h-del\\">
                <div class=\\"d2h-code-side-line d2h-del\\">
                    <span class=\\"d2h-code-line-prefix\\">-</span>
                    <span class=\\"d2h-code-line-ctn\\">test</span>
                </div>
            </td>
        </tr>",
          "right": "<tr>
            <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
              
            </td>
            <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
                <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
                    <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
                    <span class=\\"d2h-code-line-ctn\\"><br></span>
                </div>
            </td>
        </tr>",
        }
      `);
    });
  });

  describe('generateSideBySideJsonHtml', () => {
    it('should work for list of files', () => {
      const exampleJson: DiffFile[] = [
        {
          blocks: [
            {
              lines: [
                {
                  content: '-test',
                  type: LineType.DELETE,
                  oldNumber: 1,
                  newNumber: undefined,
                },
                {
                  content: '+test1r',
                  type: LineType.INSERT,
                  oldNumber: undefined,
                  newNumber: 1,
                },
              ],
              oldStartLine: 1,
              oldStartLine2: undefined,
              newStartLine: 1,
              header: '@@ -1 +1 @@',
            },
          ],
          deletedLines: 1,
          addedLines: 1,
          checksumBefore: '0000001',
          checksumAfter: '0ddf2ba',
          oldName: 'sample',
          language: 'txt',
          newName: 'sample',
          isCombined: false,
          isGitDiff: true,
        },
      ];

      const hoganUtils = new HoganJsUtils({});
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { matching: LineMatchingType.LINES });
      const html = sideBySideRenderer.render(exampleJson);
      expect(html).toMatchInlineSnapshot(`
        "<div class=\\"d2h-wrapper\\">
            <div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"txt\\">
            <div class=\\"d2h-file-header\\">
              <span class=\\"d2h-file-name-wrapper\\">
            <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
                <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
            </svg>    <span class=\\"d2h-file-name\\">sample</span>
            <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
        <label class=\\"d2h-file-collapse\\">
            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
            Viewed
        </label>
            </div>
            <div class=\\"d2h-files-diff\\">
                <div class=\\"d2h-file-side-diff\\">
                    <div class=\\"d2h-code-wrapper\\">
                        <table class=\\"d2h-diff-table\\">
                            <tbody class=\\"d2h-diff-tbody\\">
                            <tr>
            <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
            <td class=\\"d2h-info\\">
                <div class=\\"d2h-code-side-line d2h-info\\">@@ -1 +1 @@</div>
            </td>
        </tr><tr>
            <td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
              1
            </td>
            <td class=\\"d2h-del d2h-change\\">
                <div class=\\"d2h-code-side-line d2h-del d2h-change\\">
                    <span class=\\"d2h-code-line-prefix\\">-</span>
                    <span class=\\"d2h-code-line-ctn\\"><del>test</del></span>
                </div>
            </td>
        </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class=\\"d2h-file-side-diff\\">
                    <div class=\\"d2h-code-wrapper\\">
                        <table class=\\"d2h-diff-table\\">
                            <tbody class=\\"d2h-diff-tbody\\">
                            <tr>
            <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
            <td class=\\"d2h-info\\">
                <div class=\\"d2h-code-side-line d2h-info\\"></div>
            </td>
        </tr><tr>
            <td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
              1
            </td>
            <td class=\\"d2h-ins d2h-change\\">
                <div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
                    <span class=\\"d2h-code-line-prefix\\">+</span>
                    <span class=\\"d2h-code-line-ctn\\"><ins>test1r</ins></span>
                </div>
            </td>
        </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        </div>"
      `);
    });
    it('should work for files without blocks', () => {
      const exampleJson: DiffFile[] = [
        {
          blocks: [],
          oldName: 'sample',
          language: 'js',
          newName: 'sample',
          isCombined: false,
          addedLines: 0,
          deletedLines: 0,
          isGitDiff: false,
        },
      ];

      const hoganUtils = new HoganJsUtils({});
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});
      const html = sideBySideRenderer.render(exampleJson);
      expect(html).toMatchInlineSnapshot(`
        "<div class=\\"d2h-wrapper\\">
            <div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
            <div class=\\"d2h-file-header\\">
              <span class=\\"d2h-file-name-wrapper\\">
            <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
                <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
            </svg>    <span class=\\"d2h-file-name\\">sample</span>
            <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
        <label class=\\"d2h-file-collapse\\">
            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
            Viewed
        </label>
            </div>
            <div class=\\"d2h-files-diff\\">
                <div class=\\"d2h-file-side-diff\\">
                    <div class=\\"d2h-code-wrapper\\">
                        <table class=\\"d2h-diff-table\\">
                            <tbody class=\\"d2h-diff-tbody\\">
                            <tr>
            <td class=\\"d2h-info\\">
                <div class=\\"d2h-code-side-line d2h-info\\">
                    File without changes
                </div>
            </td>
        </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class=\\"d2h-file-side-diff\\">
                    <div class=\\"d2h-code-wrapper\\">
                        <table class=\\"d2h-diff-table\\">
                            <tbody class=\\"d2h-diff-tbody\\">
                            
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        </div>"
      `);
    });

    it('should work for too big file diff and no custom message fn', () => {
      const exampleJson = [
        {
          blocks: [],
          deletedLines: 0,
          addedLines: 0,
          oldName: 'sample',
          language: 'js',
          newName: 'sample',
          isCombined: false,
          isGitDiff: false,
          isTooBig: true,
        },
      ];

      const hoganUtils = new HoganJsUtils({});
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils);
      const html = sideBySideRenderer.render(exampleJson);
      expect(html).toMatchInlineSnapshot(`
        "<div class=\\"d2h-wrapper\\">
            <div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
            <div class=\\"d2h-file-header\\">
              <span class=\\"d2h-file-name-wrapper\\">
            <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
                <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
            </svg>    <span class=\\"d2h-file-name\\">sample</span>
            <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
        <label class=\\"d2h-file-collapse\\">
            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
            Viewed
        </label>
            </div>
            <div class=\\"d2h-files-diff\\">
                <div class=\\"d2h-file-side-diff\\">
                    <div class=\\"d2h-code-wrapper\\">
                        <table class=\\"d2h-diff-table\\">
                            <tbody class=\\"d2h-diff-tbody\\">
                            <tr>
            <td class=\\"d2h-info\\">
                <div class=\\"d2h-code-side-line d2h-info\\">
                    Diff too big to be displayed
                </div>
            </td>
        </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class=\\"d2h-file-side-diff\\">
                    <div class=\\"d2h-code-wrapper\\">
                        <table class=\\"d2h-diff-table\\">
                            <tbody class=\\"d2h-diff-tbody\\">
                            
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        </div>"
      `);
    });

    it('should work for too big file diff and custom message fn', () => {
      const exampleJson = [
        {
          blocks: [],
          deletedLines: 0,
          addedLines: 0,
          oldName: 'sample',
          language: 'js',
          newName: 'sample',
          isCombined: false,
          isGitDiff: false,
          isTooBig: true,
        },
      ];

      const hoganUtils = new HoganJsUtils({});
      const customMessageFn = (fIndex: number) => `Custom message for file ${fIndex} diff too big`;
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { diffTooBigMessage: customMessageFn });
      const html = sideBySideRenderer.render(exampleJson);
      expect(html).toMatchInlineSnapshot(`
        "<div class=\\"d2h-wrapper\\">
            <div id=\\"d2h-675094\\" class=\\"d2h-file-wrapper\\" data-lang=\\"js\\">
            <div class=\\"d2h-file-header\\">
              <span class=\\"d2h-file-name-wrapper\\">
            <svg aria-hidden=\\"true\\" class=\\"d2h-icon\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 12 16\\" width=\\"12\\">
                <path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
            </svg>    <span class=\\"d2h-file-name\\">sample</span>
            <span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
        <label class=\\"d2h-file-collapse\\">
            <input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
            Viewed
        </label>
            </div>
            <div class=\\"d2h-files-diff\\">
                <div class=\\"d2h-file-side-diff\\">
                    <div class=\\"d2h-code-wrapper\\">
                        <table class=\\"d2h-diff-table\\">
                            <tbody class=\\"d2h-diff-tbody\\">
                            <tr>
            <td class=\\"d2h-info\\">
                <div class=\\"d2h-code-side-line d2h-info\\">
                    Custom message for file 0 diff too big
                </div>
            </td>
        </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class=\\"d2h-file-side-diff\\">
                    <div class=\\"d2h-code-wrapper\\">
                        <table class=\\"d2h-diff-table\\">
                            <tbody class=\\"d2h-diff-tbody\\">
                            
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        </div>"
      `);
    });
  });

  describe('processLines', () => {
    it('should process file lines', () => {
      const oldLines: DiffLine[] = [
        {
          content: '-test',
          type: LineType.DELETE,
          oldNumber: 1,
          newNumber: undefined,
        },
      ];

      const newLines: DiffLine[] = [
        {
          content: '+test1r',
          type: LineType.INSERT,
          oldNumber: undefined,
          newNumber: 1,
        },
      ];

      const hoganUtils = new HoganJsUtils({});
      const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { matching: LineMatchingType.LINES });
      const html = sideBySideRenderer.processChangedLines(false, oldLines, newLines);

      expect(html).toMatchInlineSnapshot(`
        Object {
          "left": "<tr>
            <td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
              1
            </td>
            <td class=\\"d2h-del d2h-change\\">
                <div class=\\"d2h-code-side-line d2h-del d2h-change\\">
                    <span class=\\"d2h-code-line-prefix\\">-</span>
                    <span class=\\"d2h-code-line-ctn\\"><del>test</del></span>
                </div>
            </td>
        </tr>",
          "right": "<tr>
            <td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
              1
            </td>
            <td class=\\"d2h-ins d2h-change\\">
                <div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
                    <span class=\\"d2h-code-line-prefix\\">+</span>
                    <span class=\\"d2h-code-line-ctn\\"><ins>test1r</ins></span>
                </div>
            </td>
        </tr>",
        }
      `);
    });
  });
});