forked from DevExpress/testcafe
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[WIP] process TextInput event on typing (closes DevExpress#1956)
- Loading branch information
1 parent
0f83b12
commit 17b3c67
Showing
5 changed files
with
281 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 105 additions & 0 deletions
105
test/functional/fixtures/regression/gh-1956/pages/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <html> | ||
| <head><title>Edit test</title></head> | ||
| <style> | ||
| h2 { | ||
| margin-top: 20px; | ||
| } | ||
| div { | ||
| border: 1px solid black; | ||
| min-height: 10px; | ||
| } | ||
| </style> | ||
| <script type="text/javascript"> | ||
| function onTextInput (event) { | ||
| var needPreventDefault = true; | ||
|
|
||
| if (isTargetElement(event.target, 'contentEditableWithModify')) | ||
| changeNodeValueOnTextInput(event); | ||
|
|
||
| if (isTargetElement(event.target, 'contentEditableWithReplace')) { | ||
| replaceEditableElementOnTextInput(event); | ||
|
|
||
| needPreventDefault = false; | ||
| } | ||
|
|
||
| if(needPreventDefault) | ||
| event.preventDefault(); | ||
| } | ||
|
|
||
| function changeNodeValueOnTextInput(event) { | ||
| document.getElementById('contentEditableWithModify').childNodes[0].childNodes[0].nodeValue += event.data; | ||
| } | ||
|
|
||
| function replaceEditableElementOnTextInput (event) { | ||
| if (window.preventNextElementReplacement) | ||
| return; | ||
|
|
||
| window.preventNextElementReplacement = true; | ||
|
|
||
| var div = document.getElementById('contentEditableWithReplace'); | ||
| var paragraph = div.childNodes[0]; | ||
| var textNode = paragraph.childNodes[0]; | ||
| var newParagraph = document.createElement("P"); | ||
|
|
||
| newParagraph.innerHTML = 'X'; | ||
|
|
||
| div.removeChild(paragraph); | ||
| div.appendChild(newParagraph); | ||
| newParagraph.focus(); | ||
| } | ||
|
|
||
| function onInput (event) { | ||
| if (!isTargetElement(event.target, 'contentEditableWithReplace')) | ||
| throw new Error('Input event has raised'); | ||
| } | ||
|
|
||
| function isTargetElement(el, id) { | ||
| while (el) { | ||
| if (el.id === id) | ||
| return true; | ||
|
|
||
| el = el.parentNode; | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| document.addEventListener('textInput', onTextInput, true); | ||
| document.addEventListener('textinput', onTextInput, true); | ||
| document.addEventListener('input', onInput, true); | ||
| </script> | ||
| <body> | ||
| <h2>Prevent Input event on TextInput when type to input element</h2> | ||
| <pre> | ||
| Chrome/Edge. Typing is prevented and Input event is not raised | ||
| IE11/Firefox. Typing is not prevented. Input event is raised | ||
| </pre> | ||
| <input id="simpleInput" /> | ||
| <h2>Prevent Input event and typing on simple ContentEditable div</h2> | ||
| <pre> | ||
| Chrome/Edge. Typing is prevented. Input event is not raised | ||
| IE11/Firefox. Typing is not prevented. | ||
| Input event is raised in firefox but is not raised in IE11 - it's a IE11 bug | ||
| </pre> | ||
| <div contenteditable="true" id="simpleContentEditable"></div> | ||
| <h2>Prevent Input event on TextInput event when type to element node</h2> | ||
| <pre> | ||
| Not for IE11 because preventDefault will not prevent typing | ||
| Not for Firefox because Firefox does not support TextInput event | ||
| </pre> | ||
| <div contenteditable="true" id="contentEditableWithElementNode"><p><br/></p></div> | ||
| <h2>Modify text node of ContentEditable div on TextInput event and prevent Input event</h2> | ||
| <pre> | ||
| Not for IE11 because is's not possible to prevent typing in IE11 | ||
| Not for Firefox because Firefox does not support TextInput event | ||
| </pre> | ||
| <div contenteditable="true" id="contentEditableWithModify"><p>A</p></div> | ||
| <h2>Type to ContentEditable div when selected node was replaced on TextInput event</h2> | ||
| <pre> | ||
| Not for IE11 because this test emulates behavior from https://github.com/DevExpress/testcafe/issues/1956. | ||
| This behavior is different in IE11 | ||
| Not for Firefox because Firefox does not support TextInput event | ||
| </pre> | ||
| <div contenteditable="true" id="contentEditableWithReplace"><p>B</p></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| var expect = require('chai').expect; | ||
|
|
||
| describe('Should support TextInput event[Regression](GH-1956)', function () { | ||
| it('Modify text node of ContentEditable div on TextInput event and prevent Input event', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Modify text node of ContentEditable div on TextInput event and prevent Input event', | ||
| { skip: [ 'firefox', 'ie' ] }); | ||
| }); | ||
|
|
||
| it('Type to ContentEditable div when selected node was replaced on TextInput event', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Type to ContentEditable div when selected node was replaced on TextInput event', | ||
| { skip: [ 'firefox', 'ie' ] }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to element node', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to element node', | ||
| { skip: [ 'firefox', 'ie' ] }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to input element', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to input element', | ||
| { skip: [ 'ie', 'firefox' ] }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to input element IE11/Firefox', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to input element IE11/Firefox', | ||
| { only: [ 'ie', 'firefox' ], shouldFail: true }) | ||
| .catch(function (errs) { | ||
| expect(errs['ie'][0]).contains('Input event has raised'); | ||
| expect(errs['firefox'][0]).contains('Input event has raised'); | ||
| }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to ContentEditable div', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to ContentEditable div', | ||
| { skip: [ 'ie', 'firefox' ] }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to ContentEditable div IE11', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to ContentEditable div IE11/Firefox', | ||
| { only: [ 'ie' ] }); | ||
| }); | ||
|
|
||
| it('Prevent Input event on TextInput when type to ContentEditable div Firefox', function () { | ||
| return runTests('testcafe-fixtures/index.js', | ||
| 'Prevent Input event on TextInput when type to ContentEditable div IE11/Firefox', | ||
| { only: [ 'firefox' ], shouldFail: true }) | ||
| .catch(function (errs) { | ||
| expect(errs[0]).contains('Input event has raised'); | ||
| }); | ||
| }); | ||
| }); |
64 changes: 64 additions & 0 deletions
64
test/functional/fixtures/regression/gh-1956/testcafe-fixtures/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { Selector } from 'testcafe'; | ||
|
|
||
| fixture('GH-1956 - Should support TextInput event') | ||
| .page `http://localhost:3000/fixtures/regression/gh-1956/pages/index.html`; | ||
|
|
||
| const simpleInput = Selector('#simpleInput'); | ||
| const simpleContentEditable = Selector('#simpleContentEditable'); | ||
| const contentEditableWithElementNode = Selector('#contentEditableWithElementNode'); | ||
| const contentEditableWithModify = Selector('#contentEditableWithModify'); | ||
| const contentEditableWithReplace = Selector('#contentEditableWithReplace'); | ||
|
|
||
| // NOTE: Chrome/Edge. Typing is prevented and Input event is not raised | ||
| test('Prevent Input event on TextInput when type to input element', async t => { | ||
| await t | ||
| .typeText(simpleInput, 'Hello') | ||
| .expect(simpleInput.value).eql(''); | ||
| }); | ||
|
|
||
| // NOTE: IE11/Firefox. Typing is not prevented. Input event is raised | ||
| test('Prevent Input event on TextInput when type to input element IE11/Firefox', async t => { | ||
| await t | ||
| .typeText(simpleInput, 'Hello') | ||
| .expect(simpleInput.value).eql('Hello'); | ||
| }); | ||
|
|
||
| // NOTE: Chrome/Edge. Typing is prevented. Input event is not raised | ||
| test('Prevent Input event on TextInput when type to ContentEditable div', async t => { | ||
| await t | ||
| .typeText(simpleContentEditable, 'Hello') | ||
| .expect(simpleContentEditable.textContent).eql(''); | ||
| }); | ||
|
|
||
| // NOTE: IE11/Firefox. Typing is not prevented. | ||
| // Input event is raised in firefox but is not raised in IE11 - it's a IE11 bug | ||
| test('Prevent Input event on TextInput when type to ContentEditable div IE11/Firefox', async t => { | ||
| await t | ||
| .typeText(simpleContentEditable, 'Hello') | ||
| .expect(simpleContentEditable.textContent).eql('Hello'); | ||
| }); | ||
|
|
||
| // NOTE: Not for IE11 because preventDefault will not prevent typing | ||
| // Not for Firefox because Firefox does not support TextInput event | ||
| test('Prevent Input event on TextInput when type to element node', async t => { | ||
| await t | ||
| .typeText(contentEditableWithElementNode, 'Hello') | ||
| .expect(contentEditableWithElementNode.textContent).eql(''); | ||
| }); | ||
|
|
||
| // NOTE: Not for IE11 because is's not possible to prevent typing in IE11 | ||
| // Not for Firefox because Firefox does not support TextInput event | ||
| test('Modify text node of ContentEditable div on TextInput event and prevent Input event', async t => { | ||
| await t | ||
| .typeText(contentEditableWithModify, 'Hello') | ||
| .expect(contentEditableWithModify.textContent).eql('AHello'); | ||
| }); | ||
|
|
||
| // NOTE: Not for IE11 because this test emulates behavior from https://github.com/DevExpress/testcafe/issues/1956. | ||
| // This behavior is different in IE11 | ||
| // Not for Firefox because Firefox does not support TextInput event | ||
| test('Type to ContentEditable div when selected node was replaced on TextInput event', async t => { | ||
| await t | ||
| .typeText(contentEditableWithReplace, 'Hello') | ||
| .expect(contentEditableWithReplace.textContent).eql('HelloX'); | ||
| }); |