Тестовая страница Ember.js обновляется автоматически - PullRequest
Новая
       5

Тестовая страница Ember.js обновляется автоматически

0 голосов
/ 17 декабря 2018

Здесь я пытаюсь следовать примеру интеграционного теста: https://guides.emberjs.com/release/testing/testing-components/ (Действия по тестированию)

Моя проблема заключается в том, что вывод теста постоянно обновляется, постоянно, по какой-то причине?

Код теста: 

test('Can handle submit action', async function (assert) {
    /*
    * THIS TEST HAS PROBLEMS
    * THE PAGE CONSTANTLY REFRESHES FOR THIS TEST, NO IDEA WHY, NEED TO INVESTIGATE
    */
    assert.expect(1);

    // test double for the external action
    this.set('externalAction', (actual) => {
      const expected = {inputValue: 'test'};
      assert.deepEqual(actual, expected, 'submitted value is passed to external action');
    });

    await render(hbs`{{user-form inputValue="test" saveAction=(action externalAction)}}`);

    // click the button to submit the form
    await click('#submitButton');
  });

Component.js: 

import Component from '@ember/component';
import {computed} from '@ember/object';

export default Component.extend({
  inputValue: '',
  submitText: 'Save',
  inputIsValid: computed('inputValue', function () {
    return this.inputValue.length > 3;
  }),

  actions: {
    save(inputValue) {
      if (this.inputIsValid) {
        this.saveAction(inputValue); // pass action handling to route that uses component
      }
    }
  }
});

шаблон компонента: 

<br>
<br>
<form onsubmit={{action "save" inputValue}}>
    {{#unless inputIsValid}}
      <div style="color: red" class='validationMessage'>
        Hey it is not valid!
      </div>
    {{/unless}}

    <label id="inputLabel">{{inputLabel}}</label>
    {{input type="text" id="input" placeholder=inputPlaceholder value=inputValue class="form-control"}}
    <br>
    <button type="submit" id="submitButton" class="btn btn-primary">{{submitText}}</button>
</form>
{{outlet}}

Я подумал, что это может быть из-за того, что форма в шаблоне продолжает отправляться, но это не может иметь место, так как нужно нажать кнопку «Отправить» только один раз.Любая помощь высоко ценится!

1 Ответ

0 голосов
/ 18 декабря 2018

После предложения @ Lux, написанного как комментарий;Чтобы предотвратить повторную загрузку страницы отправкой формы, вам нужно сделать следующее: 

save(inputValue, event) {
  event.preventDefault()
  if (this.inputIsValid) {
    this.saveAction(inputValue); // pass action handling to route that uses component
  }
}

В качестве последнего аргумента вы получаете event, а вызов preventDefault сообщает браузеру, что не нужно обрабатывать событие какэто было бы нормально.См. MDN для лучшего объяснения.

...