2020-08-01 03:43:15 +02:00
|
|
|
"use strict";
|
|
|
|
|
2020-11-30 23:46:45 +01:00
|
|
|
const {strict: assert} = require("assert");
|
2020-12-01 00:02:16 +01:00
|
|
|
|
2021-06-16 15:58:34 +02:00
|
|
|
const {mock_esm, zrequire} = require("../zjsunit/namespace");
|
2020-12-01 00:39:47 +01:00
|
|
|
const {run_test} = require("../zjsunit/test");
|
2021-02-21 15:38:51 +01:00
|
|
|
const $ = require("../zjsunit/zjquery");
|
|
|
|
|
2020-12-01 23:21:38 +01:00
|
|
|
// This tests the stream searching functionality which currently
|
2018-04-25 15:18:37 +02:00
|
|
|
// lives in stream_list.js.
|
|
|
|
|
|
|
|
const noop = () => {};
|
|
|
|
|
2021-03-10 06:10:32 +01:00
|
|
|
mock_esm("../../static/js/resize", {
|
2018-04-25 15:18:37 +02:00
|
|
|
resize_page_components: noop,
|
2021-03-06 17:37:51 +01:00
|
|
|
|
bug fix: Move stream search out of scroll container.
We want the search widget, when visible, to be
outside the scroll container for the stream list.
One obvious use case is if you start scrolling, and
then realize it might be less effort to search.
Also, for user search, it already worked this way.
We have to add a couple resizing hooks here, but
it's not necessary to change the actual resize
calculation, since we move the section inside
of #streams_header, which is already accounted
for.
The only markup change here is to add
a `stream_search_section` class. I don't
know why we use `notdisplayed` here instead of
jQuery, or what `input-append` is for, but I
considered them outside the scope of this change.
We can also remove some crufty CSS that was
compensating for it being inside the container.
2019-02-09 19:09:56 +01:00
|
|
|
resize_stream_filters_container: noop,
|
2018-04-25 15:18:37 +02:00
|
|
|
});
|
|
|
|
|
2021-03-10 06:10:32 +01:00
|
|
|
const popovers = mock_esm("../../static/js/popovers");
|
|
|
|
const stream_popover = mock_esm("../../static/js/stream_popover");
|
2021-02-28 01:02:37 +01:00
|
|
|
|
2020-12-01 23:21:38 +01:00
|
|
|
const stream_list = zrequire("stream_list");
|
|
|
|
|
2018-04-25 15:18:37 +02:00
|
|
|
function expand_sidebar() {
|
2020-07-15 01:29:15 +02:00
|
|
|
$(".app-main .column-left").addClass("expanded");
|
2018-04-25 15:18:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function make_cursor_helper() {
|
|
|
|
const events = [];
|
|
|
|
|
2021-02-28 21:31:02 +01:00
|
|
|
stream_list.__Rewire__("stream_cursor", {
|
2018-04-25 15:18:37 +02:00
|
|
|
reset: () => {
|
2020-07-15 01:29:15 +02:00
|
|
|
events.push("reset");
|
2018-04-25 15:18:37 +02:00
|
|
|
},
|
|
|
|
clear: () => {
|
2020-07-15 01:29:15 +02:00
|
|
|
events.push("clear");
|
2018-04-25 15:18:37 +02:00
|
|
|
},
|
2021-02-28 21:31:02 +01:00
|
|
|
});
|
2018-04-25 15:18:37 +02:00
|
|
|
|
|
|
|
return {
|
2020-07-20 22:18:43 +02:00
|
|
|
events,
|
2018-04-25 15:18:37 +02:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
function simulate_search_expanded() {
|
|
|
|
// The way we check if the search widget is expanded
|
|
|
|
// is kind of awkward.
|
|
|
|
|
2020-07-15 01:29:15 +02:00
|
|
|
$(".stream_search_section.notdisplayed").length = 0;
|
2018-04-25 15:18:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function simulate_search_collapsed() {
|
2020-07-15 01:29:15 +02:00
|
|
|
$(".stream_search_section.notdisplayed").length = 1;
|
2018-04-25 15:18:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function toggle_filter() {
|
|
|
|
stream_list.toggle_filter_displayed({preventDefault: noop});
|
|
|
|
}
|
|
|
|
|
2019-02-23 15:10:12 +01:00
|
|
|
function clear_search_input() {
|
|
|
|
stream_list.clear_search({stopPropagation: noop});
|
|
|
|
}
|
|
|
|
|
2021-06-16 14:38:37 +02:00
|
|
|
run_test("basics", ({override}) => {
|
2019-11-02 00:06:25 +01:00
|
|
|
let cursor_helper;
|
2020-07-15 01:29:15 +02:00
|
|
|
const input = $(".stream-list-filter");
|
|
|
|
const section = $(".stream_search_section");
|
2018-04-25 15:18:37 +02:00
|
|
|
|
|
|
|
expand_sidebar();
|
2020-07-15 01:29:15 +02:00
|
|
|
section.addClass("notdisplayed");
|
2018-04-25 15:18:37 +02:00
|
|
|
|
|
|
|
cursor_helper = make_cursor_helper();
|
|
|
|
|
|
|
|
function verify_expanded() {
|
2021-06-10 08:32:54 +02:00
|
|
|
assert.ok(!section.hasClass("notdisplayed"));
|
2018-04-25 15:18:37 +02:00
|
|
|
simulate_search_expanded();
|
|
|
|
}
|
|
|
|
|
|
|
|
function verify_focused() {
|
2021-06-10 08:32:54 +02:00
|
|
|
assert.ok(stream_list.searching());
|
|
|
|
assert.ok(input.is_focused());
|
2018-04-25 15:18:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function verify_blurred() {
|
2021-06-10 08:32:54 +02:00
|
|
|
assert.ok(stream_list.searching());
|
|
|
|
assert.ok(input.is_focused());
|
2018-04-25 15:18:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function verify_collapsed() {
|
2021-06-10 08:32:54 +02:00
|
|
|
assert.ok(section.hasClass("notdisplayed"));
|
|
|
|
assert.ok(!input.is_focused());
|
|
|
|
assert.ok(!stream_list.searching());
|
2018-04-25 15:18:37 +02:00
|
|
|
simulate_search_collapsed();
|
|
|
|
}
|
|
|
|
|
|
|
|
function verify_list_updated(f) {
|
2019-11-02 00:06:25 +01:00
|
|
|
let updated;
|
2021-03-07 17:01:11 +01:00
|
|
|
override(stream_list, "update_streams_sidebar", () => {
|
2018-04-25 15:18:37 +02:00
|
|
|
updated = true;
|
2021-02-28 21:31:02 +01:00
|
|
|
});
|
2018-04-25 15:18:37 +02:00
|
|
|
|
|
|
|
f();
|
2021-06-10 08:32:54 +02:00
|
|
|
assert.ok(updated);
|
2018-04-25 15:18:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Initiate search (so expand widget).
|
|
|
|
stream_list.initiate_search();
|
|
|
|
verify_expanded();
|
|
|
|
verify_focused();
|
|
|
|
|
2020-07-15 01:29:15 +02:00
|
|
|
assert.deepEqual(cursor_helper.events, ["reset"]);
|
2018-04-25 15:18:37 +02:00
|
|
|
|
|
|
|
// Collapse the widget.
|
|
|
|
cursor_helper = make_cursor_helper();
|
|
|
|
|
|
|
|
toggle_filter();
|
|
|
|
verify_collapsed();
|
|
|
|
|
2020-07-15 01:29:15 +02:00
|
|
|
assert.deepEqual(cursor_helper.events, ["clear"]);
|
2018-04-25 15:18:37 +02:00
|
|
|
|
|
|
|
// Expand the widget.
|
|
|
|
toggle_filter();
|
|
|
|
verify_expanded();
|
|
|
|
verify_focused();
|
|
|
|
|
|
|
|
(function add_some_text_and_collapse() {
|
|
|
|
cursor_helper = make_cursor_helper();
|
2020-07-15 01:29:15 +02:00
|
|
|
input.val("foo");
|
2018-04-25 15:18:37 +02:00
|
|
|
verify_list_updated(() => {
|
|
|
|
toggle_filter();
|
|
|
|
});
|
|
|
|
|
|
|
|
verify_collapsed();
|
2020-07-15 01:29:15 +02:00
|
|
|
assert.deepEqual(cursor_helper.events, ["reset", "clear"]);
|
2020-07-16 22:35:58 +02:00
|
|
|
})();
|
2018-04-25 15:18:37 +02:00
|
|
|
|
|
|
|
// Expand the widget.
|
|
|
|
toggle_filter();
|
|
|
|
verify_expanded();
|
|
|
|
verify_focused();
|
|
|
|
|
|
|
|
// Clear an empty search.
|
2019-02-23 15:10:12 +01:00
|
|
|
clear_search_input();
|
2018-04-25 15:18:37 +02:00
|
|
|
verify_collapsed();
|
|
|
|
|
|
|
|
// Expand the widget.
|
|
|
|
toggle_filter();
|
|
|
|
stream_list.initiate_search();
|
|
|
|
|
|
|
|
// Clear a non-empty search.
|
2020-07-15 01:29:15 +02:00
|
|
|
input.val("foo");
|
2018-04-25 15:18:37 +02:00
|
|
|
verify_list_updated(() => {
|
2019-02-23 15:10:12 +01:00
|
|
|
clear_search_input();
|
2018-04-25 15:18:37 +02:00
|
|
|
});
|
|
|
|
verify_expanded();
|
|
|
|
|
|
|
|
// Expand the widget.
|
|
|
|
toggle_filter();
|
|
|
|
stream_list.initiate_search();
|
|
|
|
|
|
|
|
// Escape a non-empty search.
|
2020-07-15 01:29:15 +02:00
|
|
|
input.val("foo");
|
2018-04-25 15:18:37 +02:00
|
|
|
stream_list.escape_search();
|
|
|
|
verify_blurred();
|
|
|
|
|
|
|
|
// Expand the widget.
|
|
|
|
toggle_filter();
|
|
|
|
stream_list.initiate_search();
|
|
|
|
|
|
|
|
// Escape an empty search.
|
2020-07-15 01:29:15 +02:00
|
|
|
input.val("");
|
2018-04-25 15:18:37 +02:00
|
|
|
stream_list.escape_search();
|
|
|
|
verify_collapsed();
|
2018-05-15 12:40:07 +02:00
|
|
|
});
|
2018-04-25 15:18:37 +02:00
|
|
|
|
2020-07-15 01:29:15 +02:00
|
|
|
run_test("expanding_sidebar", () => {
|
|
|
|
$(".app-main .column-left").removeClass("expanded");
|
2018-04-25 15:18:37 +02:00
|
|
|
|
|
|
|
const events = [];
|
|
|
|
popovers.hide_all = () => {
|
2020-07-15 01:29:15 +02:00
|
|
|
events.push("popovers.hide_all");
|
2018-04-25 15:18:37 +02:00
|
|
|
};
|
2020-07-16 23:29:01 +02:00
|
|
|
stream_popover.show_streamlist_sidebar = () => {
|
2020-07-15 01:29:15 +02:00
|
|
|
events.push("stream_popover.show_streamlist_sidebar");
|
2018-04-25 15:18:37 +02:00
|
|
|
};
|
2020-09-23 13:11:57 +02:00
|
|
|
$("#streamlist-toggle").show();
|
2018-04-25 15:18:37 +02:00
|
|
|
|
|
|
|
stream_list.initiate_search();
|
|
|
|
|
2020-07-15 00:34:28 +02:00
|
|
|
assert.deepEqual(events, ["popovers.hide_all", "stream_popover.show_streamlist_sidebar"]);
|
2018-05-15 12:40:07 +02:00
|
|
|
});
|