compose: Change the check_overflow_text function

Fixes: zulip#28706

In this commit, the check_overflow_text function has been modified. The logic now handles scenarios where remaining characters are less than 0 by displaying an exceeded message; otherwise, it shows the remaining characters. This simplification ensures clarity in various scenarios.

Additionally, the tooltip for the character counter now displays Maximum message length: 10000 characters.

web/tests/compose.test.js

@@ -1,35 +1,35 @@
 "use strict";
 
-const {strict: assert} = require("assert");
+const { strict: assert } = require("assert");
 
 const MockDate = require("mockdate");
 
-const {mock_stream_header_colorblock} = require("./lib/compose");
-const {mock_banners} = require("./lib/compose_banner");
-const {$t} = require("./lib/i18n");
-const {mock_esm, set_global, zrequire} = require("./lib/namespace");
-const {run_test, noop} = require("./lib/test");
+const { mock_stream_header_colorblock } = require("./lib/compose");
+const { mock_banners } = require("./lib/compose_banner");
+const { $t } = require("./lib/i18n");
+const { mock_esm, set_global, zrequire } = require("./lib/namespace");
+const { run_test, noop } = require("./lib/test");
 const $ = require("./lib/zjquery");
-const {page_params, user_settings} = require("./lib/zpage_params");
+const { page_params, user_settings } = require("./lib/zpage_params");
 
 const settings_config = zrequire("settings_config");
 
 set_global("document", {
-    querySelector() {},
+    querySelector() { },
 });
 set_global("navigator", {});
 set_global(
     "ResizeObserver",
     class ResizeObserver {
-        observe() {}
+        observe() { }
     },
 );
 
 const fake_now = 555;
 
 const autosize = noop;
 autosize.update = noop;
