How to use the @jupyterlab/completer.CompleterModel function in @jupyterlab/completer

constructor(props: CompleterProps) {
    super(props);

    const editor =
      this.props.notebookPanel.content.activeCell &&
      this.props.notebookPanel.content.activeCell.editor;
    const model = new CompleterModel();
    this.completer = new Completer({ editor, model });
    const connector = new KernelConnector({
      session: this.props.notebookPanel.session
    });
    this.handler = new CompletionHandler({
      completer: this.completer,
      connector
    });
    // Set the handler's editor.
    this.handler.editor = editor;

    // Listen for active cell changes.
    this.props.notebookPanel.content.activeCellChanged.connect(
      (sender, cell) => {
        this.handler.editor = cell && cell.editor;
      }

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}`);

it('should not signal when options have not changed', () => {
        let model = new CompleterModel();
        let called = 0;
        let listener = (sender: any, args: void) => {
          called++;
        };
        model.stateChanged.connect(listener);
        expect(called).to.equal(0);
        model.setOptions(['foo']);
        model.setOptions(['foo']);
        expect(called).to.equal(1);
        model.setOptions(['foo'], { foo: 'instance' });
        model.setOptions(['foo'], { foo: 'instance' });
        expect(called).to.equal(2);
        model.setOptions([], {});
        model.setOptions([], {});
        expect(called).to.equal(3);
      });

it('should reset if last char is whitespace && column < original', () => {
        let model = new CompleterModel();
        let currentValue = 'foo';
        let newValue = 'foo ';
        let request = makeState(currentValue);
        (request as any).column = 3;
        let change = makeState(newValue);
        (change as any).column = 0;
        model.original = request;
        expect(model.original).to.equal(request);
        model.handleTextChange(change);
        expect(model.original).to.be.null;
      });
    });

it('should return model options', () => {
        let model = new CompleterModel();
        let options = ['foo'];
        model.setOptions(options, {});
        expect(toArray(model.options())).to.not.equal(options);
        expect(toArray(model.options())).to.eql(options);
      });

it('should reset model if change is shorter than original', () => {
        let model = new CompleterModel();
        let currentValue = 'foo';
        let newValue = 'fo';
        let cursor: Completer.ICursorSpan = { start: 0, end: 0 };
        let request = makeState(currentValue);
        let change = makeState(newValue);
        model.original = request;
        model.cursor = cursor;
        model.current = change;
        expect(model.current).to.be.null;
        expect(model.original).to.be.null;
        expect(model.options().next()).to.be.undefined;
      });
    });

it('should emit a signal when completer visibility changes', async () => {
        let panel = new Panel();
        let code = createEditorWidget();
        let editor = code.editor;
        let model = new CompleterModel();
        let called = false;

        editor.model.value.text = 'a';
        panel.node.style.position = 'absolute';
        panel.node.style.top = '0px';
        panel.node.style.left = '0px';
        panel.node.style.height = '1000px';
        code.node.style.height = '900px';
        panel.addWidget(code);
        Widget.attach(panel, document.body);
        panel.node.scrollTop = 0;
        document.body.scrollTop = 0;

        let position = code.editor.getPositionAt(1);

        editor.setCursorPosition(position);

it('should be true if model has been disposed', () => {
        let model = new CompleterModel();
        expect(model.isDisposed).to.be(false);
        model.dispose();
        expect(model.isDisposed).to.be(true);
      });
    });

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);

it.skip('should position itself according to the anchor', async () => {
          let panel = new Panel();
          let code = createEditorWidget();
          let editor = code.editor;
          let model = new CompleterModel();
          let text = '\n\n\n\n\n\na';

          code.node.style.height = '5000px';
          code.node.style.width = '400px';
          code.node.style.background = 'yellow';
          editor.model.value.text = text;

          panel.node.style.background = 'red';
          panel.node.style.height = '2000px';
          panel.node.style.width = '500px';
          panel.node.style.maxHeight = '500px';
          panel.node.style.overflow = 'auto';
          panel.node.style.position = 'absolute';
          panel.node.style.top = '0px';
          panel.node.style.left = '0px';
          panel.node.scrollTop = 10;