d2de984f0b
* feat(input-file): create input-file component
* chore: improvements after review
* chore: update after review
* chore: update translations
* chore: - fixed demo with form submit, submit was not prevented
- fixed checking allowed file extensions
- fixed clicking on select file button in drag and drop area
* chore: since the input-file does not upload files itself but enables user to select files, I replaced "upload" and "upload" with "select" and "selected" where applicable
* chore: - removed unused properties allowedFileTypes and allowedFileExtensions from lion-input-file
- cleaned up docs
* chore: - changed type Array.<type> to Array<type>
- removed redundant type definition
* fix: - FocusMixin: moved registering events for from connectedCallback to firstUpdated since _focusableNode is sometimes not available yet
- SlotMixin: changed updated to update in since slots were rendered too late (related to previous fix in FocusMixin.js)
* fix: renamed lion-uploaded-file-list.js to lion-selected-file-list.js
* fix: fixed test for lion-selected-file-list
* fix: fixed typ
* wip
* fix: - fixed issue with multiple file selection where element would not select valid files after invalid ones
- added getMessage method to FileValidation that returns empty string to prevent message being shown that error message must be configured
- fixed tests
* chore: replaced `uploadOnFormSubmit` with `uploadOnSelect` and flipped the default value to false. When `uploadOnSelect` is set to true, the file will be uploaded as soon as it is selected.
* fix: - replaced `uploadOnFormSubmit` with `uploadOnSelect` and flipped the default value to false. When `uploadOnSelect` is set to true, the file will be uploaded as soon as it is selected.
- fixed issue where a valid file was not selected and added to the file list if it was preceded by an invalid file
* chore: removed redundant README.md
* fix: fixed failing test
* chore: added missing type annotation
* chore: annotated event param as optional
---------
Co-authored-by: Danny Moerkerke <danny.moerkerke@ing.com>
Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com>
92 lines
2.9 KiB
JavaScript
92 lines
2.9 KiB
JavaScript
/* eslint-disable lit-a11y/no-autofocus */
|
|
import { expect, fixture } from '@open-wc/testing';
|
|
import { html } from 'lit';
|
|
import { getAllTagNames } from './helpers/helpers.js';
|
|
import './helpers/umbrella-form.js';
|
|
import '@lion/ui/define/lion-dialog.js';
|
|
import '@lion/ui/define/lion-checkbox.js';
|
|
import '@lion/ui/define/lion-option.js';
|
|
import '@lion/ui/define/lion-radio.js';
|
|
|
|
/**
|
|
* @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
|
|
* @typedef {import('../../dialog/src/LionDialog.js').LionDialog} LionDialog
|
|
* @typedef {import('../../form/src/LionForm.js').LionForm} LionForm
|
|
*/
|
|
|
|
// Test umbrella form inside dialog
|
|
describe('Form inside dialog Integrations', () => {
|
|
it('Successfully registers all form components inside a dialog', async () => {
|
|
const el = /** @type {LionDialog} */ await fixture(html` <lion-dialog>
|
|
<button slot="invoker">Open Dialog</button>
|
|
<umbrella-form slot="content"></umbrella-form>
|
|
</lion-dialog>`);
|
|
|
|
// @ts-ignore
|
|
const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode);
|
|
await formEl.registrationComplete;
|
|
const registeredEls = getAllTagNames(formEl);
|
|
|
|
expect(registeredEls).to.eql([
|
|
'lion-fieldset',
|
|
' lion-input',
|
|
' lion-input',
|
|
'lion-input-date',
|
|
'lion-input-datepicker',
|
|
'lion-textarea',
|
|
'lion-input-amount',
|
|
'lion-input-iban',
|
|
'lion-input-email',
|
|
'lion-input-file',
|
|
'lion-input-tel',
|
|
'lion-input-tel-dropdown',
|
|
'lion-checkbox-group',
|
|
' lion-checkbox',
|
|
' lion-checkbox',
|
|
' lion-checkbox',
|
|
'lion-radio-group',
|
|
' lion-radio',
|
|
' lion-radio',
|
|
' lion-radio',
|
|
'lion-listbox',
|
|
' lion-option',
|
|
' lion-option',
|
|
' lion-option',
|
|
'lion-combobox',
|
|
' lion-option',
|
|
' lion-option',
|
|
' lion-option',
|
|
' lion-option',
|
|
' lion-option',
|
|
' lion-option',
|
|
'lion-select-rich',
|
|
' lion-option',
|
|
' lion-option',
|
|
' lion-option',
|
|
'lion-select',
|
|
'lion-input-range',
|
|
'lion-checkbox-group',
|
|
' lion-checkbox',
|
|
'lion-switch',
|
|
'lion-input-stepper',
|
|
'lion-textarea',
|
|
]);
|
|
});
|
|
|
|
it('sets focus on first focusable element with autofocus', async () => {
|
|
const el = /** @type {LionDialog} */ await fixture(html`
|
|
<lion-dialog>
|
|
<button slot="invoker">invoker button</button>
|
|
<div slot="content">
|
|
<lion-input label="label" name="input" autofocus></lion-input>
|
|
<lion-textarea label="label" name="textarea" autofocus></lion-textarea>
|
|
</div>
|
|
</lion-dialog>
|
|
`);
|
|
// @ts-expect-error [allow-protected-in-tests]
|
|
el._overlayInvokerNode.click();
|
|
const lionInput = el.querySelector('[name="input"]');
|
|
// @ts-expect-error [allow-protected-in-tests]
|
|
expect(document.activeElement).to.equal(lionInput._focusableNode);
|
|
});
|
|
});
|