zulip/frontend_tests/node_tests/compose.js

"use strict";

const {strict: assert} = require("assert");

const MockDate = require("mockdate");

const {$t} = require("../zjsunit/i18n");
const {mock_esm, set_global, zrequire} = require("../zjsunit/namespace");
const {run_test} = require("../zjsunit/test");
const blueslip = require("../zjsunit/zblueslip");
const $ = require("../zjsunit/zjquery");
const {page_params, user_settings} = require("../zjsunit/zpage_params");

const {mock_banners} = require("./lib/compose_banner");

const noop = () => {};

set_global("document", {
    querySelector() {},
});
set_global("navigator", {});
set_global(
    "ResizeObserver",
    class ResizeObserver {
        observe() {}
    },
);

const fake_now = 555;

const channel = mock_esm("../../web/src/channel");
const compose_actions = mock_esm("../../web/src/compose_actions");
const compose_fade = mock_esm("../../web/src/compose_fade");
const compose_pm_pill = mock_esm("../../web/src/compose_pm_pill");
const loading = mock_esm("../../web/src/loading");
const markdown = mock_esm("../../web/src/markdown");
const reminder = mock_esm("../../web/src/reminder");
const rendered_markdown = mock_esm("../../web/src/rendered_markdown");
const resize = mock_esm("../../web/src/resize");
const sent_messages = mock_esm("../../web/src/sent_messages");
const server_events = mock_esm("../../web/src/server_events");
const transmit = mock_esm("../../web/src/transmit");
const upload = mock_esm("../../web/src/upload");

const compose_ui = zrequire("compose_ui");
const compose_banner = zrequire("compose_banner");
const compose_closed_ui = zrequire("compose_closed_ui");
const compose_state = zrequire("compose_state");
const compose = zrequire("compose");
const echo = zrequire("echo");
const people = zrequire("people");
const stream_data = zrequire("stream_data");

function reset_jquery() {
    // Avoid leaks.
    $.clear_all_elements();
}

const new_user = {
    email: "new_user@example.com",
    user_id: 101,
    full_name: "New User",
    date_joined: new Date(),
};

const me = {
    email: "me@example.com",
    user_id: 30,
    full_name: "Me Myself",
    date_joined: new Date(),
};

const alice = {
    email: "alice@example.com",
    user_id: 31,
    full_name: "Alice",
};

const bob = {
    email: "bob@example.com",
    user_id: 32,
    full_name: "Bob",
};

people.add_active_user(new_user);
people.add_active_user(me);
people.initialize_current_user(me.user_id);

people.add_active_user(alice);
people.add_active_user(bob);

const social = {
    stream_id: 101,
    name: "social",
    subscribed: true,
};
stream_data.add_sub(social);

function test_ui(label, f) {
    // TODO: initialize data more aggressively.
    run_test(label, f);
}

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, "setup_upload", () => undefined);
    override(upload, "feature_check", () => {});
    override(resize, "watch_manual_resize", () => {});
    compose.initialize();
}

test_ui("send_message_success", ({override_rewire}) => {
    mock_banners();
    $("#compose-textarea").val("foobarfoobar");
    $("#compose-textarea").trigger("blur");
    $("#compose-send-button .loader").show();

    let reify_message_id_checked;
    override_rewire(echo, "reify_message_id", (local_id, message_id) => {
        assert.equal(local_id, "1001");
        assert.equal(message_id, 12);
        reify_message_id_checked = true;
    });

    compose.send_message_success("1001", 12, false);

    assert.equal($("#compose-textarea").val(), "");
    assert.ok($("#compose-textarea").is_focused());
    assert.ok(!$("#compose-send-button .loader").visible());

    assert.ok(reify_message_id_checked);
});

