Merge pull request #8 from zfir-dev/add-accep-test

Add acceptance test

app/components/input-modal.hbs

@@ -1,7 +1,7 @@
 {{!-- app/components/input-modal.hbs --}}
 <div class="input-modal">
-  <div class="modal-content">
-    <button type="button" {{on "click" this.closeModal}}>X</button>
+  <div data-test-modal="" class="modal-content">
+    <button data-test-close-btn="" type="button" {{on "click" this.closeModal}}>X</button>
     <label for="first-name">First Name</label>
     <input id="first-name" type="text" value={{this.firstName}} {{on "input" this.updateFirstName}} />
 
@@ -10,6 +10,6 @@
 
     <label for="email">Email</label>
     <input id="email" type="email" value={{this.email}} {{on "input" this.updateEmail}} />
-    <button type="button" {{on "click" this.save}}>Save</button>
+    <button data-test-save-btn="" type="button" {{on "click" this.save}}>Save</button>
   </div>
 </div>

app/components/open-modal-button.hbs

@@ -1,5 +1,5 @@
 {{!-- app/components/open-modal-button.hbs --}}
-<button type="button" {{on "click" this.openModal}}>Open Modal</button>
+<button data-test-modal-btn="" type="button" {{on "click" this.openModal}}>Open Modal</button>
 {{#if this.isModalOpen}}
   <InputModal @closeModal={{this.closeModal}} />
 {{/if}}

app/components/user-info.hbs

@@ -1,9 +1,9 @@
 <div  class="user-info">
     {{#if this.errorMsg}}
-        <h1>Error: {{this.errorMsg}}</h1>
+        <h1 data-test-error="">Error: {{this.errorMsg}}</h1>
     {{/if}}
     {{#if this.name}}
-        <h1>Welcome {{this.name}}</h1>
+        <h1 data-test-user-name="">Welcome {{this.name}}</h1>
     {{/if}}
 </div>
 <div class="date-container">

app/components/user-info.ts

@@ -31,7 +31,7 @@ export default class UserInfoComponent extends Component {
             setTimeout(() => { 
                 this.userDate = new Date();
                 const div = document.querySelector('.date-container') as HTMLDivElement;
-                div.innerHTML = `<h1 class="date">${this.userDate}</h1>`;
+                div.innerHTML = `<h1 data-test-date="" class="date">${this.userDate}</h1>`;
                 resolve(); 
             }, 2000);
         });

tests/acceptance/application-test.ts

@@ -0,0 +1,35 @@
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import { click, find, settled, visit, waitFor, waitUntil } from '@ember/test-helpers';
+
+module('Acceptance | application | app', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('I can fill form', async function (assert) {
+    await visit('/');
+    await settled();
+
+    const h2 = find('h2') as HTMLElement; // get first h2 element
+    assert.deepEqual(h2.textContent, 'Welcome to DevCon 2024 Ember.js Test Demo');
+
+    assert.dom('[data-test-modal-btn]').exists(); // assert open modal button exists
+
+    const hasUserName = await waitUntil(() => {
+        const div = find('.user-info') as HTMLDivElement;
+        return div?.textContent?.includes('Welcome John');
+      }, { timeout: 3000 });
+
+    assert.strictEqual(hasUserName, true); // assert welcome user name exists
+
+    await waitFor('.date', { timeout: 3000 });
+    assert.dom('[data-test-date]').containsText(new Date() as unknown as string); // assert date exists
+
+    await click('[data-test-modal-btn]');
+    assert.dom('[data-test-modal]').exists(); // assert modal opens
+    assert.dom('[data-test-close-btn]').exists(); // assert close button exists
+    assert.dom('[data-test-save-btn]').exists(); // assert save button exists
+
+    await click('[data-test-close-btn]');
+    assert.dom('[data-test-modal]').doesNotExist(); // assert modal is closed
+  });
+});