Migrate gr-dialog to Lit. Change-Id: I1b1ffe465b339978d34c028291e18079886ff999
diff --git a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.js b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.js index 96a19e0..aa76347 100644 --- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.js +++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.js
@@ -128,7 +128,7 @@ // Open confirmation dialog and tap confirm button. await element.$.confirmDeleteOverlay.open(); - MockInteractions.tap(element.$.confirmDeleteDialog.$.confirm); + MockInteractions.tap(element.$.confirmDeleteDialog.confirmButton); flush(); assert.isTrue(deleteStub.calledWithExactly('-is:open')); assert.isTrue(element.$.confirmDeleteDialog.disabled);
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_test.js b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_test.js index 1256cc1..3df997f8 100644 --- a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_test.js +++ b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog_test.js
@@ -123,10 +123,11 @@ test('cherry pick topic submit', async () => { element.branch = 'master'; + await flush(); const executeChangeActionStub = stubRestApi( 'executeChangeAction').returns(Promise.resolve([])); MockInteractions.tap(element.shadowRoot. - querySelector('gr-dialog').$.confirm); + querySelector('gr-dialog').confirmButton); await flush(); const args = executeChangeActionStub.args[0]; assert.equal(args[0], 1); @@ -137,26 +138,29 @@ assert.isTrue(args[4].allow_empty); }); - test('deselecting a change removes it from being cherry picked', () => { - const duplicateChangesStub = sinon.stub(element, - 'containsDuplicateProject'); - element.branch = 'master'; - const executeChangeActionStub = stubRestApi( - 'executeChangeAction').returns(Promise.resolve([])); - const checkboxes = element.shadowRoot.querySelectorAll( - 'input[type="checkbox"]'); - assert.equal(checkboxes.length, 2); - assert.isTrue(checkboxes[0].checked); - MockInteractions.tap(checkboxes[0]); - MockInteractions.tap(element.shadowRoot. - querySelector('gr-dialog').$.confirm); - flush(); - assert.equal(executeChangeActionStub.callCount, 1); - assert.isTrue(duplicateChangesStub.called); - }); + test('deselecting a change removes it from being cherry picked', + async () => { + const duplicateChangesStub = sinon.stub(element, + 'containsDuplicateProject'); + element.branch = 'master'; + await flush(); + const executeChangeActionStub = stubRestApi( + 'executeChangeAction').returns(Promise.resolve([])); + const checkboxes = element.shadowRoot.querySelectorAll( + 'input[type="checkbox"]'); + assert.equal(checkboxes.length, 2); + assert.isTrue(checkboxes[0].checked); + MockInteractions.tap(checkboxes[0]); + MockInteractions.tap(element.shadowRoot. + querySelector('gr-dialog').confirmButton); + await flush(); + assert.equal(executeChangeActionStub.callCount, 1); + assert.isTrue(duplicateChangesStub.called); + }); - test('deselecting all change shows error message', () => { + test('deselecting all change shows error message', async () => { element.branch = 'master'; + await flush(); const executeChangeActionStub = stubRestApi( 'executeChangeAction').returns(Promise.resolve([])); const checkboxes = element.shadowRoot.querySelectorAll( @@ -165,8 +169,8 @@ MockInteractions.tap(checkboxes[0]); MockInteractions.tap(checkboxes[1]); MockInteractions.tap(element.shadowRoot. - querySelector('gr-dialog').$.confirm); - flush(); + querySelector('gr-dialog').confirmButton); + await flush(); assert.equal(executeChangeActionStub.callCount, 0); assert.equal(element.shadowRoot.querySelector('.error-message').innerText , 'No change selected'); @@ -180,8 +184,8 @@ }); test('submit button is blocked while cherry picks is running', async () => { - const confirmButton = element.shadowRoot.querySelector('gr-dialog').$ - .confirm; + const confirmButton = element.shadowRoot.querySelector('gr-dialog') + .confirmButton; assert.isTrue(confirmButton.hasAttribute('disabled')); element.branch = 'b'; await flush();
diff --git a/polygerrit-ui/app/elements/core/gr-error-dialog/gr-error-dialog_test.ts b/polygerrit-ui/app/elements/core/gr-error-dialog/gr-error-dialog_test.ts index 2dec8d2..c51988e 100644 --- a/polygerrit-ui/app/elements/core/gr-error-dialog/gr-error-dialog_test.ts +++ b/polygerrit-ui/app/elements/core/gr-error-dialog/gr-error-dialog_test.ts
@@ -26,15 +26,16 @@ suite('gr-error-dialog tests', () => { let element: GrErrorDialog; - setup(() => { + setup(async () => { element = basicFixture.instantiate(); + await flush(); }); test('dismiss tap fires event', async () => { const dismissCalled = mockPromise(); element.addEventListener('dismiss', () => dismissCalled.resolve()); MockInteractions.tap( - (queryAndAssert(element, '#dialog') as GrDialog).$.confirm + (queryAndAssert(element, '#dialog') as GrDialog).confirmButton! ); await dismissCalled; });
diff --git a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls_test.ts b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls_test.ts index 2e1fc21..0ba68e2 100644 --- a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls_test.ts +++ b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls_test.ts
@@ -76,33 +76,33 @@ assert.isTrue(element._isValidPath('test.js')); }); - test('open', () => { + test('open', async () => { assert.isFalse(hideDialogStub.called); MockInteractions.tap(queryAndAssert(element, '#open')); element.patchNum = 1 as PatchSetNum; - return showDialogSpy.lastCall.returnValue.then(() => { - assert.isTrue(hideDialogStub.called); - assert.isTrue(element.$.openDialog.disabled); - assert.isFalse(queryStub.called); - // Setup _focused manually - in headless mode Chrome sometimes don't - // setup focus. flush and/or flushAsynchronousOperations don't help - openAutoComplete._focused = true; - openAutoComplete.noDebounce = true; - openAutoComplete.text = 'src/test.cpp'; - assert.isTrue(queryStub.called); - assert.isFalse(element.$.openDialog.disabled); - MockInteractions.tap( - queryAndAssert(element.$.openDialog, 'gr-button[primary]') - ); - assert.isTrue(editDiffStub.called); - assert.isTrue(navStub.called); - assert.deepEqual(editDiffStub.lastCall.args, [ - element.change, - 'src/test.cpp', - element.patchNum, - ]); - assert.isTrue(closeDialogSpy.called); - }); + await showDialogSpy.lastCall.returnValue; + assert.isTrue(hideDialogStub.called); + assert.isTrue(element.$.openDialog.disabled); + assert.isFalse(queryStub.called); + // Setup _focused manually - in headless mode Chrome sometimes don't + // setup focus. flush and/or flushAsynchronousOperations don't help + openAutoComplete._focused = true; + openAutoComplete.noDebounce = true; + openAutoComplete.text = 'src/test.cpp'; + await flush(); + assert.isTrue(queryStub.called); + assert.isFalse(element.$.openDialog.disabled); + MockInteractions.tap( + queryAndAssert(element.$.openDialog, 'gr-button[primary]') + ); + assert.isTrue(editDiffStub.called); + assert.isTrue(navStub.called); + assert.deepEqual(editDiffStub.lastCall.args, [ + element.change, + 'src/test.cpp', + element.patchNum, + ]); + assert.isTrue(closeDialogSpy.called); }); test('cancel', () => { @@ -133,59 +133,56 @@ element.$.deleteDialog!.querySelector('gr-autocomplete')!; }); - test('delete', () => { + test('delete', async () => { deleteStub.returns(Promise.resolve({ok: true})); MockInteractions.tap(queryAndAssert(element, '#delete')); - return showDialogSpy.lastCall.returnValue.then(() => { - assert.isTrue(element.$.deleteDialog.disabled); - assert.isFalse(queryStub.called); - // Setup _focused manually - in headless mode Chrome sometimes don't - // setup focus. flush and/or flushAsynchronousOperations don't help - deleteAutocomplete._focused = true; - deleteAutocomplete.noDebounce = true; - deleteAutocomplete.text = 'src/test.cpp'; - assert.isTrue(queryStub.called); - assert.isFalse(element.$.deleteDialog.disabled); - MockInteractions.tap( - queryAndAssert(element.$.deleteDialog, 'gr-button[primary]') - ); - flush(); + await showDialogSpy.lastCall.returnValue; + assert.isTrue(element.$.deleteDialog.disabled); + assert.isFalse(queryStub.called); + // Setup _focused manually - in headless mode Chrome sometimes don't + // setup focus. flush and/or flushAsynchronousOperations don't help + deleteAutocomplete._focused = true; + deleteAutocomplete.noDebounce = true; + deleteAutocomplete.text = 'src/test.cpp'; + await flush(); + assert.isTrue(queryStub.called); + assert.isFalse(element.$.deleteDialog.disabled); + MockInteractions.tap( + queryAndAssert(element.$.deleteDialog, 'gr-button[primary]') + ); + await flush(); - assert.isTrue(deleteStub.called); - - return deleteStub.lastCall.returnValue.then(() => { - assert.equal(element._path, ''); - assert.isTrue(navStub.called); - assert.isTrue(closeDialogSpy.called); - }); - }); + assert.isTrue(deleteStub.called); + await deleteStub.lastCall.returnValue; + assert.equal(element._path, ''); + assert.isTrue(navStub.called); + assert.isTrue(closeDialogSpy.called); }); - test('delete fails', () => { + test('delete fails', async () => { deleteStub.returns(Promise.resolve({ok: false})); MockInteractions.tap(queryAndAssert(element, '#delete')); - return showDialogSpy.lastCall.returnValue.then(() => { - assert.isTrue(element.$.deleteDialog.disabled); - assert.isFalse(queryStub.called); - // Setup _focused manually - in headless mode Chrome sometimes don't - // setup focus. flush and/or flushAsynchronousOperations don't help - deleteAutocomplete._focused = true; - deleteAutocomplete.noDebounce = true; - deleteAutocomplete.text = 'src/test.cpp'; - assert.isTrue(queryStub.called); - assert.isFalse(element.$.deleteDialog.disabled); - MockInteractions.tap( - queryAndAssert(element.$.deleteDialog, 'gr-button[primary]') - ); - flush(); + await showDialogSpy.lastCall.returnValue; + assert.isTrue(element.$.deleteDialog.disabled); + assert.isFalse(queryStub.called); + // Setup _focused manually - in headless mode Chrome sometimes don't + // setup focus. flush and/or flushAsynchronousOperations don't help + deleteAutocomplete._focused = true; + deleteAutocomplete.noDebounce = true; + deleteAutocomplete.text = 'src/test.cpp'; + await flush(); + assert.isTrue(queryStub.called); + assert.isFalse(element.$.deleteDialog.disabled); + MockInteractions.tap( + queryAndAssert(element.$.deleteDialog, 'gr-button[primary]') + ); + await flush(); - assert.isTrue(deleteStub.called); + assert.isTrue(deleteStub.called); - return deleteStub.lastCall.returnValue.then(() => { - assert.isFalse(navStub.called); - assert.isFalse(closeDialogSpy.called); - }); - }); + await deleteStub.lastCall.returnValue; + assert.isFalse(navStub.called); + assert.isFalse(closeDialogSpy.called); }); test('cancel', () => { @@ -217,67 +214,66 @@ element.$.renameDialog!.querySelector('gr-autocomplete')!; }); - test('rename', () => { + test('rename', async () => { renameStub.returns(Promise.resolve({ok: true})); MockInteractions.tap(queryAndAssert(element, '#rename')); - return showDialogSpy.lastCall.returnValue.then(() => { - assert.isTrue(element.$.renameDialog.disabled); - assert.isFalse(queryStub.called); - // Setup _focused manually - in headless mode Chrome sometimes don't - // setup focus. flush and/or flushAsynchronousOperations don't help - renameAutocomplete._focused = true; - renameAutocomplete.noDebounce = true; - renameAutocomplete.text = 'src/test.cpp'; - assert.isTrue(queryStub.called); - assert.isTrue(element.$.renameDialog.disabled); + await showDialogSpy.lastCall.returnValue; + assert.isTrue(element.$.renameDialog.disabled); + assert.isFalse(queryStub.called); + // Setup _focused manually - in headless mode Chrome sometimes don't + // setup focus. flush and/or flushAsynchronousOperations don't help + renameAutocomplete._focused = true; + renameAutocomplete.noDebounce = true; + renameAutocomplete.text = 'src/test.cpp'; + await flush(); + assert.isTrue(queryStub.called); + assert.isTrue(element.$.renameDialog.disabled); - element.$.newPathIronInput.bindValue = 'src/test.newPath'; + element.$.newPathIronInput.bindValue = 'src/test.newPath'; + await flush(); - assert.isFalse(element.$.renameDialog.disabled); - MockInteractions.tap( - queryAndAssert(element.$.renameDialog, 'gr-button[primary]') - ); - flush(); + assert.isFalse(element.$.renameDialog.disabled); + MockInteractions.tap( + queryAndAssert(element.$.renameDialog, 'gr-button[primary]') + ); + await flush(); + assert.isTrue(renameStub.called); - assert.isTrue(renameStub.called); - - return renameStub.lastCall.returnValue.then(() => { - assert.equal(element._path, ''); - assert.isTrue(navStub.called); - assert.isTrue(closeDialogSpy.called); - }); - }); + await renameStub.lastCall.returnValue; + assert.equal(element._path, ''); + assert.isTrue(navStub.called); + assert.isTrue(closeDialogSpy.called); }); - test('rename fails', () => { + test('rename fails', async () => { renameStub.returns(Promise.resolve({ok: false})); MockInteractions.tap(queryAndAssert(element, '#rename')); - return showDialogSpy.lastCall.returnValue.then(() => { - assert.isTrue(element.$.renameDialog.disabled); - assert.isFalse(queryStub.called); - // Setup _focused manually - in headless mode Chrome sometimes don't - // setup focus. flush and/or flushAsynchronousOperations don't help - renameAutocomplete._focused = true; - renameAutocomplete.noDebounce = true; - renameAutocomplete.text = 'src/test.cpp'; - assert.isTrue(queryStub.called); - assert.isTrue(element.$.renameDialog.disabled); + await showDialogSpy.lastCall.returnValue; + assert.isTrue(element.$.renameDialog.disabled); + assert.isFalse(queryStub.called); + // Setup _focused manually - in headless mode Chrome sometimes don't + // setup focus. flush and/or flushAsynchronousOperations don't help + renameAutocomplete._focused = true; + renameAutocomplete.noDebounce = true; + renameAutocomplete.text = 'src/test.cpp'; + await flush(); + assert.isTrue(queryStub.called); + assert.isTrue(element.$.renameDialog.disabled); - element.$.newPathIronInput.bindValue = 'src/test.newPath'; + element.$.newPathIronInput.bindValue = 'src/test.newPath'; + await flush(); - assert.isFalse(element.$.renameDialog.disabled); - MockInteractions.tap( - queryAndAssert(element.$.renameDialog, 'gr-button[primary]') - ); - flush(); + assert.isFalse(element.$.renameDialog.disabled); + MockInteractions.tap( + queryAndAssert(element.$.renameDialog, 'gr-button[primary]') + ); + await flush(); - assert.isTrue(renameStub.called); + assert.isTrue(renameStub.called); - return renameStub.lastCall.returnValue.then(() => { - assert.isFalse(navStub.called); - assert.isFalse(closeDialogSpy.called); - }); - }); + await renameStub.lastCall.returnValue; + assert.isFalse(navStub.called); + assert.isFalse(closeDialogSpy.called); }); test('cancel', () => {
diff --git a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.ts b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.ts index 74e34a0..97ee39e 100644 --- a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.ts +++ b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog.ts
@@ -15,12 +15,11 @@ * limitations under the License. */ import '../gr-button/gr-button'; -import '../../../styles/gr-font-styles'; -import '../../../styles/shared-styles'; -import {PolymerElement} from '@polymer/polymer/polymer-element'; -import {htmlTemplate} from './gr-dialog_html'; -import {customElement, property, observe} from '@polymer/decorators'; +import {customElement, property, query} from 'lit/decorators'; import {GrButton} from '../gr-button/gr-button'; +import {css, html, LitElement, PropertyValues} from 'lit'; +import {sharedStyles} from '../../../styles/shared-styles'; +import {fontStyles} from '../../../styles/gr-font-styles'; declare global { interface HTMLElementTagNameMap { @@ -28,18 +27,8 @@ } } -export interface GrDialog { - $: { - confirm: GrButton; - }; -} - @customElement('gr-dialog') -export class GrDialog extends PolymerElement { - static get template() { - return htmlTemplate; - } - +export class GrDialog extends LitElement { /** * Fired when the confirm button is pressed. * @@ -52,33 +41,132 @@ * @event cancel */ - @property({type: String}) + @query('#confirm') + confirmButton?: GrButton; + + @property({type: String, attribute: 'confirm-label'}) confirmLabel = 'Confirm'; // Supplying an empty cancel label will hide the button completely. - @property({type: String}) + @property({type: String, attribute: 'cancel-label'}) cancelLabel = 'Cancel'; @property({type: Boolean}) disabled = false; - @property({type: Boolean}) + @property({type: Boolean, attribute: 'confirm-on-enter'}) confirmOnEnter = false; - @property({type: String}) + @property({type: String, attribute: 'confirm-tooltip'}) confirmTooltip?: string; - override ready() { - super.ready(); - this._ensureAttribute('role', 'dialog'); + override firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + if (!this.getAttribute('role')) this.setAttribute('role', 'dialog'); } - @observe('confirmTooltip') - _handleConfirmTooltipUpdate(confirmTooltip?: string) { - if (confirmTooltip) { - this.$.confirm.setAttribute('has-tooltip', 'true'); + static override get styles() { + return [ + sharedStyles, + fontStyles, + css` + :host { + color: var(--primary-text-color); + display: block; + max-height: 90vh; + overflow: auto; + } + .container { + display: flex; + flex-direction: column; + max-height: 90vh; + padding: var(--spacing-xl); + } + header { + flex-shrink: 0; + padding-bottom: var(--spacing-xl); + } + main { + display: flex; + flex-shrink: 1; + width: 100%; + flex: 1; + /* IMPORTANT: required for firefox */ + min-height: 0px; + } + main .overflow-container { + flex: 1; + overflow: auto; + } + footer { + display: flex; + flex-shrink: 0; + justify-content: flex-end; + padding-top: var(--spacing-xl); + } + gr-button { + margin-left: var(--spacing-l); + } + .hidden { + display: none; + } + `, + ]; + } + + override render() { + // Note that we are using (e: Event) => this._handleKeyDown because the + // tests mock out _handleKeydown so the lookup needs to be dynamic, not + // bound statically here. + return html` + <div + class="container" + @keydown=${(e: KeyboardEvent) => this._handleKeydown(e)} + > + <header class="heading-3"><slot name="header"></slot></header> + <main> + <div class="overflow-container"> + <slot name="main"></slot> + </div> + </main> + <footer> + <slot name="footer"></slot> + <gr-button + id="cancel" + class="${this.cancelLabel.length ? '' : 'hidden'}" + link + @click=${(e: Event) => this.handleCancelTap(e)} + > + ${this.cancelLabel} + </gr-button> + <gr-button + id="confirm" + link + primary + @click=${(e: Event) => this._handleConfirm(e)} + ?disabled=${this.disabled} + title=${this.confirmTooltip ?? ''} + > + ${this.confirmLabel} + </gr-button> + </footer> + </div> + `; + } + + override updated(changedProperties: PropertyValues) { + if (changedProperties.has('confirmTooltip')) { + this.updateTooltip(); + } + } + + private updateTooltip() { + const confirmButton = this.confirmButton; + if (!confirmButton) return; + if (this.confirmTooltip) { + confirmButton.setAttribute('has-tooltip', 'true'); } else { - this.$.confirm.removeAttribute('has-tooltip'); + confirmButton.removeAttribute('has-tooltip'); } } @@ -97,7 +185,7 @@ ); } - _handleCancelTap(e: Event) { + private handleCancelTap(e: Event) { e.preventDefault(); e.stopPropagation(); this.dispatchEvent( @@ -115,10 +203,6 @@ } resetFocus() { - this.$.confirm.focus(); - } - - _computeCancelClass(cancelLabel: string) { - return cancelLabel.length ? '' : 'hidden'; + this.confirmButton!.focus(); } }
diff --git a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_html.ts b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_html.ts deleted file mode 100644 index a5cf8f1..0000000 --- a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_html.ts +++ /dev/null
@@ -1,94 +0,0 @@ -/** - * @license - * Copyright (C) 2020 The Android Open Source Project - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import {html} from '@polymer/polymer/lib/utils/html-tag'; - -export const htmlTemplate = html` - <style include="gr-font-styles"> - /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */ - </style> - <style include="shared-styles"> - :host { - color: var(--primary-text-color); - display: block; - max-height: 90vh; - overflow: auto; - } - .container { - display: flex; - flex-direction: column; - max-height: 90vh; - padding: var(--spacing-xl); - } - header { - flex-shrink: 0; - padding-bottom: var(--spacing-xl); - } - main { - display: flex; - flex-shrink: 1; - width: 100%; - flex: 1; - /* IMPORTANT: required for firefox */ - min-height: 0px; - } - main .overflow-container { - flex: 1; - overflow: auto; - } - footer { - display: flex; - flex-shrink: 0; - justify-content: flex-end; - padding-top: var(--spacing-xl); - } - gr-button { - margin-left: var(--spacing-l); - } - .hidden { - display: none; - } - </style> - <div class="container" on-keydown="_handleKeydown"> - <header class="heading-3"><slot name="header"></slot></header> - <main> - <div class="overflow-container"> - <slot name="main"></slot> - </div> - </main> - <footer> - <slot name="footer"></slot> - <gr-button - id="cancel" - class$="[[_computeCancelClass(cancelLabel)]]" - link="" - on-click="_handleCancelTap" - > - [[cancelLabel]] - </gr-button> - <gr-button - id="confirm" - link="" - primary="" - on-click="_handleConfirm" - disabled="[[disabled]]" - title$="[[confirmTooltip]]" - > - [[confirmLabel]] - </gr-button> - </footer> - </div> -`;
diff --git a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_test.ts b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_test.ts index e7b7130..171fc6c 100644 --- a/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_test.ts +++ b/polygerrit-ui/app/elements/shared/gr-dialog/gr-dialog_test.ts
@@ -17,6 +17,7 @@ import * as MockInteractions from '@polymer/iron-test-helpers/mock-interactions'; import '../../../test/common-test-setup-karma'; +import './gr-dialog'; import {GrDialog} from './gr-dialog'; import {isHidden, queryAndAssert} from '../../../test/test-utils'; @@ -25,8 +26,9 @@ suite('gr-dialog tests', () => { let element: GrDialog; - setup(() => { + setup(async () => { element = basicFixture.instantiate(); + await element.updateComplete; }); test('events', () => { @@ -42,56 +44,59 @@ assert.equal(cancel.callCount, 1); }); - test('confirmOnEnter', () => { + test('confirmOnEnter', async () => { element.confirmOnEnter = false; + await element.updateComplete; const handleConfirmStub = sinon.stub(element, '_handleConfirm'); const handleKeydownSpy = sinon.spy(element, '_handleKeydown'); - MockInteractions.pressAndReleaseKeyOn( + MockInteractions.keyDownOn( queryAndAssert(element, 'main'), 13, null, 'enter' ); - flush(); + await flush(); assert.isTrue(handleKeydownSpy.called); assert.isFalse(handleConfirmStub.called); element.confirmOnEnter = true; - MockInteractions.pressAndReleaseKeyOn( + await element.updateComplete; + + MockInteractions.keyDownOn( queryAndAssert(element, 'main'), 13, null, 'enter' ); - flush(); + await flush(); assert.isTrue(handleConfirmStub.called); }); test('resetFocus', () => { - const focusStub = sinon.stub(element.$.confirm, 'focus'); + const focusStub = sinon.stub(element.confirmButton!, 'focus'); element.resetFocus(); assert.isTrue(focusStub.calledOnce); }); suite('tooltip', () => { test('tooltip not added by default', () => { - assert.isNull(element.$.confirm.getAttribute('has-tooltip')); + assert.isNull(element.confirmButton!.getAttribute('has-tooltip')); }); - test('tooltip added if confirm tooltip is passed', () => { + test('tooltip added if confirm tooltip is passed', async () => { element.confirmTooltip = 'confirm tooltip'; - flush(); - assert(element.$.confirm.getAttribute('has-tooltip')); + await element.updateComplete; + assert(element.confirmButton!.getAttribute('has-tooltip')); }); }); - test('empty cancel label hides cancel btn', () => { + test('empty cancel label hides cancel btn', async () => { const cancelButton = queryAndAssert(element, '#cancel'); assert.isFalse(isHidden(cancelButton)); element.cancelLabel = ''; - flush(); + await element.updateComplete; assert.isTrue(isHidden(cancelButton)); });