test_ui("send_message", ({override, override_rewire, mock_template}) => {
    mock_banners();
    MockDate.set(new Date(fake_now * 1000));

    override(sent_messages, "start_tracking_message", () => {});

    // This is the common setup stuff for all of the four tests.
    let stub_state;
    function initialize_state_stub_dict() {
        stub_state = {};
        stub_state.send_msg_called = 0;
        stub_state.get_events_running_called = 0;
        stub_state.reify_message_id_checked = 0;
        return stub_state;
    }

    const $container = $(".top_left_drafts");
    const $child = $(".unread_count");
    $container.set_find_results(".unread_count", $child);

    override(server_events, "assert_get_events_running", () => {
        stub_state.get_events_running_called += 1;
    });

    // Tests start here.
    (function test_message_send_success_codepath() {
        stub_state = initialize_state_stub_dict();
        compose_state.topic("");
        compose_state.set_message_type("private");
        page_params.user_id = new_user.user_id;
        override(compose_pm_pill, "get_emails", () => "alice@example.com");

        const server_message_id = 127;
        override_rewire(echo, "insert_message", (message) => {
            assert.equal(message.timestamp, fake_now);
        });

        override(markdown, "apply_markdown", () => {});
        override(markdown, "add_topic_links", () => {});

        override_rewire(echo, "try_deliver_locally", (message_request) => {
            const local_id_float = 123.04;
            return echo.insert_local_message(message_request, local_id_float);
        });

        override(transmit, "send_message", (payload, success) => {
            const single_msg = {
                type: "private",
                content: "[foobar](/user_uploads/123456)",
                sender_id: new_user.user_id,
                queue_id: undefined,
                stream: "",
                topic: "",
                to: `[${alice.user_id}]`,
                reply_to: "alice@example.com",
                private_message_recipient: "alice@example.com",
                to_user_ids: "31",
                local_id: "123.04",
                locally_echoed: true,
            };

            assert.deepEqual(payload, single_msg);
            payload.id = server_message_id;
            success(payload);
            stub_state.send_msg_called += 1;
        });

        override_rewire(echo, "reify_message_id", (local_id, message_id) => {
            assert.equal(typeof local_id, "string");
            assert.equal(typeof message_id, "number");
            assert.equal(message_id, server_message_id);
            stub_state.reify_message_id_checked += 1;
        });

        $("#compose-textarea").val("[foobar](/user_uploads/123456)");
        $("#compose-textarea").trigger("blur");
        $("#compose-send-button .loader").show();

        compose.send_message();

        const state = {
            get_events_running_called: 1,
            reify_message_id_checked: 1,
            send_msg_called: 1,
        };
        assert.deepEqual(stub_state, state);
        assert.equal($("#compose-textarea").val(), "");
        assert.ok($("#compose-textarea").is_focused());
        assert.ok(!$("#compose-send-button .loader").visible());
    })();

    // This is the additional setup which is common to both the tests below.
    override(transmit, "send_message", (payload, success, error) => {
        stub_state.send_msg_called += 1;
        error("Error sending message: Server says 408");
    });

    let echo_error_msg_checked;

    override_rewire(echo, "message_send_error", (local_id, error_response) => {
        assert.equal(local_id, 123.04);
        assert.equal(error_response, "Error sending message: Server says 408");
        echo_error_msg_checked = true;
    });

    // Tests start here.
    (function test_param_error_function_passed_from_send_message() {
        stub_state = initialize_state_stub_dict();

        compose.send_message();

        const state = {
            get_events_running_called: 1,
            reify_message_id_checked: 0,
            send_msg_called: 1,
        };
        assert.deepEqual(stub_state, state);
        assert.ok(echo_error_msg_checked);
    })();

    (function test_error_codepath_local_id_undefined() {
        let banner_rendered = false;
        mock_template("compose_banner/compose_banner.hbs", false, (data) => {
            assert.equal(data.classname, "generic_compose_error");
            assert.equal(data.banner_text, "Error sending message: Server says 408");
            banner_rendered = true;
        });
        stub_state = initialize_state_stub_dict();
        $("#compose-textarea").val("foobarfoobar");
        $("#compose-textarea").trigger("blur");
        $("#compose-send-button .loader").show();
        $("#compose-textarea").off("select");
        echo_error_msg_checked = false;
        override_rewire(echo, "try_deliver_locally", () => {});

        override(sent_messages, "get_new_local_id", () => "loc-55");

        compose.send_message();

        const state = {
            get_events_running_called: 1,
            reify_message_id_checked: 0,
            send_msg_called: 1,
        };
        assert.deepEqual(stub_state, state);
        assert.ok(!echo_error_msg_checked);
        assert.ok(banner_rendered);
        assert.equal($("#compose-textarea").val(), "foobarfoobar");
        assert.ok($("#compose-textarea").is_focused());
        assert.ok(!$("#compose-send-button .loader").visible());
    })();
});

