How to use the @jupyterlab/completer/src.Completer function in @jupyterlab/completer

it('should select the item above and not progress beyond first', () => {
          let anchor = createEditorWidget();
          let model = new CompleterModel();
          let options: Completer.IOptions = {
            editor: anchor.editor,
            model
          };
          model.setOptions(['foo', 'bar', 'baz'], {
            foo: 'instance',
            bar: 'function'
          });
          Widget.attach(anchor, document.body);

          let widget = new Completer(options);

          Widget.attach(widget, document.body);
          MessageLoop.sendMessage(widget, Widget.Msg.UpdateRequest);

          let items = widget.node.querySelectorAll(`.${ITEM_CLASS}`);

          expect(Array.from(items[0].classList)).to.contain(ACTIVE_CLASS);
          expect(Array.from(items[1].classList)).to.not.contain(ACTIVE_CLASS);
          expect(Array.from(items[2].classList)).to.not.contain(ACTIVE_CLASS);
          simulate(anchor.node, 'keydown', { keyCode: 40 }); // Down
          expect(Array.from(items[0].classList)).to.not.contain(ACTIVE_CLASS);
          expect(Array.from(items[1].classList)).to.contain(ACTIVE_CLASS);
          expect(Array.from(items[2].classList)).to.not.contain(ACTIVE_CLASS);
          simulate(anchor.node, 'keydown', { keyCode: 40 }); // Down
          expect(Array.from(items[0].classList)).to.not.contain(ACTIVE_CLASS);
          expect(Array.from(items[1].classList)).to.not.contain(ACTIVE_CLASS);

it('should reset if keydown is outside anchor', () => {
          let model = new CompleterModel();
          let anchor = createEditorWidget();
          let options: Completer.IOptions = {
            editor: anchor.editor,
            model
          };
          model.setOptions(['foo', 'bar'], {
            foo: 'instance',
            bar: 'function'
          });
          Widget.attach(anchor, document.body);

          let widget = new Completer(options);

          Widget.attach(widget, document.body);
          MessageLoop.sendMessage(widget, Widget.Msg.UpdateRequest);
          expect(widget.isHidden).to.equal(false);
          expect(model.options).to.be.ok;
          simulate(document.body, 'keydown', { keyCode: 70 }); // F
          MessageLoop.sendMessage(widget, Widget.Msg.UpdateRequest);
          expect(widget.isHidden).to.equal(true);
          expect(model.options().next()).to.be.undefined;
          widget.dispose();
          anchor.dispose();
        });

it('should hide widget if mouse down misses it', () => {
          let anchor = createEditorWidget();
          let model = new CompleterModel();
          let options: Completer.IOptions = {
            editor: anchor.editor,
            model
          };
          let listener = (sender: any, selected: string) => {
            // no op
          };
          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(widget.isHidden).to.equal(false);
          simulate(anchor.node, 'mousedown');
          MessageLoop.sendMessage(widget, Widget.Msg.UpdateRequest);
          expect(widget.isHidden).to.equal(true);
          widget.dispose();
          anchor.dispose();
        });
      });

it('should be safe to set multiple times', () => {
        let model = new CompleterModel();
        let widget = new Completer({ editor: null });
        widget.model = model;
        widget.model = model;
        expect(widget.model).to.equal(model);
      });

it('should reset the completer widget', () => {
        let anchor = createEditorWidget();
        let model = new CompleterModel();
        let options: Completer.IOptions = {
          editor: anchor.editor,
          model
        };
        model.setOptions(['foo', 'bar'], { foo: 'instance', bar: 'function' });
        Widget.attach(anchor, document.body);

        let widget = new Completer(options);

        Widget.attach(widget, document.body);
        MessageLoop.sendMessage(widget, Widget.Msg.UpdateRequest);
        expect(widget.isHidden).to.equal(false);
        expect(model.options).to.be.ok;
        widget.reset();
        MessageLoop.sendMessage(widget, Widget.Msg.UpdateRequest);
        expect(widget.isHidden).to.equal(true);
        expect(model.options().next()).to.be.undefined;
        widget.dispose();
        anchor.dispose();
      });
    });

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 accept options with a model', () => {
        let options: Completer.IOptions = {
          editor: null,
          model: new CompleterModel()
        };
        let widget = new Completer(options);
        expect(widget).to.be.an.instanceof(Completer);
        expect(widget.model).to.equal(options.model);
      });

it('should create a completer widget', () => {
        let widget = new Completer({ editor: null });
        expect(widget).to.be.an.instanceof(Completer);
        expect(Array.from(widget.node.classList)).to.contain('jp-Completer');
      });

charWidth: 0,
          line: 0,
          coords: coords as CodeEditor.ICoordinate,
          text: 'f'
        };

        let options: Completer.IOptions = {
          editor: anchor.editor,
          model
        };

        Widget.attach(anchor, document.body);
        model.original = request;
        model.setOptions(['foo', 'bar', 'baz']);

        let widget = new Completer(options);
        widget.hide();
        expect(widget.isHidden).to.equal(true);
        Widget.attach(widget, document.body);
        MessageLoop.sendMessage(widget, Widget.Msg.UpdateRequest);
        expect(widget.isVisible).to.equal(true);
        widget.dispose();
        anchor.dispose();
      });
    });

editor.setCursorPosition(position);

        let request: Completer.ITextState = {
          column: position.column,
          lineHeight: editor.lineHeight,
          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();
      });
    });