From b75c0226b2791dba304add9fbd758515bbdda423 Mon Sep 17 00:00:00 2001
From: Falk <falk.neumann@adfinis.com>
Date: Thu, 23 Dec 2021 15:04:23 +0100
Subject: [PATCH] test: rewrite spare tests to octane/glimmer syntax

---
 .../validated-form-defaults-test.js           |  2 +-
 .../components/validated-form-test.js         |  2 +-
 .../components/validated-input-test.js        | 80 ++++++++++---------
 .../-themes/bootstrap/error-test.js           |  2 +-
 .../-themes/bootstrap/hint-test.js            |  4 +-
 .../-themes/bootstrap/label-test.js           |  2 +-
 .../-themes/uikit/error-test.js               |  4 +-
 .../-themes/uikit/hint-test.js                |  2 +-
 .../-themes/uikit/label-test.js               |  4 +-
 .../components/validated-input/error-test.js  |  2 +-
 .../components/validated-input/hint-test.js   |  2 +-
 .../components/validated-input/label-test.js  |  2 +-
 .../-themes/bootstrap/checkbox-group-test.js  |  8 +-
 .../types/-themes/bootstrap/checkbox-test.js  |  8 +-
 .../-themes/bootstrap/radio-group-test.js     |  5 +-
 .../types/-themes/bootstrap/select-test.js    |  2 +-
 .../-themes/uikit/checkbox-group-test.js      |  5 +-
 .../types/-themes/uikit/checkbox-test.js      |  8 +-
 .../types/-themes/uikit/radio-group-test.js   |  5 +-
 .../types/-themes/uikit/select-test.js        |  2 +-
 .../types/checkbox-group-test.js              |  8 +-
 .../validated-input/types/checkbox-test.js    |  8 +-
 .../validated-input/types/radio-group-test.js |  8 +-
 .../validated-input/types/select-test.js      |  4 +-
 24 files changed, 100 insertions(+), 79 deletions(-)

diff --git a/tests/integration/components/validated-form-defaults-test.js b/tests/integration/components/validated-form-defaults-test.js
index cc5e1fe1..22b67607 100644
--- 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
index aa867599..72e29da5 100644
--- 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"/>
diff --git a/tests/integration/components/validated-input-test.js b/tests/integration/components/validated-input-test.js
index 9ac6cc47..4091abdd 100644
--- a/tests/integration/components/validated-input-test.js
+++ b/tests/integration/components/validated-input-test.js
@@ -8,38 +8,38 @@ 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");
   });
