diff --git a/libs/components/src/lib/dial-pad/dial-pad.spec.ts b/libs/components/src/lib/dial-pad/dial-pad.spec.ts index f8681244c6..c7079f316e 100644 --- a/libs/components/src/lib/dial-pad/dial-pad.spec.ts +++ b/libs/components/src/lib/dial-pad/dial-pad.spec.ts @@ -57,8 +57,7 @@ describe('vwc-dial-pad', () => { it('should set value in text field when has value attribute', async function () { const value = '123'; - element.value = value; - await elementUpdated(element); + await setValue(value); expect(getTextField().value).toEqual(value); }); @@ -145,30 +144,67 @@ describe('vwc-dial-pad', () => { }); }); + async function setValue(value: string) { + element.value = value; + await elementUpdated(element); + } + describe('delete', function () { - it('should show delete button when text field has value', async function () { - element.value = '123'; + async function clickDeleteButton() { + getDeleteButton().click(); await elementUpdated(element); + } + + it('should show delete button when text field has value', async function () { + await setValue('123'); expect(getDeleteButton()).not.toBeNull(); }); it('should remove last character from text field when clicked on delete button', async function () { - element.value = '123'; - await elementUpdated(element); - getDeleteButton().click(); - await elementUpdated(element); + await setValue('123'); + + await clickDeleteButton(); + expect(getTextField().value).toEqual('12'); }); it('should emit a change event', async () => { const spy = jest.fn(); element.addEventListener('change', spy); - element.value = '123'; - await elementUpdated(element); - getDeleteButton().click(); - await elementUpdated(element); + await setValue('123'); + + await clickDeleteButton(); + expect(spy).toHaveBeenCalledTimes(1); }); + + it('should emit an input event', async () => { + const spy = jest.fn(); + element.addEventListener('input', spy); + await setValue('123'); + + await clickDeleteButton(); + + expect(spy).toHaveBeenCalledTimes(1); + }); + + it('should prevent blur event after deleting the last value', async () => { + const spy = jest.fn(); + element.addEventListener('blur', spy); + await setValue('1'); + + await clickDeleteButton(); + + expect(spy).toHaveBeenCalledTimes(0); + }); + + it('should focus on the dialpad after deleting the last element', async () => { + await setValue('1'); + + await clickDeleteButton(); + + expect(document.activeElement === element).toBe(true); + }); }); describe('dial', function () { @@ -237,8 +273,7 @@ describe('vwc-dial-pad', () => { it('should fire dial event when enter is pressed on input', async function () { const spy = jest.fn(); element.addEventListener('dial', spy); - element.value = '123'; - await elementUpdated(element); + await setValue('123'); const input: HTMLInputElement = getTextField().querySelector( 'input' ) as HTMLInputElement; @@ -255,17 +290,15 @@ describe('vwc-dial-pad', () => { it('should fire dial event with value when clicked on call button', async function () { const spy = jest.fn(); element.addEventListener('dial', spy); - element.value = '123'; - await elementUpdated(element); + await setValue('123'); getCallButton().click(); expect(spy).toHaveBeenCalledTimes(1); }); it('should prevent dial event when enter is pressed on delete button', async function () { const spy = jest.fn(); - element.value = '123'; + await setValue('123'); element.addEventListener('dial', spy); - await elementUpdated(element); getDeleteButton().dispatchEvent( new KeyboardEvent('keydown', { key: 'Enter' }) ); @@ -440,8 +473,7 @@ describe('vwc-dial-pad', () => { it('should set delete button disabled when has disabled attribute', async function () { element.disabled = true; - element.value = '123'; - await elementUpdated(element); + await setValue('123'); expect(getDeleteButton().disabled).toEqual(true); }); }); @@ -463,8 +495,7 @@ describe('vwc-dial-pad', () => { it('should set the delete button to be disabled', async function () { element.callActive = true; - element.value = '123'; - await elementUpdated(element); + await setValue('123'); expect(getDeleteButton().disabled).toBe(true); }); }); diff --git a/libs/components/src/lib/dial-pad/dial-pad.template.ts b/libs/components/src/lib/dial-pad/dial-pad.template.ts index b9717ad773..81f5564723 100644 --- a/libs/components/src/lib/dial-pad/dial-pad.template.ts +++ b/libs/components/src/lib/dial-pad/dial-pad.template.ts @@ -104,6 +104,15 @@ function stopPropagation(_: DialPad, { event: e }: ExecutionContext) { e.stopImmediatePropagation(); } +function deleteLastCharacter(dialPad: DialPad) { + dialPad.value = dialPad.value.slice(0, -1); + dialPad.$emit('input'); + dialPad.$emit('change'); + if (dialPad.value === '') { + dialPad._textFieldEl.focus(); + } +} + function renderTextField(textFieldTag: string, buttonTag: string) { return html`<${textFieldTag} ${ref( '_textFieldEl' @@ -121,12 +130,13 @@ function renderTextField(textFieldTag: string, buttonTag: string) { ${when( (x) => x.value && x.value.length && x.value.length > 0, html`<${buttonTag} - slot="action-items" size='super-condensed' icon="backspace-line" aria-label="${( - x - ) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}" - appearance='ghost' ?disabled="${(x) => x.disabled || x.callActive}" @click="${( - x - ) => x._deleteLastCharacter()}"> + slot="action-items" + size='super-condensed' + icon="backspace-line" + aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}" + appearance='ghost' + ?disabled="${(x) => x.disabled || x.callActive}" + @click="${(x) => deleteLastCharacter(x)}"> ` )} `; diff --git a/libs/components/src/lib/dial-pad/dial-pad.ts b/libs/components/src/lib/dial-pad/dial-pad.ts index 1c34640bad..5528f8e19a 100644 --- a/libs/components/src/lib/dial-pad/dial-pad.ts +++ b/libs/components/src/lib/dial-pad/dial-pad.ts @@ -143,15 +143,6 @@ export class DialPad extends FoundationElement { _onDial = () => { this.callActive ? this.$emit('end-call') : this.$emit('dial'); }; - - /** - * - * @internal - */ - _deleteLastCharacter = () => { - this.value = this.value.slice(0, -1); - this.$emit('change'); - }; } export interface DialPad extends Localized {}