ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: add input-tel(-dropdown) to umbrella-form + test unregister

Browse source 
Co-authored-by: Konstantinos Norgias <Konstantinos.Norgias@ing.com>
This commit is contained in:
Thijs Louisse 2022-04-06 18:20:19 +02:00
parent d9d88b7f55
commit 24a58cdf57
5 changed files with 49 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/fundamentals/systems/overlays/assets/umbrella-form.js
View file

@ -15,6 +15,8 @@ import '@lion/select-rich/define';
import '@lion/input-range/define';
import '@lion/textarea/define';
import '@lion/button/define';
import '@lion/input-tel/define';
import '@lion/input-tel-dropdown/define';
export class UmbrellaForm extends LitElement {
get _lionFormNode() {
@ -60,6 +62,11 @@ export class UmbrellaForm extends LitElement {
<lion-input-amount name="money" label="Money"></lion-input-amount>
<lion-input-iban name="iban" label="Iban"></lion-input-iban>
<lion-input-email name="email" label="Email"></lion-input-email>
<lion-input-tel name="tel" label="Telephone Number"></lion-input-tel>
<lion-input-tel-dropdown
name="tel-dropdown"
label="Telephone Number with dropdown list"
></lion-input-tel-dropdown>
<lion-checkbox-group
label="What do you like?"
name="checkers"

13
packages/form-integrations/test/dialog-integrations.test.js
View file

@ -24,13 +24,6 @@ describe('Form inside dialog Integrations', () => {
const registeredEls = getAllTagNames(formEl);
expect(registeredEls).to.eql([
// [1] In a dialog, these are registered before the rest (which is in chronological dom order)
// Ideally, this should be the same. It would be once the platform allows to create dialogs
// that don't need to move content to the body
'lion-checkbox-group',
' lion-checkbox',
'lion-switch',
// [2] 'the rest' (chronologically ordered registrations)
'lion-fieldset',
' lion-input',
' lion-input',
@ -41,6 +34,7 @@ describe('Form inside dialog Integrations', () => {
'lion-input-iban',
'lion-input-email',
'lion-input-tel',
'lion-input-tel-dropdown',
'lion-checkbox-group',
' lion-checkbox',
' lion-checkbox',
@ -66,8 +60,9 @@ describe('Form inside dialog Integrations', () => {
' lion-option',
'lion-select',
'lion-input-range',
// [3] this is where [1] should have been inserted
// [4] more of 'the rest' (chronologically ordered registrations)
'lion-checkbox-group',
' lion-checkbox',
'lion-switch',
'lion-input-stepper',
'lion-textarea',
]);

1
packages/form-integrations/test/form-group-methods.test.js
View file

@ -160,6 +160,7 @@ describe(`Submitting/Resetting/Clearing Form`, async () => {
range: '',
rsvp: '',
tel: '',
'tel-dropdown': '',
terms: [],
comments: '',
});

41
packages/form-integrations/test/form-integrations.test.js
View file

@ -1,3 +1,4 @@
import sinon from 'sinon';
import { expect, fixture } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
import { getAllTagNames } from './helpers/helpers.js';
@ -33,6 +34,7 @@ describe('Form Integrations', () => {
notifications: { value: '', checked: false },
rsvp: '',
tel: '',
'tel-dropdown': '',
comments: '',
});
});
@ -61,6 +63,7 @@ describe('Form Integrations', () => {
notifications: '',
rsvp: '',
tel: '',
'tel-dropdown': '',
comments: '',
});
});
@ -97,14 +100,8 @@ describe('Form Integrations', () => {
});
});
it('Successfully registers all form components', async () => {
const el = /** @type {UmbrellaForm} */ await fixture(html`<umbrella-form></umbrella-form>`);
// @ts-ignore
const formEl = /** @type {LionForm} */ (el._lionFormNode);
await formEl.registrationComplete;
const registeredEls = getAllTagNames(formEl);
expect(registeredEls).to.eql([
describe('Registering', () => {
const registerTagsResult = [
'lion-fieldset',
' lion-input',
' lion-input',
@ -115,6 +112,7 @@ describe('Form Integrations', () => {
'lion-input-iban',
'lion-input-email',
'lion-input-tel',
'lion-input-tel-dropdown',
'lion-checkbox-group',
' lion-checkbox',
' lion-checkbox',
@ -145,6 +143,31 @@ describe('Form Integrations', () => {
'lion-switch',
'lion-input-stepper',
'lion-textarea',
]);
];
it('successfully registers all form components', async () => {
const el = /** @type {UmbrellaForm} */ await fixture(html`<umbrella-form></umbrella-form>`);
// @ts-ignore
const formEl = /** @type {LionForm} */ (el._lionFormNode);
await formEl.registrationComplete;
const registeredEls = getAllTagNames(formEl);
expect(registeredEls).to.eql(registerTagsResult);
});
it('successfully unregisters all form components', async () => {
const el = /** @type {UmbrellaForm} */ await fixture(html`<umbrella-form></umbrella-form>`);
const offlineContainer = document.createElement('div');
// @ts-ignore
const formEl = /** @type {LionForm} */ (el._lionFormNode);
await formEl.registrationComplete;
for (const child of formEl.formElements) {
const spy = sinon.spy(child, '__unregisterFormElement');
offlineContainer.appendChild(child);
await child.updateComplete;
expect(spy).to.have.been.called;
}
});
});
});

5
packages/form-integrations/test/helpers/umbrella-form.js
View file

@ -9,6 +9,7 @@ import '@lion/input-amount/define';
import '@lion/input-iban/define';
import '@lion/input-email/define';
import '@lion/input-tel/define';
import '@lion/input-tel-dropdown/define';
import '@lion/checkbox-group/define';
import '@lion/radio-group/define';
import '@lion/select/define';
@ -73,6 +74,10 @@ export class UmbrellaForm extends LitElement {
<lion-input-iban name="iban" label="Iban"></lion-input-iban>
<lion-input-email name="email" label="Email"></lion-input-email>
<lion-input-tel name="tel" label="Telephone Number"></lion-input-tel>
<lion-input-tel-dropdown
name="tel-dropdown"
label="Telephone Number with dropdown list"
></lion-input-tel-dropdown>
<lion-checkbox-group
label="What do you like?"
name="checkers"