Skip to content

Commit

Permalink
test: add test for attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
remadex committed Dec 5, 2024
1 parent 54b6141 commit cdf5051
Show file tree
Hide file tree
Showing 6 changed files with 199 additions and 130 deletions.
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;
}
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');
});
}
});
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
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
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
import TpkValidationInputComponent, { type TpkValidationInputComponentSignature } from "../tpk-validation-input.gts";
import { type BaseValidationSignature } from "../base.ts";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
import { on } from "@ember/modifier";
import TpkValidationInputComponent, {
type TpkValidationInputComponentSignature,
} from '../tpk-validation-input.gts';
import { type BaseValidationSignature } from '../base.ts';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';
import TpkValidationErrorsComponent from './tpk-validation-errors.gts';
import MandatoryLabelComponent from "./mandatory-label.gts";
import Component from "@glimmer/component";
import MandatoryLabelComponent from './mandatory-label.gts';
import Component from '@glimmer/component';

export interface TpkValidationPasswordPrefabSignature
extends BaseValidationSignature {
Args: Omit<TpkValidationInputComponentSignature['Args'], 'type' | 'min' | 'max' | 'step' | 'mask' | 'unmaskValue' | 'maskOptions' | 'mask'>;
Args: Omit<
TpkValidationInputComponentSignature['Args'],
| 'type'
| 'min'
| 'max'
| 'step'
| 'mask'
| 'unmaskValue'
| 'maskOptions'
| 'mask'
>;
Blocks: {
default: [];
};
Expand Down Expand Up @@ -40,23 +52,23 @@ export default class TpkValidationPasswordPrefabComponent extends Component<TpkV
@changeset={{@changeset}}
@validationField={{@validationField}}
@requiredFields={{@requiredFields}}
as |V|>
as |V|
>
<V.Label
class="tpk-password-container"
class='tpk-password-container'
data-test-tpk-prefab-password-container
data-has-error='{{V.hasError}}'
anchorScrollUp={{@validationField}}
...attributes>
<MandatoryLabelComponent
class="tpk-label"
...attributes
>
<MandatoryLabelComponent
class='tpk-label'
@label={{@label}}
@mandatory={{V.mandatory}}/>
<div class="tpk-password-input-container">
<V.Input
class="tpk-password-input"
data-test-tpk-password-input
/>
{{#unless @disabled}}
@mandatory={{V.mandatory}}
/>
<div class='tpk-password-input-container'>
<V.Input class='tpk-password-input' data-test-tpk-password-input />
{{#unless @disabled}}
<button
type='button'
class='tpk-password-toggle-button'
Expand All @@ -75,13 +87,13 @@ export default class TpkValidationPasswordPrefabComponent extends Component<TpkV
class='tpk-password-toggle-icon'
/>
</button>
{{/unless}}
</div>
<TpkValidationErrorsComponent
class="tpk-validation-errors"
{{/unless}}
</div>
<TpkValidationErrorsComponent
class='tpk-validation-errors'
@errors={{V.errors}}
/>
</V.Label>
/>
</V.Label>
</TpkValidationInputComponent>
</template>
}
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const TpkValidationRadioPrefabComponent: TOC<TpkValidationRadioPrefabComponentSi
>
<div
class='tpk-radio-container'
data-test-tpk-prefab-tpk-radio-container
data-test-tpk-prefab-radio-container
anchorScrollUp={{@validationField}}
...attributes
>
Expand Down

0 comments on commit cdf5051

Please sign in to comment.