snapshot of https://github.com/zulip/zulip.git @ 48c69911c7dd4e03b20552eb3bd77ad8151c1357 (2026-09-15)

web/tests/lib/compose_helpers.cjs

@@ -0,0 +1,217 @@
+"use strict";
+
+const assert = require("node:assert/strict");
+
+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
+        this.$send_message_form.set_find_results(".message-textarea", this.$content_textarea);
+
+        // These are needed by compose_ui.enter_preview_mode() and
+        // compose_ui.exit_preview_mode(), which use $container.find().
+        const $compose = $("#compose");
+        $compose.set_find_results("textarea.message-textarea", this.$content_textarea);
+        $compose.set_find_results(
+            ".preview_mode_disabled .compose_control_button",
+            $("#compose .preview_mode_disabled .compose_control_button"),
+        );
+        $compose.set_find_results(".markdown_preview", $("#compose .markdown_preview"));
+        $compose.set_find_results(".undo_markdown_preview", $("#compose .undo_markdown_preview"));
+        $compose.set_find_results(".preview_message_area", this.$preview_message_area);
+        $compose.set_find_results(".preview_content", $("#compose .preview_content"));
+
+        this.$send_message_form.set_find_results(
+            ".message-limit-indicator",
+            $(".message-limit-indicator"),
+        );
+
+        const $message_row_stub = $.set_results("message_row_stub", []);
+        this.$content_textarea.set_closest_results(".message_row", $message_row_stub);
+
+        this.reset();
+    }
+
+    reset() {
+        $(".message-limit-indicator").html("");
+        $(".message-limit-indicator").text("");
+
+        $.reset_selector("#compose_banners .user_not_subscribed");
+        $.set_results("#compose_banners .user_not_subscribed", []);
+
+        this.$content_textarea.set_height(50);
+        this.$content_textarea.val("default message");
+        this.$content_textarea.trigger("blur");
+
+        $(".compose-submit-button .loader").show();
+    }
+
+    show_message_preview() {
+        this.$preview_message_area.show();
+        $("#compose .undo_markdown_preview").show();
+        $("#compose .markdown_preview").hide();
+        $("#compose").addClass("preview_mode");
+    }
+
+    hide_message_preview() {
+        this.$preview_message_area.hide();
+        $("#compose .markdown_preview").show();
+        $("#compose .undo_markdown_preview").hide();
+        $("#compose").removeClass("preview_mode");
+    }
+
+    textarea_val() {
+        return this.$content_textarea.val();
+    }
+
+    preview_content_html() {
+        return $("#compose .preview_content").html();
+    }
+
+    compose_spinner_selector() {
+        return ".compose-submit-button .loader";
+    }
+
+    markdown_spinner_selector() {
+        return "#compose .markdown_preview_spinner";
+    }
+
+    set_topic_val(topic_name) {
+        $("input#stream_message_recipient_topic").val(topic_name);
+    }
+
+    set_textarea_val(val) {
+        this.$content_textarea.val(val);
+    }
+
+    blur_textarea() {
+        this.$content_textarea.trigger("blur");
+    }
+
+    show_submit_button_spinner() {
+        $(".compose-submit-button .loader").show();
+    }
+
+    is_recipient_not_subscribed_banner_visible() {
+        return $("#compose_banners .recipient_not_subscribed").visible();
+    }
+
+    is_textarea_focused() {
+        return this.$content_textarea.is_focused();
+    }
+
+    is_submit_button_spinner_visible() {
+        return $(this.compose_spinner_selector()).visible();
+    }
+
+    trigger_submit_handler_on_compose_form(event) {
+        $("#compose form").get_on_handler("submit")(event);
+    }
+
+    click_on_markdown_preview_icon(event) {
+        $("#compose").get_on_handler("click", ".markdown_preview")(event);
+    }
+
+    click_on_undo_markdown_preview_icon(event) {
+        $("#compose").get_on_handler("click", ".undo_markdown_preview")(event);
+    }
+
+    click_on_upload_attachment_icon(event) {
+        $("#compose").get_on_handler("click", ".compose_upload_file")(event);
+    }
+
+    set_click_handler_for_upload_file_input_element(f) {
+        $("#compose .file_input").on("click", f);
+    }
+
+    assert_preview_mode_is_off() {
+        assert.ok(!this.$preview_message_area.visible());
+        assert.ok(!$("#compose .undo_markdown_preview").visible());
+        assert.ok($("#compose .markdown_preview").visible());
+        assert.ok(!$("#compose").hasClass("preview_mode"));
+    }
+
+    assert_preview_mode_is_on() {
+        assert.ok(this.$preview_message_area.visible());
+        assert.ok(!$("#compose .markdown_preview").visible());
+        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(!$("#compose-send-button").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(!$("#compose-send-button").hasClass("disabled-message-send-controls"));
+    }
+}
+
+function quote_message_template(opts) {
+    const {channel_object, selected_message, fence, content} = opts;
+
+    const {stream_id, name} = channel_object;
+    const channel_name = name;
+    const {sender_full_name, sender_id, id, topic} = selected_message;
+    const near_url = `http://zulip.zulipdev.com/#narrow/channel/${stream_id}-${channel_name}/topic/${topic}/near/${id}`;
+    return `translated: @_**${sender_full_name}|${sender_id}** [said](${near_url}):
+${fence}quote
+${content}
+${fence}`;
+}
+
+function forward_channel_message_template(opts) {
+    const {channel_object, selected_message, fence, content} = opts;
+
+    const {stream_id, name} = channel_object;
+    const channel_name = name;
+    const {sender_full_name, sender_id, id, topic} = selected_message;
+    const near_url = `http://zulip.zulipdev.com/#narrow/channel/${stream_id}-${channel_name}/topic/${topic}/near/${id}`;
+    const topic_link = `#**${channel_name}>${topic}**`;
+    return `translated: @_**${sender_full_name}|${sender_id}** [said](${near_url}) in ${topic_link}:
+${fence}quote
+${content}
+${fence}`;
+}
+
+function forward_direct_message_template(opts) {
+    const {direct_message, dm_recipient_string, fence, content} = opts;
+
+    const {sender_full_name, sender_id, id: message_id, display_recipient} = direct_message;
+    const encoding_prefix = display_recipient.length > 2 ? "group" : "dm";
+    const dm_recipient_ids_string = display_recipient.map((user) => user.id).join(",");
+    const near_url = `http://zulip.zulipdev.com/#narrow/dm/${dm_recipient_ids_string}-${encoding_prefix}/near/${message_id}`;
+
+    return `translated: @_**${sender_full_name}|${sender_id}** [said](${near_url}) to ${dm_recipient_string}:
+${fence}quote
+${content}
+${fence}`;
+}
+
+module.exports = {
+    FakeComposeBox,
+    quote_message_template,
+    forward_channel_message_template,
+    forward_direct_message_template,
+};