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

context0 = await initNotebookContext();
      panel0 = NBTestUtils.createNotebookPanel(context0);
      NBTestUtils.populateNotebook(panel0.content);
      context1 = await initNotebookContext();
      panel1 = NBTestUtils.createNotebookPanel(context1);
      NBTestUtils.populateNotebook(panel1.content);
      tracker = new NotebookTracker({ namespace: 'notebook' });
      await tracker.add(panel0);
      await tracker.add(panel1);
      notebookTools = new NotebookTools({ tracker });
      tabpanel = new TabPanel();
      tabpanel.addWidget(panel0);
      tabpanel.addWidget(panel1);
      tabpanel.addWidget(notebookTools);
      tabpanel.node.style.height = '800px';
      Widget.attach(tabpanel, document.body);
      // Give the posted messages a chance to be handled.
      await sleep();
    });

it('should emit a signal when an item is selected', () => {
        let anchor = createEditorWidget();
        let options: Completer.IOptions = {
          editor: anchor.editor,
          model: new CompleterModel()
        };
        let value = '';
        let listener = (sender: any, selected: string) => {
          value = selected;
        };
        options.model!.setOptions(['foo', 'bar']);
        Widget.attach(anchor, document.body);

        let widget = new Completer(options);

        widget.selected.connect(listener);
        Widget.attach(widget, document.body);
        MessageLoop.sendMessage(widget, Widget.Msg.UpdateRequest);
        expect(value).to.equal('');
        widget.selectActive();
        expect(value).to.equal('foo');
        widget.dispose();
        anchor.dispose();
      });
    });

it('should emit when the current widget has been updated', async () => {
        const widget = createWidget();
        let promise = signalToPromise(tracker.currentChanged);

        Widget.attach(widget, document.body);
        focus(widget);
        void tracker.add(widget);
        await promise;
        widget.dispose();
      });
    });

it('should not emit when a widget has been injected', async () => {
        const one = createWidget();
        const two = createWidget();
        let total = 0;
        let promise = testEmission(tracker.currentChanged, {
          find: () => {
            return total === 1;
          }
        });

        tracker.widgetAdded.connect(() => {
          total++;
        });
        void tracker.add(one);
        void tracker.inject(two);
        Widget.attach(two, document.body);
        focus(two);
        Widget.detach(two);
        await promise;
        one.dispose();
        two.dispose();
      });
    });

it('emits when console is shown', () => {
      const s = new SignalLogger(logConsole.sourceDisplayed);
      const loggerA = registry.getLogger('A');
      loggerA.log({ type: 'text', data: 'A1', level: 'warning' });
      logConsole.source = 'A';
      logConsole.hide();
      Widget.attach(logConsole, document.body);
      expect(s.args).toEqual([]);
      logConsole.show();
      expect(s.args).toEqual([{ source: 'A', version: 1 }]);
      s.dispose();
    });

it('should work with a null model', async () => {
        const widget = new TestWidgetNoModel();
        Widget.attach(widget, document.body);
        await framePromise();
        const span = widget.node.firstChild as HTMLElement;
        expect(span.textContent).to.equal('No model!');
      });
    });

it('should render the widget', () => {
        const widget = new InputArea({ model });
        const rendered = new Widget();
        Widget.attach(widget, document.body);
        widget.renderInput(rendered);
        expect(rendered.isAttached).to.equal(true);
        widget.dispose();
      });
    });

it('should focus the cell editor', async () => {
        const widget = new LogBaseCell().initializeState();
        Widget.attach(widget, document.body);
        widget.activate();
        await framePromise();
        expect(widget.methods).toContain('onActivateRequest');
        await framePromise();
        expect(widget.editor.hasFocus()).toEqual(true);
        widget.dispose();
      });
    });

charWidth: editor.charWidth,
          line: position.line,
          text: 'a'
        };

        model.original = request;
        model.cursor = { start: 0, end: 1 };
        model.setOptions(['abc', 'abd', 'abe', 'abi']);

        let widget = new Completer({ model, editor: code.editor });
        widget.hide();
        expect(called).to.equal(false);
        widget.visibilityChanged.connect(() => {
          called = true;
        });
        Widget.attach(widget, document.body);
        MessageLoop.sendMessage(widget, Widget.Msg.UpdateRequest);

        await framePromise();
        expect(called).to.equal(true);
        widget.dispose();
        code.dispose();
        panel.dispose();
      });
    });

return promises.then(() => {
      Widget.attach(this, this._host);
      return promise.promise;
    });
  }