diff --git a/spec/javascripts/stimulus/tag_list_input_controller_test.js b/spec/javascripts/stimulus/tag_list_input_controller_test.js index c1a1c83447..8ebd9b515d 100644 --- a/spec/javascripts/stimulus/tag_list_input_controller_test.js +++ b/spec/javascripts/stimulus/tag_list_input_controller_test.js @@ -3,12 +3,45 @@ */ import { Application } from "stimulus"; +import { screen } from "@testing-library/dom"; + import tag_list_input_controller from "tag_list_input_component/tag_list_input_controller"; +// Mock jest to return an autocomplete list +global.fetch = jest.fn(() => { + const html = ` +
  • + tag-1 has 1 rule +
    • +
  • + rule-2 has 2 rules +
    • `; + + return Promise.resolve({ + ok: true, + text: () => Promise.resolve(html), + }); +}); + describe("TagListInputController", () => { beforeAll(() => { const application = Application.start(); application.register("tag-list-input", tag_list_input_controller); + jest.useFakeTimers(); }); beforeEach(() => { @@ -73,12 +106,12 @@ describe("TagListInputController", () => { name="variant_add_tag" id="variant_add_tag" placeholder="Add a tag" - data-action="keydown.enter->tag-list-input#keyboardAddTag keyup->tag-list-input#filterInput blur->tag-list-input#onBlur focus->tag-list-input#onInputChange" + data-action="keydown.enter->tag-list-input#keyboardAddTag keyup->tag-list-input#filterInput focus->tag-list-input#onInputChange blur->tag-list-input#onBlur" data-tag-list-input-target="input" style="display: block;" > - + `; }); @@ -315,4 +348,130 @@ describe("TagListInputController", () => { expect(variant_add_tag.classList).not.toContain("tag-error"); }); }); + + describe("onBlur", () => { + it("adds the tag", () => { + variant_add_tag.value = "newer_tag"; + variant_add_tag.dispatchEvent(new FocusEvent("blur")); + + expect(variant_tag_list.value).toBe("tag-1,tag-2,tag-3,newer_tag"); + }); + + describe("with autocomplete results", () => { + beforeEach(() => { + document.body.innerHTML = ` +
    + +
    +
    +
      + +
    • +
      + tag-1 + ✖ +
      +
      • +
    • +
      + tag-2 + ✖ +
      +
      • +
    • +
      + tag-3 + ✖ +
      +
      • +
    + +
    + +
    +
    `; + }); + + it("doesn't add the tag", () => { + variant_add_tag.value = "newer_tag"; + variant_add_tag.dispatchEvent(new FocusEvent("blur")); + + expect(variant_tag_list.value).toBe("tag-1,tag-2,tag-3"); + }); + }); + }); + + describe("replaceResults", () => { + beforeEach(() => { + fetch.mockClear(); + }); + + it("filters out existing tags in the autocomplete dropdown", async () => { + variant_add_tag.dispatchEvent(new FocusEvent("focus")); + // onInputChange uses a debounce function implemented using setTimeout + jest.runAllTimers(); + + // findAll* will wait for all promises to be finished before returning a result, this ensure + // the dom has been updated with the autocomplete data + const items = await screen.findAllByTestId("item"); + expect(items.length).toBe(1); + expect(items[0].textContent.trim()).toBe("rule-2 has 2 rules"); + }); + }); });