diff --git a/src/scripts/main/dropdown/index.js b/src/scripts/main/dropdown/index.js index 2c09e0d10b..5538ef824b 100644 --- a/src/scripts/main/dropdown/index.js +++ b/src/scripts/main/dropdown/index.js @@ -56,17 +56,21 @@ const init = (id) => { let dropdownMenu; if (id) { - dropdownContainers = document?.getElementById(id); + /* Find the dropdown container by id, and wrap it in a NodeList like structure to + avoid friction in the rest of the code */ + const element = document.getElementById(id); + dropdownContainers = element ? [element] : []; - if (!dropdownContainers) { + if (!dropdownContainers.length) { console.error( `No dropdown found corresponding with the id provided in dropdown.init() passing this id value: "${id}"`, ); return null; } - dropdownToggles = dropdownContainers.querySelector(SELECTORS.TOGGLE); - dropdownMenu = dropdownContainers.querySelector(SELECTORS.DROPDOWNMENU); + + dropdownToggles = element.querySelectorAll(SELECTORS.TOGGLE); + dropdownMenu = element.querySelectorAll(SELECTORS.DROPDOWNMENU); } else { dropdownContainers = document.querySelectorAll(SELECTORS.DROPDOWNLIST); dropdownToggles = document.querySelectorAll( diff --git a/src/scripts/main/dropdown/index.test.js b/src/scripts/main/dropdown/index.test.js index c77f4a956b..0951370655 100644 --- a/src/scripts/main/dropdown/index.test.js +++ b/src/scripts/main/dropdown/index.test.js @@ -1,7 +1,6 @@ import React from "react"; -import { render, screen } from "@testing-library/react"; +import { render } from "@testing-library/react"; import "@testing-library/jest-dom"; -import userEvent from "@testing-library/user-event"; import dropdown from "./index"; @@ -50,6 +49,24 @@ describe("Scripts: Dropdown", () => { expect(dropdown.init()).toBeNull(); expect(console.warn).toHaveBeenCalled(); }); + + it("initializes with ID", () => { + render(); + + console.warn = jest.fn(); + + expect(dropdown.init("foo")).not.toBeNull(); + expect(console.warn).not.toHaveBeenCalled(); + }); + + it("init returns null if no dropdown with ID is found and prints a warning message", () => { + render(); + + console.error = jest.fn(); + + expect(dropdown.init("bar")).toBeNull(); + expect(console.error).toHaveBeenCalled(); + }); }); it("button click gives dropdown-div class of active", () => {