WIP – Cleanup & coverage

spec/anchor.spec.js

@@ -17,7 +17,7 @@ describe('Anchor Button TestCase', function () {
 
     describe('Anchor Form', function () {
         it('should not hide the toolbar when mouseup fires inside the anchor form', function () {
-            var editor = this.newMediumEditor('.editor'),
+            var editor = this.newMediumEditor('.editor', { buttonLabels: 'fontawesome' }),
                 anchorExtension = editor.getExtensionByName('anchor');
 
             selectElementContentsAndFire(editor.elements[0]);
@@ -54,8 +54,7 @@ describe('Anchor Button TestCase', function () {
         it('should create a link when user presses enter', function () {
             spyOn(MediumEditor.prototype, 'createLink').and.callThrough();
             var editor = this.newMediumEditor('.editor'),
-                button,
-                input;
+                button, input;
 
             selectElementContents(editor.elements[0]);
             button = editor.toolbar.getToolbarElement().querySelector('[data-action="createLink"]');
@@ -66,6 +65,7 @@ describe('Anchor Button TestCase', function () {
                 keyCode: Util.keyCode.ENTER
             });
             expect(editor.createLink).toHaveBeenCalled();
+            expect(this.el.innerHTML).toBe('<a href="test">lorem ipsum</a>');
         });
 
         it('shouldn\'t create a link when user presses enter without value', function () {

spec/auto-link.spec.js

@@ -45,9 +45,10 @@ describe('Autolink', function () {
                 'sadasda.sdfasf.sdfas'
             ];
 
-            function triggerAutolinking(element) {
+            function triggerAutolinking(element, key) {
+                var keyPressed = key || Util.keyCode.SPACE;
                 fireEvent(element, 'keypress', {
-                    keyCode: Util.keyCode.SPACE
+                    keyCode: keyPressed
                 });
                 jasmine.clock().tick(1);
             }
@@ -116,6 +117,45 @@ describe('Autolink', function () {
                 expect(links[0].textContent).toBe('http://www.example.com');
             });
 
+            it('should auto-link text on all SPACE or ENTER', function () {
+                var links;
+                this.el.innerHTML = 'http://www.example.enter';
+
+                selectElementContentsAndFire(this.el);
+                triggerAutolinking(this.el, Util.keyCode.ENTER);
+                links = this.el.getElementsByTagName('a');
+                expect(links.length).toBe(1);
+                expect(links[0].getAttribute('href')).toBe('http://www.example.enter');
+                expect(links[0].firstChild.getAttribute('data-auto-link')).toBe('true');
+                expect(links[0].textContent).toBe('http://www.example.enter');
+
+                this.el.innerHTML = 'http://www.example.space';
+
+                selectElementContentsAndFire(this.el);
+                triggerAutolinking(this.el, Util.keyCode.SPACE);
+                links = this.el.getElementsByTagName('a');
+                expect(links.length).toBe(1);
+                expect(links[0].getAttribute('href')).toBe('http://www.example.space');
+                expect(links[0].firstChild.getAttribute('data-auto-link')).toBe('true');
+                expect(links[0].textContent).toBe('http://www.example.space');
+            });
+
+            it('should auto-link text on blur', function () {
+                var links;
+                this.el.innerHTML = 'http://www.example.blur';
+
+                selectElementContentsAndFire(this.el);
+
+                fireEvent(this.el, 'blur');
+                jasmine.clock().tick(1);
+
+                links = this.el.getElementsByTagName('a');
+                expect(links.length).toBe(1);
+                expect(links[0].getAttribute('href')).toBe('http://www.example.blur');
+                expect(links[0].firstChild.getAttribute('data-auto-link')).toBe('true');
+                expect(links[0].textContent).toBe('http://www.example.blur');
+            });
+
             it('should auto-link link within basic text', function () {
                 this.el.innerHTML = 'Text with http://www.example.com inside!';
 

spec/buttons.spec.js

@@ -120,7 +120,6 @@ describe('Buttons TestCase', function () {
         });
 
         it('should contain default content if no custom labels are provided', function () {
-            spyOn(MediumEditor.prototype, 'execAction');
             var button,
                 editor = this.newMediumEditor('.editor', {
                     buttons: allButtons
@@ -529,6 +528,24 @@ describe('Buttons TestCase', function () {
         });
     });
 
+    describe('Image', function () {
+        it('should create an image', function () {
+            spyOn(document, 'execCommand').and.callThrough();
+            var editor = this.newMediumEditor('.editor', {
+                    buttons: ['image']
+                }),
+                button = editor.toolbar.getToolbarElement().querySelector('[data-action="image"]');
+
+            this.el.innerHTML = '<span id="span-image">http://i.imgur.com/twlXfUq.jpg</span>';
+            selectElementContentsAndFire(document.getElementById('span-image'));
+
+            fireEvent(button, 'click');
+
+            expect(this.el.innerHTML).toContain('<img src="http://i.imgur.com/twlXfUq.jpg">');
+            expect(document.execCommand).toHaveBeenCalledWith('insertImage', false, window.getSelection());
+        });
+    });
+
     describe('OrderedList', function () {
         it('button should be active if the selection already has the element', function () {
             var editor = this.newMediumEditor('.editor', {

spec/content.spec.js

@@ -139,7 +139,7 @@ describe('Content TestCase', function () {
 
         it('should prevent consecutive new lines from being inserted when data-disable-double-return is defined', function () {
             this.el.innerHTML = '<p><br></p>';
-            this.el.setAttribute('data-disable-return', true);
+            this.el.setAttribute('data-disable-double-return', true);
 
             var editor = this.newMediumEditor('.editor'),
                 p = editor.elements[0].querySelector('p'),

spec/fontsize.spec.js

@@ -44,7 +44,7 @@ describe('Font Size Button TestCase', function () {
     describe('Font Size', function () {
         it('should change font size when slider is moved', function () {
             spyOn(document, 'execCommand').and.callThrough();
-            var editor = this.newMediumEditor('.editor', this.mediumOpts),
+            var editor = this.newMediumEditor('.editor', { buttons: ['fontsize'], buttonLabels: 'fontawesome' }),
                 fontSizeExtension = editor.getExtensionByName('fontsize'),
                 button,
                 input;

spec/paste.spec.js

@@ -8,8 +8,8 @@ describe('Pasting content', function () {
     var multiLineTests = [
             {
                 source: 'Google docs',
-                paste: '<meta charset=\'utf-8\'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-b1bb8bfe-f54c-2e1f-72e2-4c7608d2be70"><p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Bold</span></p><br><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"></span><p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Italic</span></p><br><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"></span><p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Bold and Italic</span></p><br><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"></span><p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">A </span><a href="http://en.wikipedia.org/wiki/Link_(The_Legend_of_Zelda)" style="text-decoration:none;"><span style="font-size:15px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">link</span></a><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">.</span></p></b><br class="Apple-interchange-newline">',
-                output: '<p><b>Bold</b></p><p><i>Italic</i></p><p><b><i>Bold and Italic</i></b></p><p>A <a href="http://en.wikipedia.org/wiki/Link_(The_Legend_of_Zelda)">link</a>.</p>'
+                paste: '<meta charset=\'utf-8\'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-b1bb8bfe-f54c-2e1f-72e2-4c7608d2be70"><div dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Bold</span></div><br><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"></span><p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Italic</span></p><br><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"></span><p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Bold and Italic</span></p><br><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"></span><p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">A </span><a href="http://en.wikipedia.org/wiki/Link_(The_Legend_of_Zelda)" style="text-decoration:none;"><span style="font-size:15px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;">link</span></a><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">.</span></p></b><br class="Apple-interchange-newline">',
+                output: '<div><b>Bold</b></div><p><i>Italic</i></p><p><b><i>Bold and Italic</i></b></p><p>A <a href="http://en.wikipedia.org/wiki/Link_(The_Legend_of_Zelda)">link</a>.</p>'
             },
             {
                 source: 'Inside editor',
@@ -195,6 +195,25 @@ describe('Pasting content', function () {
                 expect(this.el.innerHTML).toEqual(test.output);
             }.bind(this));
         });
+
+        it('should add target="_blank" on anchor', function () {
+            var editor = this.newMediumEditor('.editor', {
+                targetBlank: true,
+                paste: {
+                    forcePlainText: false,
+                    cleanPastedHTML: true
+                }
+            });
+
+            spyOn(document, 'queryCommandSupported').and.returnValue(false);
+
+            this.el.innerHTML = '<span id="editor-inner">lorem ipsum</span>';
+
+            selectElementContentsAndFire(this.el);
+
+            editor.cleanPaste('<a href="http://0.0.0.0/bar.html">foo<a>');
+            expect(this.el.innerHTML).toContain('target="_blank"');
+        });
     });
 
     describe('using cleanPaste', function () {

spec/selection.spec.js

@@ -180,4 +180,60 @@ describe('Selection TestCase', function () {
         });
     });
 
+    describe('getSelectedElements', function () {
+        it('no selected elements on empty selection', function () {
+            var elements = Selection.getSelectedElements(document);
+
+            expect(elements.length).toBe(0);
+        });
+
+        it('should select element from selection', function () {
+            this.el.innerHTML = 'lorem <i>ipsum</i> dolor';
+            var editor = this.newMediumEditor('.editor'),
+                elements;
+
+            selectElementContents(editor.elements[0].querySelector('i').firstChild);
+            elements = Selection.getSelectedElements(document);
+
+            expect(elements.length).toBe(1);
+            expect(elements[0].tagName.toLowerCase()).toBe('i');
+            expect(elements[0].innerHTML).toBe('ipsum');
+        });
+
+        it('should select first element when selection is global (ie: all the editor)', function () {
+            this.el.innerHTML = 'lorem <i>ipsum</i> dolor';
+            var elements;
+
+            selectElementContents(this.el);
+            elements = Selection.getSelectedElements(document);
+
+            expect(elements.length).toBe(1);
+            expect(elements[0].tagName.toLowerCase()).toBe('i');
+            expect(elements[0].innerHTML).toBe('ipsum');
+        });
+    });
+
+    describe('getSelectedParentElement', function () {
+        it('should return null on bad range', function () {
+            expect(Selection.getSelectedParentElement(null)).toBe(null);
+            expect(Selection.getSelectedParentElement(false)).toBe(null);
+        });
+
+        it('should select the document', function () {
+            this.el.innerHTML = '<p>lorem <i>ipsum</i> dolor <span>hello</span> <b>you</b> </p>';
+            var range = document.createRange(),
+                sel = window.getSelection(),
+                element;
+
+            range.setStart(document, 0);
+            range.setEnd(this.el.querySelector('b').firstChild, 2);
+
+            sel.removeAllRanges();
+            sel.addRange(range);
+
+            element = Selection.getSelectedParentElement(range);
+
+            expect(element).toBe(document);
+        });
+    });
 });

spec/textarea.spec.js

@@ -53,4 +53,11 @@ describe('Textarea TestCase', function () {
         var editor = this.newMediumEditor('.editor');
         expect(editor.elements[0].className).toBe('editor test-class test-class-2');
     });
+
+    it('should cleanup after destroy', function () {
+        var editor = this.newMediumEditor('.editor');
+        expect(this.el.classList.contains('medium-editor-hidden')).toBe(true);
+        editor.destroy();
+        expect(this.el.classList.contains('medium-editor-hidden')).toBe(false);
+    });
 });

spec/toolbar.spec.js

@@ -244,7 +244,7 @@ describe('Toolbar TestCase', function () {
             });
 
             selectElementContentsAndFire(this.el.querySelector('b'));
-            window.getSelection().getRangeAt(0).collapse(false);
+            window.getSelection().removeAllRanges();
             editor.checkSelection();
             jasmine.clock().tick(1); // checkSelection delay
             expect(editor.toolbar.getToolbarElement().classList.contains('medium-editor-toolbar-active')).toBe(true);
@@ -381,4 +381,57 @@ describe('Toolbar TestCase', function () {
             expect(editor.toolbar.positionToolbarIfShown).toHaveBeenCalled();
         });
     });
+
+    describe('Static & sticky toolbar position', function () {
+        it('should position static + sticky toolbar on the left', function () {
+            this.el.innerHTML = '<b>lorem ipsum</b>';
+            var editor = this.newMediumEditor('.editor', {
+                staticToolbar: true,
+                stickyToolbar: true,
+                toolbarAlign: 'left'
+            }),
+            toolbar = editor.toolbar.getToolbarElement();
+
+            selectElementContentsAndFire(this.el.querySelector('b'));
+            window.getSelection().getRangeAt(0).collapse(false);
+            editor.checkSelection();
+            jasmine.clock().tick(1); // checkSelection delay
+
+            expect(toolbar.style.left).not.toBe('');
+        });
+
+        it('should position static + sticky toolbar on the right', function () {
+            this.el.innerHTML = '<b>lorem ipsum</b>';
+            var editor = this.newMediumEditor('.editor', {
+                staticToolbar: true,
+                stickyToolbar: true,
+                toolbarAlign: 'right'
+            }),
+            toolbar = editor.toolbar.getToolbarElement();
+
+            selectElementContentsAndFire(this.el.querySelector('b'));
+            window.getSelection().getRangeAt(0).collapse(false);
+            editor.checkSelection();
+            jasmine.clock().tick(1); // checkSelection delay
+
+            expect(toolbar.style.left).not.toBe('');
+        });
+
+        it('should position static + sticky toolbar on the center', function () {
+            this.el.innerHTML = '<b>lorem ipsum</b>';
+            var editor = this.newMediumEditor('.editor', {
+                staticToolbar: true,
+                stickyToolbar: true,
+                toolbarAlign: 'center'
+            }),
+            toolbar = editor.toolbar.getToolbarElement();
+
+            selectElementContentsAndFire(this.el.querySelector('b'));
+            window.getSelection().getRangeAt(0).collapse(false);
+            editor.checkSelection();
+            jasmine.clock().tick(1); // checkSelection delay
+
+            expect(toolbar.style.left).not.toBe('');
+        });
+    });
 });