Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add ...attributes on the right element + add css for prefab password error + add test for attributes + add tabindex on button show/hide password #107

Merged
merged 5 commits into from
Dec 5, 2024
Merged

fix: add ...attributes on the right element + add css for prefab password error + add test for attributes + add tabindex on button show/hide password #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fb73825
fix: add ...attributes on the right element
remadex Dec 5, 2024
54b6141
fix: add css for prefab password error
remadex Dec 5, 2024
cdf5051
test: add test for attributes
remadex Dec 5, 2024
897bdc9
fix: add tabindex=-1 on button show/hide password
remadex Dec 5, 2024
b400195
test: use right selector for radio element
remadex Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 75 additions & 0 deletions ...ation/components/ember-input-validation/generic-test-functions/setup-prefab-component.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import { render } from "@ember/test-helpers";
import { initializeParams, type TpkFormParams } from './initialize-params-tpk-form';
import TpkForm from '@triptyk/ember-input-validation/components/tpk-form';

export async function setupCompletePrefabComponent(params?: TpkFormParams) {
const { changeset, onSubmit, validationSchema, reactive, removeErrorsOnSubmit, autoScrollOnError, executeOnValid } = initializeParams(params);
const selectOptions = ['option1', 'option2'];
const onCreate = () => {};
const onSearch = () => {};
await render(
<template>
<TpkForm
@changeset={{changeset}}
@validationSchema={{validationSchema}}
@onSubmit={{onSubmit}}
@reactive={{reactive}}
@autoScrollOnError={{autoScrollOnError}}
@removeErrorsOnSubmit={{removeErrorsOnSubmit}}
@executeOnValid={{executeOnValid}}
as |F|>
<F.TpkInputPrefab @label="test" @validationField="input" class="custom-class"/>
<F.TpkBicPrefab @label="test" @validationField="bic" class="custom-class"/>
<F.TpkIbanPrefab @label="test" @validationField="iban" class="custom-class"/>
<F.TpkEmailPrefab @label="test" @validationField="email" class="custom-class"/>
<F.TpkMobilePrefab @label="test" @validationField="mobile" class="custom-class"/>
<F.TpkDatepickerPrefab @label="test" @validationField="datepicker" class="custom-class"/>
<F.TpkTimepickerPrefab @label="test" @validationField="timepicker" class="custom-class"/>
<F.TpkCurrencyPrefab @label="test" @validationField="currency" class="custom-class"/>
<F.TpkIntegerPrefab @label="test" @validationField="integer" class="custom-class"/>
<F.TpkNumberPrefab @label="test" @validationField="number" class="custom-class"/>
<F.TpkPasswordPrefab @label="test" @validationField="password" class="custom-class"/>
<F.TpkRadioPrefab @label="test" @validationField="radio" @value="radio" class="custom-class" />
<F.TpkRadioGroupPrefab @label="test" @validationField="radiogroup" class="custom-class" as |Radio|>
<Radio @value="radio1" @label="Radio 1" />
<Radio @value="radio2" @label="Radio 2" />
</F.TpkRadioGroupPrefab>
<F.TpkSelectPrefab @label="test" @validationField="select" @options={{selectOptions}} class="custom-class" />
<F.TpkSelectCreatePrefab @label="test" @validationField="selectcreate" @options={{selectOptions}} @onCreate={{onCreate}} class="custom-class" />
<F.TpkSelectSearchPrefab @label="test" @validationField="selectsearch" @options={{selectOptions}} @onSearch={{onSearch}} class="custom-class" />
<F.TpkCheckboxPrefab @label="test" @validationField="checkbox" class="custom-class" />
<F.TpkFilePrefab @label="test" @validationField="file" class="custom-class" />
<button type="submit">Submit</button>
</TpkForm>
</template>
);

return changeset;
}

export async function setupComponent(params?: TpkFormParams) {
const { changeset, onSubmit, validationSchema, reactive, removeErrorsOnSubmit, autoScrollOnError, executeOnValid } = initializeParams(params);

await render(
<template>
<TpkForm
@changeset={{changeset}}
@validationSchema={{validationSchema}}
@onSubmit={{onSubmit}}
@reactive={{reactive}}
@autoScrollOnError={{autoScrollOnError}}
@removeErrorsOnSubmit={{removeErrorsOnSubmit}}
@executeOnValid={{executeOnValid}}
as |F|>
<F.TpkInputPrefab @label="test" @validationField="name" />
<F.TpkInput @label="test" @type="email" @validationField="email" as |I|>
<I.Label />
<I.Input anchorScrollUp="email" />
</F.TpkInput>
<button type="submit">Submit</button>
</TpkForm>
</template>
);

return changeset;
}
2 changes: 1 addition & 1 deletion ...integration/components/ember-input-validation/prefabs/tpk-validation-radio-group-test.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ module(
disabled: true,
changeset
});
assert.dom(`[data-test-tpk-prefab-tpk-radio-container] input`).hasAttribute('disabled');
assert.dom(`[data-test-tpk-prefab-radio-container] input`).hasAttribute('disabled');
});

