Files
zulip/frontend_tests/node_tests/subs.js
Steve Howell 82e453d9fe ui: Fix scrollbar regressions.
In between releases, the following commit introduced
a bug where we agressively scroll to the top every
place we call `ui.update_scrollbar`:

    092b73d0b7

The main symptoms were that the left and right sidebars
would go to the top for things like selecting a topic,
getting activity updates from the server, and resizing
the window.  It was very jarring.

The recent commit looked innocuous--the root of the problem
was the original API expressed an intent to scroll to the
top, but didn't actually do it, so it was a bug in hiding.

There are **some** occasions where it's actually appropriate
to scroll to the top, mostly around search filtering, and
in those places we now call the new `ui.reset_scrollbar`
function.

This is a bit of an emergency fix, so particularly with
the settings stuff, we may get more reports of glitches here.

The important thing here is that you almost never want to
reset the scrollTop for sidebars.
2019-01-09 09:15:45 -08:00

219 lines
7.3 KiB
JavaScript

global.stub_out_jquery();
set_global('templates', {});
set_global('ui', {});
zrequire('util');
zrequire('stream_data');
zrequire('search_util');
global.patch_builtin('window', {
location: {
hash: "#streams/1/announce",
},
});
zrequire('subs');
set_global('$', global.make_zjquery());
stream_data.update_calculated_fields = () => {};
run_test('filter_table', () => {
var stream_list = $(".streams-list");
var scrolltop_called = false;
stream_list.scrollTop = function (set) {
scrolltop_called = true;
if (!set) {
return 10;
}
assert.equal(set, 10);
};
// set-up sub rows stubs
var sub_row_data = {};
sub_row_data[1] = {
elem: 'denmark',
subscribed: false,
name: 'Denmark',
stream_id: 1,
description: 'Copenhagen',
};
sub_row_data[2] = {
elem: 'poland',
subscribed: true,
name: 'Poland',
stream_id: 2,
description: 'monday',
};
sub_row_data[3] = {
elem: 'pomona',
subscribed: true,
name: 'Pomona',
stream_id: 3,
description: 'college',
};
sub_row_data[4] = {
elem: 'cpp',
subscribed: true,
name: 'C++',
stream_id: 4,
description: 'programming lang',
};
_.each(sub_row_data, function (sub) {
stream_data.add_sub(sub.name, sub);
});
var populated_subs;
templates.render = (fn, data) => {
assert.equal(fn, 'subscriptions');
populated_subs = data.subscriptions;
};
subs.populate_stream_settings_left_panel();
var sub_stubs = [];
_.each(populated_subs, function (data) {
var sub_row = ".stream-row-" + data.elem;
sub_stubs.push(sub_row);
$(sub_row).attr("data-stream-id", data.stream_id);
$(sub_row).set_find_results('.sub-info-box [class$="-bar"] [class$="-count"]', $(".tooltip"));
$(sub_row).detach = function () {
return sub_row;
};
});
var tooltip_called = false;
$(".tooltip").tooltip = function (obj) {
tooltip_called = true;
assert.deepEqual(obj, {
placement: 'left',
animation: false,
});
};
$.stub_selector("#subscriptions_table .stream-row", sub_stubs);
var sub_table = $('#subscriptions_table .streams-list');
var sub_table_append = [];
sub_table.append = function (rows) {
sub_table_append.push(rows);
};
var ui_called = false;
ui.reset_scrollbar = function (elem) {
ui_called = true;
assert.equal(elem, $("#subscription_overlay .streams-list"));
};
// Search with single keyword
subs.filter_table({input: "Po", subscribed_only: false});
assert($(".stream-row-denmark").hasClass("notdisplayed"));
assert(!$(".stream-row-poland").hasClass("notdisplayed"));
assert(!$(".stream-row-pomona").hasClass("notdisplayed"));
assert($(".stream-row-cpp").hasClass("notdisplayed"));
// assert these once and call it done
assert(ui_called);
assert(scrolltop_called);
assert(tooltip_called);
assert.deepEqual(sub_table_append, [
'.stream-row-poland',
'.stream-row-pomona',
'.stream-row-denmark',
'.stream-row-cpp',
]);
// Search with multiple keywords
subs.filter_table({input: "Denmark, Pol", subscribed_only: false});
assert(!$(".stream-row-denmark").hasClass("notdisplayed"));
assert(!$(".stream-row-poland").hasClass("notdisplayed"));
assert($(".stream-row-pomona").hasClass("notdisplayed"));
assert($(".stream-row-cpp").hasClass("notdisplayed"));
subs.filter_table({input: "Den, Pol", subscribed_only: false});
assert(!$(".stream-row-denmark").hasClass("notdisplayed"));
assert(!$(".stream-row-poland").hasClass("notdisplayed"));
assert($(".stream-row-pomona").hasClass("notdisplayed"));
assert($(".stream-row-cpp").hasClass("notdisplayed"));
// Search is case-insensitive
subs.filter_table({input: "po", subscribed_only: false});
assert($(".stream-row-denmark").hasClass("notdisplayed"));
assert(!$(".stream-row-poland").hasClass("notdisplayed"));
assert(!$(".stream-row-pomona").hasClass("notdisplayed"));
assert($(".stream-row-cpp").hasClass("notdisplayed"));
// Search handles unusual characters like C++
subs.filter_table({input: "c++", subscribed_only: false});
assert($(".stream-row-denmark").hasClass("notdisplayed"));
assert($(".stream-row-poland").hasClass("notdisplayed"));
assert($(".stream-row-pomona").hasClass("notdisplayed"));
assert(!$(".stream-row-cpp").hasClass("notdisplayed"));
// Search subscribed streams only
subs.filter_table({input: "d", subscribed_only: true});
assert($(".stream-row-denmark").hasClass("notdisplayed"));
assert(!$(".stream-row-poland").hasClass("notdisplayed"));
assert($(".stream-row-pomona").hasClass("notdisplayed"));
assert($(".stream-row-cpp").hasClass("notdisplayed"));
// Search terms match stream description
subs.filter_table({input: "Co", subscribed_only: false});
assert(!$(".stream-row-denmark").hasClass("notdisplayed"));
assert($(".stream-row-poland").hasClass("notdisplayed"));
assert(!$(".stream-row-pomona").hasClass("notdisplayed"));
assert($(".stream-row-cpp").hasClass("notdisplayed"));
// Search names AND descriptions
sub_table_append = [];
subs.filter_table({input: "Mon", subscribed_only: false});
assert($(".stream-row-denmark").hasClass("notdisplayed"));
assert(!$(".stream-row-poland").hasClass("notdisplayed"));
assert(!$(".stream-row-pomona").hasClass("notdisplayed"));
assert($(".stream-row-cpp").hasClass("notdisplayed"));
assert.deepEqual(sub_table_append, [
'.stream-row-pomona',
'.stream-row-poland',
'.stream-row-denmark',
'.stream-row-cpp',
]);
// active stream-row is not included in results
$(".stream-row-denmark").addClass("active");
$(".stream-row.active").hasClass = function (cls) {
assert.equal(cls, "notdisplayed");
return $(".stream-row-denmark").hasClass("active");
};
$(".stream-row.active").removeClass = function (cls) {
assert.equal(cls, "active");
$(".stream-row-denmark").removeClass("active");
};
subs.filter_table({input: "d", subscribed_only: true});
assert(!$(".stream-row-denmark").hasClass("active"));
assert(!$(".right .settings").visible());
assert($(".nothing-selected").visible());
subs.filter_table({input: "d", subscribed_only: true});
assert($(".stream-row-denmark").hasClass("notdisplayed"));
assert(!$(".stream-row-poland").hasClass("notdisplayed"));
assert($(".stream-row-pomona").hasClass("notdisplayed"));
assert($(".stream-row-cpp").hasClass("notdisplayed"));
subs.filter_table({input: "d", subscribed_only: true});
assert($(".stream-row-denmark").hasClass("notdisplayed"));
assert(!$(".stream-row-poland").hasClass("notdisplayed"));
assert($(".stream-row-pomona").hasClass("notdisplayed"));
assert($(".stream-row-cpp").hasClass("notdisplayed"));
// test selected row set to active
$(".stream-row[data-stream-id='1']").removeClass("active");
subs.filter_table({input: "", subscribed_only: false});
assert($(".stream-row[data-stream-id='1']").hasClass("active"));
});