Javascript Ember.js测试页面会自动刷新

我试图从这里开始遵循一个集成测试示例：（测试操作）

我的问题是，出于某种原因，测试输出会自动、永久地保持刷新

测试代码：

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

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

Component.js:

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

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

组件模板：

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

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

{{{#除非输入有效}
嘿，这是无效的！
{{/除非}
{{inputLabel}}
{{input type=“text”id=“input”占位符=输入占位符值=输入值class=“表单控制”}


{{submitText}}
{{outlet}}

---

我想这可能是因为模板中的表单一直在提交，但事实并非如此，因为它应该只单击提交一次。非常感谢任何帮助

遵循@Lux的建议作为评论；您需要执行以下操作以防止表单提交重新加载页面：

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

---

您将收到

事件

作为最后一个参数，并调用

preventDefault

告诉浏览器不要像通常那样处理事件。请参阅以获得更好的解释。

遵循@Lux的建议作为评论；您需要执行以下操作以防止表单提交重新加载页面：

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

---

您将收到

事件

作为最后一个参数，并调用

preventDefault

告诉浏览器不要像通常那样处理事件。请参阅以获得更好的解释。

您不需要

preventDefault

提交操作，因此提交表单将重新加载页面（标准HTML行为）@Lux，这在我之前的Ember.js教程中没有包含。您能否举例说明如何在这种情况下实施

preventDefault

？如果您的实施有效，那么您的声誉将得到提升；）您将事件作为操作的最后一个参数。剩下的是标准JavaScript。您不必

preventDefault

submit操作，因此提交表单将重新加载页面（标准HTML行为）@Lux，这不包括在我下面的Ember.js教程中。您能否举例说明如何在这种情况下实施

preventDefault

？如果您的实施有效，那么您的声誉将得到提升；）您将事件作为操作的最后一个参数。剩下的是标准的JavaScript。我最不愿意想到的是tbh，我没想到它会工作——但是——它工作了！我想的最后一件事是，我没想到它会起作用——但是——它起作用了！