From cee7373a3c0783a02fe00b5e510c41ba604403c2 Mon Sep 17 00:00:00 2001 From: Jonas Metzener Date: Fri, 8 Oct 2021 09:32:45 +0200 Subject: [PATCH] feat: refactor all components to glimmer and use native classes BREAKING CHANGE: While the public API won't change, there is a huge chance that this will break implementations if someone's extending the components of this addon. Components that do need to be refactored to glimmer. --- addon/components/validated-button.hbs | 7 + addon/components/validated-button.js | 12 +- .../-themes/bootstrap/button.js | 16 +- .../validated-button/-themes/uikit/button.js | 16 +- addon/components/validated-button/button.hbs | 9 + addon/components/validated-button/button.js | 10 +- addon/components/validated-form.hbs | 20 ++ addon/components/validated-form.js | 78 ++++---- .../components/validated-input.hbs | 0 addon/components/validated-input.js | 6 +- .../-themes/bootstrap/error.js | 6 +- .../validated-input/-themes/bootstrap/hint.js | 6 +- .../-themes/bootstrap/label.js | 2 +- .../-themes/bootstrap/render.js | 6 +- .../validated-input/-themes/uikit/error.hbs | 1 + .../validated-input/-themes/uikit/error.js | 5 +- .../validated-input/-themes/uikit/hint.js | 6 +- .../validated-input/-themes/uikit/label.js | 6 +- .../validated-input/-themes/uikit/render.hbs | 123 +++++++++++++ .../validated-input/-themes/uikit/render.js | 8 +- addon/components/validated-input/error.hbs | 1 + addon/components/validated-input/error.js | 13 +- addon/components/validated-input/hint.hbs | 1 + addon/components/validated-input/hint.js | 9 +- addon/components/validated-input/label.hbs | 3 + addon/components/validated-input/label.js | 10 +- addon/components/validated-input/render.hbs | 121 ++++++++++++ addon/components/validated-input/render.js | 23 +-- .../-themes/bootstrap/checkbox-group.hbs | 14 ++ .../types/-themes/bootstrap/checkbox-group.js | 5 +- .../types/-themes/bootstrap/checkbox.hbs | 12 ++ .../types/-themes/bootstrap/checkbox.js | 7 +- .../types/-themes/bootstrap/input.js | 15 +- .../types/-themes/bootstrap/radio-group.hbs | 15 ++ .../types/-themes/bootstrap/radio-group.js | 5 +- .../types/-themes/bootstrap/select.js | 15 +- .../types/-themes/bootstrap/textarea.js | 15 +- .../types/-themes/uikit/checkbox-group.hbs | 15 ++ .../types/-themes/uikit/checkbox-group.js | 5 +- .../types/-themes/uikit/checkbox.hbs | 13 ++ .../types/-themes/uikit/checkbox.js | 5 +- .../types/-themes/uikit/input.js | 15 +- .../types/-themes/uikit/radio-group.hbs | 17 ++ .../types/-themes/uikit/radio-group.js | 5 +- .../types/-themes/uikit/select.js | 15 +- .../types/-themes/uikit/textarea.js | 15 +- .../validated-input/types/checkbox-group.hbs | 10 +- .../validated-input/types/checkbox-group.js | 20 +- .../validated-input/types/checkbox.hbs | 9 + .../validated-input/types/checkbox.js | 16 +- .../validated-input/types/input.hbs | 13 ++ .../components/validated-input/types/input.js | 26 +-- .../validated-input/types/radio-group.hbs | 14 ++ .../validated-input/types/radio-group.js | 16 +- .../validated-input/types/select.hbs | 16 ++ .../validated-input/types/select.js | 9 +- .../validated-input/types/textarea.hbs | 16 ++ .../validated-input/types/textarea.js | 26 +-- .../templates/components/validated-button.hbs | 7 - .../components/validated-button/button.hbs | 1 - addon/templates/components/validated-form.hbs | 15 -- .../validated-input/-themes/uikit/render.hbs | 108 ----------- .../components/validated-input/error.hbs | 1 - .../components/validated-input/hint.hbs | 1 - .../components/validated-input/label.hbs | 1 - .../components/validated-input/render.hbs | 107 ----------- .../-themes/bootstrap/checkbox-group.hbs | 14 -- .../types/-themes/bootstrap/checkbox.hbs | 10 - .../types/-themes/bootstrap/radio-group.hbs | 15 -- .../types/-themes/bootstrap/select.hbs | 16 -- .../types/-themes/uikit/checkbox-group.hbs | 15 -- .../types/-themes/uikit/checkbox.hbs | 11 -- .../types/-themes/uikit/radio-group.hbs | 17 -- .../types/-themes/uikit/select.hbs | 17 -- .../validated-input/types/checkbox.hbs | 9 - .../validated-input/types/radio-group.hbs | 14 -- .../validated-input/types/select.hbs | 16 -- app/components/validated-form.js | 8 +- tests/dummy/app/app.js | 12 +- .../dummy/app/components/color-component.hbs | 8 + tests/dummy/app/components/color-component.js | 21 +-- .../components/custom-button.hbs | 2 +- .../components/custom-error.hbs | 2 +- .../components/custom-hint.hbs | 2 +- .../components/custom-label.hbs | 4 +- .../components/favorite-colors-component.js | 24 --- .../dummy/app/components/favorite-colors.hbs | 23 +++ tests/dummy/app/components/favorite-colors.js | 27 +++ .../app/components/permanent-custom-hint.hbs | 5 + .../app/components/permanent-custom-hint.js | 5 - .../docs/components/validated-form.js | 24 +-- tests/dummy/app/controllers/index.js | 32 ++-- tests/dummy/app/models/user.js | 18 +- .../routes/docs/components/validated-form.js | 13 +- tests/dummy/app/routes/index.js | 27 +-- .../templates/components/color-component.hbs | 1 - .../components/favorite-colors-component.hbs | 18 -- .../components/permanent-custom-hint.hbs | 3 - .../dummy/app/templates/docs/customization.md | 12 +- tests/dummy/app/templates/index.hbs | 9 +- .../components/validated-button-test.js | 10 +- .../-themes/bootstrap/button-test.js | 20 +- .../-themes/uikit/button-test.js | 18 +- .../validated-button/button-test.js | 10 +- .../validated-form-defaults-test.js | 172 ++++++++++-------- .../-themes/bootstrap/render-test.js | 15 +- .../-themes/uikit/render-test.js | 14 +- .../components/validated-input/render-test.js | 13 +- .../types/-themes/bootstrap/input-test.js | 7 +- .../types/-themes/bootstrap/textarea-test.js | 7 +- .../types/-themes/uikit/input-test.js | 7 +- .../types/-themes/uikit/textarea-test.js | 7 +- .../validated-input/types/input-test.js | 7 +- .../validated-input/types/textarea-test.js | 7 +- .../components/validated-label-test.js | 50 ++--- 115 files changed, 1027 insertions(+), 955 deletions(-) create mode 100644 addon/components/validated-button.hbs create mode 100644 addon/components/validated-button/button.hbs create mode 100644 addon/components/validated-form.hbs rename addon/{templates => }/components/validated-input.hbs (100%) create mode 100644 addon/components/validated-input/-themes/uikit/error.hbs create mode 100644 addon/components/validated-input/-themes/uikit/render.hbs create mode 100644 addon/components/validated-input/error.hbs create mode 100644 addon/components/validated-input/hint.hbs create mode 100644 addon/components/validated-input/label.hbs create mode 100644 addon/components/validated-input/render.hbs create mode 100644 addon/components/validated-input/types/-themes/bootstrap/checkbox-group.hbs create mode 100644 addon/components/validated-input/types/-themes/bootstrap/checkbox.hbs create mode 100644 addon/components/validated-input/types/-themes/bootstrap/radio-group.hbs create mode 100644 addon/components/validated-input/types/-themes/uikit/checkbox-group.hbs create mode 100644 addon/components/validated-input/types/-themes/uikit/checkbox.hbs create mode 100644 addon/components/validated-input/types/-themes/uikit/radio-group.hbs rename addon/{templates => }/components/validated-input/types/checkbox-group.hbs (51%) create mode 100644 addon/components/validated-input/types/checkbox.hbs create mode 100644 addon/components/validated-input/types/input.hbs create mode 100644 addon/components/validated-input/types/radio-group.hbs create mode 100644 addon/components/validated-input/types/select.hbs create mode 100644 addon/components/validated-input/types/textarea.hbs delete mode 100644 addon/templates/components/validated-button.hbs delete mode 100644 addon/templates/components/validated-button/button.hbs delete mode 100644 addon/templates/components/validated-form.hbs delete mode 100644 addon/templates/components/validated-input/-themes/uikit/render.hbs delete mode 100644 addon/templates/components/validated-input/error.hbs delete mode 100644 addon/templates/components/validated-input/hint.hbs delete mode 100644 addon/templates/components/validated-input/label.hbs delete mode 100644 addon/templates/components/validated-input/render.hbs delete mode 100644 addon/templates/components/validated-input/types/-themes/bootstrap/checkbox-group.hbs delete mode 100644 addon/templates/components/validated-input/types/-themes/bootstrap/checkbox.hbs delete mode 100644 addon/templates/components/validated-input/types/-themes/bootstrap/radio-group.hbs delete mode 100644 addon/templates/components/validated-input/types/-themes/bootstrap/select.hbs delete mode 100644 addon/templates/components/validated-input/types/-themes/uikit/checkbox-group.hbs delete mode 100644 addon/templates/components/validated-input/types/-themes/uikit/checkbox.hbs delete mode 100644 addon/templates/components/validated-input/types/-themes/uikit/radio-group.hbs delete mode 100644 addon/templates/components/validated-input/types/-themes/uikit/select.hbs delete mode 100644 addon/templates/components/validated-input/types/checkbox.hbs delete mode 100644 addon/templates/components/validated-input/types/radio-group.hbs delete mode 100644 addon/templates/components/validated-input/types/select.hbs create mode 100644 tests/dummy/app/components/color-component.hbs rename tests/dummy/app/{templates => }/components/custom-button.hbs (85%) rename tests/dummy/app/{templates => }/components/custom-error.hbs (85%) rename tests/dummy/app/{templates => }/components/custom-hint.hbs (59%) rename tests/dummy/app/{templates => }/components/custom-label.hbs (72%) delete mode 100644 tests/dummy/app/components/favorite-colors-component.js create mode 100644 tests/dummy/app/components/favorite-colors.hbs create mode 100644 tests/dummy/app/components/favorite-colors.js create mode 100644 tests/dummy/app/components/permanent-custom-hint.hbs delete mode 100644 tests/dummy/app/components/permanent-custom-hint.js delete mode 100644 tests/dummy/app/templates/components/color-component.hbs delete mode 100644 tests/dummy/app/templates/components/favorite-colors-component.hbs delete mode 100644 tests/dummy/app/templates/components/permanent-custom-hint.hbs diff --git a/addon/components/validated-button.hbs b/addon/components/validated-button.hbs new file mode 100644 index 00000000..2f0a1633 --- /dev/null +++ b/addon/components/validated-button.hbs @@ -0,0 +1,7 @@ +{{#let (component this.buttonComponent onClick=@action loading=@loading disabled=@disabled label=@label type=@type) as |Button|}} + {{#if (has-block)}} + + {{else}} + \ No newline at end of file diff --git a/addon/components/validated-button/button.js b/addon/components/validated-button/button.js index 62a56425..878483aa 100644 --- a/addon/components/validated-button/button.js +++ b/addon/components/validated-button/button.js @@ -1,9 +1,3 @@ -import Component from "@ember/component"; +import Component from "@glimmer/component"; -import layout from "../../templates/components/validated-button/button"; - -export default Component.extend({ - layout, - tagName: "button", - attributeBindings: ["disabled", "type", "action:onclick"], -}); +export default class ButtonComponent extends Component {} diff --git a/addon/components/validated-form.hbs b/addon/components/validated-form.hbs new file mode 100644 index 00000000..3d458e32 --- /dev/null +++ b/addon/components/validated-form.hbs @@ -0,0 +1,20 @@ +
+ {{yield (hash + model=@model + loading=this.loading + input=(component "validated-input" + model=@model + submitted=this.submitted + validateBeforeSubmit=@validateBeforeSubmit + ) + submit=(component "validated-button" + type="submit" + loading=this.loading + label="Save" + action=this.submit + ) + )}} +
\ No newline at end of file diff --git a/addon/components/validated-form.js b/addon/components/validated-form.js index 8f9d9515..0c3188b3 100644 --- a/addon/components/validated-form.js +++ b/addon/components/validated-form.js @@ -1,70 +1,56 @@ -import Component from "@ember/component"; +import { action } from "@ember/object"; +import Component from "@glimmer/component"; +import { tracked } from "@glimmer/tracking"; import { resolve } from "rsvp"; -import layout from "../templates/components/validated-form"; - const PROP_ON_SUBMIT = "on-submit"; const PROP_ON_INVALID_SUBMIT = "on-invalid-submit"; -export default Component.extend({ - tagName: "form", - - classNameBindings: ["submitted"], - attributeBindings: ["autocomplete"], - - loading: false, - - submitted: false, - - layout, +export default class ValidatedFormComponent extends Component { + @tracked loading = false; + @tracked submitted = false; + @tracked validateBeforeSubmit = true; - validateBeforeSubmit: true, + constructor(...args) { + super(...args); - init(...args) { - this._super(...args); - if (this.model && this.model.validate) { - this.model.validate(); + if (this.args.model && this.args.model.validate) { + this.args.model.validate(); } - }, + } - submit() { - this.set("submitted", true); - const model = this.model; + @action + async submit(event) { + event.preventDefault(); + + this.submitted = true; + const model = this.args.model; if (!model || !model.validate) { this.runCallback(PROP_ON_SUBMIT); return false; } - model.validate().then(() => { - if (!this.element) { - // We were removed from the DOM while validating - return; - } + await model.validate(); + + if (model.get("isInvalid")) { + this.runCallback(PROP_ON_INVALID_SUBMIT); + } else { + this.runCallback(PROP_ON_SUBMIT); + } - if (model.get("isInvalid")) { - this.runCallback(PROP_ON_INVALID_SUBMIT); - } else { - this.runCallback(PROP_ON_SUBMIT); - } - }); return false; - }, + } runCallback(callbackProp) { - const callback = this.get(callbackProp); + const callback = this.args[callbackProp]; if (typeof callback !== "function") { return; } - const model = this.model; - this.set("loading", true); - resolve(callback(model)).finally(() => { - if (!this.element) { - // We were removed from the DOM while running on-submit() - return; - } - this.set("loading", false); + this.loading = true; + resolve(callback(this.args.model)).finally(() => { + this.loading = false; }); - }, -}); + } +} diff --git a/addon/templates/components/validated-input.hbs b/addon/components/validated-input.hbs similarity index 100% rename from addon/templates/components/validated-input.hbs rename to addon/components/validated-input.hbs diff --git a/addon/components/validated-input.js b/addon/components/validated-input.js index da614c67..b36e5019 100644 --- a/addon/components/validated-input.js +++ b/addon/components/validated-input.js @@ -1,11 +1,9 @@ -import { setComponentTemplate } from "@ember/component"; import { action, set, get } from "@ember/object"; import { guidFor } from "@ember/object/internals"; import Component from "@glimmer/component"; import { tracked } from "@glimmer/tracking"; import themedComponent from "../-private/themed-component"; -import template from "../templates/components/validated-input"; /** * This component wraps form inputs. @@ -20,7 +18,7 @@ import template from "../templates/components/validated-input"; * @class validated-input * @export default */ -export class ValidatedInput extends Component { +export default class ValidatedInputComponent extends Component { inputId = guidFor(this); @tracked dirty; @@ -97,5 +95,3 @@ export class ValidatedInput extends Component { } } } - -export default setComponentTemplate(template, ValidatedInput); diff --git a/addon/components/validated-input/-themes/bootstrap/error.js b/addon/components/validated-input/-themes/bootstrap/error.js index 22a72d8f..9d6189f7 100644 --- a/addon/components/validated-input/-themes/bootstrap/error.js +++ b/addon/components/validated-input/-themes/bootstrap/error.js @@ -1,5 +1,5 @@ import Component from "../../error"; -export default Component.extend({ - classNames: ["invalid-feedback"], -}); +export default class BootstrapErrorComponent extends Component { + class = "invalid-feedback"; +} diff --git a/addon/components/validated-input/-themes/bootstrap/hint.js b/addon/components/validated-input/-themes/bootstrap/hint.js index b1d37a1a..e602c504 100644 --- a/addon/components/validated-input/-themes/bootstrap/hint.js +++ b/addon/components/validated-input/-themes/bootstrap/hint.js @@ -1,5 +1,5 @@ import Component from "../../hint"; -export default Component.extend({ - classNames: ["form-text", "text-muted"], -}); +export default class BootstrapHintComponent extends Component { + class = "form-text text-muted"; +} diff --git a/addon/components/validated-input/-themes/bootstrap/label.js b/addon/components/validated-input/-themes/bootstrap/label.js index 48227c2e..a35091a5 100644 --- a/addon/components/validated-input/-themes/bootstrap/label.js +++ b/addon/components/validated-input/-themes/bootstrap/label.js @@ -1,3 +1,3 @@ import Component from "../../label"; -export default Component.extend({}); +export default class BootstrapLabelComponent extends Component {} diff --git a/addon/components/validated-input/-themes/bootstrap/render.js b/addon/components/validated-input/-themes/bootstrap/render.js index 7751372a..4b82e617 100644 --- a/addon/components/validated-input/-themes/bootstrap/render.js +++ b/addon/components/validated-input/-themes/bootstrap/render.js @@ -1,5 +1,5 @@ import Component from "../../render"; -export default Component.extend({ - classNames: ["form-group"], -}); +export default class BootstrapRenderComponent extends Component { + class = "form-group"; +} diff --git a/addon/components/validated-input/-themes/uikit/error.hbs b/addon/components/validated-input/-themes/uikit/error.hbs new file mode 100644 index 00000000..6fb2dd91 --- /dev/null +++ b/addon/components/validated-input/-themes/uikit/error.hbs @@ -0,0 +1 @@ +{{yield}}{{this.errorString}} diff --git a/addon/components/validated-input/-themes/uikit/error.js b/addon/components/validated-input/-themes/uikit/error.js index faa95af7..cb6bb535 100644 --- a/addon/components/validated-input/-themes/uikit/error.js +++ b/addon/components/validated-input/-themes/uikit/error.js @@ -1,6 +1,3 @@ import Component from "../../error"; -export default Component.extend({ - tagName: "small", - classNames: ["uk-text-danger"], -}); +export default class UikitErrorComponent extends Component {} diff --git a/addon/components/validated-input/-themes/uikit/hint.js b/addon/components/validated-input/-themes/uikit/hint.js index d60e5c27..17e37c71 100644 --- a/addon/components/validated-input/-themes/uikit/hint.js +++ b/addon/components/validated-input/-themes/uikit/hint.js @@ -1,5 +1,5 @@ import Component from "../../hint"; -export default Component.extend({ - classNames: ["uk-text-muted"], -}); +export default class UikitHintComponent extends Component { + class = "uk-text-muted"; +} diff --git a/addon/components/validated-input/-themes/uikit/label.js b/addon/components/validated-input/-themes/uikit/label.js index 809c9334..5349687f 100644 --- a/addon/components/validated-input/-themes/uikit/label.js +++ b/addon/components/validated-input/-themes/uikit/label.js @@ -1,5 +1,5 @@ import Component from "../../label"; -export default Component.extend({ - classNames: ["uk-form-label"], -}); +export default class UikitLabelComponent extends Component { + class = "uk-form-label"; +} diff --git a/addon/components/validated-input/-themes/uikit/render.hbs b/addon/components/validated-input/-themes/uikit/render.hbs new file mode 100644 index 00000000..13cdb933 --- /dev/null +++ b/addon/components/validated-input/-themes/uikit/render.hbs @@ -0,0 +1,123 @@ +
+ {{#unless (eq @type "checkbox")}} + <@labelComponent /> + {{/unless}} + +
+ {{#if (eq @type "select")}} + {{#let (component this.selectComponent) as |Select|}} + \ No newline at end of file diff --git a/addon/components/validated-input/types/textarea.js b/addon/components/validated-input/types/textarea.js index dc55bda6..f5517451 100644 --- a/addon/components/validated-input/types/textarea.js +++ b/addon/components/validated-input/types/textarea.js @@ -1,19 +1,11 @@ -import Component from "@ember/component"; +import { action } from "@ember/object"; +import Component from "@glimmer/component"; -export default Component.extend({ - tagName: "textarea", - attributeBindings: [ - "value", - "placeholder", - "name", - "inputId:id", - "disabled", - "autofocus", - "rows", - "cols", - "autocomplete", +export default class TextareaComponent extends Component { + @action + onUpdate(event) { + event.preventDefault(); - "update:oninput", - "setDirty:onblur", - ], -}); + this.args.update(event.target.value); + } +} diff --git a/addon/templates/components/validated-button.hbs b/addon/templates/components/validated-button.hbs deleted file mode 100644 index 90cac574..00000000 --- a/addon/templates/components/validated-button.hbs +++ /dev/null @@ -1,7 +0,0 @@ -{{#with (component buttonComponent onclick=action disabled=disabled label=label type=type class=class) as |button|}} - {{#if hasBlock}} - {{#component button}}{{yield}}{{/component}} - {{else}} - {{component button}} - {{/if}} -{{/with}} diff --git a/addon/templates/components/validated-button/button.hbs b/addon/templates/components/validated-button/button.hbs deleted file mode 100644 index c16d67b9..00000000 --- a/addon/templates/components/validated-button/button.hbs +++ /dev/null @@ -1 +0,0 @@ -{{#if hasBlock}}{{~yield~}}{{else}}{{~label~}}{{/if}} diff --git a/addon/templates/components/validated-form.hbs b/addon/templates/components/validated-form.hbs deleted file mode 100644 index b673ae7b..00000000 --- a/addon/templates/components/validated-form.hbs +++ /dev/null @@ -1,15 +0,0 @@ -{{yield (hash - model=model - loading=loading - input=(component "validated-input" - model=model - submitted=submitted - validateBeforeSubmit=validateBeforeSubmit - ) - submit=(component "validated-button" - class=submitClass - type="submit" - loading=loading - label="Save" - ) -)}} diff --git a/addon/templates/components/validated-input/-themes/uikit/render.hbs b/addon/templates/components/validated-input/-themes/uikit/render.hbs deleted file mode 100644 index 503ef096..00000000 --- a/addon/templates/components/validated-input/-themes/uikit/render.hbs +++ /dev/null @@ -1,108 +0,0 @@ -{{#unless (eq type "checkbox")}} - {{component labelComponent}} -{{/unless}} - -
- {{#if (eq type "select")}} - {{component selectComponent - disabled=disabled - name=(or inputName name) - optionLabelPath=optionLabelPath - optionValuePath=optionValuePath - optionTargetPath=optionTargetPath - includeBlank=includeBlank - multiple=multiple - value=value - options=options - inputId=inputId - - isValid=isValid - isInvalid=isInvalid - - update=update - setDirty=setDirty - }} - {{else if (or (eq type "radioGroup") (eq type "radio-group"))}} - {{component radioGroupComponent - value=value - options=options - inputId=inputId - name=(or inputName name) - disabled=disabled - - isValid=isValid - isInvalid=isInvalid - - update=update - setDirty=setDirty - }} - {{else if (or (eq type "checkboxGroup") (eq type "checkbox-group"))}} - {{component checkboxGroupComponent - value=value - options=options - inputId=inputId - name=(or inputName name) - disabled=disabled - - isValid=isValid - isInvalid=isInvalid - - update=update - setDirty=setDirty - }} - {{else if (eq type "checkbox")}} - {{component checkboxComponent - value=value - options=options - inputId=inputId - name=(or inputName name) - disabled=disabled - - isValid=isValid - isInvalid=isInvalid - - update=update - setDirty=setDirty - - labelComponent=labelComponent - }} - {{else if (eq type "textarea")}} - {{component textareaComponent - inputId=inputId - name=(or inputName name) - value=value - placeholder=placeholder - disabled=disabled - autofocus=autofocus - autocomplete=autocomplete - rows=rows - cols=cols - - isValid=isValid - isInvalid=isInvalid - - update=(action update value="target.value") - setDirty=setDirty - }} - {{else}} - {{component inputComponent - type=type - inputId=inputId - name=(or inputName name) - value=value - placeholder=placeholder - disabled=disabled - autofocus=autofocus - autocomplete=autocomplete - - isValid=isValid - isInvalid=isInvalid - - update=(action update value="target.value") - setDirty=setDirty - }} - {{/if}} -
- -{{component hintComponent}} -{{component errorComponent}} diff --git a/addon/templates/components/validated-input/error.hbs b/addon/templates/components/validated-input/error.hbs deleted file mode 100644 index de354685..00000000 --- a/addon/templates/components/validated-input/error.hbs +++ /dev/null @@ -1 +0,0 @@ -{{yield}}{{#each errors as |e i|}}{{unless (eq i 0) ", "}}{{e}}{{/each}} diff --git a/addon/templates/components/validated-input/hint.hbs b/addon/templates/components/validated-input/hint.hbs deleted file mode 100644 index 62c1a6c0..00000000 --- a/addon/templates/components/validated-input/hint.hbs +++ /dev/null @@ -1 +0,0 @@ -{{yield}}{{hint}} diff --git a/addon/templates/components/validated-input/label.hbs b/addon/templates/components/validated-input/label.hbs deleted file mode 100644 index a38ade9a..00000000 --- a/addon/templates/components/validated-input/label.hbs +++ /dev/null @@ -1 +0,0 @@ -{{yield}}{{label}}{{if required " *"}} diff --git a/addon/templates/components/validated-input/render.hbs b/addon/templates/components/validated-input/render.hbs deleted file mode 100644 index c896321d..00000000 --- a/addon/templates/components/validated-input/render.hbs +++ /dev/null @@ -1,107 +0,0 @@ -{{#unless (eq type "checkbox")}} - {{component labelComponent}} -{{/unless}} - -{{#if (eq type "select")}} - {{component selectComponent - disabled=disabled - name=(or inputName name) - promptIsSelectable=promptIsSelectable - optionLabelPath=optionLabelPath - optionValuePath=optionValuePath - optionTargetPath=optionTargetPath - includeBlank=includeBlank - multiple=multiple - value=value - options=options - inputId=inputId - - isValid=isValid - isInvalid=isInvalid - - update=update - setDirty=setDirty - }} -{{else if (or (eq type "radioGroup") (eq type "radio-group"))}} - {{component radioGroupComponent - value=value - options=options - inputId=inputId - name=(or inputName name) - disabled=disabled - - isValid=isValid - isInvalid=isInvalid - - update=update - setDirty=setDirty - }} -{{else if (or (eq type "checkboxGroup") (eq type "checkbox-group"))}} - {{component checkboxGroupComponent - value=value - options=options - inputId=inputId - name=(or inputName name) - disabled=disabled - - isValid=isValid - isInvalid=isInvalid - - update=update - setDirty=setDirty - }} -{{else if (eq type "checkbox")}} - {{component checkboxComponent - value=value - options=options - inputId=inputId - name=(or inputName name) - disabled=disabled - - isValid=isValid - isInvalid=isInvalid - - update=update - setDirty=setDirty - - labelComponent=labelComponent - }} -{{else if (eq type "textarea")}} - {{component textareaComponent - inputId=inputId - name=(or inputName name) - value=value - placeholder=placeholder - disabled=disabled - autofocus=autofocus - autocomplete=autocomplete - rows=rows - cols=cols - - isValid=isValid - isInvalid=isInvalid - - update=(action update value="target.value") - setDirty=setDirty - }} -{{else}} - {{component inputComponent - type=type - inputId=inputId - name=(or inputName name) - value=value - placeholder=placeholder - disabled=disabled - autofocus=autofocus - autocomplete=autocomplete - - isValid=isValid - isInvalid=isInvalid - - update=(action update value="target.value") - setDirty=setDirty - }} -{{/if}} - -{{component hintComponent}} -{{component errorComponent}} diff --git a/addon/templates/components/validated-input/types/-themes/bootstrap/checkbox-group.hbs b/addon/templates/components/validated-input/types/-themes/bootstrap/checkbox-group.hbs deleted file mode 100644 index 3baf7109..00000000 --- a/addon/templates/components/validated-input/types/-themes/bootstrap/checkbox-group.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{#each options as |option i|}} -
- - -
-{{/each}} \ No newline at end of file diff --git a/addon/templates/components/validated-input/types/-themes/bootstrap/checkbox.hbs b/addon/templates/components/validated-input/types/-themes/bootstrap/checkbox.hbs deleted file mode 100644 index cc3fb5ba..00000000 --- a/addon/templates/components/validated-input/types/-themes/bootstrap/checkbox.hbs +++ /dev/null @@ -1,10 +0,0 @@ - -{{component labelComponent class="custom-control-label"}} diff --git a/addon/templates/components/validated-input/types/-themes/bootstrap/radio-group.hbs b/addon/templates/components/validated-input/types/-themes/bootstrap/radio-group.hbs deleted file mode 100644 index ef250023..00000000 --- a/addon/templates/components/validated-input/types/-themes/bootstrap/radio-group.hbs +++ /dev/null @@ -1,15 +0,0 @@ -{{#each options as |option i|}} -
- - -
-{{/each}} diff --git a/addon/templates/components/validated-input/types/-themes/bootstrap/select.hbs b/addon/templates/components/validated-input/types/-themes/bootstrap/select.hbs deleted file mode 100644 index fd375a39..00000000 --- a/addon/templates/components/validated-input/types/-themes/bootstrap/select.hbs +++ /dev/null @@ -1,16 +0,0 @@ -{{one-way-select - value = value - options = options - optionLabelPath = optionLabelPath - optionValuePath = optionValuePath - optionTargetPath = optionTargetPath - name = name - id = inputId - class = (concat "form-control" (if isValid " is-valid") (if isInvalid " is-invalid")) - update = update - focusOut = setDirty - includeBlank = includeBlank - disabled = disabled - multiple = multiple - promptIsSelectable = (or promptIsSelectable false) -}} diff --git a/addon/templates/components/validated-input/types/-themes/uikit/checkbox-group.hbs b/addon/templates/components/validated-input/types/-themes/uikit/checkbox-group.hbs deleted file mode 100644 index 11b8a498..00000000 --- a/addon/templates/components/validated-input/types/-themes/uikit/checkbox-group.hbs +++ /dev/null @@ -1,15 +0,0 @@ -{{#each options as |option i|}} - {{#unless (eq i 0)}}
{{/unless}} - -{{/each}} \ No newline at end of file diff --git a/addon/templates/components/validated-input/types/-themes/uikit/checkbox.hbs b/addon/templates/components/validated-input/types/-themes/uikit/checkbox.hbs deleted file mode 100644 index da1ab1fd..00000000 --- a/addon/templates/components/validated-input/types/-themes/uikit/checkbox.hbs +++ /dev/null @@ -1,11 +0,0 @@ -{{#component labelComponent class=(concat (if isValid "uk-text-success") " " (if isInvalid "uk-text-danger"))}} - -{{/component}} diff --git a/addon/templates/components/validated-input/types/-themes/uikit/radio-group.hbs b/addon/templates/components/validated-input/types/-themes/uikit/radio-group.hbs deleted file mode 100644 index 20023075..00000000 --- a/addon/templates/components/validated-input/types/-themes/uikit/radio-group.hbs +++ /dev/null @@ -1,17 +0,0 @@ -{{#each options as |option i|}} - {{#unless (eq i 0)}}
{{/unless}} - -{{/each}} - diff --git a/addon/templates/components/validated-input/types/-themes/uikit/select.hbs b/addon/templates/components/validated-input/types/-themes/uikit/select.hbs deleted file mode 100644 index 7e4af3c5..00000000 --- a/addon/templates/components/validated-input/types/-themes/uikit/select.hbs +++ /dev/null @@ -1,17 +0,0 @@ -{{one-way-select - value = value - options = options - optionLabelPath = optionLabelPath - optionValuePath = optionValuePath - optionTargetPath = optionTargetPath - name = name - id = inputId - class = (concat "uk-select " (if isValid "uk-form-success") " " (if isInvalid "uk-form-danger")) - update = update - focusOut = setDirty - includeBlank = includeBlank - disabled = disabled - multiple = multiple - promptIsSelectable = (or promptIsSelectable false) -}} - diff --git a/addon/templates/components/validated-input/types/checkbox.hbs b/addon/templates/components/validated-input/types/checkbox.hbs deleted file mode 100644 index f39b9841..00000000 --- a/addon/templates/components/validated-input/types/checkbox.hbs +++ /dev/null @@ -1,9 +0,0 @@ - -{{component labelComponent}} diff --git a/addon/templates/components/validated-input/types/radio-group.hbs b/addon/templates/components/validated-input/types/radio-group.hbs deleted file mode 100644 index 1f035f2e..00000000 --- a/addon/templates/components/validated-input/types/radio-group.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{#each options as |option i|}} - -{{/each}} diff --git a/addon/templates/components/validated-input/types/select.hbs b/addon/templates/components/validated-input/types/select.hbs deleted file mode 100644 index da14d09a..00000000 --- a/addon/templates/components/validated-input/types/select.hbs +++ /dev/null @@ -1,16 +0,0 @@ -{{one-way-select - value = value - options = options - optionLabelPath = optionLabelPath - optionValuePath = optionValuePath - optionTargetPath = optionTargetPath - name = name - id = inputId - update = update - focusOut = setDirty - includeBlank = includeBlank - disabled = disabled - multiple = multiple - promptIsSelectable = (or promptIsSelectable false) -}} - diff --git a/app/components/validated-form.js b/app/components/validated-form.js index 293b0f3d..5ed695a7 100644 --- a/app/components/validated-form.js +++ b/app/components/validated-form.js @@ -1,7 +1 @@ -import ValidatedForm from "ember-validated-form/components/validated-form"; - -import config from "../config/environment"; - -export default ValidatedForm.extend({ - config: config["ember-validated-form"], -}); +export { default } from "ember-validated-form/components/validated-form"; diff --git a/tests/dummy/app/app.js b/tests/dummy/app/app.js index af9533d3..3ff9b9d5 100644 --- a/tests/dummy/app/app.js +++ b/tests/dummy/app/app.js @@ -3,12 +3,10 @@ import config from "dummy/config/environment"; import loadInitializers from "ember-load-initializers"; import Resolver from "ember-resolver"; -const App = Application.extend({ - modulePrefix: config.modulePrefix, - podModulePrefix: config.podModulePrefix, - Resolver, -}); +export default class App extends Application { + modulePrefix = config.modulePrefix; + podModulePrefix = config.podModulePrefix; + Resolver = Resolver; +} loadInitializers(App, config.modulePrefix); - -export default App; diff --git a/tests/dummy/app/components/color-component.hbs b/tests/dummy/app/components/color-component.hbs new file mode 100644 index 00000000..db74af1a --- /dev/null +++ b/tests/dummy/app/components/color-component.hbs @@ -0,0 +1,8 @@ + diff --git a/tests/dummy/app/components/color-component.js b/tests/dummy/app/components/color-component.js index 7f6c41b3..58c6531a 100644 --- a/tests/dummy/app/components/color-component.js +++ b/tests/dummy/app/components/color-component.js @@ -1,19 +1,10 @@ -import Component from "@ember/component"; -import { computed } from "@ember/object"; import { htmlSafe } from "@ember/string"; +import Component from "@glimmer/component"; -export default Component.extend({ - classNames: ["badge", "badge-primary"], - - attributeBindings: ["style"], - - style: computed("color.color", function () { +export default class ColorComponent extends Component { + get style() { return htmlSafe( - `background-color: ${this.color.color}; font-size: 1rem; cursor: pointer;` + `background-color: ${this.args.color.color}; font-size: 1rem; cursor: pointer;` ); - }), - - click() { - this.colorSelected(this.color); - }, -}); + } +} diff --git a/tests/dummy/app/templates/components/custom-button.hbs b/tests/dummy/app/components/custom-button.hbs similarity index 85% rename from tests/dummy/app/templates/components/custom-button.hbs rename to tests/dummy/app/components/custom-button.hbs index 44331490..144a26c7 100644 --- a/tests/dummy/app/templates/components/custom-button.hbs +++ b/tests/dummy/app/components/custom-button.hbs @@ -1,3 +1,3 @@ {{!-- BEGIN-SNIPPET custom-button-component-template.hbs --}} - + {{!-- END-SNIPPET --}} diff --git a/tests/dummy/app/templates/components/custom-error.hbs b/tests/dummy/app/components/custom-error.hbs similarity index 85% rename from tests/dummy/app/templates/components/custom-error.hbs rename to tests/dummy/app/components/custom-error.hbs index 6885ee22..909c0c73 100644 --- a/tests/dummy/app/templates/components/custom-error.hbs +++ b/tests/dummy/app/components/custom-error.hbs @@ -1,7 +1,7 @@ {{!-- BEGIN-SNIPPET custom-error-component-template.hbs --}}

- {{#each errors as |error i|}} + {{#each @errors as |error i|}} > Error #{{i}}: {{error}}
{{/each}}
diff --git a/tests/dummy/app/templates/components/custom-hint.hbs b/tests/dummy/app/components/custom-hint.hbs similarity index 59% rename from tests/dummy/app/templates/components/custom-hint.hbs rename to tests/dummy/app/components/custom-hint.hbs index a48882b3..55c1d567 100644 --- a/tests/dummy/app/templates/components/custom-hint.hbs +++ b/tests/dummy/app/components/custom-hint.hbs @@ -1,3 +1,3 @@ {{!-- BEGIN-SNIPPET custom-hint-component-template.hbs --}} -Hint: {{hint}} +Hint: {{@hint}} {{!-- END-SNIPPET --}} diff --git a/tests/dummy/app/templates/components/custom-label.hbs b/tests/dummy/app/components/custom-label.hbs similarity index 72% rename from tests/dummy/app/templates/components/custom-label.hbs rename to tests/dummy/app/components/custom-label.hbs index f5e15a90..0635a508 100644 --- a/tests/dummy/app/templates/components/custom-label.hbs +++ b/tests/dummy/app/components/custom-label.hbs @@ -1,6 +1,6 @@ {{!-- BEGIN-SNIPPET custom-label-component-template.hbs --}} -
diff --git a/tests/integration/components/validated-button-test.js b/tests/integration/components/validated-button-test.js index 4af70210..fd90c756 100644 --- a/tests/integration/components/validated-button-test.js +++ b/tests/integration/components/validated-button-test.js @@ -6,13 +6,19 @@ import { module, test } from "qunit"; module("Integration | Component | validated button", function (hooks) { setupRenderingTest(hooks); + hooks.beforeEach(function () { + this.noop = () => {}; + }); + test("it renders a button with a label", async function (assert) { - await render(hbs`{{validated-button label="Test"}}`); + await render(hbs``); assert.dom("button").hasText("Test"); }); test("it renders a button with block style", async function (assert) { - await render(hbs`{{#validated-button}}Test{{/validated-button}}`); + await render( + hbs`Test` + ); assert.dom("button").hasText("Test"); }); }); diff --git a/tests/integration/components/validated-button/-themes/bootstrap/button-test.js b/tests/integration/components/validated-button/-themes/bootstrap/button-test.js index 2bf6eb9e..20aeaf81 100644 --- a/tests/integration/components/validated-button/-themes/bootstrap/button-test.js +++ b/tests/integration/components/validated-button/-themes/bootstrap/button-test.js @@ -10,10 +10,14 @@ module( setupRenderingTest(hooks); setupConfigTest(hooks, { theme: "bootstrap" }); + hooks.beforeEach(function () { + this.noop = () => {}; + }); + test("it renders", async function (assert) { - await render( - hbs`{{validated-button/-themes/bootstrap/button label='Test'}}` - ); + await render(hbs` + + `); assert.dom("button").hasText("Test"); assert.dom("button").hasClass("btn"); @@ -22,16 +26,18 @@ module( test("it renders in block style", async function (assert) { await render(hbs` - {{#validated-button/-themes/bootstrap/button}}Test{{/validated-button/-themes/bootstrap/button}} + + Test + `); assert.dom("button").hasText("Test"); }); test("it renders a primary button for submit buttons", async function (assert) { - await render( - hbs`{{validated-button/-themes/bootstrap/button label='Test' type='submit'}}` - ); + await render(hbs` + + `); assert.dom("button").hasClass("btn-primary"); }); diff --git a/tests/integration/components/validated-button/-themes/uikit/button-test.js b/tests/integration/components/validated-button/-themes/uikit/button-test.js index 1effb822..55029093 100644 --- a/tests/integration/components/validated-button/-themes/uikit/button-test.js +++ b/tests/integration/components/validated-button/-themes/uikit/button-test.js @@ -10,8 +10,14 @@ module( setupRenderingTest(hooks); setupConfigTest(hooks, { theme: "uikit" }); + hooks.beforeEach(function () { + this.noop = () => {}; + }); + test("it renders", async function (assert) { - await render(hbs`{{validated-button/-themes/uikit/button label='Test'}}`); + await render(hbs` + + `); assert.dom("button").hasText("Test"); assert.dom("button").hasClass("uk-button"); @@ -20,16 +26,18 @@ module( test("it renders in block style", async function (assert) { await render(hbs` - {{#validated-button/-themes/uikit/button}}Test{{/validated-button/-themes/uikit/button}} + + Test + `); assert.dom("button").hasText("Test"); }); test("it renders a primary button for submit buttons", async function (assert) { - await render( - hbs`{{validated-button/-themes/uikit/button label='Test' type='submit'}}` - ); + await render(hbs` + + `); assert.dom("button").hasClass("uk-button-primary"); }); diff --git a/tests/integration/components/validated-button/button-test.js b/tests/integration/components/validated-button/button-test.js index 0cfb4edd..5b8f01df 100644 --- a/tests/integration/components/validated-button/button-test.js +++ b/tests/integration/components/validated-button/button-test.js @@ -6,19 +6,23 @@ import { module, test } from "qunit"; module("Integration | Component | validated-button/button", function (hooks) { setupRenderingTest(hooks); + hooks.beforeEach(function () { + this.noop = () => {}; + }); + test("it renders", async function (assert) { // Set any properties with this.set('myProperty', 'value'); // Handle any actions with this.set('myAction', function(val) { ... }); - await render(hbs`{{validated-button/button}}`); + await render(hbs``); assert.equal(this.element.textContent.trim(), ""); // Template block usage: await render(hbs` - {{#validated-button/button}} + template block text - {{/validated-button/button}} + `); assert.equal(this.element.textContent.trim(), "template block text"); diff --git a/tests/integration/components/validated-form-defaults-test.js b/tests/integration/components/validated-form-defaults-test.js index b0ce26c2..cc5e1fe1 100644 --- a/tests/integration/components/validated-form-defaults-test.js +++ b/tests/integration/components/validated-form-defaults-test.js @@ -1,56 +1,11 @@ -import Component from "@ember/component"; import { set } from "@ember/object"; import { render } from "@ember/test-helpers"; +import Component from "@glimmer/component"; import setupConfigTest from "dummy/tests/helpers/setup-config-test"; import { setupRenderingTest } from "ember-qunit"; import hbs from "htmlbars-inline-precompile"; import { module, test } from "qunit"; -const CustomLabelComponent = Component.extend({ - tagName: "custom-label", -}); - -const CustomHintComponent = Component.extend({ - tagName: "custom-hint", -}); - -const CustomErrorComponent = Component.extend({ - tagName: "custom-error", -}); - -const CustomRenderComponent = Component.extend({ - layout: hbs` - {{component labelComponent}} - {{component hintComponent}} - {{component errorComponent}} - `, - tagName: "custom-render", -}); - -const CustomButtonComponent = Component.extend({ - tagName: "custom-button", -}); - -const CustomCheckboxComponent = Component.extend({ - tagName: "custom-checkbox", -}); - -const CustomInputComponent = Component.extend({ - tagName: "custom-input", -}); - -const CustomRadioGroupComponent = Component.extend({ - tagName: "custom-radio-group", -}); - -const CustomSelectComponent = Component.extend({ - tagName: "custom-select", -}); - -const CustomTextareaComponent = Component.extend({ - tagName: "custom-textarea", -}); - module("Integration | Component | validated form defaults", function (hooks) { setupRenderingTest(hooks); setupConfigTest(hooks, {}); @@ -69,24 +24,50 @@ module("Integration | Component | validated form defaults", function (hooks) { } ); - this.owner.register("component:x-custom-label", CustomLabelComponent); - this.owner.register("component:x-custom-hint", CustomHintComponent); - this.owner.register("component:x-custom-error", CustomErrorComponent); - this.owner.register("component:x-custom-render", CustomRenderComponent); + this.owner.register("component:x-custom-label", class extends Component {}); + this.owner.register("component:x-custom-hint", class extends Component {}); + this.owner.register("component:x-custom-error", class extends Component {}); + this.owner.register( + "component:x-custom-render", + class extends Component {} + ); + + this.owner.register( + "template:components/x-custom-label", + hbs`` + ); + this.owner.register( + "template:components/x-custom-hint", + hbs`` + ); + this.owner.register( + "template:components/x-custom-error", + hbs`` + ); + this.owner.register( + "template:components/x-custom-render", + hbs` + + {{component @labelComponent}} + {{component @hintComponent}} + {{component @errorComponent}} + + ` + ); - this.set("model", { error: { test1: { validation: ["Error"] } } }); + this.model = { error: { test1: { validation: ["Error"] } } }; await render(hbs` - {{#validated-form as |f|}} - {{f.input - name='test1' - type='text' - label='Label!' - hint='Hint!' - submitted=true - model=model - }} - {{/validated-form}} + + + `); assert.dom("custom-render").exists(); @@ -106,12 +87,19 @@ module("Integration | Component | validated form defaults", function (hooks) { } ); - this.owner.register("component:x-custom-button", CustomButtonComponent); + this.owner.register( + "component:x-custom-button", + class extends Component {} + ); + this.owner.register( + "template:components/x-custom-button", + hbs`` + ); await render(hbs` - {{#validated-form as |f|}} - {{f.submit label='Submit!'}} - {{/validated-form}} + + + `); assert.dom("custom-button").exists(); @@ -132,23 +120,53 @@ module("Integration | Component | validated form defaults", function (hooks) { } ); - this.owner.register("component:x-custom-checkbox", CustomCheckboxComponent); - this.owner.register("component:x-custom-input", CustomInputComponent); + this.owner.register( + "component:x-custom-checkbox", + class extends Component {} + ); + this.owner.register("component:x-custom-input", class extends Component {}); this.owner.register( "component:x-custom-radio-group", - CustomRadioGroupComponent + class extends Component {} + ); + this.owner.register( + "component:x-custom-select", + class extends Component {} + ); + this.owner.register( + "component:x-custom-textarea", + class extends Component {} + ); + + this.owner.register( + "template:components/x-custom-checkbox", + hbs`` + ); + this.owner.register( + "template:components/x-custom-input", + hbs`` + ); + this.owner.register( + "template:components/x-custom-radio-group", + hbs`` + ); + this.owner.register( + "template:components/x-custom-select", + hbs`` + ); + this.owner.register( + "template:components/x-custom-textarea", + hbs`` ); - this.owner.register("component:x-custom-select", CustomSelectComponent); - this.owner.register("component:x-custom-textarea", CustomTextareaComponent); await render(hbs` - {{#validated-form as |f|}} - {{f.input type='checkbox'}} - {{f.input type='text'}} - {{f.input type='radio-group'}} - {{f.input type='select'}} - {{f.input type='textarea'}} - {{/validated-form}} + + + + + + + `); assert.dom("custom-checkbox").exists(); diff --git a/tests/integration/components/validated-input/-themes/bootstrap/render-test.js b/tests/integration/components/validated-input/-themes/bootstrap/render-test.js index 5a6bd366..b2ab64dd 100644 --- a/tests/integration/components/validated-input/-themes/bootstrap/render-test.js +++ b/tests/integration/components/validated-input/-themes/bootstrap/render-test.js @@ -12,14 +12,15 @@ module( test("it renders", async function (assert) { await render(hbs` - {{validated-input/-themes/bootstrap/render - type='text' - name='test' - labelComponent=(component 'validated-input/-themes/bootstrap/label' label='Test') + + `); assert.dom(".form-group").exists(); diff --git a/tests/integration/components/validated-input/-themes/uikit/render-test.js b/tests/integration/components/validated-input/-themes/uikit/render-test.js index abf36d4b..6de215b6 100644 --- a/tests/integration/components/validated-input/-themes/uikit/render-test.js +++ b/tests/integration/components/validated-input/-themes/uikit/render-test.js @@ -12,14 +12,14 @@ module( test("it renders", async function (assert) { await render(hbs` - {{validated-input/-themes/uikit/render - type='text' - name='test' + `); assert.dom(".uk-margin").exists(); diff --git a/tests/integration/components/validated-input/render-test.js b/tests/integration/components/validated-input/render-test.js index 13c3515e..0131caa4 100644 --- a/tests/integration/components/validated-input/render-test.js +++ b/tests/integration/components/validated-input/render-test.js @@ -8,13 +8,14 @@ module("Integration | Component | validated-input/render", function (hooks) { test("it renders", async function (assert) { await render(hbs` - {{validated-input/render - type='text' - name='test' - labelComponent=(component 'validated-input/label' label='Test') + `); assert.dom("input[type=text]").exists(); diff --git a/tests/integration/components/validated-input/types/-themes/bootstrap/input-test.js b/tests/integration/components/validated-input/types/-themes/bootstrap/input-test.js index 7534dc46..27d64e8a 100644 --- a/tests/integration/components/validated-input/types/-themes/bootstrap/input-test.js +++ b/tests/integration/components/validated-input/types/-themes/bootstrap/input-test.js @@ -11,7 +11,12 @@ module( setupConfigTest(hooks, { theme: "bootstrap" }); test("it renders", async function (assert) { - await render(hbs`{{validated-input/types/-themes/bootstrap/input}}`); + await render(hbs` + + `); assert.dom("input").hasClass("form-control"); }); diff --git a/tests/integration/components/validated-input/types/-themes/bootstrap/textarea-test.js b/tests/integration/components/validated-input/types/-themes/bootstrap/textarea-test.js index ca303922..58dbe648 100644 --- a/tests/integration/components/validated-input/types/-themes/bootstrap/textarea-test.js +++ b/tests/integration/components/validated-input/types/-themes/bootstrap/textarea-test.js @@ -11,7 +11,12 @@ module( setupConfigTest(hooks, { theme: "bootstrap" }); test("it renders", async function (assert) { - await render(hbs`{{validated-input/types/-themes/bootstrap/textarea}}`); + await render(hbs` + + `); assert.dom("textarea").hasClass("form-control"); }); diff --git a/tests/integration/components/validated-input/types/-themes/uikit/input-test.js b/tests/integration/components/validated-input/types/-themes/uikit/input-test.js index e1a3977b..b70cf222 100644 --- a/tests/integration/components/validated-input/types/-themes/uikit/input-test.js +++ b/tests/integration/components/validated-input/types/-themes/uikit/input-test.js @@ -11,7 +11,12 @@ module( setupConfigTest(hooks, { theme: "uikit" }); test("it renders", async function (assert) { - await render(hbs`{{validated-input/types/-themes/uikit/input}}`); + await render(hbs` + + `); assert.dom("input").hasClass("uk-input"); }); diff --git a/tests/integration/components/validated-input/types/-themes/uikit/textarea-test.js b/tests/integration/components/validated-input/types/-themes/uikit/textarea-test.js index 2d459f53..2af9b89d 100644 --- a/tests/integration/components/validated-input/types/-themes/uikit/textarea-test.js +++ b/tests/integration/components/validated-input/types/-themes/uikit/textarea-test.js @@ -11,7 +11,12 @@ module( setupConfigTest(hooks, { theme: "uikit" }); test("it renders", async function (assert) { - await render(hbs`{{validated-input/types/-themes/uikit/textarea}}`); + await render(hbs` + + `); assert.dom("textarea").hasClass("uk-textarea"); }); diff --git a/tests/integration/components/validated-input/types/input-test.js b/tests/integration/components/validated-input/types/input-test.js index 6ab96caf..46eccb02 100644 --- a/tests/integration/components/validated-input/types/input-test.js +++ b/tests/integration/components/validated-input/types/input-test.js @@ -9,7 +9,12 @@ module( setupRenderingTest(hooks); test("it renders", async function (assert) { - await render(hbs`{{validated-input/types/input}}`); + await render(hbs` + + `); assert.dom("input").exists(); }); diff --git a/tests/integration/components/validated-input/types/textarea-test.js b/tests/integration/components/validated-input/types/textarea-test.js index c676e7be..6ce98ba7 100644 --- a/tests/integration/components/validated-input/types/textarea-test.js +++ b/tests/integration/components/validated-input/types/textarea-test.js @@ -9,7 +9,12 @@ module( setupRenderingTest(hooks); test("it renders", async function (assert) { - await render(hbs`{{validated-input/types/textarea}}`); + await render(hbs` + + `); assert.dom("textarea").exists(); }); diff --git a/tests/integration/components/validated-label-test.js b/tests/integration/components/validated-label-test.js index 38732410..2782245d 100644 --- a/tests/integration/components/validated-label-test.js +++ b/tests/integration/components/validated-label-test.js @@ -1,5 +1,5 @@ -import Component from "@ember/component"; import { render } from "@ember/test-helpers"; +import Component from "@glimmer/component"; import { setupRenderingTest } from "ember-qunit"; import hbs from "htmlbars-inline-precompile"; import { module, test } from "qunit"; @@ -8,9 +8,9 @@ module("Integration | Component | validated label", function (hooks) { setupRenderingTest(hooks); test("it renders labels", async function (assert) { - await render( - hbs`{{validated-input label="Default name" name="default-name"}}` - ); + await render(hbs` + + `); assert.dom("label").hasText("Default name"); const input = this.element.querySelector("input"); @@ -18,40 +18,40 @@ module("Integration | Component | validated label", function (hooks) { }); test("it renders custom label component", async function (assert) { - this.owner.register("component:custom-label", Component.extend()); + this.owner.register("component:custom-label", class extends Component {}); this.owner.register( "template:components/custom-label", hbs`` ); - await render( - hbs`{{validated-input labelComponent=(component "custom-label")}}` - ); + await render(hbs` + + `); assert.dom("label").hasAttribute("style", "color: green;"); }); test("it passes original variables to custom component", async function (assert) { - this.owner.register("component:custom-label", Component.extend()); + this.owner.register("component:custom-label", class extends Component {}); this.owner.register( "template:components/custom-label", hbs` ` ); await render(hbs` - {{validated-input - label="Name custom" - name="orig-name" - required=true - labelComponent=(component "custom-label") - }} - `); + + `); assert.dom("label").hasAttribute("style", "color: green;"); assert.dom("#orig-label").hasText("Name custom"); @@ -62,15 +62,17 @@ module("Integration | Component | validated label", function (hooks) { }); test("it passes custom variables to custom component", async function (assert) { - this.owner.register("component:custom-label", Component.extend()); + this.owner.register("component:custom-label", class extends Component {}); this.owner.register( "template:components/custom-label", - hbs`` + hbs`` ); - await render( - hbs`{{validated-input labelComponent=(component "custom-label" customVariable="Awesome!")}}` - ); + await render(hbs` + + `); assert.dom("label").hasAttribute("style", "color: green;"); assert.dom("label").hasText("Awesome!");