typing_events.js: Add test for render_notifications_for_narrow().

frontend_tests/node_tests/typing_events.js

@@ -0,0 +1,82 @@
+"use strict";
+
+const {strict: assert} = require("assert");
+
+const {zrequire} = require("../zjsunit/namespace");
+const {run_test} = require("../zjsunit/test");
+const $ = require("../zjsunit/zjquery");
+
+const typing_events = zrequire("typing_events");
+const people = zrequire("people");
+
+const anna = {
+    email: "anna@example.com",
+    full_name: "Anna Karenina",
+    user_id: 8,
+};
+
+const vronsky = {
+    email: "vronsky@example.com",
+    full_name: "Alexei Vronsky",
+    user_id: 9,
+};
+
+const levin = {
+    email: "levin@example.com",
+    full_name: "Konstantin Levin",
+    user_id: 10,
+};
+
+const kitty = {
+    email: "kitty@example.com",
+    full_name: "Kitty S",
+    user_id: 11,
+};
+
+people.add_active_user(anna);
+people.add_active_user(vronsky);
+people.add_active_user(levin);
+people.add_active_user(kitty);
+
+run_test("render_notifications_for_narrow", ({override, mock_template}) => {
+    const typing_notifications = $("#typing_notifications");
+
+    const two_typing_users_ids = [anna.user_id, vronsky.user_id];
+    const three_typing_users_ids = [anna.user_id, vronsky.user_id, levin.user_id];
+    const four_typing_users_ids = [anna.user_id, vronsky.user_id, levin.user_id, kitty.user_id];
+
+    mock_template("typing_notifications.hbs", true, (args, rendered_html) => rendered_html);
+
+    // Having only two(<MAX_USERS_TO_DISPLAY_NAME) typists, both of them
+    // should be rendered but not 'Several people are typing…'
+    override(typing_events, "get_users_typing_for_narrow", () => two_typing_users_ids);
+    typing_events.render_notifications_for_narrow();
+    assert.ok(typing_notifications.visible());
+    assert.ok(typing_notifications.html().includes(`${anna.full_name} is typing…`));
+    assert.ok(typing_notifications.html().includes(`${vronsky.full_name} is typing…`));
+    assert.ok(!typing_notifications.html().includes("Several people are typing…"));
+
+    // Having 3(=MAX_USERS_TO_DISPLAY_NAME) typists should also display only names
+    override(typing_events, "get_users_typing_for_narrow", () => three_typing_users_ids);
+    typing_events.render_notifications_for_narrow();
+    assert.ok(typing_notifications.visible());
+    assert.ok(typing_notifications.html().includes(`${anna.full_name} is typing…`));
+    assert.ok(typing_notifications.html().includes(`${vronsky.full_name} is typing…`));
+    assert.ok(typing_notifications.html().includes(`${levin.full_name} is typing…`));
+    assert.ok(!typing_notifications.html().includes("Several people are typing…"));
+
+    // Having 4(>MAX_USERS_TO_DISPLAY_NAME) typists should display "Several people are typing…"
+    override(typing_events, "get_users_typing_for_narrow", () => four_typing_users_ids);
+    typing_events.render_notifications_for_narrow();
+    assert.ok(typing_notifications.visible());
+    assert.ok(typing_notifications.html().includes("Several people are typing…"));
+    assert.ok(!typing_notifications.html().includes(`${anna.full_name} is typing…`));
+    assert.ok(!typing_notifications.html().includes(`${vronsky.full_name} is typing…`));
+    assert.ok(!typing_notifications.html().includes(`${levin.full_name} is typing…`));
+    assert.ok(!typing_notifications.html().includes(`${kitty.full_name} is typing…`));
+
+    // #typing_notifications should be hidden when there are no typists.
+    override(typing_events, "get_users_typing_for_narrow", () => []);
+    typing_events.render_notifications_for_narrow();
+    assert.ok(!typing_notifications.visible());
+});