Merge pull request #48 from pbu88/refactors_html_code_into_methods

Refactors html code into methods for SideBySidePrinter

src/side-by-side-printer.js

@@ -23,6 +23,42 @@
     this.config = config;
   }
 
+  SideBySidePrinter.prototype.makeDiffHtml = function(file, diffs) {
+    return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' +
+      '     <div class="d2h-file-header">\n' +
+      '       <div class="d2h-file-stats">\n' +
+      '         <span class="d2h-lines-added">' +
+      '           <span>+' + file.addedLines + '</span>\n' +
+      '         </span>\n' +
+      '         <span class="d2h-lines-deleted">' +
+      '           <span>-' + file.deletedLines + '</span>\n' +
+      '         </span>\n' +
+      '       </div>\n' +
+      '       <div class="d2h-file-name">' + printerUtils.getDiffName(file) + '</div>\n' +
+      '     </div>\n' +
+      '     <div class="d2h-files-diff">\n' +
+      '       <div class="d2h-file-side-diff">\n' +
+      '         <div class="d2h-code-wrapper">\n' +
+      '           <table class="d2h-diff-table">\n' +
+      '             <tbody class="d2h-diff-tbody">\n' +
+      '           ' + diffs.left +
+      '             </tbody>\n' +
+      '           </table>\n' +
+      '         </div>\n' +
+      '       </div>\n' +
+      '       <div class="d2h-file-side-diff">\n' +
+      '         <div class="d2h-code-wrapper">\n' +
+      '           <table class="d2h-diff-table">\n' +
+      '             <tbody class="d2h-diff-tbody">\n' +
+      '           ' + diffs.right +
+      '             </tbody>\n' +
+      '           </table>\n' +
+      '         </div>\n' +
+      '       </div>\n' +
+      '     </div>\n' +
+      '   </div>\n';
+  };
+
   SideBySidePrinter.prototype.generateSideBySideJsonHtml = function(diffFiles) {
     var that = this;
     return '<div class="d2h-wrapper">\n' +
@@ -35,43 +71,20 @@
           diffs = that.generateEmptyDiff();
         }
 
-        return '<div id="' + printerUtils.getHtmlId(file) + '" class="d2h-file-wrapper" data-lang="' + file.language + '">\n' +
+        return that.makeDiffHtml(file, diffs);
-          '     <div class="d2h-file-header">\n' +
-          '       <div class="d2h-file-stats">\n' +
-          '         <span class="d2h-lines-added">' +
-          '           <span>+' + file.addedLines + '</span>\n' +
-          '         </span>\n' +
-          '         <span class="d2h-lines-deleted">' +
-          '           <span>-' + file.deletedLines + '</span>\n' +
-          '         </span>\n' +
-          '       </div>\n' +
-          '       <div class="d2h-file-name">' + printerUtils.getDiffName(file) + '</div>\n' +
-          '     </div>\n' +
-          '     <div class="d2h-files-diff">\n' +
-          '       <div class="d2h-file-side-diff">\n' +
-          '         <div class="d2h-code-wrapper">\n' +
-          '           <table class="d2h-diff-table">\n' +
-          '             <tbody class="d2h-diff-tbody">\n' +
-          '           ' + diffs.left +
-          '             </tbody>\n' +
-          '           </table>\n' +
-          '         </div>\n' +
-          '       </div>\n' +
-          '       <div class="d2h-file-side-diff">\n' +
-          '         <div class="d2h-code-wrapper">\n' +
-          '           <table class="d2h-diff-table">\n' +
-          '             <tbody class="d2h-diff-tbody">\n' +
-          '           ' + diffs.right +
-          '             </tbody>\n' +
-          '           </table>\n' +
-          '         </div>\n' +
-          '       </div>\n' +
-          '     </div>\n' +
-          '   </div>\n';
       }).join('\n') +
       '</div>\n';
   };
 
