diff --git a/frontend_tests/node_tests/recent_topics.js b/frontend_tests/node_tests/recent_topics.js index 57df8f7f1b..6a36ff0574 100644 --- a/frontend_tests/node_tests/recent_topics.js +++ b/frontend_tests/node_tests/recent_topics.js @@ -38,6 +38,8 @@ const topic10 = "topic-10"; mock_cjs("jquery", $); +let expected_data_to_replace_in_list_widget; + const ListWidget = mock_esm("../../static/js/list_widget", { modifier: noop, @@ -63,6 +65,13 @@ const ListWidget = mock_esm("../../static/js/list_widget", { hard_redraw: noop, render_item: (item) => ListWidget.modifier(item), + replace_list_data: (data) => { + if (expected_data_to_replace_in_list_widget === undefined) { + throw new Error("You must set expected_data_to_replace_in_list_widget"); + } + assert.deepEqual(data, expected_data_to_replace_in_list_widget); + expected_data_to_replace_in_list_widget = undefined; + }, }); mock_esm("../../static/js/compose_closed_ui", { @@ -397,6 +406,11 @@ test("test_filter_all", (override) => { rt.set_filter("all"); rt.process_messages([messages[0]]); + expected_data_to_replace_in_list_widget = [ + {last_msg_id: 10, participated: true}, + {last_msg_id: 1, participated: true}, + ]; + row_data = row_data.concat(generate_topic_data([[1, "topic-7", 1, true, true]])); i = row_data.length; // topic is muted (=== hidden) @@ -463,6 +477,42 @@ test("test_filter_unread", (override) => { } return ""; }); + + expected_data_to_replace_in_list_widget = [ + { + last_msg_id: 11, + participated: true, + }, + { + last_msg_id: 10, + participated: true, + }, + { + last_msg_id: 9, + participated: true, + }, + { + last_msg_id: 7, + participated: true, + }, + { + last_msg_id: 5, + participated: false, + }, + { + last_msg_id: 4, + participated: false, + }, + { + last_msg_id: 3, + participated: true, + }, + { + last_msg_id: 1, + participated: true, + }, + ]; + rt.process_messages([messages[0]]); // Unselect "unread" filter by clicking twice. @@ -536,6 +586,41 @@ test("test_filter_participated", (override) => { } return ""; }); + expected_data_to_replace_in_list_widget = [ + { + last_msg_id: 11, + participated: true, + }, + { + last_msg_id: 10, + participated: true, + }, + { + last_msg_id: 9, + participated: true, + }, + { + last_msg_id: 7, + participated: true, + }, + { + last_msg_id: 5, + participated: false, + }, + { + last_msg_id: 4, + participated: false, + }, + { + last_msg_id: 3, + participated: true, + }, + { + last_msg_id: 1, + participated: true, + }, + ]; + rt.process_messages([messages[4]]); expected.filter_participated = false; @@ -571,6 +656,41 @@ test("basic assertions", (override) => { // update a message generate_topic_data([[1, "topic-7", 1, false, true]]); stub_out_filter_buttons(); + expected_data_to_replace_in_list_widget = [ + { + last_msg_id: 11, + participated: true, + }, + { + last_msg_id: 10, + participated: true, + }, + { + last_msg_id: 9, + participated: true, + }, + { + last_msg_id: 7, + participated: true, + }, + { + last_msg_id: 5, + participated: false, + }, + { + last_msg_id: 4, + participated: false, + }, + { + last_msg_id: 3, + participated: true, + }, + { + last_msg_id: 1, + participated: true, + }, + ]; + rt.process_messages([messages[9]]); // Check for expected lengths. // total 8 topics, 1 muted diff --git a/static/js/recent_topics.js b/static/js/recent_topics.js index affe4c43d8..550142bef9 100644 --- a/static/js/recent_topics.js +++ b/static/js/recent_topics.js @@ -584,8 +584,19 @@ export function complete_rerender() { if (!is_visible()) { return; } - // Prepare header + + // Update header load_filters(); + show_selected_filters(); + + // Show topics list + const mapped_topic_values = Array.from(get().values()).map((value) => value); + + if (topics_widget) { + topics_widget.replace_list_data(mapped_topic_values); + return; + } + const rendered_body = render_recent_topics_body({ filter_participated: filters.has("participated"), filter_unread: filters.has("unread"), @@ -593,13 +604,8 @@ export function complete_rerender() { search_val: $("#recent_topics_search").val() || "", }); $("#recent_topics_table").html(rendered_body); - show_selected_filters(); - - // Show topics list const container = $("#recent_topics_table table tbody"); container.empty(); - const mapped_topic_values = Array.from(get().values()).map((value) => value); - topics_widget = ListWidget.create(container, mapped_topic_values, { name: "recent_topics_table", parent_container: $("#recent_topics_table"),