test: rewrite spare tests to octane/glimmer syntax

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|>

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"/>

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");

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");

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");

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");

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");

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");

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");

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");
   });

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");
   });

tests/integration/components/validated-input/label-test.js

@@ -7,7 +7,7 @@ module("Integration | Component | validated-input/label", function (hooks) {
   setupRenderingTest(hooks);
 
   test("it renders", async function (assert) {
-    await render(hbs`{{validated-input/label label='Test'}}`);
+    await render(hbs`<ValidatedInput::Label @label="Test" />`);
 
     assert.dom("label").hasText("Test");
   });

tests/integration/components/validated-input/types/-themes/bootstrap/checkbox-group-test.js

@@ -12,10 +12,10 @@ module(
 
     test("it renders", async function (assert) {
       await render(hbs`
-        {{validated-input/types/-themes/bootstrap/checkbox-group
-          options = (array (hash key='t' label='Triangle') (hash key='s' label='Square'))
-          update=(action (mut value))
-        }}
+        <ValidatedInput::types::-themes::bootstrap::CheckboxGroup
+          @options={{array (hash key='t' label='Triangle') (hash key='s' label='Square')}}
+          @update={{fn (mut value)}}
+        />
         `);
 
       assert.dom("div.custom-control.custom-checkbox").exists();

tests/integration/components/validated-input/types/-themes/bootstrap/checkbox-test.js

@@ -12,10 +12,10 @@ module(
 
     test("it renders", async function (assert) {
       await render(hbs`
-        {{validated-input/types/-themes/bootstrap/checkbox
-          labelComponent=(component 'validated-input/-themes/bootstrap/label' label='Test')
-          update=(action (mut value))
-        }}
+        <ValidatedInput::types::-themes::bootstrap::Checkbox
+          @labelComponent={{component "validated-input/-themes/bootstrap/label" label="Test"}}
+          @update={{fn (mut value)}}
+        />
         `);
 
       assert.dom("div.custom-control.custom-checkbox").exists();