Как очистить поле ввода в Intern JS?

Question

Я написал небольшой фрагмент кода для встроенных полей таблицы редактирования. Когда пользователь нажимает, элемент удаляется и на его месте создается поле input. После завершения модификации поле input удаляется и создается элемент span с новым значением. Позвольте мне показать код фона.

HTML код до щелчка:

<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 код после щелчка:

<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> 

Измененное значение отправляется на сервер, когда вход в фокусе, blur, или когда нажата кнопка ENTER_KEY.

С другой стороны, я написал функциональный тест в intern js для имитации такого встроенного редактирования. Мой функциональный тест выглядит следующим образом:

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() 
; 
)}; 

Проблема заключается в том, что тест не выполняется с исключениями как на хром, так и на firefox.

1. хром: InvalidElementState: invalid element state: Element must be user-editable in order to clear it
2. светлячок: UnknownError: Element must be user-editable in order to clear it.

У меня screenshot, когда происходит исключение и поле ввода четко сфокусированы. Поэтому вы должны иметь возможность редактировать его. Я попытался удалить вызов .clearValue() из цепочки, но затем, как и ожидалось, утверждение не выполняется.

Вопрос: Как проверить это встроенное редактирование?

Answer 1

Проблема вы видите, потому что вы пытаетесь clearValue() на неверном элемента, например элемент td с идентификатором 268435506. Когда пользователь нажимает на элемент td, обработчик клика удаляет исходный элемент span и помещает элемент input, чтобы пользователь мог ввести новое значение. Когда это произойдет, вы должны использовать find*, чтобы «выбрать» соответствующий элемент и выполнить соответствующую операцию. Позвольте мне проиллюстрировать это, используя ваш исходный код:

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() 
    ; 
)}; 

Answer 2

Попытка установить текстовое поле атрибут «значение» для заготовки вместо использования ClearValue(), а затем введите новое значение

.setAttribute("value", "")