From 0bdad77d53dded20e78f41cb538447573e131d85 Mon Sep 17 00:00:00 2001 From: antoniopol06 Date: Wed, 8 Jun 2016 09:50:31 +0200 Subject: [PATCH 1/4] Testing readOnly behavior with true and false values. Fixes #538 --- src/ui/react/test/alloy-editor.js | 78 +++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/src/ui/react/test/alloy-editor.js b/src/ui/react/test/alloy-editor.js index 44d7b68838..03f4278009 100644 --- a/src/ui/react/test/alloy-editor.js +++ b/src/ui/react/test/alloy-editor.js @@ -147,6 +147,84 @@ }); }); + describe('with readOnly set to false', function() { + beforeEach(function(done) { + initEditor.call(this, done); + }); + + afterEach(function() { + cleanUpEditor.call(this); + }); + + it('should not redirect when navigate links', function() { + var stub = sinon.stub(this.alloyEditor, '_redirectUrlLink'); + + bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); + + var link = document.getElementById('link_foo'); + + happen.click(link); + + assert.strictEqual(0, stub.callCount); + }); + + it('should redirect when navigate links and readonly is activated', function() { + this.alloyEditor._editor.setReadOnly(true); + + var stub = sinon.stub(this.alloyEditor, '_redirectUrlLink'); + + bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); + + var link = document.getElementById('link_foo'); + + happen.click(link); + + assert.isTrue(stub.calledOnce); + }); + }); + + describe('with readonly set to true', function() { + beforeEach(function(done) { + initEditor.call(this, done, { + readOnly: true + }); + }); + + afterEach(function() { + cleanUpEditor.call(this); + }); + + it('should be readonly mode is activated', function() { + assert.isTrue(this.alloyEditor._editor.readOnly); + }); + + it('should redirect when navigate links', function() { + var stub = sinon.stub(this.alloyEditor, '_redirectUrlLink'); + + bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); + + var link = document.getElementById('link_foo'); + + happen.click(link); + + assert.isTrue(stub.calledOnce); + }); + + it('should not redirect when navigate links and editable mode is activated', function() { + this.alloyEditor._editor.setReadOnly(false); + + var stub = sinon.stub(this.alloyEditor, '_redirectUrlLink'); + + bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); + + var link = document.getElementById('link_foo'); + + happen.click(link); + + assert.strictEqual(0, stub.callCount); + }); + }); + it('should create an instance when the passed srcNode is a DOM element', function(done) { var el = document.createElement('div'); el.setAttribute('id', 'editable1'); From 6eca5aa7582e04e7c715f65f7e1fe522b8219956 Mon Sep 17 00:00:00 2001 From: antoniopol06 Date: Wed, 8 Jun 2016 10:52:36 +0200 Subject: [PATCH 2/4] Refactor readOnly. Link navigations do not work when editor is instaciated with readOnly value is true Fixes #538 --- src/ui/react/src/adapter/alloy-editor.js | 45 +++++++++++++++++++----- 1 file changed, 36 insertions(+), 9 deletions(-) diff --git a/src/ui/react/src/adapter/alloy-editor.js b/src/ui/react/src/adapter/alloy-editor.js index 79a54c1702..2ee94524d0 100644 --- a/src/ui/react/src/adapter/alloy-editor.js +++ b/src/ui/react/src/adapter/alloy-editor.js @@ -47,6 +47,9 @@ AlloyEditor.Lang.mix(editor.config, config); editor.once('contentDom', function() { + if (editor.config.readOnly) { + this._addEventClickReadOnlyListener(editor); + } var editable = editor.editable(); editable.addClass('ae-editable'); @@ -78,6 +81,7 @@ if (nativeEditor) { var editable = nativeEditor.editable(); + if (editable) { editable.removeClass('ae-editable'); @@ -90,6 +94,24 @@ } }, + /** + * Method to set default link behavior + * + * @protected + * @method _addEventClickReadOnlyListener + * @param {Object} editor + */ + _addEventClickReadOnlyListener: function(editor) { + editor.editable().on( + 'click', + this._defaultReadOnlyClickFn, + this, + { + editor: editor + } + ); + }, + /** * Called on `click` event when the editor is in read only mode. Navigates to link's URL or opens * the link in a new window. @@ -106,13 +128,10 @@ if (link) { var href = link.$.attributes.href ? link.$.attributes.href.value : null; + var target = link.$.attributes.target ? link.$.attributes.target.value : null; - if (target && href) { - window.open(href, target); - } else if (href) { - window.location.href = href; - } + this._redirectUrlLink(href, target); } } }, @@ -137,14 +156,22 @@ */ _onReadOnlyChangeFn: function(event) { if (event.editor.readOnly) { - event.editor.editable().on('click', this._defaultReadOnlyClickFn, this, { - editor: event.editor - }); - } else { + this._addEventClickReadOnlyListener(event.editor); + } + else { event.editor.editable().removeListener('click', this._defaultReadOnlyClickFn); } }, + _redirectUrlLink: function(href, target) { + if (target && href) { + window.open(href, target); + } + else if (href) { + window.location.href = href; + } + }, + /** * Renders the specified from the user toolbars. * From c448a1f40f6792f299db9c457f17fcc3934af112 Mon Sep 17 00:00:00 2001 From: Chema Balsas Date: Wed, 8 Jun 2016 12:11:17 +0200 Subject: [PATCH 3/4] SF Fixes #538 --- src/ui/react/src/adapter/alloy-editor.js | 32 +++++++++++++----------- src/ui/react/test/alloy-editor.js | 8 +++--- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/ui/react/src/adapter/alloy-editor.js b/src/ui/react/src/adapter/alloy-editor.js index 2ee94524d0..6041400bf5 100644 --- a/src/ui/react/src/adapter/alloy-editor.js +++ b/src/ui/react/src/adapter/alloy-editor.js @@ -48,8 +48,9 @@ editor.once('contentDom', function() { if (editor.config.readOnly) { - this._addEventClickReadOnlyListener(editor); + this._addReadOnlyLinkClickListener(editor); } + var editable = editor.editable(); editable.addClass('ae-editable'); @@ -98,18 +99,13 @@ * Method to set default link behavior * * @protected - * @method _addEventClickReadOnlyListener + * @method _addReadOnlyLinkClickListener * @param {Object} editor */ - _addEventClickReadOnlyListener: function(editor) { - editor.editable().on( - 'click', - this._defaultReadOnlyClickFn, - this, - { - editor: editor - } - ); + _addReadOnlyLinkClickListener: function(editor) { + editor.editable().on('click', this._defaultReadOnlyClickFn, this, { + editor: editor + }); }, /** @@ -131,7 +127,7 @@ var target = link.$.attributes.target ? link.$.attributes.target.value : null; - this._redirectUrlLink(href, target); + this._redirectLink(href, target); } } }, @@ -156,14 +152,22 @@ */ _onReadOnlyChangeFn: function(event) { if (event.editor.readOnly) { - this._addEventClickReadOnlyListener(event.editor); + this._addReadOnlyLinkClickListener(event.editor); } else { event.editor.editable().removeListener('click', this._defaultReadOnlyClickFn); } }, - _redirectUrlLink: function(href, target) { + /** + * Redirects the browser to a given link + * + * @protected + * @method _redirectLink + * @param {string} href The href to take the browser to + * @param {string=} target Specifies where to display the link + */ + _redirectLink: function(href, target) { if (target && href) { window.open(href, target); } diff --git a/src/ui/react/test/alloy-editor.js b/src/ui/react/test/alloy-editor.js index 03f4278009..2a5fed91ec 100644 --- a/src/ui/react/test/alloy-editor.js +++ b/src/ui/react/test/alloy-editor.js @@ -157,7 +157,7 @@ }); it('should not redirect when navigate links', function() { - var stub = sinon.stub(this.alloyEditor, '_redirectUrlLink'); + var stub = sinon.stub(this.alloyEditor, '_redirectLink'); bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); @@ -171,7 +171,7 @@ it('should redirect when navigate links and readonly is activated', function() { this.alloyEditor._editor.setReadOnly(true); - var stub = sinon.stub(this.alloyEditor, '_redirectUrlLink'); + var stub = sinon.stub(this.alloyEditor, '_redirectLink'); bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); @@ -199,7 +199,7 @@ }); it('should redirect when navigate links', function() { - var stub = sinon.stub(this.alloyEditor, '_redirectUrlLink'); + var stub = sinon.stub(this.alloyEditor, '_redirectLink'); bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); @@ -213,7 +213,7 @@ it('should not redirect when navigate links and editable mode is activated', function() { this.alloyEditor._editor.setReadOnly(false); - var stub = sinon.stub(this.alloyEditor, '_redirectUrlLink'); + var stub = sinon.stub(this.alloyEditor, '_redirectLink'); bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); From c95caa301583665492f618452cc952e3fb4f2c82 Mon Sep 17 00:00:00 2001 From: Chema Balsas Date: Wed, 8 Jun 2016 12:48:23 +0200 Subject: [PATCH 4/4] SF Tests Fixes #538 --- src/ui/react/test/alloy-editor.js | 57 +++++++++++++++++-------------- 1 file changed, 32 insertions(+), 25 deletions(-) diff --git a/src/ui/react/test/alloy-editor.js b/src/ui/react/test/alloy-editor.js index 2a5fed91ec..c290482f70 100644 --- a/src/ui/react/test/alloy-editor.js +++ b/src/ui/react/test/alloy-editor.js @@ -156,28 +156,27 @@ cleanUpEditor.call(this); }); - it('should not redirect when navigate links', function() { - var stub = sinon.stub(this.alloyEditor, '_redirectLink'); + it('should not redirect when clicking on links', function() { + var spy = sinon.spy(this.alloyEditor, '_redirectLink'); - bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); + bender.tools.selection.setWithHtml(this.alloyEditor.get('nativeEditor'), 'Foo'); - var link = document.getElementById('link_foo'); + happen.click(document.getElementById('link_foo')); - happen.click(link); - - assert.strictEqual(0, stub.callCount); + assert.isFalse(spy.called); }); - it('should redirect when navigate links and readonly is activated', function() { - this.alloyEditor._editor.setReadOnly(true); + it('should redirect when clicking on links and readonly has been changed to true', function() { + var nativeEditor = this.alloyEditor.get('nativeEditor'); + nativeEditor.setReadOnly(true); + + // Stub `_redirectLink` method to avoid page refreshes during the test var stub = sinon.stub(this.alloyEditor, '_redirectLink'); - bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); + bender.tools.selection.setWithHtml(nativeEditor, 'Foo'); - var link = document.getElementById('link_foo'); - - happen.click(link); + happen.click(document.getElementById('link_foo')); assert.isTrue(stub.calledOnce); }); @@ -194,28 +193,36 @@ cleanUpEditor.call(this); }); - it('should be readonly mode is activated', function() { - assert.isTrue(this.alloyEditor._editor.readOnly); - }); - - it('should redirect when navigate links', function() { - var stub = sinon.stub(this.alloyEditor, '_redirectLink'); + it('should open a new window when clicking in links with a target attribute', function() { + var stub = sinon.stub(window, 'open'); - bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); + bender.tools.selection.setWithHtml(this.alloyEditor.get('nativeEditor'), 'Foo'); - var link = document.getElementById('link_foo'); + happen.click(document.getElementById('link_foo')); - happen.click(link); + stub.restore(); assert.isTrue(stub.calledOnce); }); - it('should not redirect when navigate links and editable mode is activated', function() { - this.alloyEditor._editor.setReadOnly(false); + it('should update the current window url when clicking in links without a target attribute', function() { + var locationHref = window.location.href; + + bender.tools.selection.setWithHtml(this.alloyEditor.get('nativeEditor'), 'Foo'); + + happen.click(document.getElementById('link_foo')); + + assert.strictEqual(window.location.href, locationHref + '#foo'); + }); + + it('should not redirect when clicking on links and readonly has been set to', function() { + var nativeEditor = this.alloyEditor.get('nativeEditor'); + + nativeEditor.setReadOnly(false); var stub = sinon.stub(this.alloyEditor, '_redirectLink'); - bender.tools.selection.setWithHtml(this.alloyEditor._editor, '{Foo}'); + bender.tools.selection.setWithHtml(nativeEditor, 'Foo'); var link = document.getElementById('link_foo');