ref: hoist DOM element queries outside loop (sugarlabs#7619)

* refactor(musickeyboard): hoist DOM element queries outside loop

* fix(musickeyboard): correct variable names and add test for _createKeyboard

Author: lavjeetrai

js/widgets/__tests__/musickeyboard.test.js

@@ -209,6 +209,39 @@ describe("MusicKeyboard add-row submenu", () => {
         expect(keyboard._exitWheel.navItems[1].enabled).toBe(false);
         expect(keyboard._exitWheel.navItems[0].sliceSelectedAttr.cursor).toBe("pointer");
     });
+    test("creates keyboard without throwing and sets up idContainer", () => {
+        global.PITCHES3 = ["C", "D", "E", "F", "G", "A", "B"];
+        global.SHARP = "♯";
+        global.FLAT = "♭";
+        const keyboard = new MusicKeyboard({
+            canvas: { width: 800, height: 600 },
+            getStageScale: () => 1
+        });
+
+        keyboard.keyboardDiv = document.createElement("div");
+        document.body.appendChild(keyboard.keyboardDiv);
+
+        keyboard.displayLayout = [
+            { noteName: "hertz", noteOctave: 392, blockNumber: 100001 },
+            { noteName: "drum", noteOctave: 436, blockNumber: 100002 },
+            { noteName: "C", noteOctave: 4, blockNumber: 100003 },
+            { noteName: "C#", noteOctave: 4, blockNumber: 100004 },
+            { noteName: "Db", noteOctave: 4, blockNumber: 100005 }
+        ];
+        keyboard.layout = keyboard.displayLayout;
+        keyboard.noteNames = [];
+        keyboard.octaves = [];
+        keyboard.loadHandler = jest.fn();
+        keyboard.addKeyboardShortcuts = jest.fn();
+
+        expect(() => keyboard._createKeyboard()).not.toThrow();
+        expect(keyboard.idContainer.length).toBeGreaterThan(0);
+
+        document.body.removeChild(keyboard.keyboardDiv);
+        delete global.PITCHES3;
+        delete global.SHARP;
+        delete global.FLAT;
+    });
 });
 
 describe("MusicKeyboard widgetWindow.onclose & event cleanup", () => {

js/widgets/musickeyboard.js

@@ -2959,11 +2959,13 @@ function MusicKeyboard(activity) {
         let myrow2Id = 0;
         let myrow3Id = 0;
 
-        let parenttbl, parenttbl2, el, newel, newel2, nname;
+        let parenttbl = document.getElementById("myrow");
+        let parenttbl2 = document.getElementById("myrow2");
+        let el, newel, newel2, nname;
+
         for (let p = 0; p < this.displayLayout.length; p++) {
             // If the blockNumber is null, don't add a label.
             if (this.displayLayout[p].noteName > FAKEBLOCKNUMBER) {
-                parenttbl2 = document.getElementById("myrow2");
                 newel2 = document.createElement("td");
                 newel2.setAttribute("id", "blackRow" + myrow2Id.toString());
                 if (
@@ -3005,7 +3007,6 @@ function MusicKeyboard(activity) {
                 newel2.style.visibility = "hidden";
                 parenttbl2.appendChild(newel2);
             } else if (this.displayLayout[p].noteName === "drum") {
-                parenttbl = document.getElementById("myrow");
                 newel = document.createElement("td");
                 newel.style.textAlign = "center";
                 newel.setAttribute("id", "whiteRow" + myrowId.toString());
@@ -3035,7 +3036,6 @@ function MusicKeyboard(activity) {
                 newel.style.zIndex = "100";
                 parenttbl.appendChild(newel);
             } else if (this.displayLayout[p].noteName === "hertz") {
-                parenttbl = document.getElementById("myrow");
                 newel = document.createElement("td");
                 newel.style.textAlign = "center";
                 newel.setAttribute("id", "hertzRow" + myrow3Id.toString());
@@ -3068,7 +3068,6 @@ function MusicKeyboard(activity) {
                 this.displayLayout[p].noteName.includes(SHARP) ||
                 this.displayLayout[p].noteName.includes("#")
             ) {
-                parenttbl2 = document.getElementById("myrow2");
                 newel2 = document.createElement("td");
                 newel2.setAttribute("id", "blackRow" + myrow2Id.toString());
                 newel2.style.textAlign = "center";
@@ -3125,7 +3124,6 @@ function MusicKeyboard(activity) {
                 this.displayLayout[p].noteName.includes(FLAT) ||
                 this.displayLayout[p].noteName.includes("b")
             ) {
-                parenttbl2 = document.getElementById("myrow2");
                 newel2 = document.createElement("td");
                 // elementid2 = document.getElementsByTagName("td").length;
                 newel2.setAttribute("id", "blackRow" + myrow2Id.toString());
@@ -3191,7 +3189,6 @@ function MusicKeyboard(activity) {
                 newel2.style.zIndex = "200";
                 parenttbl2.appendChild(newel2);
             } else {
-                parenttbl = document.getElementById("myrow");
                 newel = document.createElement("td");
                 // elementid = document.getElementsByTagName("td").length;
 
@@ -3242,7 +3239,6 @@ function MusicKeyboard(activity) {
                 parenttbl.appendChild(newel);
             }
         }
-        parenttbl = document.getElementById("myrow");
         newel = document.createElement("td");
         parenttbl.appendChild(newel);
         newel.style.textAlign = "center";