diff options
Diffstat (limited to 'libs/editor/example/src/test/js/test-formatter.js')
-rw-r--r-- | libs/editor/example/src/test/js/test-formatter.js | 135 |
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); + }); + }); +} |