Fix test, remove click-outside

hashicorp-forge · Oct 5, 2023 · 54518d7 · 54518d7
1 parent 63a30ec
commit 54518d7
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 19 deletions.
diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs
@@ -166,6 +166,20 @@
         {{/if}}
       </div>
 
+      {{! Created }}
+      <div class="space-y-2">
+        <Document::Sidebar::SectionHeader @title="Created" />
+        <p>{{or (parse-date @document.created "long") "Unknown"}}</p>
+      </div>
+
+      {{! Last modified }}
+      <div class="space-y-2">
+        <Document::Sidebar::SectionHeader @title="Last modified" />
+        {{#if @document.modifiedTime}}
+          <p>{{time-ago @document.modifiedTime}}</p>
+        {{/if}}
+      </div>
+
       {{! Owner }}
       <div class="space-y-2">
         <Document::Sidebar::SectionHeader @title="Owner" />
@@ -209,20 +223,6 @@
         </div>
       </div>
 
-      {{! Created }}
-      <div class="space-y-2">
-        <Document::Sidebar::SectionHeader @title="Created" />
-        <p>{{or (parse-date @document.created "long") "Unknown"}}</p>
-      </div>
-
-      {{! Last modified }}
-      <div class="space-y-2">
-        <Document::Sidebar::SectionHeader @title="Last modified" />
-        {{#if @document.modifiedTime}}
-          <p>{{time-ago @document.modifiedTime}}</p>
-        {{/if}}
-      </div>
-
       {{! Related resources }}
       <div>
         <Document::Sidebar::RelatedResources

diff --git a/web/app/components/editable-field.hbs b/web/app/components/editable-field.hbs
@@ -15,7 +15,11 @@
           @selected={{this.value}}
           @onChange={{this.onChange}}
           @onKeydown={{fn this.onPeopleSelectKeydown this.maybeUpdateValue}}
-          {{click-outside (fn this.maybeUpdateValue this.value)}}
+          {{dismissible
+            dismiss=(fn this.maybeUpdateValue this.value)
+            related=this.relatedButtons
+            shouldIgnoreEscape=true
+          }}
         />
       {{else}}
         {{on-document "keydown" this.onTextFieldKeydown}}

diff --git a/web/package.json b/web/package.json
@@ -81,7 +81,6 @@
     "ember-cli-string-helpers": "^6.1.0",
     "ember-cli-terser": "^4.0.2",
     "ember-cli-typescript": "^5.2.1",
-    "ember-click-outside-modifier": "^4.0.0",
     "ember-composable-helpers": "^5.0.0",
     "ember-data": "~3.28.6",
     "ember-element-helper": "^0.6.1",

diff --git a/web/tests/integration/components/editable-field-test.ts b/web/tests/integration/components/editable-field-test.ts
@@ -15,6 +15,9 @@ const PEOPLE_SELECT = "[data-test-people-select]";
 const SAVE_BUTTON = "[data-test-save-button";
 const CANCEL_BUTTON = "[data-test-cancel-button]";
 
+const REMOVE_USER_BUTTON = ".ember-power-select-multiple-remove-btn";
+const EDITABLE_PERSON = ".ember-power-select-multiple-option";
+
 interface EditableFieldComponentTestContext extends MirageTestContext {
   onCommit: (value: any) => void;
   isLoading: boolean;
@@ -214,19 +217,22 @@ module("Integration | Component | editable-field", function (hooks) {
 
     // Make a change
     await click(FIELD_TOGGLE);
-    await click(".ember-power-select-multiple-remove-btn");
+    await click(REMOVE_USER_BUTTON);
     await click(SAVE_BUTTON);
 
     assert.equal(count, 1, "onCommit has been called");
   });
 
-  test("the input value resets on cancel", async function (this: EditableFieldComponentTestContext, assert) {
+  test("the value resets on cancel (STRING)", async function (this: EditableFieldComponentTestContext, assert) {
     await render<EditableFieldComponentTestContext>(hbs`
       <EditableField  @value="foo" @onSave={{this.onCommit}} />
     `);
 
-    await click(FIELD_TOGGLE);
+    assert.dom(EDITABLE_FIELD).hasText("foo");
 
+    // Cancel using Escape key
+
+    await click(FIELD_TOGGLE);
     await fillIn("textarea", "bar");
     await triggerKeyEvent("textarea", "keydown", "Escape");
 
@@ -235,6 +241,51 @@ module("Integration | Component | editable-field", function (hooks) {
     await click(FIELD_TOGGLE);
 
     assert.dom("textarea").hasValue("foo");
+
+    // Cancel using the button
+
+    await fillIn("textarea", "bar");
+    await click(CANCEL_BUTTON);
+
+    assert.dom(EDITABLE_FIELD).hasText("foo");
+
+    await click(FIELD_TOGGLE);
+
+    assert.dom("textarea").hasValue("foo");
+  });
+
+  test("the value resets on cancel (PEOPLE)", async function (this: EditableFieldComponentTestContext, assert) {
+    await render<EditableFieldComponentTestContext>(hbs`
+      <EditableField
+        @value={{array (hash email="foo")}}
+        @onSave={{this.onCommit}}
+      />
+    `);
+
+    assert.dom(EDITABLE_FIELD).containsText("foo");
+
+    // Cancel using Escape key
+
+    await click(FIELD_TOGGLE);
+    await click(REMOVE_USER_BUTTON);
+    await triggerKeyEvent("input", "keydown", "Escape");
+
+    assert.dom(EDITABLE_FIELD).containsText("foo");
+
+    await click(FIELD_TOGGLE);
+
+    assert.dom(EDITABLE_PERSON).containsText("foo");
+
+    // Cancel using the button
+
+    await click(REMOVE_USER_BUTTON);
+    await click(CANCEL_BUTTON);
+
+    assert.dom(EDITABLE_FIELD).containsText("foo");
+
+    await click(FIELD_TOGGLE);
+
+    assert.dom(EDITABLE_PERSON).containsText("foo");
   });
 
   test("it trims a string value before evaluating it", async function (this: EditableFieldComponentTestContext, assert) {