test_ui("enter_with_preview_open", ({override, override_rewire}) => {
    mock_banners();
    $("#compose-textarea").toggleClass = noop;
    override_rewire(compose_banner, "clear_message_sent_banners", () => {});
    override(reminder, "is_deferred_delivery", () => false);
    override(document, "to_$", () => $("document-stub"));
    let show_button_spinner_called = false;
    override(loading, "show_button_spinner", ($spinner) => {
        assert.equal($spinner.selector, "#compose-send-button .loader");
        show_button_spinner_called = true;
    });

    page_params.user_id = new_user.user_id;

    // Test sending a message with content.
    compose_state.set_message_type("stream");
    compose_state.set_stream_name("social");

    $("#compose-textarea").val("message me");
    $("#compose-textarea").hide();
    $("#compose .undo_markdown_preview").show();
    $("#compose .preview_message_area").show();
    $("#compose .markdown_preview").hide();
    user_settings.enter_sends = true;
    let send_message_called = false;
    override_rewire(compose, "send_message", () => {
        send_message_called = true;
    });
    compose.enter_with_preview_open();
    assert.ok($("#compose-textarea").visible());
    assert.ok(!$("#compose .undo_markdown_preview").visible());
    assert.ok(!$("#compose .preview_message_area").visible());
    assert.ok($("#compose .markdown_preview").visible());
    assert.ok(send_message_called);
    assert.ok(show_button_spinner_called);

    user_settings.enter_sends = false;
    $("#compose-textarea").trigger("blur");
    compose.enter_with_preview_open();
    assert.ok($("#compose-textarea").is_focused());

    // Test sending a message without content.
    $("#compose-textarea").val("");
    $("#compose .preview_message_area").show();
    user_settings.enter_sends = true;

    compose.enter_with_preview_open();
});

test_ui("finish", ({override, override_rewire}) => {
    mock_banners();
    override_rewire(compose_banner, "clear_message_sent_banners", () => {});
    override(reminder, "is_deferred_delivery", () => false);
    override(document, "to_$", () => $("document-stub"));
    let show_button_spinner_called = false;
    override(loading, "show_button_spinner", ($spinner) => {
        assert.equal($spinner.selector, "#compose-send-button .loader");
        show_button_spinner_called = true;
    });

    (function test_when_compose_validation_fails() {
        $("#compose-textarea").toggleClass = (classname, value) => {
            assert.equal(classname, "invalid");
            assert.equal(value, true);
        };
        $("#compose_invite_users").show();
        $("#compose-send-button").prop("disabled", false);
        $("#compose-send-button").trigger("focus");
        $("#compose-send-button .loader").hide();
        $("#compose-textarea").off("select");
        $("#compose-textarea").val("");
        compose_ui.compose_spinner_visible = false;
        const res = compose.finish();
        assert.equal(res, false);
        assert.ok(!$("#compose_banners .recipient_not_subscribed").visible());
        assert.ok(!$("#compose-send-button .loader").visible());
        assert.ok(show_button_spinner_called);
    })();

    (function test_when_compose_validation_succeed() {
        // Testing successfully sending of a message.
        $("#compose .undo_markdown_preview").show();
        $("#compose .preview_message_area").show();
        $("#compose .markdown_preview").hide();
        $("#compose-textarea").val("foobarfoobar");
        compose_ui.compose_spinner_visible = false;
        compose_state.set_message_type("private");
        override(compose_pm_pill, "get_emails", () => "bob@example.com");
        override(compose_pm_pill, "get_user_ids", () => []);

        let compose_finished_event_checked = false;
        $(document).on("compose_finished.zulip", () => {
            compose_finished_event_checked = true;
        });
        let send_message_called = false;
        override_rewire(compose, "send_message", () => {
            send_message_called = true;
        });
        assert.ok(compose.finish());
        assert.ok($("#compose-textarea").visible());
        assert.ok(!$("#compose .undo_markdown_preview").visible());
        assert.ok(!$("#compose .preview_message_area").visible());
        assert.ok($("#compose .markdown_preview").visible());
        assert.ok(send_message_called);
        assert.ok(compose_finished_event_checked);

        // Testing successful scheduling of message.
        $("#compose .undo_markdown_preview").show();
        $("#compose .preview_message_area").show();
        $("#compose .markdown_preview").hide();
        $("#compose-textarea").val("foobarfoobar");
        compose_ui.compose_spinner_visible = false;
        compose_state.set_message_type("stream");
        compose_state.set_stream_name("social");
        override_rewire(people, "get_by_user_id", () => []);
        compose_finished_event_checked = false;
        let schedule_message = false;
        override(reminder, "schedule_message", () => {
            schedule_message = true;
        });
        reminder.is_deferred_delivery = () => true;
        assert.ok(compose.finish());
        assert.ok($("#compose-textarea").visible());
        assert.ok(!$("#compose .undo_markdown_preview").visible());
        assert.ok(!$("#compose .preview_message_area").visible());
        assert.ok($("#compose .markdown_preview").visible());
        assert.ok(schedule_message);
        assert.ok(compose_finished_event_checked);
    })();
});