@@ -47,7 +47,9 @@ module("Integration | Component | validated input", function (hooks) {
   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,7 +106,7 @@ 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");
@@ -112,7 +114,7 @@ module("Integration | Component | validated input", function (hooks) {
 
   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");
@@ -120,7 +122,7 @@ module("Integration | Component | validated input", function (hooks) {
 
   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
index 3c7e2150..0051baad 100644
--- 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
index d59d0c1c..b89e7a93 100644
--- 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
index 6785a1dc..4d5c5a43 100644
--- 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
index 41d69610..5e341776 100644
--- 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
index bb03b1f7..9be6ec1b 100644
--- 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
index 2d31e69f..646e6963 100644
--- 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
index 1b01c297..8c763dfd 100644
--- 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
index e2cb9493..d0798496 100644
--- 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");
   });
diff --git a/tests/integration/components/validated-input/label-test.js b/tests/integration/components/validated-input/label-test.js
index 24a86a48..3785d466 100644
--- a/tests/integration/components/validated-input/label-test.js
+++ b/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");
   });
diff --git a/tests/integration/components/validated-input/types/-themes/bootstrap/checkbox-group-test.js b/tests/integration/components/validated-input/types/-themes/bootstrap/checkbox-group-test.js
index a8088c30..3d984c46 100644
--- a/tests/integration/components/validated-input/types/-themes/bootstrap/checkbox-group-test.js
+++ b/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();
diff --git a/tests/integration/components/validated-input/types/-themes/bootstrap/checkbox-test.js b/tests/integration/components/validated-input/types/-themes/bootstrap/checkbox-test.js
index dfda0149..0b3cf117 100644
--- a/tests/integration/components/validated-input/types/-themes/bootstrap/checkbox-test.js
+++ b/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();
diff --git a/tests/integration/components/validated-input/types/-themes/bootstrap/radio-group-test.js b/tests/integration/components/validated-input/types/-themes/bootstrap/radio-group-test.js
index 6a07a153..9101689e 100644
--- a/tests/integration/components/validated-input/types/-themes/bootstrap/radio-group-test.js
+++ b/tests/integration/components/validated-input/types/-themes/bootstrap/radio-group-test.js
@@ -23,7 +23,10 @@ module(
       ]);
 
       await render(
-        hbs`{{validated-input/types/-themes/bootstrap/radio-group options=options update=(action (mut value))}}`
+        hbs`<ValidatedInput::types::-themes::bootstrap::RadioGroup
+          @options={{this.options}}
+          @update={{fn (mut value)}}
+        />`
       );
 
       assert.dom("div.custom-control.custom-radio").exists({ count: 2 });
diff --git a/tests/integration/components/validated-input/types/-themes/bootstrap/select-test.js b/tests/integration/components/validated-input/types/-themes/bootstrap/select-test.js
index 11db1f3c..553ec65c 100644
--- a/tests/integration/components/validated-input/types/-themes/bootstrap/select-test.js
+++ b/tests/integration/components/validated-input/types/-themes/bootstrap/select-test.js
@@ -23,7 +23,7 @@ module(
       ]);
 
       await render(
-        hbs`{{validated-input/types/-themes/bootstrap/select options=options}}`
+        hbs`<ValidatedInput::types::-themes::bootstrap::Select @options={{this.options}} />`
       );
 
       assert.dom("select").hasClass("form-control");
diff --git a/tests/integration/components/validated-input/types/-themes/uikit/checkbox-group-test.js b/tests/integration/components/validated-input/types/-themes/uikit/checkbox-group-test.js
index 70a66775..4a58ab58 100644
--- a/tests/integration/components/validated-input/types/-themes/uikit/checkbox-group-test.js
+++ b/tests/integration/components/validated-input/types/-themes/uikit/checkbox-group-test.js
@@ -23,7 +23,10 @@ module(
       ]);
 
       await render(
-        hbs`{{validated-input/types/-themes/uikit/checkbox-group options=options update=(action (mut value))}}`
+        hbs`<ValidatedInput::types::-themes::uikit::CheckboxGroup
+          @options={{this.options}}
+          @update={{fn (mut value)}}
+        />`
       );
 
       assert.dom("label > input").exists();
