test: rewrite spare tests to octane/glimmer syntax

adfinis · Dec 23, 2021 · e0a98e1 · e0a98e1
1 parent d5808c1
commit e0a98e1
Show file tree

Hide file tree

Showing 26 changed files with 109 additions and 83 deletions.
diff --git a/addon/components/validated-form.js b/addon/components/validated-form.js
@@ -1,4 +1,5 @@
 import { action } from "@ember/object";
+import { scheduleOnce } from "@ember/runloop";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { resolve } from "rsvp";
@@ -15,10 +16,14 @@ export default class ValidatedFormComponent extends Component {
     super(...args);
 
     if (this.args.model && this.args.model.validate) {
-      this.args.model.validate();
+      scheduleOnce("actions", this, "validateModel", this.args.model);
     }
   }
 
+  validateModel(model) {
+    model.validate();
+  }
+
   @action
   async submit(event) {
     event.preventDefault();

diff --git a/tests/integration/components/validated-form-defaults-test.js b/tests/integration/components/validated-form-defaults-test.js
@@ -55,7 +55,7 @@ module("Integration | Component | validated form defaults", function (hooks) {
       `
     );
 
-    this.model = { error: { test1: { validation: ["Error"] } } };
+    this.set("model", { error: { test1: { validation: ["Error"] } } });
 
     await render(hbs`
       <ValidatedForm as |f|>

diff --git a/tests/integration/components/validated-form-test.js b/tests/integration/components/validated-form-test.js
@@ -125,7 +125,7 @@ module("Integration | Component | validated form", function (hooks) {
 
     await render(hbs`
       <ValidatedForm
-        @model={{changeset model UserValidations}}
+        @model={{changeset this.model this.UserValidations}}
         @on-submit={{this.submit}}
         as |f|>
         <f.input @label="First name" @name="firstName"/>
@@ -456,7 +456,7 @@ module("Integration | Component | validated form", function (hooks) {
     });
 
     await render(hbs`
-      {{#if show}}
+      {{#if this.show}}
         <ValidatedForm
           @model={{changeset this.model}}
           @on-submit={{this.submit}}
@@ -488,7 +488,7 @@ module("Integration | Component | validated form", function (hooks) {
     });
 
     await render(hbs`
-      {{#if show}}
+      {{#if this.show}}
         <ValidatedForm
           @model={{changeset this.model}}
           @on-submit={{this.submit}}

diff --git a/tests/integration/components/validated-input-test.js b/tests/integration/components/validated-input-test.js
@@ -8,46 +8,48 @@ module("Integration | Component | validated input", function (hooks) {
   setupRenderingTest(hooks);
 
   test("it renders simple text inputs with correct name", async function (assert) {
-    await render(hbs`{{validated-input name="bar"}}`);
+    await render(hbs`<ValidatedInput @name="bar"/>`);
 
     assert.dom("input").hasAttribute("type", "text");
     assert.dom("input").hasAttribute("name", "bar");
   });
 
   test("it renders email input", async function (assert) {
-    await render(hbs`{{validated-input type="email"}}`);
+    await render(hbs`<ValidatedInput @type="email"/>`);
 
     assert.dom("input").hasAttribute("type", "email");
   });
 
   test("it renders tel input", async function (assert) {
-    await render(hbs`{{validated-input type="tel"}}`);
+    await render(hbs`<ValidatedInput @type="tel"/>`);
 
     assert.dom("input").hasAttribute("type", "tel");
   });
 
   test("it renders disabled inputs", async function (assert) {
-    await render(hbs`{{validated-input disabled=true}}`);
+    await render(hbs`<ValidatedInput @disabled={{true}}/>`);
 
     assert.dom("input").isDisabled();
   });
 
   test("it renders inputs with placeholder", async function (assert) {
-    await render(hbs`{{validated-input placeholder="foo"}}`);
+    await render(hbs`<ValidatedInput @placeholder="foo"/>`);
 
     assert.dom("input").hasAttribute("placeholder", "foo");
   });
 
   test("it renders inputs with value", async function (assert) {
-    await render(hbs`{{validated-input value="foo"}}`);
+    await render(hbs`<ValidatedInput @value="foo"/>`);
 
     assert.dom("input").hasValue("foo");
   });
 
   test("it renders inputs with model", async function (assert) {
     this.set("model", new Changeset({ firstName: "Max" }));
 
-    await render(hbs`{{validated-input name="firstName" model=model}}`);
+    await render(
+      hbs`<ValidatedInput @name="firstName" @model={{this.model}}/>`
+    );
 
     assert.dom("input").hasValue("Max");
   });
@@ -58,7 +60,7 @@ module("Integration | Component | validated input", function (hooks) {
       changeset.set("firstName", value.toUpperCase());
     });
     await render(
-      hbs`{{validated-input name="firstName" model=model on-update=update}}`
+      hbs`<ValidatedInput @name="firstName" @model={{this.model}} @on-update={{this.update}}/>`
     );
 
     await fillIn("input", "foo");
@@ -70,32 +72,32 @@ module("Integration | Component | validated input", function (hooks) {
     this.set("model", new Changeset({ firstName: "Max" }));
 
     await render(
-      hbs`{{validated-input name="firstName" model=model value="foobar"}}`
+      hbs`<ValidatedInput @name="firstName" @model={{this.model}} @value="foobar"/>`
     );
 
     assert.dom("input").hasValue("foobar");
   });
 
   test("it renders textarea inputs with correct name", async function (assert) {
-    await render(hbs`{{validated-input type="textarea" name="bar"}}`);
+    await render(hbs`<ValidatedInput @type="textarea" @name="bar"/>`);
 
     assert.dom("textarea").hasAttribute("name", "bar");
   });
 
   test("it renders disabled textareas", async function (assert) {
-    await render(hbs`{{validated-input type="textarea" disabled=true}}`);
+    await render(hbs`<ValidatedInput @type="textarea" @disabled={{true}}/>`);
 
     assert.dom("textarea").isDisabled();
   });
 
   test("it renders textareas with placeholder", async function (assert) {
-    await render(hbs`{{validated-input type="textarea" placeholder="foo"}}`);
+    await render(hbs`<ValidatedInput @type="textarea" @placeholder="foo"/>`);
 
     assert.dom("textarea").hasAttribute("placeholder", "foo");
   });
 
   test("it renders textareas with value", async function (assert) {
-    await render(hbs`{{validated-input type="textarea" value="foo"}}`);
+    await render(hbs`<ValidatedInput @type="textarea" @value="foo"/>`);
 
     assert.dom("textarea").hasValue("foo");
   });
@@ -104,23 +106,23 @@ module("Integration | Component | validated input", function (hooks) {
     this.set("model", new Changeset({ firstName: "Max" }));
 
     await render(
-      hbs`{{validated-input type="textarea" name="firstName" model=model}}`
+      hbs`<ValidatedInput @type="textarea" @name="firstName" @model={{this.model}}/>`
     );
 
     assert.dom("textarea").hasValue("Max");
   });
 
   test("it renders textareas autocomplete attribute", async function (assert) {
     await render(
-      hbs`{{validated-input type="textarea" autocomplete="given-name" name="firstName"}}`
+      hbs`<ValidatedInput @type="textarea" @autocomplete="given-name" @name="firstName"/>`
     );
 
     assert.dom("textarea").hasAttribute("autocomplete", "given-name");
   });
 
   test("it renders input autocomplete attribute", async function (assert) {
     await render(
-      hbs`{{validated-input type="password" autocomplete="new-password" name="password"}}`
+      hbs`<ValidatedInput @type="password" @autocomplete="new-password" @name="password"/>`
     );
 
     assert.dom("input").hasAttribute("autocomplete", "new-password");
@@ -129,9 +131,9 @@ module("Integration | Component | validated input", function (hooks) {
   test("it renders the block if provided", async function (assert) {
     await render(
       hbs`
-        {{#validated-input as |fi|}}
+        <ValidatedInput as |fi|>
           <div id="custom-input"></div>
-        {{/validated-input}}
+        </ValidatedInput>
       `
     );
 
@@ -141,9 +143,9 @@ module("Integration | Component | validated input", function (hooks) {
   test("it yields the value provided to the block", async function (assert) {
     await render(
       hbs`
-        {{#validated-input value="my-value" as |fi|}}
+        <ValidatedInput @value="my-value" as |fi|>
           <input value={{fi.value}} />
-        {{/validated-input}}
+        </ValidatedInput>
       `
     );
 
@@ -155,9 +157,9 @@ module("Integration | Component | validated input", function (hooks) {
 
     await render(
       hbs`
-        {{#validated-input model=model name="firstName" as |fi|}}
+        <ValidatedInput @model={{this.model}} @name="firstName" as |fi|>
           <input value={{fi.value}} />
-        {{/validated-input}}
+        </ValidatedInput>
       `
     );
 
@@ -169,9 +171,9 @@ module("Integration | Component | validated input", function (hooks) {
 
     await render(
       hbs`
-        {{#validated-input model=model name="firstName" value="Other Value" as |fi|}}
+        <ValidatedInput @model={{this.model}} @name="firstName" @value="Other Value" as |fi|>
           <input value={{fi.value}} />
-        {{/validated-input}}
+        </ValidatedInput>
       `
     );
 
@@ -181,9 +183,9 @@ module("Integration | Component | validated input", function (hooks) {
   test("it yields the provided name", async function (assert) {
     await render(
       hbs`
-        {{#validated-input name="foobar" as |fi|}}
+        <ValidatedInput @name="foobar" as |fi|>
           <input name={{fi.name}} />
-        {{/validated-input}}
+        </ValidatedInput>
       `
     );
 
@@ -195,9 +197,9 @@ module("Integration | Component | validated input", function (hooks) {
 
     await render(
       hbs`
-        {{#validated-input model=model as |fi|}}
+        <ValidatedInput @model={{this.model}} as |fi|>
           <input value={{fi.model.firstName}} />
-        {{/validated-input}}
+        </ValidatedInput>
       `
     );
 
@@ -210,9 +212,9 @@ module("Integration | Component | validated input", function (hooks) {
 
     await render(
       hbs`
-        {{#validated-input model=model name="firstName" as |fi|}}
-          <button onclick={{action fi.update "Merlin"}}></button>
-        {{/validated-input}}
+        <ValidatedInput @model={{this.model}} @name="firstName" as |fi|>
+          <button {{on "click" (fn fi.update "Merlin")}}></button>
+        </ValidatedInput>
       `
     );
 
@@ -226,9 +228,9 @@ module("Integration | Component | validated input", function (hooks) {
 
     await render(
       hbs`
-        {{#validated-input name='test' model=model as |fi|}}
-          <button onclick={{action fi.setDirty}}></button>
-        {{/validated-input}}
+        <ValidatedInput @name='test' @model={{this.model}} as |fi|>
+          <button {{on "click" fi.setDirty}}></button>
+        </ValidatedInput>
       `
     );
 
@@ -242,9 +244,9 @@ module("Integration | Component | validated input", function (hooks) {
   test("it yields the input id to the block", async function (assert) {
     await render(
       hbs`
-        {{#validated-input label="Name" as |fi|}}
+        <ValidatedInput @label="Name" as |fi|>
           <input id={{fi.inputId}} />
-        {{/validated-input}}
+        </ValidatedInput>
       `
     );
 
@@ -256,7 +258,9 @@ module("Integration | Component | validated input", function (hooks) {
   test("it can change the value from outside the input", async function (assert) {
     this.set("model", new Changeset({ firstName: "Max" }));
 
-    await render(hbs`{{validated-input name="firstName" model=model}}`);
+    await render(
+      hbs`<ValidatedInput @name="firstName" @model={{this.model}}/>`
+    );
 
     assert.dom("input").hasValue("Max");
 
@@ -269,7 +273,7 @@ module("Integration | Component | validated input", function (hooks) {
     this.set("model", new Changeset({ firstName: "Max" }));
 
     await render(
-      hbs`{{validated-input name="firstName" inputName="testFirstName" model=model}}`
+      hbs`<ValidatedInput @name="firstName" @inputName="testFirstName" @model={{this.model}}/>`
     );
 
     assert.dom("input").hasValue("Max");

diff --git a/tests/integration/components/validated-input/-themes/bootstrap/error-test.js b/tests/integration/components/validated-input/-themes/bootstrap/error-test.js
@@ -14,7 +14,7 @@ module(
       this.set("errors", ["foo", "bar", "baz"]);
 
       await render(
-        hbs`{{validated-input/-themes/bootstrap/error errors=errors}}`
+        hbs`<ValidatedInput::-themes::bootstrap::error @errors={{this.errors}} />`
       );
 
       assert.dom("span").hasClass("invalid-feedback");

diff --git a/tests/integration/components/validated-input/-themes/bootstrap/hint-test.js b/tests/integration/components/validated-input/-themes/bootstrap/hint-test.js
@@ -11,7 +11,9 @@ module(
     setupConfigTest(hooks, { theme: "bootstrap" });
 
     test("it renders", async function (assert) {
-      await render(hbs`{{validated-input/-themes/bootstrap/hint hint='Test'}}`);
+      await render(
+        hbs`<ValidatedInput::-themes::bootstrap::hint @hint="Test" />`
+      );
 
       assert.dom("small").hasClass("form-text");
       assert.dom("small").hasClass("text-muted");

diff --git a/tests/integration/components/validated-input/-themes/bootstrap/label-test.js b/tests/integration/components/validated-input/-themes/bootstrap/label-test.js
@@ -12,7 +12,7 @@ module(
 
     test("it renders", async function (assert) {
       await render(
-        hbs`{{validated-input/-themes/bootstrap/label label='Test'}}`
+        hbs`<ValidatedInput::-themes::bootstrap::Label @label="Test" />`
       );
 
       assert.dom("label").hasText("Test");

diff --git a/tests/integration/components/validated-input/-themes/uikit/error-test.js b/tests/integration/components/validated-input/-themes/uikit/error-test.js
@@ -13,7 +13,9 @@ module(
     test("it renders", async function (assert) {
       this.set("errors", ["foo", "bar", "baz"]);
 
-      await render(hbs`{{validated-input/-themes/uikit/error errors=errors}}`);
+      await render(
+        hbs`<ValidatedInput::-themes::uikit::Error @errors={{this.errors}} />`
+      );
 
       assert.dom("small").hasClass("uk-text-danger");
       assert.dom("small").hasText("foo, bar, baz");

diff --git a/tests/integration/components/validated-input/-themes/uikit/hint-test.js b/tests/integration/components/validated-input/-themes/uikit/hint-test.js
@@ -11,7 +11,7 @@ module(
     setupConfigTest(hooks, { theme: "uikit" });
 
     test("it renders", async function (assert) {
-      await render(hbs`{{validated-input/-themes/uikit/hint hint='Test'}}`);
+      await render(hbs`<ValidatedInput::-themes::uikit::Hint @hint="Test" />`);
 
       assert.dom("small").hasClass("uk-text-muted");
       assert.dom("small").hasText("Test");

diff --git a/tests/integration/components/validated-input/-themes/uikit/label-test.js b/tests/integration/components/validated-input/-themes/uikit/label-test.js
@@ -11,7 +11,9 @@ module(
     setupConfigTest(hooks, { theme: "uikit" });
 
     test("it renders", async function (assert) {
-      await render(hbs`{{validated-input/-themes/uikit/label label='Test'}}`);
+      await render(
+        hbs`<ValidatedInput::-themes::uikit::Label @label="Test" />`
+      );
 
       assert.dom("label").hasClass("uk-form-label");
       assert.dom("label").hasText("Test");

diff --git a/tests/integration/components/validated-input/error-test.js b/tests/integration/components/validated-input/error-test.js
@@ -9,7 +9,7 @@ module("Integration | Component | validated-input/error", function (hooks) {
   test("it renders", async function (assert) {
     this.set("errors", ["foo", "bar", "baz"]);
 
-    await render(hbs`{{validated-input/error errors=errors}}`);
+    await render(hbs`<ValidatedInput::Error @errors={{this.errors}} />`);
 
     assert.dom("span").hasText("foo, bar, baz");
   });

diff --git a/tests/integration/components/validated-input/hint-test.js b/tests/integration/components/validated-input/hint-test.js
@@ -7,7 +7,7 @@ module("Integration | Component | validated-input/hint", function (hooks) {
   setupRenderingTest(hooks);
 
   test("it renders", async function (assert) {
-    await render(hbs`{{validated-input/hint hint='Test'}}`);
+    await render(hbs`<ValidatedInput::Hint @hint="Test" />`);
 
     assert.dom("small").hasText("Test");
   });