test('Accessibility', async function (assert) {
Expand Down
2 changes: 1 addition & 1 deletion ...tests/integration/components/ember-input-validation/prefabs/tpk-validation-radio-test.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ module(
disabled: true,
changeset
});
assert.dom(`[data-test-tpk-prefab-tpk-radio-container] input`).hasAttribute('disabled');
assert.dom(`[data-test-tpk-prefab-radio-container] input`).hasAttribute('disabled');
});

test('Accessibility', async function (assert) {
Expand Down
83 changes: 83 additions & 0 deletions doc-app/tests/integration/components/ember-input-validation/tpk-attributes-test.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { setupIntl } from 'ember-intl/test-support';
import { ImmerChangeset } from 'ember-immer-changeset';
import { object, string, date, number, boolean } from 'yup';
import { setupCompletePrefabComponent } from './generic-test-functions/setup-prefab-component';

module('Integration | Component | tpk-attributes', function (hooks) {
setupRenderingTest(hooks);
setupIntl(hooks, 'fr-fr');
const prefabs = [
'input',
'bic',
'iban',
'email',
'mobile',
'datepicker',
'timepicker',
'currency',
'integer',
'number',
'password',
'radio-group',
'radio',
'select',
'select-create',
'select-search',
'checkbox',
'file',
];

const validationSchema = object().shape({
input: string().required(),
bic: string().required(),
iban: string().required(),
email: string().required(),
mobile: string().required(),
datepicker: date().required(),
timepicker: date().required(),
currency: number().required(),
integer: number().required(),
number: number().required(),
password: string().required(),
radiogroup: string().required(),
radio: string().required(),
select: string().required(),
selectcreate: string().required(),
selectsearch: string().required(),
checkbox: boolean().required(),
file: string().required(),
});

const baseChangeset = new ImmerChangeset({
input: '',
bic: '',
iban: '',
email: '',
mobile: '',
datepicker: null,
timepicker: null,
currency: 0,
integer: 0,
number: 0,
password: '',
radiogroup: '',
radio: '',
select: '',
selectcreate: '',
selectsearch: '',
checkbox: false,
file: '',
});

for (const prefab of prefabs) {
test(`Attributes should be passed to the container for ${prefab}`, async function (assert) {
await setupCompletePrefabComponent({
changeset: baseChangeset,
validationSchema,
});
assert.dom(`[data-test-tpk-prefab-${prefab}-container]`).hasClass('custom-class');
});
}
});
76 changes: 1 addition & 75 deletions doc-app/tests/integration/components/ember-input-validation/tpk-error-scroll-test.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import { setupIntl } from 'ember-intl/test-support';
import { timeout } from 'ember-concurrency';
import { ImmerChangeset } from 'ember-immer-changeset';
import { object, string, date, number, boolean } from 'yup';
import { initializeParams, type TpkFormParams } from './generic-test-functions/initialize-params-tpk-form';
import TpkForm from '@triptyk/ember-input-validation/components/tpk-form';
import { render } from '@ember/test-helpers';
import { setupCompletePrefabComponent, setupComponent } from './generic-test-functions/setup-prefab-component';

module('Integration | Component | tpk-form-error-scroll', function (hooks) {
setupRenderingTest(hooks);
Expand Down Expand Up @@ -77,78 +75,6 @@ module('Integration | Component | tpk-form-error-scroll', function (hooks) {
file: '',
});

async function setupComponent(params?: TpkFormParams) {
const { changeset, onSubmit, validationSchema, reactive, removeErrorsOnSubmit, autoScrollOnError, executeOnValid } = initializeParams(params);

await render(
<template>
<TpkForm
@changeset={{changeset}}
@validationSchema={{validationSchema}}
@onSubmit={{onSubmit}}
@reactive={{reactive}}
@autoScrollOnError={{autoScrollOnError}}
@removeErrorsOnSubmit={{removeErrorsOnSubmit}}
@executeOnValid={{executeOnValid}}
as |F|>
<F.TpkInputPrefab @label="test" @validationField="name" />
<F.TpkInput @label="test" @type="email" @validationField="email" as |I|>
<I.Label />
<I.Input anchorScrollUp="email" />
</F.TpkInput>
<button type="submit">Submit</button>
</TpkForm>
</template>
);

return changeset;
}

async function setupCompletePrefabComponent(params?: TpkFormParams) {
const { changeset, onSubmit, validationSchema, reactive, removeErrorsOnSubmit, autoScrollOnError, executeOnValid } = initializeParams(params);
const selectOptions = ['option1', 'option2'];
const onCreate = () => {};
const onSearch = () => {};
await render(
<template>
<TpkForm
@changeset={{changeset}}
@validationSchema={{validationSchema}}
@onSubmit={{onSubmit}}
@reactive={{reactive}}
@autoScrollOnError={{autoScrollOnError}}
@removeErrorsOnSubmit={{removeErrorsOnSubmit}}
@executeOnValid={{executeOnValid}}
as |F|>
<F.TpkInputPrefab @label="test" @validationField="input" />
<F.TpkBicPrefab @label="test" @validationField="bic" />
<F.TpkIbanPrefab @label="test" @validationField="iban" />
<F.TpkEmailPrefab @label="test" @validationField="email" />
<F.TpkMobilePrefab @label="test" @validationField="mobile" />
<F.TpkDatepickerPrefab @label="test" @validationField="datepicker" />
<F.TpkTimepickerPrefab @label="test" @validationField="timepicker" />
<F.TpkCurrencyPrefab @label="test" @validationField="currency" />
<F.TpkIntegerPrefab @label="test" @validationField="integer" />
<F.TpkNumberPrefab @label="test" @validationField="number" />
<F.TpkPasswordPrefab @label="test" @validationField="password" />
<F.TpkRadioGroupPrefab @label="test" @validationField="radiogroup" as |Radio|>
<Radio @value="radio1" @label="Radio 1" />
<Radio @value="radio2" @label="Radio 2" />
</F.TpkRadioGroupPrefab>
<F.TpkRadioPrefab @label="test" @validationField="radio" @value="radio" />
<F.TpkSelectPrefab @label="test" @validationField="select" @options={{selectOptions}} />
<F.TpkSelectCreatePrefab @label="test" @validationField="selectcreate" @options={{selectOptions}} @onCreate={{onCreate}} />
<F.TpkSelectSearchPrefab @label="test" @validationField="selectsearch" @options={{selectOptions}} @onSearch={{onSearch}} />
<F.TpkCheckboxPrefab @label="test" @validationField="checkbox" />
<F.TpkFilePrefab @label="test" @validationField="file" />
<button type="submit">Submit</button>
</TpkForm>
</template>
);

return changeset;
}

hooks.beforeEach(function () {
originalScrollTo = window.scrollTo;
window.scrollTo = () => {
Expand Down
29 changes: 1 addition & 28 deletions doc-app/tests/integration/components/ember-input-validation/tpk-form-test.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,41 +9,14 @@ import { setupIntl } from 'ember-intl/test-support';
import TpkForm from '@triptyk/ember-input-validation/components/tpk-form';
import { on } from '@ember/modifier';
import { concat, array as arrayHelper } from '@ember/helper';
import { initializeParams, type TpkFormParams } from './generic-test-functions/initialize-params-tpk-form';
import { setupComponent } from './generic-test-functions/setup-prefab-component';



module('Integration | Component | tpk-form', function (hooks) {
setupRenderingTest(hooks);
setupIntl(hooks, 'fr-fr');

async function setupComponent(params?: TpkFormParams) {
const { changeset, onSubmit, validationSchema, reactive, removeErrorsOnSubmit, autoScrollOnError, executeOnValid } = initializeParams(params);

await render(
<template>
<TpkForm
@changeset={{changeset}}
@validationSchema={{validationSchema}}
@onSubmit={{onSubmit}}
@reactive={{reactive}}
@autoScrollOnError={{autoScrollOnError}}
@removeErrorsOnSubmit={{removeErrorsOnSubmit}}
@executeOnValid={{executeOnValid}}
as |F|>
<F.TpkInputPrefab @label="test" @validationField="name" />
<F.TpkInput @label="test" @type="email" @validationField="email" as |I|>
<I.Label />
<I.Input anchorScrollUp="email" />
</F.TpkInput>
<button type="submit">Submit</button>
</TpkForm>
</template>
);

return changeset;
}

test('TpkForm can invoke custom registered inputs from service', async function () {
const tpkFormService = this.owner.lookup(
'service:tpk-form',
Expand Down
13 changes: 6 additions & 7 deletions packages/ember-input-validation/src/components/prefabs/styles/tpk-password.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.tpk-password-container {
@apply form-control relative;
@apply form-control relative pb-4;
}

.tpk-password-container .tpk-label {
Expand All @@ -18,19 +18,18 @@
@apply flex-grow;
}

.tpk-password-container[data-has-error~="true"] .tpk-password-input-container {
.tpk-password-container[data-has-error~='true'] .tpk-password-input-container {
@apply input-error;
}

.tpk-password-container[data-has-error~="true"]
.tpk-validation-errors {
@apply text-error label justify-self-end;
.tpk-password-container[data-has-error~='true'] .tpk-validation-errors {
@apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
}

.tpk-password-container[data-has-error~="true"] .tpk-label {
.tpk-password-container[data-has-error~='true'] .tpk-label {
@apply label text-error;
}

.tpk-password-container[data-has-error~="true"] .tpk-password-input {
.tpk-password-container[data-has-error~='true'] .tpk-password-input {
@apply text-error;
}
2 changes: 1 addition & 1 deletion packages/ember-input-validation/src/components/prefabs/tpk-validation-datepicker-range.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,13 @@ export default class TpkValidationDatepickerRangePrefabComponent extends Compone
@requiredFields={{@requiredFields}}
@mode='range'
anchorScrollUp={{@validationField}}
...attributes
as |V|
>
<div
class='tpk-datepicker-range-container'
data-test-tpk-prefab-datepicker-range-container
data-has-error='{{V.hasError}}'
...attributes
>
<V.Label class='tpk-datepicker-range-label-container'>
<MandatoryLabelComponent
Expand Down
Loading
Loading