diff --git a/tests/integration/components/validated-input/types/-themes/uikit/checkbox-test.js b/tests/integration/components/validated-input/types/-themes/uikit/checkbox-test.js
index ffd74bbe..16fa9269 100644
--- a/tests/integration/components/validated-input/types/-themes/uikit/checkbox-test.js
+++ b/tests/integration/components/validated-input/types/-themes/uikit/checkbox-test.js
@@ -12,10 +12,10 @@ module(
 
     test("it renders", async function (assert) {
       await render(hbs`
-        {{validated-input/types/-themes/uikit/checkbox
-          labelComponent=(component 'validated-input/-themes/uikit/label' label='Test')
-          update=(action (mut value))
-        }}
+        <ValidatedInput::types::-themes::uikit::Checkbox
+          @labelComponent={{component "validated-input/-themes/uikit/label" label="Test"}}
+          @update={{fn (mut value)}}
+        />
         `);
 
       assert.dom("label > input").exists();
diff --git a/tests/integration/components/validated-input/types/-themes/uikit/radio-group-test.js b/tests/integration/components/validated-input/types/-themes/uikit/radio-group-test.js
index ddc0125c..1a69f290 100644
--- a/tests/integration/components/validated-input/types/-themes/uikit/radio-group-test.js
+++ b/tests/integration/components/validated-input/types/-themes/uikit/radio-group-test.js
@@ -23,7 +23,10 @@ module(
       ]);
 
       await render(
-        hbs`{{validated-input/types/-themes/uikit/radio-group options=options update=(action (mut value))}}`
+        hbs`<ValidatedInput::types::-themes::uikit::RadioGroup
+          @options={{this.options}}
+          @update={{fn (mut value)}}
+        />`
       );
 
       assert.dom("label > input").exists({ count: 2 });
diff --git a/tests/integration/components/validated-input/types/-themes/uikit/select-test.js b/tests/integration/components/validated-input/types/-themes/uikit/select-test.js
index d8ea20de..47d2b023 100644
--- a/tests/integration/components/validated-input/types/-themes/uikit/select-test.js
+++ b/tests/integration/components/validated-input/types/-themes/uikit/select-test.js
@@ -23,7 +23,7 @@ module(
       ]);
 
       await render(
-        hbs`{{validated-input/types/-themes/uikit/select options=options}}`
+        hbs`<ValidatedInput::types::-themes::uikit::Select @options={{this.options}} />`
       );
 
       assert.dom("select").hasClass("uk-select");
diff --git a/tests/integration/components/validated-input/types/checkbox-group-test.js b/tests/integration/components/validated-input/types/checkbox-group-test.js
index 61aeb6eb..9d5ce599 100644
--- a/tests/integration/components/validated-input/types/checkbox-group-test.js
+++ b/tests/integration/components/validated-input/types/checkbox-group-test.js
@@ -15,10 +15,10 @@ module(
       ]);
 
       await render(hbs`
-      {{validated-input/types/checkbox-group
-        options=options
-        update=(action (mut value))
-      }}
+      <ValidatedInput::types::CheckboxGroup
+        @options={{this.options}}
+        @update={{fn (mut this.value)}}
+      />
       `);
 
       assert.dom("input[type=checkbox]").exists({ count: 2 });
diff --git a/tests/integration/components/validated-input/types/checkbox-test.js b/tests/integration/components/validated-input/types/checkbox-test.js
index e50734de..52e57aee 100644
--- a/tests/integration/components/validated-input/types/checkbox-test.js
+++ b/tests/integration/components/validated-input/types/checkbox-test.js
@@ -10,10 +10,10 @@ module(
 
     test("it renders", async function (assert) {
       await render(hbs`
-      {{validated-input/types/checkbox
-        labelComponent=(component 'validated-input/label' label='Test')
-        update=(action (mut value))
-      }}
+      <ValidatedInput::types::Checkbox
+        @labelComponent={{component "validated-input/label" label="Test"}}
+        @update={{fn (mut this.value)}}
+      />
       `);
 
       assert.dom("input[type=checkbox]").exists();
diff --git a/tests/integration/components/validated-input/types/radio-group-test.js b/tests/integration/components/validated-input/types/radio-group-test.js
index 26e9e43f..f4f804b2 100644
--- a/tests/integration/components/validated-input/types/radio-group-test.js
+++ b/tests/integration/components/validated-input/types/radio-group-test.js
@@ -15,10 +15,10 @@ module(
       ]);
 
       await render(hbs`
-      {{validated-input/types/radio-group
-        options=options
-        update=(action (mut value))
-      }}
+      <ValidatedInput::Types::RadioGroup
+        @options={{this.options}}
+        @update={{fn (mut this.value)}}
+      />
       `);
 
       assert.dom("input[type=radio]").exists({ count: 2 });
diff --git a/tests/integration/components/validated-input/types/select-test.js b/tests/integration/components/validated-input/types/select-test.js
index 61076bef..c9e1af6a 100644
--- a/tests/integration/components/validated-input/types/select-test.js
+++ b/tests/integration/components/validated-input/types/select-test.js
@@ -14,7 +14,9 @@ module(
         { key: 2, label: 2 },
       ]);
 
-      await render(hbs`{{validated-input/types/select options=options}}`);
+      await render(
+        hbs`<ValidatedInput::Types::Select @options={{this.options}} />`
+      );
 
       assert.dom("select").exists();
       assert.dom("option").exists({ count: 2 });