jquery-typeahead/test/integration/callback.submit.test.js

jQuery plugin that provides Typeahead (autocomplete) Search preview from Json object(s) via same domain Ajax request or cross domain Jsonp and offers data compression inside Local Storage. The plugin is built with a lot of options and callbacks to allow c

const $ = require("jquery");
const Typeahead = require("../../src/jquery.typeahead");

describe("Typeahead onSubmit Callback Tests", () => {
  "use strict";

  let myTypeahead, onSubmitCalled, onSubmitItem;

  let enterEvent = $.Event("keydown");
  enterEvent.keyCode = 13;

  beforeAll(() => {
    document.body.innerHTML = `<form>
            <div class="typeahead__container">
                <div class="typeahead__field">
                    <div class="typeahead__query">
                        <input class="js-typeahead"
                               name="q"
                               autofocus
                               autocomplete="off">
                    </div>
                    <div class="typeahead__button">
                        <button type="submit">
                            <span class="typeahead__search-icon"></span>
                        </button>
                    </div>
                </div>
            </div>
        </form>`;

    myTypeahead = $.typeahead({
      input: ".js-typeahead",
      minLength: 0,
      source: [
        {
          id: 1,
          display: "Test"
        },
        {
          id: 2,
          display: "callback"
        }
      ],
      callback: {
        onSubmit: function(node, form, item, event) {
          event.preventDefault();

          onSubmitCalled = true;
          onSubmitItem = item;
        }
      }
    });
  });

  it("Should call onSubmit callback with with the selected item", () => {
    myTypeahead.node.val("test").trigger("input");

    myTypeahead.resultContainer.find("li:eq(0) a").trigger("click");

    expect(myTypeahead.container.hasClass("result")).toBeFalsy();

    myTypeahead.node.trigger(enterEvent);

    expect(onSubmitCalled).toBeTruthy();
    expect(onSubmitItem).toEqual({
      display: "Test",
      group: "group",
      id: 1,
      matchedKey: "display"
    });

    expect(myTypeahead.container.hasClass("result")).toBeFalsy();
  });
});

describe("Typeahead onSubmit Callback Tests", () => {
  "use strict";

  let myTypeahead, onSubmitCalled, onSubmitItem;

  beforeAll(() => {
    document.body.innerHTML = `<form>
            <div class="typeahead__container">
                <div class="typeahead__field">
                    <div class="typeahead__query">
                        <input class="js-typeahead"
                               name="q"
                               autofocus
                               autocomplete="off">
                    </div>
                    <div class="typeahead__button">
                        <button type="submit">
                            <span class="typeahead__search-icon"></span>
                        </button>
                    </div>
                </div>
            </div>
        </form>`;

    myTypeahead = $.typeahead({
      input: ".js-typeahead",
      minLength: 0,
      multiselect: {
        data: [
          {
            id: 1,
            display: "Test"
          },
          {
            id: 2,
            display: "callback"
          }
        ]
      },
      source: [
        {
          id: 1,
          display: "Test"
        },
        {
          id: 2,
          display: "callback"
        }
      ],
      callback: {
        onSubmit: function(node, form, item, event) {
          event.preventDefault();

          onSubmitCalled = true;
          onSubmitItem = item;
        }
      }
    });
  });

  it("Should call onSubmit callback with with the selected item", () => {
    myTypeahead.node.closest("form").submit();

    expect(onSubmitCalled).toBeTruthy();
    expect(onSubmitItem).toEqual([
      { display: "Test", id: 1 },
      { display: "callback", id: 2 }
    ]);

    expect(myTypeahead.container.hasClass("result")).toBeFalsy();
  });
});