Improve tagListInputController to integrate with bulkFormController

tagListInputController is not a standard form controller so we had to
make a few changes to integrate with the change tracking used int
bulkFormController. Mainly we make sure to manually trigger event when
deleting a tags, and we handle the change highlight.
This commit is contained in:
Gaetan Craig-Riou
2025-04-09 13:37:16 +10:00
parent c15e16900d
commit 559249b621
5 changed files with 47 additions and 9 deletions

View File

@@ -13,7 +13,10 @@ describe("TagListInputController", () => {
beforeEach(() => {
document.body.innerHTML = `
<div data-controller="tag-list-input-component--tag-list-input">
<div
data-controller="tag-list-input-component--tag-list-input"
data-tag-list-input-component--tag-list-input-highlight-class-value="changed"
>
<input
value="tag 1,tag 2,tag 3"
data-tag-list-input-component--tag-list-input-target="tagList"
@@ -77,7 +80,6 @@ describe("TagListInputController", () => {
describe("addTag", () => {
beforeEach(() => {
variant_add_tag.value = "new_tag";
// { key: "Enter" }
variant_add_tag.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
});
@@ -95,6 +97,12 @@ describe("TagListInputController", () => {
it("clears the tag input", () => {
expect(variant_add_tag.value).toBe("");
});
it("higlights the tag list", () => {
const tagList = document.getElementsByClassName("tags")[0];
expect(tagList.classList).toContain("changed");
});
});
describe("removeTag", () => {
@@ -113,11 +121,17 @@ describe("TagListInputController", () => {
// 1 template + 2 tags
expect(tagList.childElementCount).toBe(3);
});
it("higlights the tag list", () => {
const tagList = document.getElementsByClassName("tags")[0];
expect(tagList.classList).toContain("changed");
});
});
describe("filterInput", () => {
it("removes comma from the tag input", () => {
variant_add_tag.value = "text"
variant_add_tag.value = "text";
variant_add_tag.dispatchEvent(new KeyboardEvent("keyup", { key: "," }));
expect(variant_add_tag.value).toBe("text");