How do I clear input field in Intern JS?

Question

I have written a small piece of code for inline editing table fields. When the user clicks, the element is removed and on its place an input field is created. After modification is done the input field is removed and a span element with the new value is created. Let me show some background code.

html code before click:

<div>
 <table id='mytable'>
 <thead>
...
 </thead>
 <tbody id='mybody'>
 ...
 <tr class="tr-edit even" role="row">
  <td>escape substitution</td>
  <td>TEXT</td>
  <td>4</td>
  <td id="268435506">
   <span class="td-span-edit">hola</span>
  </td>
 </tr>
 ...
 </tbody>
 </table>
</div>

html code after click:

<div>
 <table id='mytable'>
 <thead>
...
 </thead>
 <tbody id='mybody'>
 ...
 <tr class="tr-edit even" role="row">
  <td>escape substitution</td>
  <td>TEXT</td>
  <td>4</td>
  <td id="268435506">
   <input class="td-input-edit" type="text" value='hola'/>
  </td>
 </tr>
 ...
 </tbody>
 </table>
</div>

The modified value is sent to a server when the input is out of focus, blur, or when ENTER_KEY is pressed.

On the other hand I have written a functional test in intern js to simulate such inline editing. My functional test looks like this:

tdd.test('inline editing',function(){
return this.remote
 .findById('268435506')
     .then(function(param){
        return this.parent
            .moveMouseTo(param)
            ;
    })
    .click()
    .clearValue()
    .type('666')
    .executeAsync(function(done){
        promise
            .then(function(){
                done();
            });
    })
    .getVisibleText()
    .then(function(text){
        assert.strictEqual(text,
            '666',
            'typed value should be stored');
    })
 .end()
;
)};

The issue is that the test fails with exceptions on both chrome and firefox.

1. chrome: InvalidElementState: invalid element state: Element must be user-editable in order to clear it
2. firefox: UnknownError: Element must be user-editable in order to clear it.

I have screenshot when the exception occurs and the input field is clearly focused. So you should be able to edit it. I tried to remove the .clearValue() call from the chain but then, as expected, the assert fails.

Question: How do I test this inline editing?

Answer 1

The problem you see is because you try to clearValue() on the wrong element, e.g. the td element with id 268435506. When the user clicks on the td element the click handler removes the original span element and places an input element so that the user can type a new value. When this happens you should use find* to 'select' the appropriate element and perform the correspondent operation. Let me illustrate this using your initial code:

tdd.test('inline editing',function(){
 return this.remote
 .findById('268435506')
    .then(function(param){
        return this.parent
            .moveMouseTo(param)
            ;
    })
    .click()
    .findByClassName('td-input-edit')
        .clearValue()
        .type('666\uE007')//enter button to end or click outside
        .executeAsync(function(done){
            promise
                .then(function(){
                    done();
                });
        })
    .end()
    .findByClassName('td-span-edit')
        .getVisibleText()
        .then(function(text){
            assert.strictEqual(text,
                '666',
                'typed value should be stored');
        })
    .end()
 .end()
    ;
)};