From 8ca8668ce709c08d72beb0913a87cd3640793984 Mon Sep 17 00:00:00 2001 From: LaynMDream Date: Fri, 30 Aug 2024 11:05:59 +0200 Subject: [PATCH 1/4] prefab email --- .../prefabs/tpk-validation-email-test.ts | 93 ++ packages/ember-input-validation/package.json | 3 + .../prefabs/tpk-validation-email.gts | 54 ++ .../src/components/tpk-validation-errors.gts | 35 + .../src/components/tpk-validation-input.gts | 11 +- pnpm-lock.yaml | 908 +++++++++--------- 6 files changed, 667 insertions(+), 437 deletions(-) create mode 100644 doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-email-test.ts create mode 100644 packages/ember-input-validation/src/components/prefabs/tpk-validation-email.gts create mode 100644 packages/ember-input-validation/src/components/tpk-validation-errors.gts diff --git a/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-email-test.ts b/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-email-test.ts new file mode 100644 index 00000000..c4fd64a8 --- /dev/null +++ b/doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-email-test.ts @@ -0,0 +1,93 @@ +import { module, test } from 'qunit'; +import { + render, + settled, + triggerEvent, + type TestContext, +} from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; +import { ImmerChangeset } from 'ember-immer-changeset'; +import { setupRenderingTest } from 'ember-qunit'; +import { setupIntl } from 'ember-intl/test-support'; + +module( + 'Integreation | Component | Prefabs | tpk-validation-email', + function (hooks) { + setupRenderingTest(hooks); + setupIntl(hooks, 'fr-fr'); + + async function renderComponent() { + await render(hbs` + + `); + } + + function setupChangeset(this: TestContext, email: string) { + const changeset = new ImmerChangeset({ + email, + }); + + this.set('changeset', changeset); + return changeset; + } + + test('the type of the input is email', async function (assert) { + setupChangeset.call(this, 'email'); + + await renderComponent(); + + await this.pauseTest(); + assert.dom('input').hasAttribute('type', 'email'); + }); + + test('it send error went email not correct', async function (assert) { + setupChangeset.call(this, 'not-good-email-format'); + await renderComponent(); + + await triggerEvent('[data-test-input="email"] input', 'blur'); + + assert.notOk( + this.element + .querySelector('[data-test-input="email"] input') + .checkValidity(), + 'Email format is invalid and should not be valid', + ); + }); + + test('it returns correct email', async function (assert) { + setupChangeset.call(this, 'vali@email.com'); + await renderComponent(); + + await triggerEvent('[data-test-input="email"] input', 'blur'); + + assert.ok( + this.element + .querySelector('[data-test-input="email"] input') + .checkValidity(), + 'Email format is valid', + ); + }); + + test('It changes data-has-error attribue on error', async function (assert) { + const changeset = setupChangeset.call(this, ''); + + await renderComponent(); + + changeset.addError({ + message: 'required', + value: '', + originalValue: '', + key: 'email', + }); + await settled(); + assert.dom('[data-test-tpk-input-input]').hasNoText(); + assert + .dom('[data-test-tpk-input]') + .hasAttribute('data-has-error', 'true'); + }); + }, +); diff --git a/packages/ember-input-validation/package.json b/packages/ember-input-validation/package.json index 2946acfe..8d6d1231 100644 --- a/packages/ember-input-validation/package.json +++ b/packages/ember-input-validation/package.json @@ -53,6 +53,7 @@ "@glimmer/component": "^1.1.2", "@glimmer/tracking": "^1.1.2", "ember-concurrency": "~4.0.2", + "ember-intl": "~6.5.5", "ember-modifier": "~4.1.0", "ember-test-selectors": "~6.0.0", "yup": "~1.4.0" @@ -109,9 +110,11 @@ "main": "addon-main.cjs", "app-js": { "./components/base.js": "./dist/_app_/components/base.js", + "./components/prefabs/tpk-validation-email.js": "./dist/_app_/components/prefabs/tpk-validation-email.js", "./components/tpk-form.js": "./dist/_app_/components/tpk-form.js", "./components/tpk-validation-checkbox.js": "./dist/_app_/components/tpk-validation-checkbox.js", "./components/tpk-validation-datepicker.js": "./dist/_app_/components/tpk-validation-datepicker.js", + "./components/tpk-validation-errors.js": "./dist/_app_/components/tpk-validation-errors.js", "./components/tpk-validation-file.js": "./dist/_app_/components/tpk-validation-file.js", "./components/tpk-validation-input.js": "./dist/_app_/components/tpk-validation-input.js", "./components/tpk-validation-radio-group.js": "./dist/_app_/components/tpk-validation-radio-group.js", diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-email.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-email.gts new file mode 100644 index 00000000..41b87cef --- /dev/null +++ b/packages/ember-input-validation/src/components/prefabs/tpk-validation-email.gts @@ -0,0 +1,54 @@ +import type { TpkInputSignature } from '@triptyk/ember-input/components/tpk-input'; +import { hash } from '@ember/helper'; +import TpkValidationInputComponent, { + type TpkValidationInputComponentSignature, +} from '../tpk-validation-input.gts'; +import { + type BaseValidationSignature, + BaseValidationComponent, +} from '../base.ts'; +import TpkValidationErrorsComponent from '../tpk-validation-errors.gts'; + +export interface TpkValidationEmailComponentSignature + extends BaseValidationSignature { + Args: Omit< + TpkValidationInputComponentSignature['Args'], + | 'type' + | 'min' + | 'max' + | 'step' + | 'mask' + | 'unmaskValue' + | 'maskOptions' + | 'mask' + >; + Blocks: { + default: []; + }; + Element: HTMLDivElement; +} + +export default class TpkValidationEmailComponent extends BaseValidationComponent { + +} diff --git a/packages/ember-input-validation/src/components/tpk-validation-errors.gts b/packages/ember-input-validation/src/components/tpk-validation-errors.gts new file mode 100644 index 00000000..53971e45 --- /dev/null +++ b/packages/ember-input-validation/src/components/tpk-validation-errors.gts @@ -0,0 +1,35 @@ +import { helper } from '@ember/component/helper'; +import Component from '@glimmer/component'; +import { htmlSafe as HS } from '@ember/template'; +import { t } from 'ember-intl'; + +export interface TpkValidationErrorsComponentSignature { + Args: { + errors: any; + }; + Blocks: { + default: []; + }; + Element: HTMLDivElement; +} + +export default class TpkValidationErrorsComponent extends Component { + htmlSafe = helper(function htmlSafe(params: [string]) { + return HS(params.join()); + }); + + +} diff --git a/packages/ember-input-validation/src/components/tpk-validation-input.gts b/packages/ember-input-validation/src/components/tpk-validation-input.gts index 6ad47a5c..259ec4a3 100644 --- a/packages/ember-input-validation/src/components/tpk-validation-input.gts +++ b/packages/ember-input-validation/src/components/tpk-validation-input.gts @@ -8,6 +8,8 @@ import { import type { TpkInputSignature } from '@triptyk/ember-input/components/tpk-input'; import TpkInput from '@triptyk/ember-input/components/tpk-input'; import { hash } from '@ember/helper'; +import TpkValidationErrorsComponent from './tpk-validation-errors.gts'; +import type { TpkValidationErrorsComponentSignature } from './tpk-validation-errors.gts'; export interface TpkValidationInputComponentSignature extends BaseValidationSignature { @@ -32,7 +34,7 @@ export interface TpkValidationInputComponentSignature { Input?: TpkInputSignature['Blocks']['default'][0]['Input']; Label?: TpkInputSignature['Blocks']['default'][0]['Label']; - errors: TpkValidationInputComponent['errors']; + errors?: TpkValidationInputComponent['errors']; hasError: TpkValidationInputComponent['hasError']; firstError: TpkValidationInputComponent['firstError']; }, @@ -115,11 +117,8 @@ export default class TpkValidationInputComponent extends BaseValidationComponent maxlength={{@maxlength}} data-test-input-not-yielded /> - {{yield - (hash - errors=this.errors hasError=this.hasError firstError=this.firstError - ) - }} + + {{yield (hash hasError=this.hasError firstError=this.firstError)}} {{/if}} {{#if @showTogglePasswordButton}}