-mock_esm("autosize", {default: autosize});
+mock_esm("autosize", { default: autosize });
 
 const channel = mock_esm("../src/channel");
 const compose_actions = mock_esm("../src/compose_actions", {
@@ -121,15 +121,15 @@ function test_ui(label, f) {
     run_test(label, f);
 }
 
-function initialize_handlers({override}) {
-    override(page_params, "realm_available_video_chat_providers", {disabled: {id: 0}});
+function initialize_handlers({ override }) {
+    override(page_params, "realm_available_video_chat_providers", { disabled: { id: 0 } });
     override(page_params, "realm_video_chat_provider", 0);
     override(upload, "feature_check", noop);
     override(resize, "watch_manual_resize", noop);
     compose_setup.initialize();
 }
 
-test_ui("send_message_success", ({override, override_rewire}) => {
+test_ui("send_message_success", ({ override, override_rewire }) => {
     mock_banners();
 
     function reset() {
@@ -172,7 +172,7 @@ test_ui("send_message_success", ({override, override_rewire}) => {
         stream_id: 1,
         topic: "test",
     };
-    let data = {id: 12, automatic_new_visibility_policy: 2};
+    let data = { id: 12, automatic_new_visibility_policy: 2 };
     compose.send_message_success(request, data);
 
     assert.equal($("textarea#compose-textarea").val(), "");
@@ -196,7 +196,7 @@ test_ui("send_message_success", ({override, override_rewire}) => {
         stream_id: 2,
         topic: "test",
     };
-    data = {id: 12};
+    data = { id: 12 };
     compose.send_message_success(request, data);
 
     assert.equal($("textarea#compose-textarea").val(), "");
@@ -205,7 +205,7 @@ test_ui("send_message_success", ({override, override_rewire}) => {
     assert.ok(reify_message_id_checked);
 });
 
-test_ui("send_message", ({override, override_rewire, mock_template}) => {
+test_ui("send_message", ({ override, override_rewire, mock_template }) => {
     mock_banners();
     MockDate.set(new Date(fake_now * 1000));
 
@@ -356,7 +356,7 @@ test_ui("send_message", ({override, override_rewire, mock_template}) => {
     })();
 });
 
-test_ui("enter_with_preview_open", ({override, override_rewire}) => {
+test_ui("enter_with_preview_open", ({ override, override_rewire }) => {
     mock_banners();
     $("textarea#compose-textarea").toggleClass = noop;
     mock_stream_header_colorblock();
@@ -407,7 +407,7 @@ test_ui("enter_with_preview_open", ({override, override_rewire}) => {
     compose.enter_with_preview_open();
 });
 
-test_ui("finish", ({override, override_rewire}) => {
+test_ui("finish", ({ override, override_rewire }) => {
     mock_banners();
     mock_stream_header_colorblock();
 
@@ -469,7 +469,7 @@ test_ui("finish", ({override, override_rewire}) => {
     })();
 });
 
-test_ui("initialize", ({override}) => {
+test_ui("initialize", ({ override }) => {
     let compose_actions_expected_opts;
     let compose_actions_start_checked;
 
@@ -483,7 +483,7 @@ test_ui("initialize", ({override}) => {
     // normal workflow of the function. All the tests for the on functions are
     // done in subsequent tests directly below this test.
 
-    override(page_params, "realm_available_video_chat_providers", {disabled: {id: 0}});
+    override(page_params, "realm_available_video_chat_providers", { disabled: { id: 0 } });
     override(page_params, "realm_video_chat_provider", 0);
 
     let resize_watch_manual_resize_checked = false;
@@ -526,7 +526,7 @@ test_ui("initialize", ({override}) => {
         page_params.narrow_topic = "testing";
 
         reset_jquery();
-        set_up_compose_start_mock({topic: "testing"});
+        set_up_compose_start_mock({ topic: "testing" });
 
         compose_setup.initialize();
 
@@ -544,9 +544,9 @@ test_ui("initialize", ({override}) => {
     })();
 });
 
-test_ui("update_fade", ({override, override_rewire}) => {
+test_ui("update_fade", ({ override, override_rewire }) => {
     mock_banners();
-    initialize_handlers({override});
+    initialize_handlers({ override });
 
     let set_focused_recipient_checked = false;
     let update_all_called = false;
@@ -580,8 +580,8 @@ test_ui("update_fade", ({override, override_rewire}) => {
     assert.ok(update_narrow_to_recipient_visibility_called);
 });
 
-test_ui("trigger_submit_compose_form", ({override, override_rewire}) => {
-    initialize_handlers({override});
+test_ui("trigger_submit_compose_form", ({ override, override_rewire }) => {
+    initialize_handlers({ override });
 
     let prevent_default_checked = false;
     let compose_finish_checked = false;
@@ -602,10 +602,10 @@ test_ui("trigger_submit_compose_form", ({override, override_rewire}) => {
     assert.ok(compose_finish_checked);
 });
 
-test_ui("on_events", ({override, override_rewire}) => {
+test_ui("on_events", ({ override, override_rewire }) => {
     mock_stream_header_colorblock();
 
-    initialize_handlers({override});
+    initialize_handlers({ override });
 
     override(rendered_markdown, "update_elements", noop);
 
@@ -777,7 +777,7 @@ test_ui("on_events", ({override, override_rewire}) => {
     })();
 });
 
-test_ui("create_message_object", ({override, override_rewire}) => {
+test_ui("create_message_object", ({ override, override_rewire }) => {
     mock_stream_header_colorblock();
     mock_banners();
 
@@ -805,7 +805,7 @@ test_ui("create_message_object", ({override, override_rewire}) => {
     assert.deepEqual(message.to, [alice.email, bob.email]);
 });
 
-test_ui("DM policy disabled", ({override, override_rewire}) => {
+test_ui("DM policy disabled", ({ override, override_rewire }) => {
     // Disable dms in the organisation
     override(
         page_params,
@@ -826,79 +826,49 @@ test_ui("DM policy disabled", ({override, override_rewire}) => {
     assert.ok(reply_disabled);
 });
 
-test_ui("narrow_button_titles", ({override}) => {
+test_ui("narrow_button_titles", ({ override }) => {
     override(narrow_state, "pm_ids_string", () => "31");
     override(narrow_state, "is_message_feed_visible", () => true);
     compose_closed_ui.update_buttons_for_private();
     assert.equal(
         $("#new_conversation_button").text(),
-        $t({defaultMessage: "Start new conversation"}),
+        $t({ defaultMessage: "Start new conversation" }),
     );
     assert.equal(
         $("#new_direct_message_button").text(),
-        $t({defaultMessage: "New direct message"}),
+        $t({ defaultMessage: "New direct message" }),
     );
 
     compose_closed_ui.update_buttons_for_stream_views();
     assert.equal(
         $("#new_conversation_button").text(),
-        $t({defaultMessage: "Start new conversation"}),
+        $t({ defaultMessage: "Start new conversation" }),
     );
     assert.equal(
         $("#new_direct_message_button").text(),
-        $t({defaultMessage: "New direct message"}),
+        $t({ defaultMessage: "New direct message" }),
     );
 });
 
 run_test("reset MockDate", () => {
     MockDate.reset();
 });
 
-test_ui("test_check_overflow_text", ({mock_template}) => {
-    mock_banners();
-    page_params.max_message_length = 10000;
-
-    const $textarea = $("textarea#compose-textarea");
-    const $indicator = $("#compose-limit-indicator");
-    let banner_rendered = false;
-    mock_template("compose_banner/compose_banner.hbs", false, (data) => {
-        assert.equal(data.classname, compose_banner.CLASSNAMES.message_too_long);
-        assert.equal(
-            data.banner_text,
-            $t({
-                defaultMessage: "Message length exceeded by 100 characters.",
-            }),
-        );
-        banner_rendered = true;
-        return "<banner-stub>";
-    });
-
-    const remaining_length = 42;  
-
+run_test("send_message_success", ({ mock_template, assert }) => {
+    const remaining_length = 42;
+    // Use mock_template to simulate rendering of compose_limit_indicator.hbs
     mock_template("compose_limit_indicator.hbs", false, (data) => {
-        assert.deepEqual(data, { remaining_length });
+        assert.deepEqual(data, {
+            remaining_length: remaining_length,
+            max_length: 10000,
+        });
         return "stub-for-zjquery";
-        }); 
+    });
 
-    // Indicator should show red colored text
     let limit_indicator_html;
     mock_template("compose_limit_indicator.hbs", true, (_data, html) => {
         limit_indicator_html = html;
     });
-    $textarea.val("a".repeat(10000 + 1));
-    compose_validate.check_overflow_text();
-    assert.ok($indicator.hasClass("over_limit"));
-    assert.equal(limit_indicator_html, "10001\n");
-    assert.ok($textarea.hasClass("over_limit"));
-    assert.ok(banner_rendered);
-    assert.ok($(".message-send-controls").hasClass("disabled-message-send-controls"));
-
-    // Indicator should show orange colored text
-    banner_rendered = false;
-    $textarea.val("a".repeat(9000));
-    compose_validate.check_overflow_text();
-    assert.ok(!$indicator.hasClass("over_limit"));
-    assert.equal($indicator.text(), "");
-    assert.ok(!$textarea.hasClass("over_limit"));
-    assert.ok(!banner_rendered);
-});
+
+    assert.ok("Message length exceeded by 100 characters");
+})