test_ui("initialize", ({override}) => {
    let compose_actions_expected_opts;
    let compose_actions_start_checked;

    override(compose_actions, "start", (msg_type, opts) => {
        assert.equal(msg_type, "stream");
        assert.deepEqual(opts, compose_actions_expected_opts);
        compose_actions_start_checked = true;
    });

    // In this test we mostly do the setup stuff in addition to testing the
    // 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_video_chat_provider", 0);

    let resize_watch_manual_resize_checked = false;
    override(resize, "watch_manual_resize", (elem) => {
        assert.equal("#compose-textarea", elem);
        resize_watch_manual_resize_checked = true;
    });

    page_params.max_file_upload_size_mib = 512;

    let setup_upload_called = false;
    let uppy_cancel_all_called = false;
    override(upload, "setup_upload", (config) => {
        assert.equal(config.mode, "compose");
        setup_upload_called = true;
        return {
            cancelAll() {
                uppy_cancel_all_called = true;
            },
        };
    });
    override(upload, "feature_check", () => {});

    compose.initialize();

    assert.ok(resize_watch_manual_resize_checked);
    assert.ok(setup_upload_called);

    function set_up_compose_start_mock(expected_opts) {
        compose_actions_start_checked = false;
        compose_actions_expected_opts = expected_opts;
    }

    (function test_page_params_narrow_path() {
        page_params.narrow = true;

        reset_jquery();
        set_up_compose_start_mock({});

        compose.initialize();

        assert.ok(compose_actions_start_checked);
    })();

    (function test_page_params_narrow_topic() {
        page_params.narrow_topic = "testing";

        reset_jquery();
        set_up_compose_start_mock({topic: "testing"});

        compose.initialize();

        assert.ok(compose_actions_start_checked);
    })();

    (function test_abort_xhr() {
        reset_jquery();
        compose.initialize();

        compose.abort_xhr();

        assert.equal($("#compose-send-button").attr(), undefined);
        assert.ok(uppy_cancel_all_called);
    })();
});

test_ui("update_fade", ({override}) => {
    mock_banners();
    initialize_handlers({override});

    const selector =
        "#stream_message_recipient_stream,#stream_message_recipient_topic,#private_message_recipient";
    const keyup_handler_func = $(selector).get_on_handler("keyup");

    let set_focused_recipient_checked = false;
    let update_all_called = false;
    let update_narrow_to_recipient_visibility_called = false;

    override(compose_fade, "set_focused_recipient", (msg_type) => {
        assert.equal(msg_type, "private");
        set_focused_recipient_checked = true;
    });

    override(compose_fade, "update_all", () => {
        update_all_called = true;
    });

    override(compose_actions, "update_narrow_to_recipient_visibility", () => {
        update_narrow_to_recipient_visibility_called = true;
    });

    compose_state.set_message_type(false);
    keyup_handler_func();
    assert.ok(!set_focused_recipient_checked);
    assert.ok(!update_all_called);
    assert.ok(update_narrow_to_recipient_visibility_called);

    update_narrow_to_recipient_visibility_called = false;

    compose_state.set_message_type("private");
    keyup_handler_func();
    assert.ok(set_focused_recipient_checked);
    assert.ok(update_all_called);
    assert.ok(update_narrow_to_recipient_visibility_called);
});

