Presentation

app/components/input-modal.hbs

@@ -1,15 +1,2 @@
 {{!-- app/components/input-modal.hbs --}}
-<div class="input-modal">
-  <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}} />
-
-    <label for="last-name">Last Name</label>
-    <input id="last-name" type="text" value={{this.lastName}} {{on "input" this.updateLastName}} />
-
-    <label for="email">Email</label>
-    <input id="email" type="email" value={{this.email}} {{on "input" this.updateEmail}} />
-    <button data-test-save-btn="" type="button" {{on "click" this.save}}>Save</button>
-  </div>
-</div>
+{{!-- Write template here --}}

app/components/input-modal.ts

@@ -8,35 +8,5 @@ interface InputModalArgs {
 }
 
 export default class InputModalComponent extends Component<InputModalArgs> {
-  @tracked firstName = '';
-  @tracked lastName = '';
-  @tracked email = '';
-
-  @action
-  updateFirstName(event: Event) {
-    this.firstName = (event.target as HTMLInputElement).value;
-  }
-
-  @action
-  updateLastName(event: Event) {
-    this.lastName = (event.target as HTMLInputElement).value;
-  }
-
-  @action
-  updateEmail(event: Event) {
-    this.email = (event.target as HTMLInputElement).value;
-  }
-
-  @action
-  closeModal() {
-    if (this.args.closeModal) {
-      this.args.closeModal();
-    }
-  }
-
-  @action
-  save() {
-    alert('Data saved successfully!');
-    this.closeModal();
-  }
+  // Write controller here
 }

tests/acceptance/application-test.ts

@@ -13,6 +13,7 @@ module('Acceptance | application | app', function (hooks) {
     assert.deepEqual(h2.textContent, 'Welcome to DevCon 2024 Ember.js Test Demo');
 
     assert.dom('[data-test-modal-btn]').exists(); // assert open modal button exists
+    // await this.pauseTest();
 
     const hasUserName = await waitUntil(() => {
         const div = find('.user-info') as HTMLDivElement;
@@ -25,11 +26,13 @@ module('Acceptance | application | app', function (hooks) {
     assert.dom('[data-test-date]').containsText(new Date() as unknown as string); // assert date exists
 
     await click('[data-test-modal-btn]');
+    // await this.pauseTest();
     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]');
+    // await this.pauseTest();
     assert.dom('[data-test-modal]').doesNotExist(); // assert modal is closed
   });
 });

tests/integration/components/open-modal-button-test.ts

@@ -8,8 +8,7 @@ module('Integration | Component | open-modal-button', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders the open modal button', async function (assert) {
-    await render(hbs`<OpenModalButton />`);
-    assert.dom('button').hasText('Open Modal');
+    // Write the test here
   });
 
   test('it opens the modal when the button is clicked', async function (assert) {

tests/integration/components/user-info-test.ts

@@ -20,14 +20,14 @@ module('Integration | Component | user-info', function (hooks) {
   });
 
   // Fails
-  // test('it fails without await settled to show user info', async function (assert) {
-  //   await render(hbs`<UserInfo />`);
+  test('it fails without await settled to show user info', async function (assert) {
+    await render(hbs`<UserInfo />`);
 
-  //   window.parent.postMessage({ name: 'error-message', message: 'unknown user !' });
+    window.parent.postMessage({ name: 'error-message', message: 'unknown user !' });
 
-  //   const div = find('.user-info') as HTMLDivElement;
-  //   assert.deepEqual(div.textContent?.trim(), 'Error: unknown user !');
-  // });
+    const div = find('.user-info') as HTMLDivElement;
+    assert.deepEqual(div.textContent?.trim(), 'Error: unknown user !');
+  });
 
   // Passes
   test('it passes with await settled to show user info', async function (assert) {
@@ -40,15 +40,6 @@ module('Integration | Component | user-info', function (hooks) {
     assert.deepEqual(div.textContent?.trim(), 'Error: unknown user !');
   });
 
-  // Fails
-  // test('it fails without waitUntil to show updated text', async function (assert) {
-  //   await render(hbs`<UserInfo />`);
-
-  //   const div = find('.user-info') as HTMLDivElement;
-  //   assert.true(div.textContent?.includes('Welcome John'));
-  // });
-
-  // Passes
   test('it passes with waitUntil to show updated text', async function (assert) {
     await render(hbs`<UserInfo />`);
     clock.tick(2000);
@@ -60,16 +51,7 @@ module('Integration | Component | user-info', function (hooks) {
 
     assert.strictEqual(found, true);
   });
-
-  // Fails
-  // test('it fails without waitFor to show date', async function (assert) {
-  //   await render(hbs`<UserInfo />`);
-
-  //   const div = find('.date') as HTMLDivElement;
-  //   assert.true(div.textContent?.includes("Fri Jan 01 1999 04:00:02 GMT+0400 (Mauritius Standard Time)"));
-  // });
-
-  // Passes
+
   test('it passes with waitFor to show date', async function (assert) {
     await render(hbs`<UserInfo />`);
     clock.tick(2000);