settings: Add sorting feature for list of alert words.

This changes the method of rendering list of alert words in DOM,
earlier it was rendered using 'for' loop over the array of alert_words
which is now changed to render using ListWidget, which gets a array
of objects from get_word_list() in alert_words.js.

The use of ListWidget helps to define a parent_container and $container
in table-body of alert-words-table using which we can now apply sorting over
alert words with the help of handle_sort() function in list_widget.js

Changed the method of adding alert_word_settings_item row in table body
through {{#with}} loop because of rendering through ListWidget, which was done
earlier using for loop over each alert-word in while rendering the list.

this commit also mocks template of render_alert_word_item
while mocking ListWidget.create() function in render_alert_words_ui().
and checks that ListWidget.create() is not called when variable `loaded`
is set as false.

Fixes #21142.

frontend_tests/node_tests/alert_words_ui.js

@@ -15,28 +15,34 @@ const alert_words_ui = zrequire("alert_words_ui");
 alert_words.initialize({
     alert_words: ["foo", "bar"],
 });
+const noop = () => {};
 
 run_test("render_alert_words_ui", ({mock_template}) => {
-    const word_list = $("#alert_words_list");
-    const appended = [];
-    word_list.append = (rendered) => {
-        appended.push(rendered);
-    };
-
-    const alert_word_items = $.create("alert_word_items");
-    word_list.set_find_results(".alert-word-item", alert_word_items);
-
-    alert_word_items.remove = () => {};
-
-    mock_template("settings/alert_word_settings_item.hbs", false, (args) => "stub-" + args.word);
-
-    const new_alert_word = $("#create_alert_word_name");
-    assert.ok(!new_alert_word.is_focused());
-
+    let list_widget_create_called = false;
+    alert_words_ui.reset();
+    assert.ok(!$("#create_alert_word_name").is_focused());
+    const ListWidget = mock_esm("../../static/js/list_widget", {
+        modifier: noop,
+        create: (container, words, opts) => {
+            const alert_words = [];
+            ListWidget.modifier = opts.modifier;
+            for (const word of words) {
+                alert_words.push(opts.modifier(word));
+            }
+            list_widget_create_called = true;
+            return alert_words;
+        },
+    });
+    mock_template("settings/alert_word_settings_item.hbs", false, (args) => {
+        assert.ok(["foo", "bar"].includes(args.alert_word.word));
+    });
+    assert.equal(alert_words_ui.loaded, false);
     alert_words_ui.render_alert_words_ui();
-
-    assert.deepEqual(appended, ["stub-bar", "stub-foo"]);
-    assert.ok(new_alert_word.is_focused());
+    assert.equal(list_widget_create_called, false);
+    alert_words_ui.set_up_alert_words();
+    assert.equal(alert_words_ui.loaded, true);
+    assert.equal(list_widget_create_called, true);
+    assert.ok($("#create_alert_word_name").is_focused());
 });
 
 run_test("add_alert_word", ({override_rewire}) => {
@@ -124,7 +130,7 @@ run_test("remove_alert_word", ({override_rewire}) => {
     override_rewire(alert_words_ui, "render_alert_words_ui", () => {});
     alert_words_ui.set_up_alert_words();
 
-    const word_list = $("#alert_words_list");
+    const word_list = $("#alert-words-table");
     const remove_func = word_list.get_on_handler("click", ".remove-alert-word");
 
     const remove_alert_word = $(".remove-alert-word");

frontend_tests/node_tests/dispatch.js

@@ -130,7 +130,7 @@ run_test("alert_words", ({override}) => {
     const event = event_fixtures.alert_words;
     dispatch(event);
 
-    assert.deepEqual(alert_words.get_word_list(), ["fire", "lunch"]);
+    assert.deepEqual(alert_words.get_word_list(), [{word: "fire"}, {word: "lunch"}]);
     assert.ok(alert_words.has_alert_word("fire"));
     assert.ok(alert_words.has_alert_word("lunch"));
 });