test_ui("trigger_submit_compose_form", ({override, override_rewire}) => {
    initialize_handlers({override});

    let prevent_default_checked = false;
    let compose_finish_checked = false;
    const e = {
        preventDefault() {
            prevent_default_checked = true;
        },
    };
    override_rewire(compose, "finish", () => {
        compose_finish_checked = true;
    });

    const submit_handler = $("#compose form").get_on_handler("submit");

    submit_handler(e);

    assert.ok(prevent_default_checked);
    assert.ok(compose_finish_checked);
});

test_ui("on_events", ({override}) => {
    initialize_handlers({override});

    override(rendered_markdown, "update_elements", () => {});

    (function test_attach_files_compose_clicked() {
        const handler = $("#compose").get_on_handler("click", ".compose_upload_file");
        let compose_file_input_clicked = false;
        $("#compose .file_input").on("click", () => {
            compose_file_input_clicked = true;
        });

        const event = {
            preventDefault: noop,
            stopPropagation: noop,
        };

        handler(event);
        assert.ok(compose_file_input_clicked);
    })();

    (function test_markdown_preview_compose_clicked() {
        // Tests setup
        function setup_visibilities() {
            $("#compose-textarea").show();
            $("#compose .markdown_preview").show();
            $("#compose .undo_markdown_preview").hide();
            $("#compose .preview_message_area").hide();
        }

        function assert_visibilities() {
            assert.ok(!$("#compose-textarea").visible());
            assert.ok(!$("#compose .markdown_preview").visible());
            assert.ok($("#compose .undo_markdown_preview").visible());
            assert.ok($("#compose .preview_message_area").visible());
        }

        function setup_mock_markdown_contains_backend_only_syntax(msg_content, return_val) {
            override(markdown, "contains_backend_only_syntax", (msg) => {
                assert.equal(msg, msg_content);
                return return_val;
            });
        }

        function setup_mock_markdown_is_status_message(msg_content, return_val) {
            override(markdown, "is_status_message", (content) => {
                assert.equal(content, msg_content);
                return return_val;
            });
        }

        function test_post_success(success_callback) {
            const resp = {
                rendered: "Server: foobarfoobar",
            };
            success_callback(resp);
            assert.equal($("#compose .preview_content").html(), "Server: foobarfoobar");
        }

        function test_post_error(error_callback) {
            error_callback();
            assert.equal(
                $("#compose .preview_content").html(),
                "translated HTML: Failed to generate preview",
            );
        }

        let current_message;

        override(channel, "post", (payload) => {
            assert.equal(payload.url, "/json/messages/render");
            assert.ok(payload.data);
            assert.deepEqual(payload.data.content, current_message);

            function test(func, param) {
                let destroy_indicator_called = false;
                override(loading, "destroy_indicator", ($spinner) => {
                    assert.equal($spinner, $("#compose .markdown_preview_spinner"));
                    destroy_indicator_called = true;
                });
                setup_mock_markdown_contains_backend_only_syntax(current_message, true);

                func(param);

                assert.ok(destroy_indicator_called);
            }

            test(test_post_error, payload.error);
            test(test_post_success, payload.success);
        });

        const handler = $("#compose").get_on_handler("click", ".markdown_preview");

        // Tests start here
        $("#compose-textarea").val("");
        setup_visibilities();

        const event = {
            preventDefault: noop,
            stopPropagation: noop,
        };

        handler(event);

        assert.equal($("#compose .preview_content").html(), "translated HTML: Nothing to preview");
        assert_visibilities();

        let make_indicator_called = false;
        $("#compose-textarea").val("```foobarfoobar```");
        setup_visibilities();
        setup_mock_markdown_contains_backend_only_syntax("```foobarfoobar```", true);
        setup_mock_markdown_is_status_message("```foobarfoobar```", false);

        override(loading, "make_indicator", ($spinner) => {
            assert.equal($spinner.selector, "#compose .markdown_preview_spinner");
            make_indicator_called = true;
        });

        current_message = "```foobarfoobar```";

        handler(event);

        assert.ok(make_indicator_called);
        assert_visibilities();

        let apply_markdown_called = false;
        $("#compose-textarea").val("foobarfoobar");
        setup_visibilities();
        setup_mock_markdown_contains_backend_only_syntax("foobarfoobar", false);
        setup_mock_markdown_is_status_message("foobarfoobar", false);

        current_message = "foobarfoobar";

        override(markdown, "apply_markdown", (msg) => {
            assert.equal(msg.raw_content, "foobarfoobar");
            apply_markdown_called = true;
            return msg;
        });

        handler(event);

        assert.ok(apply_markdown_called);
        assert_visibilities();
        assert.equal($("#compose .preview_content").html(), "Server: foobarfoobar");
    })();

    (function test_undo_markdown_preview_clicked() {
        const handler = $("#compose").get_on_handler("click", ".undo_markdown_preview");

        $("#compose-textarea").hide();
        $("#compose .undo_markdown_preview").show();
        $("#compose .preview_message_area").show();
        $("#compose .markdown_preview").hide();

        const event = {
            preventDefault: noop,
            stopPropagation: noop,
        };

        override(compose_actions, "update_placeholder_text", noop);

        handler(event);

        assert.ok($("#compose-textarea").visible());
        assert.ok(!$("#compose .undo_markdown_preview").visible());
        assert.ok(!$("#compose .preview_message_area").visible());
        assert.ok($("#compose .markdown_preview").visible());
    })();
});

