From 131375a26e2167925af2ad92524a9ccdda5c5d72 Mon Sep 17 00:00:00 2001
From: Steve Howell <showell@zulip.com>
Date: Mon, 8 Feb 2021 14:48:50 +0000
Subject: [PATCH] zjquery: Allow passing children to $.create().

It's actually pretty rare in our codebase to
call methods like `$(...).map` or `$(...).each`,
but we now support them better in zjquery.

You can pass a list of child elements now to
`$.create(...)`.
---
 frontend_tests/node_tests/buddy_list.js  | 12 ++++++++----
 frontend_tests/node_tests/popovers.js    |  2 +-
 frontend_tests/node_tests/stream_list.js | 21 ++++++++++-----------
 frontend_tests/zjsunit/zjquery.js        | 22 ++++++++++++++--------
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/frontend_tests/node_tests/buddy_list.js b/frontend_tests/node_tests/buddy_list.js
index 61df398a0f..1bf5ae7300 100644
--- a/frontend_tests/node_tests/buddy_list.js
+++ b/frontend_tests/node_tests/buddy_list.js
@@ -44,12 +44,16 @@ const alice = {
 people.add_active_user(alice);
 
 run_test("get_items", () => {
-    const alice_li = $.create("alice stub");
+    // We don't make alice_li an actual jQuery stub,
+    // because our test only cares that it comes
+    // back from get_items.
+    const alice_li = "alice stub";
     const sel = "li.user_sidebar_entry";
-
-    buddy_list.container.set_find_results(sel, {
-        map: (f) => [f(0, alice_li)],
+    const container = $.create("get_items container", {
+        children: [{to_$: () => alice_li}],
     });
+
+    buddy_list.container.set_find_results(sel, container);
     const items = buddy_list.get_items();
 
     assert.deepEqual(items, [alice_li]);
diff --git a/frontend_tests/node_tests/popovers.js b/frontend_tests/node_tests/popovers.js
index 20e977bb5d..6bbf0db438 100644
--- a/frontend_tests/node_tests/popovers.js
+++ b/frontend_tests/node_tests/popovers.js
@@ -192,7 +192,7 @@ run_test("sender_hover", (override) => {
         }
     });
 
-    $(".user_popover_email").each = noop;
+    $.create(".user_popover_email", {children: []});
     const image_stubber = make_image_stubber();
     window.location = {
         href: "http://chat.zulip.org/",
diff --git a/frontend_tests/node_tests/stream_list.js b/frontend_tests/node_tests/stream_list.js
index d30c7eba5a..3ba9dd433a 100644
--- a/frontend_tests/node_tests/stream_list.js
+++ b/frontend_tests/node_tests/stream_list.js
@@ -324,19 +324,18 @@ run_test("zoom_in_and_zoom_out", () => {
     assert(label1.visible());
     assert(label2.visible());
 
-    $(".stream-filters-label").each = (f) => {
-        f.call(elem(label1));
-        f.call(elem(label2));
-    };
+    $.create(".stream-filters-label", {
+        children: [elem(label1), elem(label2)],
+    });
 
     const splitter = $.create("hr stub");
 
     splitter.show();
     assert(splitter.visible());
 
-    $(".stream-split").each = (f) => {
-        f.call(elem(splitter));
-    };
+    $.create(".stream-split", {
+        children: [elem(splitter)],
+    });
 
     const stream_li1 = $.create("stream1 stub");
     const stream_li2 = $.create("stream2 stub");
@@ -352,10 +351,10 @@ run_test("zoom_in_and_zoom_out", () => {
     stream_li1.hide();
     stream_li2.attr = make_attr("99");
 
-    $("#stream_filters li.narrow-filter").each = (f) => {
-        f.call(elem(stream_li1));
-        f.call(elem(stream_li2));
-    };
+    $.create("#stream_filters li.narrow-filter", {
+        children: [elem(stream_li1), elem(stream_li2)],
+    });
+
     $("#stream-filters-container")[0] = {
         dataset: {},
     };
diff --git a/frontend_tests/zjsunit/zjquery.js b/frontend_tests/zjsunit/zjquery.js
index 03261f36cc..3db23c6b18 100644
--- a/frontend_tests/zjsunit/zjquery.js
+++ b/frontend_tests/zjsunit/zjquery.js
@@ -225,11 +225,6 @@ exports.make_new_elem = function (selector, opts) {
             }
             throw new Error("Cannot find " + child_selector + " in " + selector);
         },
-        get(idx) {
-            // We have some legacy code that does $('foo').get(0).
-            assert.equal(idx, 0);
-            return selector;
-        },
         get_on_handler(name, child_selector) {
             return event_store.get_on_handler(name, child_selector);
         },
@@ -385,6 +380,15 @@ exports.make_new_elem = function (selector, opts) {
         },
     };
 
+    if (opts.children) {
+        self.map = (f) => opts.children.map((i, elem) => f(elem, i));
+        self.each = (f) => {
+            for (const child of opts.children) {
+                f.call(child);
+            }
+        };
+    }
+
     if (selector[0] === "<") {
         self.html(selector);
     }
@@ -406,9 +410,10 @@ exports.make_zjquery = function (opts) {
     // Our fn structure helps us simulate extending jQuery.
     const fn = {};
 
-    function new_elem(selector) {
+    function new_elem(selector, create_opts) {
         const elem = exports.make_new_elem(selector, {
             silent: opts.silent,
+            ...create_opts,
         });
         Object.assign(elem, fn);
 
@@ -505,10 +510,11 @@ exports.make_zjquery = function (opts) {
         return elems.get(selector);
     };
 
-    zjquery.create = function (name) {
+    zjquery.create = function (name, opts) {
         assert(!elems.has(name), "You already created an object with this name!!");
-        const elem = new_elem(name);
+        const elem = new_elem(name, opts);
         elems.set(name, elem);
+
         return elem;
     };