1 files changed, 135 insertions, 0 deletions
diff --git a/libs/editor/example/src/test/js/test-formatter.js b/libs/editor/example/src/test/js/test-formatter.js
new file mode 100644
index 000000000..067d3c74e
--- /dev/null
+++ b/libs/editor/example/src/test/js/test-formatter.js
@@ -0,0 +1,135 @@
+var assert = require('chai').assert;
+var assetsDir = '../../../../WordPressEditor/src/main/assets';
+var underscore = require(assetsDir + '/libs/underscore-min.js');
+
+// Set up globals needed by shortcode, wpload, and wpsave
+global.window = {};
+global._ = underscore;
+global.wp = {};
+
+// wp-admin libraries
+var shortcode = require(assetsDir + '/libs/shortcode.js');
+var wpload = require(assetsDir + '/libs/wpload.js');
+var wpsave = require(assetsDir + '/libs/wpsave.js');
+
+var formatterlib = require(assetsDir + '/editor-utils-formatter.js');
+var formatter = formatterlib.Formatter;
+
+// Media strings
+
+// Image strings
+var imageSrc = 'content://com.android.providers.media.documents/document/image%3A12951';
+var plainImageHtml = '<img src="' + imageSrc + '" alt="" class="wp-image-123 size-full" width="172" height="244">';
+var imageWrappedInLinkHtml = '<a href="' + imageSrc + '">' + plainImageHtml + '</a>';
+
+// Captioned image strings
+var imageCaptionShortcode = '[caption width="600" align="alignnone"]' + imageSrc + 'Text[/caption]';
+var imageWithCaptionHtml = '<label class="wp-temp" data-wp-temp="caption" onclick="">' +
+    '<span class="wp-caption" style="width:600px; max-width:100% !important;" data-caption-width="600" ' +
+    'data-caption-align="alignnone">' + imageSrc + 'Text</span></label>';
+var linkedImageCaptionShortcode = '[caption width="600" align="alignnone"]' + imageWrappedInLinkHtml + 'Text[/caption]';
+var linkedImageCaptionHtml = '<label class="wp-temp" data-wp-temp="caption" onclick="">' +
+    '<span class="wp-caption" style="width:600px; max-width:100% !important;" data-caption-width="600" ' +
+    'data-caption-align="alignnone">' + imageWrappedInLinkHtml + 'Text</span></label>';
+
+// Video strings
+var videoSrc = 'content://com.android.providers.media.documents/document/video%3A12966';
+var videoShortcode = '[video src="' + videoSrc + '" poster=""][/video]';
+var videoHtml = '<span class="edit-container" contenteditable="false"><span class="delete-overlay"></span>' +
+    '<video webkit-playsinline src="' + videoSrc + '" poster="" preload="metadata" onclick="" controls="controls">' +
+    '</video></span>';
+
+// VideoPress video strings
+var vpVideoShortcode = '[wpvideo ABCD1234]';
+var vpVideoHtml = '<span class="edit-container" contenteditable="false"><span class="delete-overlay"></span>' +
+    '<video data-wpvideopress="ABCD1234" webkit-playsinline src="" preload="metadata" poster="svg/wpposter.svg" ' +
+    'onclick="" onerror="ZSSEditor.sendVideoPressInfoRequest(\'ABCD1234\');"></video></span>';
+
+describe('HTML to Visual formatter should correctly convert', function () {
+  it('single-line HTML', function () {
+    assert.equal('<p>Some text</p>\n', formatter.htmlToVisual('Some text'));
+  });
+
+  it('multi-paragraph HTML', function () {
+    assert.equal('<p>Some text</p>\n<p>More text</p>\n', formatter.htmlToVisual('Some text\n\nMore text'));
+  });
+
+  testMediaParagraphWrapping('non-linked image', plainImageHtml, plainImageHtml);
+  testMediaParagraphWrapping('linked image', imageWrappedInLinkHtml, imageWrappedInLinkHtml);
+  testMediaParagraphWrapping('non-linked image, with caption', imageCaptionShortcode, imageWithCaptionHtml);
+  testMediaParagraphWrapping('linked image, with caption', linkedImageCaptionShortcode, linkedImageCaptionHtml);
+  testMediaParagraphWrapping('non-VideoPress video', videoShortcode, videoHtml);
+  testMediaParagraphWrapping('VideoPress video', vpVideoShortcode, vpVideoHtml);
+});
+
+function testMediaParagraphWrapping(mediaType, htmlModeMediaHtml, visualModeMediaHtml) {
+  describe(mediaType, function () {
+    it('alone in post', function () {
+      var visualFormattingApplied = formatter.htmlToVisual(htmlModeMediaHtml);
+      assert.equal('<p>' + visualModeMediaHtml + '</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>' + visualModeMediaHtml + '</div><div><br></div>', convertedToDivs);
+    });
+
+    it('with paragraphs above and below', function () {
+      var imageBetweenParagraphs = 'Line 1\n\n' + htmlModeMediaHtml + '\n\nLine 2';
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageBetweenParagraphs);
+      assert.equal('<p>Line 1</p>\n<p>' + visualModeMediaHtml + '</p>\n<p>Line 2</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>Line 1</div><div>' + visualModeMediaHtml + '</div><div>Line 2</div>', convertedToDivs);
+    });
+
+    it('with line breaks above and below', function () {
+      var imageBetweenLineBreaks = 'Line 1\n' + htmlModeMediaHtml + '\nLine 2';
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageBetweenLineBreaks);
+      assert.equal('<p>Line 1<br />\n' + visualModeMediaHtml + '<br />\nLine 2</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>Line 1</div><div>' + visualModeMediaHtml + '</div><div>Line 2</div>', convertedToDivs);
+    });
+
+    it('start of post, with paragraph underneath', function () {
+      var imageFollowedByParagraph = htmlModeMediaHtml + '\n\nLine 2';
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageFollowedByParagraph);
+      assert.equal('<p>' + visualModeMediaHtml + '</p>\n<p>Line 2</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>' + visualModeMediaHtml + '</div><div>Line 2</div>', convertedToDivs);
+    });
+
+    it('start of post, with line break underneath', function () {
+      var imageFollowedByLineBreak = htmlModeMediaHtml + '\nLine 2';
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageFollowedByLineBreak);
+      assert.equal('<p>' + visualModeMediaHtml + '<br \/>\nLine 2</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>' + visualModeMediaHtml + '</div><div>Line 2</div>', convertedToDivs);
+    });
+
+    it('end of post, with paragraph above', function () {
+      var imageUnderParagraph = 'Line 1\n\n' + htmlModeMediaHtml;
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageUnderParagraph);
+      assert.equal('<p>Line 1</p>\n<p>' + visualModeMediaHtml + '</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>Line 1</div><div>' + visualModeMediaHtml + '</div><div><br></div>', convertedToDivs);
+    });
+
+    it('end of post, with line break above', function () {
+      var imageUnderLineBreak = 'Line 1\n' + htmlModeMediaHtml;
+
+      var visualFormattingApplied = formatter.htmlToVisual(imageUnderLineBreak);
+      assert.equal('<p>Line 1<br \/>\n' + visualModeMediaHtml + '</p>\n', visualFormattingApplied);
+
+      var convertedToDivs = formatter.convertPToDiv(visualFormattingApplied).replace(/\n/g, '');
+      assert.equal('<div>Line 1</div><div>' + visualModeMediaHtml + '</div><div><br></div>', convertedToDivs);
+    });
+  });
+}