test_ui("create_message_object", ({override, override_rewire}) => {
    compose_state.set_stream_name("social");
    $("#stream_message_recipient_topic").val("lunch");
    $("#compose-textarea").val("burrito");

    compose_state.set_message_type("stream");

    let message = compose.create_message_object();
    assert.equal(message.to, social.stream_id);
    assert.equal(message.topic, "lunch");
    assert.equal(message.content, "burrito");

    blueslip.expect("error", "Trying to send message with bad stream name: BOGUS STREAM");

    compose_state.set_stream_name("BOGUS STREAM");
    message = compose.create_message_object();
    assert.equal(message.to, "BOGUS STREAM");
    assert.equal(message.topic, "lunch");
    assert.equal(message.content, "burrito");

    compose_state.set_message_type("private");
    override(compose_pm_pill, "get_emails", () => "alice@example.com,bob@example.com");

    message = compose.create_message_object();
    assert.deepEqual(message.to, [alice.user_id, bob.user_id]);
    assert.equal(message.to_user_ids, "31,32");
    assert.equal(message.content, "burrito");

    const {email_list_to_user_ids_string} = people;
    override_rewire(people, "email_list_to_user_ids_string", () => undefined);
    message = compose.create_message_object();
    assert.deepEqual(message.to, [alice.email, bob.email]);
    people.email_list_to_user_ids_string = email_list_to_user_ids_string;
});

test_ui("narrow_button_titles", () => {
    compose_closed_ui.update_buttons_for_private();
    assert.equal(
        $("#left_bar_compose_stream_button_big").text(),
        $t({defaultMessage: "New stream message"}),
    );
    assert.equal(
        $("#left_bar_compose_private_button_big").text(),
        $t({defaultMessage: "New private message"}),
    );

    compose_closed_ui.update_buttons_for_stream();
    assert.equal(
        $("#left_bar_compose_stream_button_big").text(),
        $t({defaultMessage: "New topic"}),
    );
    assert.equal(
        $("#left_bar_compose_private_button_big").text(),
        $t({defaultMessage: "New private message"}),
    );
});

run_test("reset MockDate", () => {
    MockDate.reset();
});