Merge pull request #5 from zfir-dev/add-scenarios-keshav

Add tests with waitFor, waitUntil and settled

app/components/user-info.hbs

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

app/components/user-info.ts

@@ -1,21 +1,39 @@
+import { waitFor } from '@ember/test-helpers';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { Promise } from 'rsvp';
 
 export default class UserInfoComponent extends Component {
-    @tracked name = '';
-    @tracked errorMsg = '';
+    @tracked name: string = '';
+    @tracked errorMsg: string = '';
+    @tracked userDate: Date | undefined = undefined;
 
     constructor(a: never, b: never) {
         super(a, b);
-
         window.addEventListener('message', (e) => {
             if (e.data.name === 'error-message') this.errorMsg = e.data.message;
-        })
-        // window.parent.postMessage({ name: 'error-message', message: 'unknown user !' });
+        });
         this.setName();
+        this.setDate();       
+    }
+
+    async setName() {
+        return new Promise((resolve) => {
+            setTimeout(() => { 
+                this.name = 'John';
+                resolve(); 
+            }, 2000);
+        });
     }
 
-    setName(): void {
-        this.name = 'John';
+    async setDate() {
+        return new Promise((resolve) => {
+            setTimeout(() => { 
+                this.userDate = new Date();
+                const div = document.querySelector('.date-container') as HTMLDivElement;
+                div.innerHTML = `<h1 class="date">${this.userDate}</h1>`;
+                resolve(); 
+            }, 2000);
+        });
     }
 }

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

@@ -1,27 +1,67 @@
 import { module, test } from 'qunit';
-import { setupRenderingTest } from 'devcon-2024-ember-test/tests/helpers';
-import { find, render, settled } from '@ember/test-helpers';
+import { setupRenderingTest } from 'ember-qunit';
+import { find, render, settled, waitFor, waitUntil } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | user-info', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it fails without await settled', async function (assert) {
+  // Fails
+  // 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 !' });
+
+  //   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) {
     await render(hbs`<UserInfo />`);
 
     window.parent.postMessage({ name: 'error-message', message: 'unknown user !' });
+    await settled();
 
     const div = find('.user-info') as HTMLDivElement;
     assert.deepEqual(div.textContent?.trim(), 'Error: unknown user !');
   });
 
-  test('it passes with await settled', async function (assert) {
+  // 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 />`);
 
-    window.parent.postMessage({ name: 'error-message', message: 'unknown user !' });
-    await settled();
+    const found = await waitUntil(() => {
+      const div = find('.user-info') as HTMLDivElement;
+      return div?.textContent?.includes('Welcome John');
+    }, { timeout: 3000 });
 
-    const div = find('.user-info') as HTMLDivElement;
-    assert.deepEqual(div.textContent?.trim(), 'Error: unknown user !');
+    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(new Date() as unknown as string));
+  // });
+
+  // Passes
+  test('it passes with waitFor to show date', async function (assert) {
+    await render(hbs`<UserInfo />`);
+
+    await waitFor('.date', { timeout: 3000 });
+    const div = find('.date') as HTMLDivElement;
+
+    assert.true(div.textContent?.includes(new Date() as unknown as string));
   });
 });