Merge pull request #3 from zfir-dev/first-tests

First tests

app/components/input-modal.hbs

@@ -1,16 +1,15 @@
-<!-- app/components/input-modal.hbs -->
+{{!-- app/components/input-modal.hbs --}}
 <div class="input-modal">
   <div class="modal-content">
-    <button {{on "click" this.closeModal}}>X</button>
-    <label>First Name</label>
-    <input type="text" value={{this.firstName}} {{on "input" this.updateFirstName}} />
+    <button 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>Last Name</label>
-    <input type="text" value={{this.lastName}} {{on "input" this.updateLastName}} />
+    <label for="last-name">Last Name</label>
+    <input id="last-name" type="text" value={{this.lastName}} {{on "input" this.updateLastName}} />
 
-    <label>Email</label>
-    <input type="email" value={{this.email}} {{on "input" this.updateEmail}} />
-
-    <button {{on "click" this.save}}>Save</button>
+    <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>
   </div>
 </div>

app/components/open-modal-button.hbs

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

app/styles/app.css

@@ -1,4 +1,5 @@
 /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
+
 /* app/styles/app.css */
 .input-modal {
   position: fixed;
@@ -8,8 +9,8 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgb(0, 0, 0);
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgb(0 0 0);
+  background-color: rgb(0 0 0 / 40%);
   padding-top: 60px;
 }
 

app/templates/application.hbs

@@ -1,4 +1,4 @@
-<!-- app/templates/application.hbs -->
+{{!-- app/templates/application.hbs --}}
 <h2>Welcome to DevCon 2024 Ember.js Test Demo</h2>
 <OpenModalButton />
 {{outlet}}

package.json

@@ -60,6 +60,7 @@
     "@types/ember-data__store": "^4.0.7",
     "@types/ember-qunit": "^6.1.1",
     "@types/ember-resolver": "^9.0.0",
+    "@types/htmlbars-inline-precompile": "^3.0.0",
     "@types/qunit": "^2.19.10",
     "@types/rsvp": "^4.0.9",
     "broccoli-asset-rev": "^3.0.0",

tests/integration/input-modal-test.ts

@@ -0,0 +1,18 @@
+// tests/integration/components/input-modal-test.ts
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | input-modal', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders input fields, a close button and a save button', async function (assert) {
+    await render(hbs`<InputModal />`);
+    assert.dom('input[type="text"]:nth-of-type(1)').exists();
+    assert.dom('input[type="text"]:nth-of-type(2)').exists();
+    assert.dom('input[type="email"]').exists();
+    assert.dom('button:nth-of-type(1)').hasText('X');
+    assert.dom('button:nth-of-type(2)').hasText('Save');
+  });
+});

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

@@ -0,0 +1,33 @@
+// tests/integration/components/input-modal-test.ts
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { click, findAll, render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+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');
+  });
+
+  test('it opens the modal when the button is clicked', async function (assert) {
+    await render(hbs`<OpenModalButton />`);
+    assert.dom('input[type="text"]:nth-of-type(1)').doesNotExist();
+    assert.strictEqual(
+      findAll('button').filter((btn) => btn.textContent?.trim() === 'Save')
+        .length,
+      0,
+      'Save button does not exist before clicking',
+    );
+    await click('button');
+    assert.dom('input[type="text"]:nth-of-type(1)').exists();
+    assert.strictEqual(
+      findAll('button').filter((btn) => btn.textContent?.trim() === 'Save')
+        .length,
+      1,
+      'Save button exists after clicking',
+    );
+  });
+});