chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/ui/legacy/UIUtils.ts

@@ -51,9 +51,7 @@ import {Size} from './Geometry.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import inlineButtonStyles from './inlineButton.css.legacy.js';
 import inspectorCommonStyles from './inspectorCommon.css.legacy.js';
-import {KeyboardShortcut} from './KeyboardShortcut.js';
-import radioButtonStyles from './radioButton.css.legacy.js';
-import sliderStyles from './slider.css.legacy.js';
+import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
 import smallBubbleStyles from './smallBubble.css.legacy.js';
 import textButtonStyles from './textButton.css.legacy.js';
 import * as ThemeSupport from './theme_support/theme_support.js';
@@ -64,6 +62,15 @@ import {Tooltip} from './Tooltip.js';
 import type {TreeOutline} from './Treeoutline.js';
 import {Widget} from './Widget.js';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dt-checkbox': CheckboxLabel;
+    'dt-close-button': DevToolsCloseButton;
+    'dt-icon-label': DevToolsIconLabel;
+    'dt-small-bubble': DevToolsSmallBubble;
+  }
+}
+
 const UIStrings = {
   /**
    *@description label to open link externally
@@ -1131,6 +1138,47 @@ export function createInput(className?: string, type?: string, jslogContext?: st
   return element;
 }
 
+export function createHistoryInput(type = 'search', className?: string): HTMLInputElement {
+  const history = [''];
+  let historyPosition = 0;
+
+  const historyInput = document.createElement('input');
+  historyInput.type = type;
+  if (className) {
+    historyInput.className = className;
+  }
+  historyInput.addEventListener('input', onInput, false);
+  historyInput.addEventListener('keydown', onKeydown, false);
+  return historyInput;
+
+  function onInput(_event: Event): void {
+    if (history.length === historyPosition + 1) {
+      history[historyPosition] = historyInput.value;
+    }
+  }
+
+  function onKeydown(event: KeyboardEvent): void {
+    if (event.keyCode === Keys.Up.code) {
+      historyPosition = Math.max(historyPosition - 1, 0);
+      historyInput.value = history[historyPosition];
+      historyInput.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+      event.consume(true);
+    } else if (event.keyCode === Keys.Down.code) {
+      historyPosition = Math.min(historyPosition + 1, history.length - 1);
+      historyInput.value = history[historyPosition];
+      historyInput.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
+      event.consume(true);
+    } else if (event.keyCode === Keys.Enter.code) {
+      if (history.length > 1 && history[history.length - 2] === historyInput.value) {
+        return;
+      }
+      history[history.length - 1] = historyInput.value;
+      historyPosition = history.length - 1;
+      history.push('');
+    }
+  }
+}
+
 export function createSelect(name: string, options: string[]|Map<string, string[]>[]|Set<string>): HTMLSelectElement {
   const select = document.createElement('select');
   select.classList.add('chrome-select');
@@ -1138,7 +1186,7 @@ export function createSelect(name: string, options: string[]|Map<string, string[
   for (const option of options) {
     if (option instanceof Map) {
       for (const [key, value] of option) {
-        const optGroup = (select.createChild('optgroup') as HTMLOptGroupElement);
+        const optGroup = select.createChild('optgroup');
         optGroup.label = key;
         for (const child of value) {
           if (typeof child === 'string') {
@@ -1174,22 +1222,10 @@ export function createLabel(title: string, className?: string, associatedControl
   return element;
 }
 
-export function createRadioLabel(
-    name: string, title: string, checked?: boolean, jslogContext?: string): DevToolsRadioButton {
-  const element = (document.createElement('span', {is: 'dt-radio'}) as DevToolsRadioButton);
-  element.radioElement.name = name;
-  element.radioElement.checked = Boolean(checked);
-  createTextChild(element.labelElement, title);
-  if (jslogContext) {
-    element.radioElement.setAttribute('jslog', `${VisualLogging.toggle().track({change: true}).context(jslogContext)}`);
-  }
-  return element;
-}
-
 export function createIconLabel(
     options: {title?: string, iconName: string, color?: string, width?: '14px'|'20px', height?: '14px'|'20px'}):
     DevToolsIconLabel {
-  const element = (document.createElement('span', {is: 'dt-icon-label'}) as DevToolsIconLabel);
+  const element = document.createElement('dt-icon-label');
   if (options.title) {
     element.createChild('span').textContent = options.title;
   }
@@ -1202,12 +1238,63 @@ export function createIconLabel(
   return element;
 }
 
-export function createSlider(min: number, max: number, tabIndex: number): Element {
-  const element = (document.createElement('span', {is: 'dt-slider'}) as DevToolsSlider);
-  element.sliderElement.min = String(min);
-  element.sliderElement.max = String(max);
-  element.sliderElement.step = String(1);
-  element.sliderElement.tabIndex = tabIndex;
+/**
+ * Creates a radio button, which is comprised of a `<label>` and an `<input type="radio">` element.
+ *
+ * The returned pair contains the `label` element and and the `radio` input element. The latter is
+ * a child of the `label`, and therefore no association via `for` attribute is necessary to make
+ * the radio button accessible.
+ *
+ * The element is automatically styled correctly, as long as the core styles (in particular
+ * `inspectorCommon.css` is injected into the current document / shadow root). The lit-html
+ * equivalent of calling this method is:
+ *
+ * ```js
+ * const jslog = VisualLogging.toggle().track({change: true}).context(jslogContext);
+ * html`<label><input type="radio" name=${name} jslog=${jslog}>${title}</label>`
+ * ```
+ *
+ * @param name the name of the radio group.
+ * @param title the label text for the radio button.
+ * @param jslogContext the context string for the `jslog` attribute.
+ * @returns the pair of `HTMLLabelElement` and `HTMLInputElement`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+ */
+export function createRadioButton(
+    name: string, title: string, jslogContext: string): {label: HTMLLabelElement, radio: HTMLInputElement} {
+  const label = document.createElement('label');
+  const radio = label.createChild('input');
+  radio.type = 'radio';
+  radio.name = name;
+  radio.setAttribute('jslog', `${VisualLogging.toggle().track({change: true}).context(jslogContext)}`);
+  createTextChild(label, title);
+  return {label, radio};
+}
+
+/**
+ * Creates an `<input type="range">` element with the specified parameters (a slider)
+ * and a `step` of 1 (the default for the element).
+ *
+ * The element is automatically styled correctly, as long as the core styles (in particular
+ * `inspectorCommon.css` is injected into the current document / shadow root). The lit-html
+ * equivalent of calling this method is:
+ *
+ * ```js
+ * html`<input type="range" min=${min} max=${max} tabindex=${tabIndex}>`
+ * ```
+ *
+ * @param min the minimum allowed value.
+ * @param max the maximum allowed value.
+ * @param tabIndex the value for the `tabindex` attribute.
+ * @returns the newly created `HTMLInputElement` for the slider.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
+ */
+export function createSlider(min: number, max: number, tabIndex: number): HTMLInputElement {
+  const element = document.createElement('input');
+  element.type = 'range';
+  element.min = String(min);
+  element.max = String(max);
+  element.tabIndex = tabIndex;
   return element;
 }
 
@@ -1225,19 +1312,19 @@ export class CheckboxLabel extends HTMLElement {
     super();
     CheckboxLabel.lastId = CheckboxLabel.lastId + 1;
     const id = 'ui-checkbox-label' + CheckboxLabel.lastId;
-    this.shadowRootInternal =
-        createShadowRootWithCoreStyles(this, {cssFile: checkboxTextLabelStyles, delegatesFocus: undefined});
-    this.checkboxElement = (this.shadowRootInternal.createChild('input') as HTMLInputElement);
+    this.shadowRootInternal = createShadowRootWithCoreStyles(this, {cssFile: checkboxTextLabelStyles});
+    this.checkboxElement = this.shadowRootInternal.createChild('input');
     this.checkboxElement.type = 'checkbox';
     this.checkboxElement.setAttribute('id', id);
-    this.textElement = this.shadowRootInternal.createChild('label', 'dt-checkbox-text') as HTMLElement;
+    this.textElement = this.shadowRootInternal.createChild('label', 'dt-checkbox-text');
     this.textElement.setAttribute('for', id);
     this.shadowRootInternal.createChild('slot');
   }
 
-  static create(title?: string, checked?: boolean, subtitle?: string, jslogContext?: string, small?: boolean):
-      CheckboxLabel {
-    const element = document.createElement('dt-checkbox') as CheckboxLabel;
+  static create(
+      title?: Platform.UIString.LocalizedString, checked?: boolean, subtitle?: Platform.UIString.LocalizedString,
+      jslogContext?: string, small?: boolean): CheckboxLabel {
+    const element = document.createElement('dt-checkbox');
     element.checkboxElement.checked = Boolean(checked);
     if (jslogContext) {
       element.checkboxElement.setAttribute(
@@ -1254,21 +1341,25 @@ export class CheckboxLabel extends HTMLElement {
     return element;
   }
 
+  /** Only to be used when the checkbox label is 'generated' (a regex, a className, etc). Most checkboxes should be create()'d with UIStrings */
+  static createWithStringLiteral(
+      title?: string, checked?: boolean, subtitle?: Platform.UIString.LocalizedString, jslogContext?: string,
+      small?: boolean): CheckboxLabel {
+    const stringLiteral = title as Platform.UIString.LocalizedString;
+    return CheckboxLabel.create(stringLiteral, checked, subtitle, jslogContext, small);
+  }
+
   private static lastId = 0;
 }
 
-// Skip registerCustomElement flow as it's incompatible with Safari with this specific custom element.
-self.customElements.define('dt-checkbox', CheckboxLabel);
+customElements.define('dt-checkbox', CheckboxLabel);
 
-export class DevToolsIconLabel extends HTMLSpanElement {
+export class DevToolsIconLabel extends HTMLElement {
   readonly #icon: IconButton.Icon.Icon;
 
   constructor() {
     super();
-    const root = createShadowRootWithCoreStyles(this, {
-      cssFile: undefined,
-      delegatesFocus: undefined,
-    });
+    const root = createShadowRootWithCoreStyles(this);
     this.#icon = new IconButton.Icon.Icon();
     this.#icon.style.setProperty('margin-right', '4px');
     this.#icon.style.setProperty('vertical-align', 'baseline');
@@ -1288,67 +1379,14 @@ export class DevToolsIconLabel extends HTMLSpanElement {
   }
 }
 
-let labelId = 0;
-
-export class DevToolsRadioButton extends HTMLSpanElement {
-  radioElement: HTMLInputElement;
-  labelElement: HTMLLabelElement;
+customElements.define('dt-icon-label', DevToolsIconLabel);
 
-  constructor() {
-    super();
-    this.radioElement = (this.createChild('input', 'dt-radio-button') as HTMLInputElement);
-    this.labelElement = (this.createChild('label') as HTMLLabelElement);
-
-    const id = 'dt-radio-button-id' + (++labelId);
-    this.radioElement.id = id;
-    this.radioElement.type = 'radio';
-    this.labelElement.htmlFor = id;
-    const root = createShadowRootWithCoreStyles(this, {cssFile: radioButtonStyles, delegatesFocus: undefined});
-    root.createChild('slot');
-    this.addEventListener('click', this.radioClickHandler.bind(this), false);
-  }
-
-  radioClickHandler(): void {
-    if (this.radioElement.checked || this.radioElement.disabled) {
-      return;
-    }
-    this.radioElement.checked = true;
-    this.radioElement.dispatchEvent(new Event('change'));
-  }
-}
-
-registerCustomElement('span', 'dt-radio', DevToolsRadioButton);
-registerCustomElement('span', 'dt-icon-label', DevToolsIconLabel);
-
-export class DevToolsSlider extends HTMLSpanElement {
-  sliderElement: HTMLInputElement;
-
-  constructor() {
-    super();
-    const root = createShadowRootWithCoreStyles(this, {cssFile: sliderStyles, delegatesFocus: undefined});
-    this.sliderElement = document.createElement('input');
-    this.sliderElement.classList.add('dt-range-input');
-    this.sliderElement.type = 'range';
-    root.appendChild(this.sliderElement);
-  }
-
-  set value(amount: number) {
-    this.sliderElement.value = String(amount);
-  }
-
-  get value(): number {
-    return Number(this.sliderElement.value);
-  }
-}
-
-registerCustomElement('span', 'dt-slider', DevToolsSlider);
-
-export class DevToolsSmallBubble extends HTMLSpanElement {
+export class DevToolsSmallBubble extends HTMLElement {
   private textElement: Element;
 
   constructor() {
     super();
-    const root = createShadowRootWithCoreStyles(this, {cssFile: smallBubbleStyles, delegatesFocus: undefined});
+    const root = createShadowRootWithCoreStyles(this, {cssFile: smallBubbleStyles});
     this.textElement = root.createChild('div');
     this.textElement.className = 'info';
     this.textElement.createChild('slot');
@@ -1359,37 +1397,37 @@ export class DevToolsSmallBubble extends HTMLSpanElement {
   }
 }
 
-registerCustomElement('span', 'dt-small-bubble', DevToolsSmallBubble);
+customElements.define('dt-small-bubble', DevToolsSmallBubble);
 
-export class DevToolsCloseButton extends HTMLDivElement {
-  private button: Buttons.Button.Button;
+export class DevToolsCloseButton extends HTMLElement {
+  #button: Buttons.Button.Button;
 
   constructor() {
     super();
-    const root = createShadowRootWithCoreStyles(this, {delegatesFocus: undefined});
-    this.button = new Buttons.Button.Button();
-    this.button.data = {variant: Buttons.Button.Variant.ICON, iconName: 'cross'};
-    this.button.classList.add('close-button');
-    this.button.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
-    Tooltip.install(this.button, i18nString(UIStrings.close));
-    ARIAUtils.setLabel(this.button, i18nString(UIStrings.close));
-    root.appendChild(this.button);
+    const root = createShadowRootWithCoreStyles(this);
+    this.#button = new Buttons.Button.Button();
+    this.#button.data = {variant: Buttons.Button.Variant.ICON, iconName: 'cross'};
+    this.#button.classList.add('close-button');
+    this.#button.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
+    Tooltip.install(this.#button, i18nString(UIStrings.close));
+    ARIAUtils.setLabel(this.#button, i18nString(UIStrings.close));
+    root.appendChild(this.#button);
   }
 
   setAccessibleName(name: string): void {
-    ARIAUtils.setLabel(this.button, name);
+    ARIAUtils.setLabel(this.#button, name);
   }
 
   setTabbable(tabbable: boolean): void {
     if (tabbable) {
-      this.button.tabIndex = 0;
+      this.#button.tabIndex = 0;
     } else {
-      this.button.tabIndex = -1;
+      this.#button.tabIndex = -1;
     }
   }
 }
 
-registerCustomElement('div', 'dt-close-button', DevToolsCloseButton);
+customElements.define('dt-close-button', DevToolsCloseButton);
 
 export function bindInput(
     input: HTMLInputElement, apply: (arg0: string) => void, validate: (arg0: string) => {
@@ -1569,11 +1607,14 @@ export function createFileSelectorElement(callback: (arg0: File) => void, accept
   }
   fileSelectorElement.style.display = 'none';
   fileSelectorElement.tabIndex = -1;
-  fileSelectorElement.onchange = () => {
-    if (fileSelectorElement.files) {
+  fileSelectorElement.addEventListener('change', () => {
+    if (fileSelectorElement.files?.length) {
       callback(fileSelectorElement.files[0]);
     }
-  };
+  });
+  fileSelectorElement.addEventListener('click', () => {
+    fileSelectorElement.value = '';
+  });
 
   return fileSelectorElement;
 }
@@ -1585,8 +1626,7 @@ export class MessageDialog {
     const dialog = new Dialog(jslogContext);
     dialog.setSizeBehavior(SizeBehavior.MEASURE_CONTENT);
     dialog.setDimmed(true);
-    const shadowRoot = createShadowRootWithCoreStyles(
-        dialog.contentElement, {cssFile: confirmDialogStyles, delegatesFocus: undefined});
+    const shadowRoot = createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: confirmDialogStyles});
     const content = shadowRoot.createChild('div', 'widget');
     await new Promise(resolve => {
       const okButton = createTextButton(
@@ -1610,8 +1650,7 @@ export class ConfirmDialog {
     dialog.setSizeBehavior(SizeBehavior.MEASURE_CONTENT);
     dialog.setDimmed(true);
     ARIAUtils.setLabel(dialog.contentElement, message);
-    const shadowRoot = createShadowRootWithCoreStyles(
-        dialog.contentElement, {cssFile: confirmDialogStyles, delegatesFocus: undefined});
+    const shadowRoot = createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: confirmDialogStyles});
     const content = shadowRoot.createChild('div', 'widget');
     content.createChild('div', 'message').createChild('span').textContent = message;
     const buttonsBar = content.createChild('div', 'button');
@@ -1636,7 +1675,7 @@ export class ConfirmDialog {
 
 export function createInlineButton(toolbarButton: ToolbarButton): Element {
   const element = document.createElement('span');
-  const shadowRoot = createShadowRootWithCoreStyles(element, {cssFile: inlineButtonStyles, delegatesFocus: undefined});
+  const shadowRoot = createShadowRootWithCoreStyles(element, {cssFile: inlineButtonStyles});
   element.classList.add('inline-button');
   const toolbar = new Toolbar('');
   toolbar.appendToolbarItem(toolbarButton);
@@ -1848,6 +1887,15 @@ export function injectTextButtonStyles(root: Element|ShadowRoot): void {
   ThemeSupport.ThemeSupport.instance().appendStyle(root, textButtonStyles);
 }
 
+/**
+ * Creates a new shadow DOM tree with the core styles and an optional list of
+ * additional styles, and attaches it to the specified `element`.
+ *
+ * @param element the `Element` to attach the shadow DOM tree to.
+ * @param options optional additional style sheets and options for `Element#attachShadow()`.
+ * @returns the newly created `ShadowRoot`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
+ */
 export function createShadowRootWithCoreStyles(
     element: Element, options: {cssFile?: CSSStyleSheet[]|{cssContent: string}, delegatesFocus?: boolean} = {
       delegatesFocus: undefined,
@@ -1895,18 +1943,3 @@ export function measuredScrollbarWidth(document?: Document|null): number {
   document.body.removeChild(scrollDiv);
   return cachedMeasuredScrollbarWidth;
 }
-
-export function registerCustomElement(
-    localName: string, typeExtension: string, definition: new () => HTMLElement): () => Element {
-  self.customElements.define(typeExtension, class extends definition {
-    constructor() {
-      // The JSDoc above does not allow the super call to have no params, but
-      // it seems to be the nearest to something both Closure and TS understand.
-      // @ts-ignore crbug.com/1011811: Fix after Closure has been removed.
-      super();
-      // TODO(einbinder) convert to classes and custom element tags
-      this.setAttribute('is', typeExtension);
-    }
-  }, {extends: localName});
-  return (): Element => document.createElement(localName, {is: typeExtension});
-}

package/front_end/ui/legacy/ViewRegistration.test.ts

@@ -56,7 +56,7 @@ describeWithEnvironment('ViewRegistration', () => {
     const filteredCommands = allCommands.filter(
         command =>
             command.title === commandPrompt && command.isPanelOrDrawer === QuickOpen.CommandMenu.PanelOrDrawer.PANEL);
-    assert.strictEqual(filteredCommands.length, 1, 'Command for showing a preregistered view was not added correctly');
+    assert.lengthOf(filteredCommands, 1, 'Command for showing a preregistered view was not added correctly');
   });
 
   it('deletes a registered view using its id', () => {

package/front_end/ui/legacy/Widget.test.ts

@@ -3,15 +3,24 @@
 // found in the LICENSE file.
 
 import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import * as RenderCoordinator from '../components/render_coordinator/render_coordinator.js';
 
 import * as UI from './legacy.js';
 
+const {Widget} = UI.Widget;
+
+class UpdateWidget extends Widget {
+  override doUpdate(): Promise<void>|void {
+    return super.doUpdate();
+  }
+}
+
 describe('Widget', () => {
   it('monkey-patches `Element#appendChild()` to sanity-check that widgets are properly attached', () => {
     const div = document.createElement('div');
     renderElementIntoDOM(div);
 
-    const widget = new UI.Widget.Widget();
+    const widget = new Widget();
     widget.markAsRoot();
 
     assert.throws(() => div.appendChild(widget.element));
@@ -23,7 +32,7 @@ describe('Widget', () => {
     const child = document.createElement('span');
     div.appendChild(child);
 
-    const widget = new UI.Widget.Widget();
+    const widget = new Widget();
     widget.markAsRoot();
 
     assert.throws(() => div.insertBefore(widget.element, child));
@@ -33,7 +42,7 @@ describe('Widget', () => {
     const div = document.createElement('div');
     renderElementIntoDOM(div);
 
-    const widget = new UI.Widget.Widget();
+    const widget = new Widget();
     widget.markAsRoot();
     widget.show(div);
 
@@ -44,10 +53,108 @@ describe('Widget', () => {
     const div = document.createElement('div');
     renderElementIntoDOM(div);
 
-    const widget = new UI.Widget.Widget();
+    const widget = new Widget();
     widget.markAsRoot();
     widget.show(div);
 
     assert.throws(() => div.removeChildren());
   });
+
+  describe('detach', () => {
+    it('cancels pending updates', async () => {
+      const widget = new UpdateWidget();
+      const doUpdate = sinon.spy(widget, 'doUpdate');
+      widget.markAsRoot();
+      widget.show(renderElementIntoDOM(document.createElement('main')));
+      widget.update();
+
+      widget.detach();
+
+      assert.isTrue(await widget.updateComplete);
+      assert.strictEqual(doUpdate.callCount, 0, 'Expected no calls to `doUpdate`');
+    });
+  });
+
+  describe('doUpdate', () => {
+    it('can safely use the `RenderCoordinator` primitives', async () => {
+      const widget = new (class extends UpdateWidget {
+        override async doUpdate(): Promise<void> {
+          const clientHeight = await RenderCoordinator.read(() => this.contentElement.clientHeight);
+          const clientWidth = await RenderCoordinator.read(() => this.contentElement.clientWidth);
+          await RenderCoordinator.write(() => {
+            this.contentElement.style.width = `${clientWidth + 1}px`;
+            this.contentElement.style.height = `${clientHeight + 1}px`;
+          });
+        }
+      })();
+      widget.markAsRoot();
+      widget.show(renderElementIntoDOM(document.createElement('main')));
+
+      widget.update();
+
+      assert.isTrue(await widget.updateComplete);
+    });
+  });
+
+  describe('update', () => {
+    it('deduplicates subsequent update requests', async () => {
+      const widget = new UpdateWidget();
+      const doUpdate = sinon.stub(widget, 'doUpdate');
+
+      widget.update();
+      widget.update();
+      await widget.updateComplete;
+
+      assert.strictEqual(doUpdate.callCount, 1, 'Expected exactly one call to `doUpdate`');
+    });
+  });
+
+  describe('updateComplete', () => {
+    it('resolves to `true` when there\'s no pending update', async () => {
+      const widget = new Widget();
+
+      assert.isTrue(await widget.updateComplete);
+    });
+
+    it('resolves to `true` when update cycles ends without scheduling another update', async () => {
+      const widget = new Widget();
+
+      widget.update();
+
+      assert.isTrue(await widget.updateComplete);
+    });
+
+    it('resolves to `false` when another update is schedule during an update cycle', async () => {
+      const widget = new UpdateWidget();
+      sinon.stub(widget, 'doUpdate').onFirstCall().callsFake(widget.update.bind(widget));
+
+      widget.update();
+
+      assert.isFalse(await widget.updateComplete);
+      await widget.updateComplete;
+    });
+
+    it('yields the same promise for the same update cycle', async () => {
+      const widget = new Widget();
+
+      widget.update();
+      const updateComplete = widget.updateComplete;
+      widget.update();
+
+      assert.strictEqual(updateComplete, widget.updateComplete);
+      await widget.updateComplete;
+    });
+
+    it('yields a new promise for each update cycle', async () => {
+      const widget = new Widget();
+
+      widget.update();
+      const updateComplete = widget.updateComplete;
+      await updateComplete;
+      widget.update();
+
+      assert.notStrictEqual(updateComplete, widget.updateComplete);
+      await widget.updateComplete;
+    });
+  });
 });