compose_validate test: Use FakeComposeBox for size limits.

This commit simplifies a compose_validate test by
using FakeComposeBox.

It also exposes $send_message_form to the callers.
(The general idea here is that for any individual
test, we don't want the developer to have to
switch between thinking about low-level zjquery
idioms and higher-level abstractions.)

This commit also removes the use of mock_template,
since the template in question generates trivially
easy html to deal with (and we verify the actual
effects to the DOM).

web/tests/compose_validate.test.cjs

@@ -553,42 +553,31 @@ test_ui("test_stream_posting_permission", ({mock_template, override}) => {
     assert.ok(!banner_rendered);
 });
 
-test_ui("test_check_overflow_text", ({mock_template, override}) => {
+test_ui("test_check_overflow_text", ({override}) => {
+    const fake_compose_box = new FakeComposeBox();
+
     override(realm, "max_message_length", 10000);
 
-    const $elem = $("#send_message_form");
+    // RED
-    const $textarea = $(".message-textarea");
+    {
-    const $indicator = $(".message-limit-indicator");
+        fake_compose_box.set_textarea_val("a".repeat(10005));
-    stub_message_row($textarea);
+        compose_validate.check_overflow_text(fake_compose_box.$send_message_form);
-    $elem.set_find_results(".message-textarea", $textarea);
+        fake_compose_box.assert_message_size_is_over_the_limit("-5\n");
-    $elem.set_find_results(".message-limit-indicator", $indicator);
+    }
 
-    // Indicator should show red colored text
+    // ORANGE
-    let limit_indicator_html;
+    {
-    mock_template("compose_limit_indicator.hbs", true, (_data, html) => {
+        fake_compose_box.set_textarea_val("a".repeat(9100));
-        limit_indicator_html = html;
+        compose_validate.check_overflow_text(fake_compose_box.$send_message_form);
-    });
+        fake_compose_box.assert_message_size_is_under_the_limit("900\n");
-    $textarea.val("a".repeat(10000 + 1));
+    }
-    compose_validate.check_overflow_text($elem);
-    assert.ok($indicator.hasClass("textarea-over-limit"));
-    assert.equal(limit_indicator_html, "-1\n");
-    assert.ok($textarea.hasClass("textarea-over-limit"));
-    assert.ok($(".message-send-controls").hasClass("disabled-message-send-controls"));
 
-    // Indicator should show orange colored text
+    // ALL CLEAR
-    $textarea.val("a".repeat(9100));
+    {
-    compose_validate.check_overflow_text($elem);
+        fake_compose_box.set_textarea_val("a".repeat(9100 - 1));
-    assert.ok(!$indicator.hasClass("textarea-over-limit"));
+        compose_validate.check_overflow_text(fake_compose_box.$send_message_form);
-    assert.equal(limit_indicator_html, "900\n");
+        fake_compose_box.assert_message_size_is_under_the_limit();
-    assert.ok(!$textarea.hasClass("textarea-over-limit"));
+    }
-    assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
-
-    // Indicator must be empty
-    $textarea.val("a".repeat(9100 - 1));
-    compose_validate.check_overflow_text($elem);
-    assert.ok(!$indicator.hasClass("textarea-over-limit"));
-    assert.equal($indicator.text(), "");
-    assert.ok(!$textarea.hasClass("textarea-over-limit"));
 });
 
 test_ui("needs_subscribe_warning", () => {

web/tests/lib/compose_helpers.cjs

@@ -7,15 +7,16 @@ const $ = require("./zjquery.cjs");
 
 class FakeComposeBox {
     constructor() {
+        this.$send_message_form = $("#send_message_form");
         this.$content_textarea = $("textarea#compose-textarea");
         this.$preview_message_area = $("#compose .preview_message_area");
 
         // Simulate DOM relationships
-        $("#send_message_form").set_find_results(".message-textarea", this.$content_textarea);
+        this.$send_message_form.set_find_results(".message-textarea", this.$content_textarea);
 
-        $("#send_message_form").set_find_results(
+        this.$send_message_form.set_find_results(
             ".message-limit-indicator",
-            $.create("limit-indicator-stub"),
+            $(".message-limit-indicator"),
         );
 
         const $message_row_stub = $.create("message_row_stub");
@@ -29,6 +30,9 @@ class FakeComposeBox {
     }
 
     reset() {
+        $(".message-limit-indicator").html("");
+        $(".message-limit-indicator").text("");
+
         $("#compose_banners .user_not_subscribed").length = 0;
 
         this.$content_textarea.toggleClass = noop;
@@ -135,6 +139,30 @@ class FakeComposeBox {
         assert.ok($("#compose .undo_markdown_preview").visible());
         assert.ok($("#compose").hasClass("preview_mode"));
     }
+
+    assert_message_size_is_over_the_limit(desired_html) {
+        // Indicator should show red colored text
+        assert.equal($(".message-limit-indicator").html(), desired_html);
+
+        assert.ok(this.$content_textarea.hasClass("textarea-over-limit"));
+        assert.ok($(".message-limit-indicator").hasClass("textarea-over-limit"));
+        assert.ok($(".message-send-controls").hasClass("disabled-message-send-controls"));
+    }
+
+    assert_message_size_is_under_the_limit(desired_html) {
+        // Work around the quirk that our validation code
+        // arbitrarily switches between html() and text(),
+        // and zjquery doesn't unify text and html.
+        if (desired_html) {
+            assert.equal($(".message-limit-indicator").html(), desired_html);
+        } else {
+            assert.equal($(".message-limit-indicator").text(), "");
+        }
+
+        assert.ok(!this.$content_textarea.hasClass("textarea-over-limit"));
+        assert.ok(!$(".message-limit-indicator").hasClass("textarea-over-limit"));
+        assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
+    }
 }
 
 module.exports = {FakeComposeBox};