यह प्रश्न डेमो रेपो https://github.com/bartocc/ पर आधारित है। सो-एंटर-की-इंटीग्रेशन-टेस्ट

इस डेमो Ember.js 3.12 ऐप में <XFoo> घटक है। जब प्रस्तुत किया जाता है, तो यह एक टेक्स्ट इनपुट और सबमिट बटन के साथ एक साधारण <form> प्रदर्शित करता है।

<form> के submit ईवेंट पर एक क्रिया बाध्य है जो घटक की submitted संपत्ति को true पर सेट कर देगी। डिफ़ॉल्ट रूप से, यह false है।

वांछित व्यवहार इसे सबमिट करने के बाद <form> के बजाय धन्यवाद संदेश प्रदर्शित करना है।

यहाँ घटक का खाका है:

{{#if this.submitted}}
  <span>
    Thank you for your submission
  </span>
{{else}}
  <form {{action (mut this.submitted) true on="submit"}}>
    {{! template-lint-disable self-closing-void-elements }}
    <input type="text" />
    <button type="submit">
      Save
    </button>
  </form>
{{/if}}

मैंने <XFoo> के लिए 2 एकीकरण परीक्षण जोड़े हैं:

  • कोई कोड के साथ Enter कीडाउन ईवेंट को <input> टैग पर भेजने का प्रयास करता है
await render(hbs`<XFoo />`);
await triggerKeyEvent('input', 'keydown', 'Enter');
  • अन्य सबमिट बटन पर क्लिक करते हैं
await render(hbs`<XFoo />`);
await click('button');

दोनों परीक्षण धन्यवाद संदेश की उपस्थिति की जांच करते हैं:

assert.dom('span').hasText('Thank you for your submission', 'displays the thank you span');

पहला टेस्ट फेल हो जाता है, दूसरा पास हो जाता है।

मैं यह समझना चाहता हूं कि triggerKeyEvent का उपयोग करने से फ़ॉर्म सबमिट क्यों नहीं होता है।

2
bartocc 4 नवम्बर 2019, 06:33
क्या वास्तव में एंटर दबाने से आवेदन चलाते समय फॉर्म जमा हो जाता है?
 – 
Gaurav
4 नवम्बर 2019, 16:47
हाँ, यह ऐप चलाते समय काम करता है
 – 
bartocc
4 नवम्बर 2019, 18:03
On Discord ने सुझाव दिया कि यह निम्न ember-test-helpers समस्या github से संबंधित हो सकता है .com/emberjs/ember-test-helpers/issues/626। और मुझे विश्वास है कि वास्तव में, मैंने उसी सीमा को मारा है।
 – 
bartocc
4 नवम्बर 2019, 18:04
ऐसा लगता है कि इसे काम करना चाहिए क्योंकि यह दस्तावेज़ों में एक उदाहरण है: . क्या आपने इसके बजाय कीकोड का उपयोग करने का प्रयास किया है? 'प्रतीक्षा ट्रिगरकेइवेंट ('इनपुट', 'कीडाउन', 13);
 – 
Patrick Berkeley
5 नवम्बर 2019, 19:16

1 उत्तर

मैं मूल ईवेंट डिस्पैचर का उपयोग करके इसे ट्रिगर करने में सक्षम था:

const submitForm = async (element) => {
  const submitEvent = new Event('submit');
  element.querySelector('form').dispatchEvent(submitEvent);
  await settled();
};

मैं इसे इनपुट की सामग्री भरने के बाद कहता हूं

await fillIn(selector, '<content>');
await submitForm(this.element);
0
Mateus Valgueiro Teixeira 27 अगस्त 2021, 21:14