How to use the @lumino/widgets.Widget function in @lumino/widgets

it('should save data', async () => {
        const ready = new PromiseDelegate();
        const restorer = new LayoutRestorer({
          connector: new StateDB(),
          first: ready.promise,
          registry: new CommandRegistry()
        });
        const currentWidget = new Widget();
        // The `fresh` attribute is only here to check against the return value.
        const dehydrated: ILabShell.ILayout = {
          fresh: false,
          mainArea: { currentWidget: null, dock: null, mode: null },
          leftArea: {
            currentWidget,
            collapsed: true,
            widgets: [currentWidget]
          },
          rightArea: { collapsed: true, currentWidget: null, widgets: null }
        };
        restorer.add(currentWidget, 'test-one');
        ready.resolve(void 0);
        await restorer.restored;
        await restorer.save(dehydrated);
        const layout = await restorer.fetch();

constructor(datastore: Datastore, record: string) {
    super();
    this.addClass('content');
    this._store = datastore;
    this._record = record;

    // Get initial values for the editor
    let editorTable = this._store.get(EDITOR_SCHEMA);
    let initialValue = editorTable.get(record)!.text;
    let readOnly = editorTable.get(record)!.readOnly;

    // Set up the DOM structure
    this._editorWidget = new Widget();
    this._checkWidget = new Widget();
    this._checkWidget.node.style.height = `${this._toolbarHeight}px`;
    this._checkWidget.addClass('read-only-check');
    this._checkWidget.node.textContent = 'Read Only';
    this._check = document.createElement('input');
    this._check.type = 'checkbox';
    this._check.checked = readOnly;
    this._checkWidget.node.appendChild(this._check);

    this.addWidget(this._checkWidget);
    this.addWidget(this._editorWidget);

    // Listen to changes in the checkbox.
    this._check.onchange = this._onChecked.bind(this);

    // Create the editor instance.
    this._editor = CodeMirror(this._editorWidget.node, {

it('should be a no-op if the widget is not in the left area', () => {
      const widget = new Widget();
      widget.id = 'foo';
      expect(widget.isVisible).to.equal(false);
      shell.activateById('foo');
      expect(widget.isVisible).to.equal(false);
    });

it('should close all of the widgets in the main area', () => {
      const foo = new Widget();
      foo.id = 'foo';
      shell.add(foo, 'main');
      const bar = new Widget();
      bar.id = 'bar';
      shell.add(bar, 'main');
      shell.closeAll();
      expect(foo.parent).to.equal(null);
      expect(bar.parent).to.equal(null);
    });
  });

it('should only show if isActive returns true', () => {
        const item = new Widget();
        statusBar.registerStatusItem('item', {
          item,
          isActive: () => false
        });
        expect(item.isHidden).to.be.true;
      });

it('should fire when a source updates', () => {
        const widget = new TestInspectorPanel();
        widget.source = new TestInspectable();
        expect(widget.methods).to.not.contain('onInspectorUpdate');
        (widget.source.inspected as any).emit({ content: new Widget() });
        expect(widget.methods).to.contain('onInspectorUpdate');
      });
    });

protected createNewWidget(
    context: DocumentRegistry.Context
  ): IDocumentWidget {
    const content = new Widget();
    const widget = new DocumentWidget({ content, context });
    widget.addClass('WidgetFactory');
    return widget;
  }
}

protected createNewWidget(
    context: DocumentRegistry.Context,
    source: CloneTestWidget
  ): CloneTestWidget {
    return new CloneTestWidget({
      context,
      content: new Widget(),
      count: source ? source.counter + 1 : 0
    });
  }
}

createHeader(title: Header): Widget {
      let header: Widget;
      if (typeof title === 'string') {
        header = new Widget({ node: document.createElement('span') });
        header.node.textContent = title;
      } else {
        header = ReactWidget.create(title);
      }
      header.addClass('jp-Dialog-header');
      Styling.styleNode(header.node);
      return header;
    }

createFooter(buttons: ReadonlyArray): Widget {
      let footer = new Widget();
      footer.addClass('jp-Dialog-footer');
      each(buttons, button => {
        footer.node.appendChild(button);
      });
      Styling.styleNode(footer.node);
      return footer;
    }