+  SideBySidePrinter.prototype.makeSideHtml = function(blockHeader) {
+    return '<tr>\n' +
+      '  <td class="d2h-code-side-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' +
+      '  <td class="' + diffParser.LINE_TYPE.INFO + '">\n' +
+      '    <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '">' + blockHeader  + '</div>\n' +
+      '  </td>\n' +
+      '</tr>\n';
+  };
+
   SideBySidePrinter.prototype.generateSideBySideFileHtml = function(file) {
     var that = this;
     var fileHtml = {};
@@ -80,21 +93,8 @@
 
     file.blocks.forEach(function(block) {
 
-      fileHtml.left += '<tr>\n' +
+      fileHtml.left += that.makeSideHtml(utils.escape(block.header));
-        '  <td class="d2h-code-side-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' +
+      fileHtml.right += that.makeSideHtml('');
-        '  <td class="' + diffParser.LINE_TYPE.INFO + '">' +
-        '    <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '">' +
-        '      ' + utils.escape(block.header) +
-        '    </div>' +
-        '  </td>\n' +
-        '</tr>\n';
-
-      fileHtml.right += '<tr>\n' +
-        '  <td class="d2h-code-side-linenumber ' + diffParser.LINE_TYPE.INFO + '"></td>\n' +
-        '  <td class="' + diffParser.LINE_TYPE.INFO + '">' +
-        '    <div class="d2h-code-side-line ' + diffParser.LINE_TYPE.INFO + '"></div>' +
-        '  </td>\n' +
-        '</tr>\n';
 
       var oldLines = [];
       var newLines = [];
@@ -226,6 +226,15 @@
     return fileHtml;
   };
 
+  SideBySidePrinter.prototype.makeSingleLineHtml = function(type, number, htmlContent, htmlPrefix) {
+    return '<tr>\n' +
+      '    <td class="d2h-code-side-linenumber ' + type + '">' + number + '</td>\n' +
+      '    <td class="' + type + '">' +
+      '      <div class="d2h-code-side-line ' + type + '">' + htmlPrefix + htmlContent + '</div>' +
+      '    </td>\n' +
+      '  </tr>\n';
+  };
+
   SideBySidePrinter.prototype.generateSingleLineHtml = function(type, number, content, prefix) {
     var htmlPrefix = '';
     if (prefix) {
@@ -237,12 +246,7 @@
       htmlContent = '<span class="d2h-code-line-ctn">' + content + '</span>';
     }
 
-    return '<tr>\n' +
+    return this.makeSingleLineHtml(type, number, htmlContent, htmlPrefix);
-      '    <td class="d2h-code-side-linenumber ' + type + '">' + number + '</td>\n' +
-      '    <td class="' + type + '">' +
-      '      <div class="d2h-code-side-line ' + type + '">' + htmlPrefix + htmlContent + '</div>' +
-      '    </td>\n' +
-      '  </tr>\n';
   };
 
   SideBySidePrinter.prototype.generateEmptyDiff = function() {

test/side-by-side-printer-tests.js

@@ -120,4 +120,37 @@ describe('SideBySidePrinter', function() {
         parsedFileLeft.querySelectorAll(prefixTag).length);
     });
   });
+
+  describe('generateSingleLineHtml', function() {
+    it('should work for insertions', function() {
+
+      var diffParser = require('../src/diff-parser.js').DiffParser;
+      var sideBySidePrinter = new SideBySidePrinter({});
+      var fileHtml = sideBySidePrinter.generateSingleLineHtml(
+        diffParser.LINE_TYPE.INSERTS, 30, 'test', '+');
+      var expected = '<tr>\n' +
+      '    <td class="d2h-code-side-linenumber d2h-ins">30</td>\n' +
+      '    <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>\n' +
+      '  </tr>\n';
+
+      assert.equal(expected, fileHtml);
+    });
+    it('should work for deletions', function() {
+
+      var diffParser = require('../src/diff-parser.js').DiffParser;
+      var sideBySidePrinter = new SideBySidePrinter({});
+      var fileHtml = sideBySidePrinter.generateSingleLineHtml(
+        diffParser.LINE_TYPE.DELETES, 30, 'test', '-');
+      var expected = '<tr>\n' +
+      '    <td class="d2h-code-side-linenumber d2h-del">30</td>\n' +
+      '    <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>\n' +
+      '  </tr>\n';
+
+      assert.equal(expected, fileHtml);
+    });
+  });
 });