zulip/web/tests/compose_ui.test.js

1236 lines
44 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use strict";
const {strict: assert} = require("assert");
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} = require("./lib/zpage_params");
set_global("navigator", {});
const autosize = noop;
autosize.update = noop;
mock_esm("autosize", {default: autosize});
mock_esm("../src/message_lists", {
current: {},
});
const compose_ui = zrequire("compose_ui");
const stream_data = zrequire("stream_data");
const people = zrequire("people");
const user_status = zrequire("user_status");
const hash_util = mock_esm("../src/hash_util");
const channel = mock_esm("../src/channel");
const compose_reply = zrequire("compose_reply");
const message_lists = zrequire("message_lists");
const text_field_edit = mock_esm("text-field-edit");
const alice = {
email: "alice@zulip.com",
user_id: 101,
full_name: "Alice",
};
const bob = {
email: "bob@zulip.com",
user_id: 102,
full_name: "Bob",
};
people.add_active_user(alice);
people.add_active_user(bob);
function make_textbox(s) {
// Simulate a jQuery textbox for testing purposes.
const $widget = {};
$widget.s = s;
$widget[0] = "textarea";
$widget.focused = false;
$widget.caret = function (arg) {
if (typeof arg === "number") {
$widget.pos = arg;
return this;
}
// Not used right now, but could be in future.
// if (arg) {
// $widget.insert_pos = $widget.pos;
// $widget.insert_text = arg;
// const before = $widget.s.slice(0, $widget.pos);
// const after = $widget.s.slice($widget.pos);
// $widget.s = before + arg + after;
// $widget.pos += arg.length;
// return this;
// }
return $widget.pos;
};
$widget.val = function (new_val) {
/* istanbul ignore if */
if (new_val) {
$widget.s = new_val;
return this;
}
return $widget.s;
};
$widget.trigger = noop;
return $widget;
}
run_test("autosize_textarea", ({override}) => {
const textarea_autosized = {};
override(autosize, "update", (textarea) => {
textarea_autosized.textarea = textarea;
textarea_autosized.autosized = true;
});
// Call autosize_textarea with an argument
const container = "container-stub";
compose_ui.autosize_textarea(container);
assert.equal(textarea_autosized.textarea, container);
assert.ok(textarea_autosized.autosized);
});
run_test("insert_syntax_and_focus", ({override}) => {
$("textarea#compose-textarea").val("xyz ");
$("textarea#compose-textarea").caret = () => 4;
$("textarea#compose-textarea")[0] = "compose-textarea";
// Since we are using a third party library, we just
// need to ensure it is being called with the right params.
override(text_field_edit, "insert", (elt, syntax) => {
assert.equal(elt, "compose-textarea");
assert.equal(syntax, ":octopus: ");
});
compose_ui.insert_syntax_and_focus(":octopus:");
});
run_test("smart_insert", ({override}) => {
let $textbox = make_textbox("abc");
$textbox.caret(4);
function override_with_expected_syntax(expected_syntax) {
override(text_field_edit, "insert", (elt, syntax) => {
assert.equal(elt, "textarea");
assert.equal(syntax, expected_syntax);
});
}
override_with_expected_syntax(" :smile: ");
compose_ui.smart_insert_inline($textbox, ":smile:");
override_with_expected_syntax(" :airplane: ");
compose_ui.smart_insert_inline($textbox, ":airplane:");
$textbox.caret(0);
override_with_expected_syntax(":octopus: ");
compose_ui.smart_insert_inline($textbox, ":octopus:");
$textbox.caret($textbox.val().length);
override_with_expected_syntax(" :heart: ");
compose_ui.smart_insert_inline($textbox, ":heart:");
// Test handling of spaces for ```quote
$textbox = make_textbox("");
$textbox.caret(0);
override_with_expected_syntax("```quote\nquoted message\n```\n\n");
compose_ui.smart_insert_block($textbox, "```quote\nquoted message\n```");
$textbox = make_textbox("");
$textbox.caret(0);
override_with_expected_syntax("translated: [Quoting…]\n\n");
compose_ui.smart_insert_block($textbox, "translated: [Quoting…]");
$textbox = make_textbox("abc");
$textbox.caret(3);
override_with_expected_syntax("\n\n test with space\n\n");
compose_ui.smart_insert_block($textbox, " test with space");
// Note that we don't have any special logic for strings that are
// already surrounded by spaces, since we are usually inserting things
// like emojis and file links.
});
run_test("replace_syntax", ({override}) => {
const $textbox = make_textbox("aBca$$");
$textbox.caret(2);
override(text_field_edit, "replace", (elt, old_syntax, new_syntax) => {
assert.equal(elt, "textarea");
assert.equal(old_syntax, "a");
assert.equal(new_syntax(), "A");
});
let prev_caret = $textbox.caret();
compose_ui.replace_syntax("a", "A", $textbox);
assert.equal(prev_caret, $textbox.caret());
override(text_field_edit, "replace", (elt, old_syntax, new_syntax) => {
assert.equal(elt, "textarea");
assert.equal(old_syntax, "Bca");
assert.equal(new_syntax(), "$$\\pi$$");
});
// Verify we correctly handle `$`s in the replacement syntax
// and that on replacing with a different length string, the
// cursor is shifted accordingly as expected
$textbox.caret(5);
prev_caret = $textbox.caret();
compose_ui.replace_syntax("Bca", "$$\\pi$$", $textbox);
assert.equal(prev_caret + "$$\\pi$$".length - "Bca".length, $textbox.caret());
});
run_test("compute_placeholder_text", () => {
let opts = {
message_type: "stream",
stream_id: undefined,
topic: "",
direct_message_user_ids: [],
};
// Stream narrows
assert.equal(
compose_ui.compute_placeholder_text(opts),
$t({defaultMessage: "Compose your message here"}),
);
const stream_all = {
subscribed: true,
name: "all",
stream_id: 2,
};
stream_data.add_sub(stream_all);
opts.stream_id = stream_all.stream_id;
assert.equal(compose_ui.compute_placeholder_text(opts), $t({defaultMessage: "Message #all"}));
opts.topic = "Test";
assert.equal(
compose_ui.compute_placeholder_text(opts),
$t({defaultMessage: "Message #all > Test"}),
);
// direct message narrows
opts = {
message_type: "private",
stream_id: undefined,
topic: "",
direct_message_user_ids: [],
};
assert.equal(
compose_ui.compute_placeholder_text(opts),
$t({defaultMessage: "Compose your message here"}),
);
opts.direct_message_user_ids = [bob.user_id];
user_status.set_status_text({
user_id: bob.user_id,
status_text: "out to lunch",
});
assert.equal(
compose_ui.compute_placeholder_text(opts),
$t({defaultMessage: "Message Bob (out to lunch)"}),
);
opts.direct_message_user_ids = [alice.user_id];
user_status.set_status_text({
user_id: alice.user_id,
status_text: "",
});
assert.equal(compose_ui.compute_placeholder_text(opts), $t({defaultMessage: "Message Alice"}));
// group direct message
opts.direct_message_user_ids = [alice.user_id, bob.user_id];
assert.equal(
compose_ui.compute_placeholder_text(opts),
$t({defaultMessage: "Message Alice and Bob"}),
);
alice.is_guest = true;
page_params.realm_enable_guest_user_indicator = true;
assert.equal(
compose_ui.compute_placeholder_text(opts),
$t({defaultMessage: "Message translated: Alice (guest) and Bob"}),
);
page_params.realm_enable_guest_user_indicator = false;
assert.equal(
compose_ui.compute_placeholder_text(opts),
$t({defaultMessage: "Message Alice and Bob"}),
);
});
run_test("quote_and_reply", ({override, override_rewire}) => {
const devel_stream = {
subscribed: false,
name: "devel",
stream_id: 20,
};
const selected_message = {
type: "stream",
stream_id: devel_stream.stream_id,
topic: "python",
sender_full_name: "Steve Stephenson",
sender_id: 90,
};
override(
hash_util,
"by_conversation_and_time_url",
() => "https://chat.zulip.org/#narrow/stream/92-learning/topic/Tornado",
);
override(message_lists.current, "get", (id) => (id === 100 ? selected_message : undefined));
let success_function;
override(channel, "get", (opts) => {
success_function = opts.success;
});
// zjquery does not simulate caret handling, so we provide
// our own versions of val() and caret()
let textarea_val = "";
let textarea_caret_pos;
$("textarea#compose-textarea").val = function () {
return textarea_val;
};
$("textarea#compose-textarea").caret = function (arg) {
if (arg === undefined) {
return textarea_caret_pos;
}
if (typeof arg === "number") {
textarea_caret_pos = arg;
return this;
}
/* This next block of mocking code is currently unused, but
is preserved, since it may be useful in the future. */
/* istanbul ignore next */
{
if (typeof arg !== "string") {
console.info(arg);
throw new Error("We expected the actual code to pass in a string.");
}
const before = textarea_val.slice(0, textarea_caret_pos);
const after = textarea_val.slice(textarea_caret_pos);
textarea_val = before + arg + after;
textarea_caret_pos += arg.length;
return this;
}
};
$("textarea#compose-textarea")[0] = "compose-textarea";
$("textarea#compose-textarea").attr("id", "compose-textarea");
override(text_field_edit, "insert", (elt, syntax) => {
assert.equal(elt, "compose-textarea");
assert.equal(syntax, "\n\ntranslated: [Quoting…]\n\n");
});
function set_compose_content_with_caret(content) {
const caret_position = content.indexOf("%");
content = content.slice(0, caret_position) + content.slice(caret_position + 1); // remove the "%"
textarea_val = content;
textarea_caret_pos = caret_position;
$("textarea#compose-textarea").trigger("focus");
}
function reset_test_state() {
// Reset `raw_content` property of `selected_message`.
delete selected_message.raw_content;
// Reset compose-box state.
textarea_val = "";
textarea_caret_pos = 0;
$("textarea#compose-textarea").trigger("blur");
}
function override_with_quote_text(quote_text) {
override(text_field_edit, "replace", (elt, old_syntax, new_syntax) => {
assert.equal(elt, "compose-textarea");
assert.equal(old_syntax, "translated: [Quoting…]");
assert.equal(
new_syntax(),
"translated: @_**Steve Stephenson|90** [said](https://chat.zulip.org/#narrow/stream/92-learning/topic/Tornado):\n" +
"```quote\n" +
`${quote_text}\n` +
"```",
);
});
}
let quote_text = "Testing caret position";
override_with_quote_text(quote_text);
set_compose_content_with_caret("hello %there"); // "%" is used to encode/display position of focus before change
compose_reply.quote_and_reply({message_id: 100});
success_function({
raw_content: quote_text,
});
reset_test_state();
// If the caret is initially positioned at 0, it should not
// add newlines before the quoted message.
override(text_field_edit, "insert", (elt, syntax) => {
assert.equal(elt, "compose-textarea");
assert.equal(syntax, "translated: [Quoting…]\n\n");
});
set_compose_content_with_caret("%hello there");
compose_reply.quote_and_reply({message_id: 100});
quote_text = "Testing with caret initially positioned at 0.";
override_with_quote_text(quote_text);
success_function({
raw_content: quote_text,
});
override_rewire(compose_reply, "respond_to_message", () => {
// Reset compose state to replicate the re-opening of compose-box.
textarea_val = "";
textarea_caret_pos = 0;
$("textarea#compose-textarea").trigger("focus");
});
reset_test_state();
// If the compose-box is close, or open with no content while
// quoting a message, the quoted message should be placed
// at the beginning of compose-box.
override(message_lists.current, "selected_id", () => 100);
compose_reply.quote_and_reply({});
quote_text = "Testing with compose-box closed initially.";
override_with_quote_text(quote_text);
success_function({
raw_content: quote_text,
});
reset_test_state();
// If the compose-box is already open while quoting a message,
// but contains content like `\n\n \n` (only whitespaces and
// newlines), the compose-box should re-open and thus the quoted
// message should start from the beginning of compose-box.
set_compose_content_with_caret(" \n\n \n %");
compose_reply.quote_and_reply({});
quote_text = "Testing with compose-box containing whitespaces and newlines only.";
override_with_quote_text(quote_text);
success_function({
raw_content: quote_text,
});
reset_test_state();
// When there is already 1 newline before and after the caret,
// only 1 newline is added before and after the quoted message.
override(text_field_edit, "insert", (elt, syntax) => {
assert.equal(elt, "compose-textarea");
assert.equal(syntax, "\ntranslated: [Quoting…]\n");
});
set_compose_content_with_caret("1st line\n%\n2nd line");
compose_reply.quote_and_reply({});
quote_text = "Testing with caret on a new line between 2 lines of text.";
override_with_quote_text(quote_text);
success_function({
raw_content: quote_text,
});
reset_test_state();
// When there are many (>=2) newlines before and after the caret,
// no newline is added before or after the quoted message.
override(text_field_edit, "insert", (elt, syntax) => {
assert.equal(elt, "compose-textarea");
assert.equal(syntax, "translated: [Quoting…]");
});
set_compose_content_with_caret("lots of\n\n\n\n%\n\n\nnewlines");
compose_reply.quote_and_reply({});
quote_text = "Testing with caret on a new line between many empty newlines.";
override_with_quote_text(quote_text);
success_function({
raw_content: quote_text,
});
});
run_test("set_compose_box_top", () => {
let compose_top = "";
$("#compose").css = (arg, val) => {
assert.equal(arg, "top");
compose_top = val;
};
$("#navbar-fixed-container").set_height(50);
compose_ui.set_compose_box_top(true);
assert.equal(compose_top, "50px");
compose_ui.set_compose_box_top(false);
assert.equal(compose_top, "");
});
run_test("test_compose_height_changes", ({override, override_rewire}) => {
let autosize_destroyed = false;
override(autosize, "destroy", () => {
autosize_destroyed = true;
});
let compose_box_top_set = false;
override_rewire(compose_ui, "set_compose_box_top", (set_top) => {
compose_box_top_set = set_top;
});
compose_ui.make_compose_box_full_size();
assert.ok($("#compose").hasClass("compose-fullscreen"));
assert.ok(compose_ui.is_full_size());
assert.ok(autosize_destroyed);
assert.ok(compose_box_top_set);
compose_ui.make_compose_box_original_size();
assert.ok(!$("#compose").hasClass("compose-fullscreen"));
assert.ok(!compose_ui.is_full_size());
assert.ok(!compose_box_top_set);
});
const $textarea = $("textarea#compose-textarea");
$textarea.get = () => ({
setSelectionRange(start, end) {
$textarea.range = () => ({
start,
end,
text: $textarea.val().slice(start, end),
length: end - start,
});
},
});
// The argument `text_representation` is a string representing the text
// in the compose box, where `<` and `>` denote the start and end of any
// selection, and `|` represents the cursor when there is no selection.
// To work as expected, the string must contain either a `|`, or a `<`
// followed by a `>` with some text in between.
function init_textarea_state(text_representation) {
$textarea.val = () => text_representation.replaceAll(/[<>|]/g, "");
$textarea.range = text_representation.includes("|")
? () => ({
start: text_representation.indexOf("|"),
end: text_representation.indexOf("|"),
text: "",
length: 0,
})
: () => ({
start: text_representation.indexOf("<"),
end: text_representation.indexOf(">") - 1,
text: text_representation.slice(
text_representation.indexOf("<") + 1,
text_representation.indexOf(">"),
),
length: text_representation.indexOf(">") - text_representation.indexOf("<") - 1,
});
}
// Returns a string representing the text in the compose box, of the same
// style as the argument `text_representation` of the above function.
function get_textarea_state() {
const before_text = $textarea.val().slice(0, $textarea.range().start);
const selected_text = $textarea.range().text ? "<" + $textarea.range().text + ">" : "|";
const after_text = $textarea.val().slice($textarea.range().end);
return before_text + selected_text + after_text;
}
run_test("format_text - bold and italic", ({override}) => {
override(text_field_edit, "set", (_field, text) => {
$textarea.val = () => text;
});
override(
text_field_edit,
"wrapSelection",
(_field, syntax_start, syntax_end = syntax_start) => {
const new_val =
$textarea.val().slice(0, $textarea.range().start) +
syntax_start +
$textarea.val().slice($textarea.range().start, $textarea.range().end) +
syntax_end +
$textarea.val().slice($textarea.range().end);
$textarea.val = () => new_val;
const new_range = {
start: $textarea.range().start + syntax_start.length,
end: $textarea.range().end + syntax_start.length,
text: $textarea
.val()
.slice(
$textarea.range().start + syntax_start.length,
$textarea.range().end + syntax_start.length,
),
length: $textarea.range().end - $textarea.range().start,
};
$textarea.range = () => new_range;
},
);
// Bold selected text
init_textarea_state("before <abc> after");
compose_ui.format_text($textarea, "bold");
assert.equal(get_textarea_state(), "before **<abc>** after");
// Bold, no selection
init_textarea_state("|");
compose_ui.format_text($textarea, "bold");
assert.equal(get_textarea_state(), "**|**");
// Undo bold selected text, syntax not selected
init_textarea_state("before **<abc>** after");
compose_ui.format_text($textarea, "bold");
assert.equal(get_textarea_state(), "before <abc> after");
// Undo bold selected text, syntax selected
init_textarea_state("before <**abc**> after");
compose_ui.format_text($textarea, "bold");
assert.equal(get_textarea_state(), "before <abc> after");
// Italic selected text
init_textarea_state("before <abc> after");
compose_ui.format_text($textarea, "italic");
assert.equal(get_textarea_state(), "before *<abc>* after");
// Italic, no selection
init_textarea_state("|");
compose_ui.format_text($textarea, "italic");
// Undo italic selected text, syntax not selected
init_textarea_state("before *<abc>* after");
compose_ui.format_text($textarea, "italic");
assert.equal(get_textarea_state(), "before <abc> after");
// Undo italic selected text, syntax selected
init_textarea_state("before <*abc*> after");
compose_ui.format_text($textarea, "italic");
assert.equal(get_textarea_state(), "before <abc> after");
// Undo bold selected text, text is both italic and bold, syntax not selected.
init_textarea_state("before ***<abc>*** after");
compose_ui.format_text($textarea, "bold");
assert.equal(get_textarea_state(), "before *<abc>* after");
// Undo bold selected text, text is both italic and bold, syntax selected.
init_textarea_state("before <***abc***> after");
compose_ui.format_text($textarea, "bold");
assert.equal(get_textarea_state(), "before <*abc*> after");
// Undo italic selected text, text is both italic and bold, syntax not selected.
init_textarea_state("before ***<abc>*** after");
compose_ui.format_text($textarea, "italic");
assert.equal(get_textarea_state(), "before **<abc>** after");
// Undo italic selected text, text is both italic and bold, syntax selected.
init_textarea_state("before <***abc***> after");
compose_ui.format_text($textarea, "italic");
assert.equal(get_textarea_state(), "before <**abc**> after");
});
run_test("format_text - bulleted and numbered lists", ({override}) => {
override(text_field_edit, "set", (_field, text) => {
$textarea.val = () => text;
});
// Toggling on bulleted list
init_textarea_state("<first_item\nsecond_item>");
compose_ui.format_text($textarea, "bulleted");
assert.equal(get_textarea_state(), "<- first_item\n- second_item>");
init_textarea_state("<\nfirst_item\nsecond_item>");
compose_ui.format_text($textarea, "bulleted");
assert.equal(get_textarea_state(), "<- \n- first_item\n- second_item>");
// Toggling off bulleted list
init_textarea_state("<- first_item\n- second_item>");
compose_ui.format_text($textarea, "bulleted");
assert.equal(get_textarea_state(), "<first_item\nsecond_item>");
init_textarea_state("<* first_item\n* second_item>");
compose_ui.format_text($textarea, "bulleted");
assert.equal(get_textarea_state(), "<first_item\nsecond_item>");
// Toggling on numbered list
init_textarea_state("<first_item\nsecond_item>");
compose_ui.format_text($textarea, "numbered");
assert.equal(get_textarea_state(), "<1. first_item\n2. second_item>");
init_textarea_state("<first_item\nsecond_item\n>");
compose_ui.format_text($textarea, "numbered");
assert.equal(get_textarea_state(), "<1. first_item\n2. second_item>\n");
init_textarea_state("before_first\nfirst_<item\nsecond>_item\nafter_last");
compose_ui.format_text($textarea, "numbered");
// // Notice the blank lines inserted right before and after the list to visually demarcate it.
// // Had the blank line after `second_item` not been inserted, `after_last` would have been
// // (wrongly) indented as part of the list's last item too.
assert.equal(
get_textarea_state(),
"before_first\n\n<1. first_item\n2. second_item>\n\nafter_last",
);
// Toggling off numbered list
init_textarea_state("<1. first_item\n2. second_item>");
compose_ui.format_text($textarea, "numbered");
assert.equal(get_textarea_state(), "<first_item\nsecond_item>");
init_textarea_state("1. first_<item\n2. second>_item");
compose_ui.format_text($textarea, "numbered");
assert.equal(get_textarea_state(), "<first_item\nsecond_item>");
});
run_test("format_text - strikethrough", ({override}) => {
override(text_field_edit, "set", (_field, text) => {
$textarea.val = () => text;
});
override(text_field_edit, "wrapSelection", (_field, syntax_start, syntax_end) => {
const new_val =
$textarea.val().slice(0, $textarea.range().start) +
syntax_start +
$textarea.val().slice($textarea.range().start, $textarea.range().end) +
syntax_end +
$textarea.val().slice($textarea.range().end);
$textarea.val = () => new_val;
const new_range = {
start: $textarea.range().start + syntax_start.length,
end: $textarea.range().end + syntax_start.length,
text: $textarea
.val()
.slice(
$textarea.range().start + syntax_start.length,
$textarea.range().end + syntax_start.length,
),
length: $textarea.range().end - $textarea.range().start,
};
$textarea.range = () => new_range;
});
// Strikethrough selected text
init_textarea_state("before <abc> after");
compose_ui.format_text($textarea, "strikethrough");
assert.equal(get_textarea_state(), "before ~~<abc>~~ after");
// Strikethrough, no selection
init_textarea_state("|");
compose_ui.format_text($textarea, "strikethrough");
assert.equal(get_textarea_state(), "~~|~~");
// Undo strikethrough selected text, syntax not selected
init_textarea_state("before ~~<abc>~~ after");
compose_ui.format_text($textarea, "strikethrough");
assert.equal(get_textarea_state(), "before <abc> after");
// // Undo strikethrough selected text, syntax selected
init_textarea_state("before <~~abc~~> after");
compose_ui.format_text($textarea, "strikethrough");
assert.equal(get_textarea_state(), "before <abc> after");
});
run_test("format_text - latex", ({override}) => {
override(text_field_edit, "set", (_field, text) => {
$textarea.val = () => text;
});
override(text_field_edit, "wrapSelection", (_field, syntax_start, syntax_end) => {
const new_val =
$textarea.val().slice(0, $textarea.range().start) +
syntax_start +
$textarea.val().slice($textarea.range().start, $textarea.range().end) +
syntax_end +
$textarea.val().slice($textarea.range().end);
$textarea.val = () => new_val;
const new_range = {
start: $textarea.range().start + syntax_start.length,
end: $textarea.range().end + syntax_start.length,
text: $textarea
.val()
.slice(
$textarea.range().start + syntax_start.length,
$textarea.range().end + syntax_start.length,
),
length: $textarea.range().end - $textarea.range().start,
};
$textarea.range = () => new_range;
});
// Latex selected text
init_textarea_state("before <abc> after");
compose_ui.format_text($textarea, "latex");
assert.equal(get_textarea_state(), "before $$<abc>$$ after");
init_textarea_state("Before\nBefore <this should\nbe math> After\nAfter");
compose_ui.format_text($textarea, "latex");
assert.equal(
get_textarea_state(),
"Before\nBefore \n```math\n<this should\nbe math>\n```\n After\nAfter",
);
init_textarea_state("<abc\ndef>");
compose_ui.format_text($textarea, "latex");
assert.equal(get_textarea_state(), "```math\n<abc\ndef>\n```");
// No selection
init_textarea_state("|");
compose_ui.format_text($textarea, "latex");
assert.equal(get_textarea_state(), "```math\n|\n```");
// Undo latex selected text, syntax not selected
init_textarea_state("before $$<abc>$$ after");
compose_ui.format_text($textarea, "latex");
assert.equal(get_textarea_state(), "before <abc> after");
init_textarea_state("Before\n```math\n<abc\ndef>\n```\nAfter");
compose_ui.format_text($textarea, "latex");
assert.equal(get_textarea_state(), "Before\n<abc\ndef>\nAfter");
// Undo latex selected text, syntax selected
init_textarea_state("before <$$abc$$> after");
compose_ui.format_text($textarea, "latex");
assert.equal(get_textarea_state(), "before <abc> after");
init_textarea_state("Before\n<```math\nabc\ndef\n```>\nAfter");
compose_ui.format_text($textarea, "latex");
assert.equal(get_textarea_state(), "Before\n<abc\ndef>\nAfter");
});
run_test("format_text - code", ({override}) => {
override(text_field_edit, "set", (_field, text) => {
$textarea.val = () => text;
});
override(text_field_edit, "wrapSelection", (_field, syntax_start, syntax_end) => {
const new_val =
$textarea.val().slice(0, $textarea.range().start) +
syntax_start +
$textarea.val().slice($textarea.range().start, $textarea.range().end) +
syntax_end +
$textarea.val().slice($textarea.range().end);
$textarea.val = () => new_val;
const new_range = {
start: $textarea.range().start + syntax_start.length,
end: $textarea.range().end + syntax_start.length,
text: $textarea
.val()
.slice(
$textarea.range().start + syntax_start.length,
$textarea.range().end + syntax_start.length,
),
length: $textarea.range().end - $textarea.range().start,
};
$textarea.range = () => new_range;
});
// Code selected text
init_textarea_state("before <abc> after");
compose_ui.format_text($textarea, "code");
assert.equal(get_textarea_state(), "before `<abc>` after");
init_textarea_state("Before\nBefore <this should\nbe code> After\nAfter");
compose_ui.format_text($textarea, "code");
assert.equal(
get_textarea_state(),
"Before\nBefore \n```\n<this should\nbe code>\n```\n After\nAfter",
);
init_textarea_state("<abc\ndef>");
compose_ui.format_text($textarea, "code");
assert.equal(get_textarea_state(), "```\n<abc\ndef>\n```");
// Code, no selection
init_textarea_state("|");
compose_ui.format_text($textarea, "code");
assert.equal(get_textarea_state(), "```\n|\n```");
// Undo code selected text, syntax not selected
init_textarea_state("before `<abc>` after");
compose_ui.format_text($textarea, "code");
assert.equal(get_textarea_state(), "before <abc> after");
init_textarea_state("Before\n```\n<abc\ndef>\n```\nAfter");
compose_ui.format_text($textarea, "code");
assert.equal(get_textarea_state(), "Before\n<abc\ndef>\nAfter");
// Undo code selected text, syntax selected
init_textarea_state("before <`abc`> after");
compose_ui.format_text($textarea, "code");
assert.equal(get_textarea_state(), "before <abc> after");
init_textarea_state("before\n<```\nabc\ndef\n```>\nafter");
compose_ui.format_text($textarea, "code");
assert.equal(get_textarea_state(), "before\n<abc\ndef>\nafter");
});
run_test("format_text - quote", ({override}) => {
override(text_field_edit, "set", (_field, text) => {
$textarea.val = () => text;
});
override(text_field_edit, "wrapSelection", (_field, syntax_start, syntax_end) => {
const new_val =
$textarea.val().slice(0, $textarea.range().start) +
syntax_start +
$textarea.val().slice($textarea.range().start, $textarea.range().end) +
syntax_end +
$textarea.val().slice($textarea.range().end);
$textarea.val = () => new_val;
const new_range = {
start: $textarea.range().start + syntax_start.length,
end: $textarea.range().end + syntax_start.length,
text: $textarea
.val()
.slice(
$textarea.range().start + syntax_start.length,
$textarea.range().end + syntax_start.length,
),
length: $textarea.range().end - $textarea.range().start,
};
$textarea.range = () => new_range;
});
// Quote selected text
init_textarea_state("before <abc> after");
compose_ui.format_text($textarea, "quote");
assert.equal(get_textarea_state(), "before \n```quote\n<abc>\n```\n after");
init_textarea_state("<abc\ndef>");
compose_ui.format_text($textarea, "quote");
assert.equal(get_textarea_state(), "```quote\n<abc\ndef>\n```");
// Quote, no selection
init_textarea_state("|");
compose_ui.format_text($textarea, "quote");
assert.equal(get_textarea_state(), "```quote\n|\n```");
// Undo quote selected text, syntax not selected
init_textarea_state("```quote\n<abc>\n```");
compose_ui.format_text($textarea, "quote");
assert.equal(get_textarea_state(), "<abc>");
init_textarea_state("before\n```quote\n<abc\ndef>\n```\nafter");
compose_ui.format_text($textarea, "quote");
assert.equal(get_textarea_state(), "before\n<abc\ndef>\nafter");
// Undo quote selected text, syntax selected
init_textarea_state("<```quote\nabc\n```>");
compose_ui.format_text($textarea, "quote");
assert.equal(get_textarea_state(), "<abc>");
init_textarea_state("before\n<```quote\nabc\ndef\n```>\nafter");
compose_ui.format_text($textarea, "quote");
assert.equal(get_textarea_state(), "before\n<abc\ndef>\nafter");
});
run_test("format_text - spoiler", ({override}) => {
override(text_field_edit, "set", (_field, text) => {
$textarea.val = () => text;
});
override(text_field_edit, "wrapSelection", (_field, syntax_start, syntax_end) => {
const new_val =
$textarea.val().slice(0, $textarea.range().start) +
syntax_start +
$textarea.val().slice($textarea.range().start, $textarea.range().end) +
syntax_end +
$textarea.val().slice($textarea.range().end);
$textarea.val = () => new_val;
// Since, the original selection is not retained for spoiler,
// resetting range on wrapping selection is not required.
});
// Spoiler selected text
init_textarea_state("before <abc> after");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before \n```spoiler <Header>\nabc\n```\n after");
init_textarea_state("before <abc\ndef> after");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before \n```spoiler <Header>\nabc\ndef\n```\n after");
// Spoiler, no selection
init_textarea_state("before | after");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before \n```spoiler <Header>\n\n```\n after");
// Undo spoiler, only header selected
init_textarea_state("before\n```spoiler <Header>\nabc\n```\nafter");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before\n<Header\nabc>\nafter");
init_textarea_state("before\n```spoiler |\nabc\n```\nafter");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before\n<abc>\nafter");
// Undo spoiler, only content selected
init_textarea_state("before\n```spoiler Header\n<abc>\n```\nafter");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before\n<Header\nabc>\nafter");
init_textarea_state("before\n```spoiler \n<abc>\n```\nafter");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before\n<abc>\nafter");
// Undo spoiler, content and header selected
init_textarea_state("before\n```spoiler <Header\nabc>\n```\nafter");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before\n<Header\nabc>\nafter");
init_textarea_state("before\n```spoiler <\nabc>\n```\nafter");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before\n<abc>\nafter");
// Undo spoiler, syntax selected
init_textarea_state("before\n<```spoiler Header\nabc\n```>\nafter");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before\n<Header\nabc>\nafter");
init_textarea_state("before\n<```spoiler \nabc\n```>\nafter");
compose_ui.format_text($textarea, "spoiler");
assert.equal(get_textarea_state(), "before\n<abc>\nafter");
});
run_test("format_text - link", ({override}) => {
override(text_field_edit, "set", (_field, text) => {
$textarea.val = () => text;
});
override(text_field_edit, "wrapSelection", (_field, syntax_start, syntax_end) => {
const new_val =
$textarea.val().slice(0, $textarea.range().start) +
syntax_start +
$textarea.val().slice($textarea.range().start, $textarea.range().end) +
syntax_end +
$textarea.val().slice($textarea.range().end);
$textarea.val = () => new_val;
// Since, the original selection is not retained for spoiler,
// resetting range on wrapping selection is not required.
});
// Link selected text
init_textarea_state("before <abc> after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before [abc](<url>) after");
// Link, no selection
init_textarea_state("|");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "[](<url>)");
// Undo link, url selected
init_textarea_state("before [](<url>) after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before | after");
init_textarea_state("before [](|) after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before | after");
init_textarea_state("before [](<def>) after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before <def> after");
init_textarea_state("before [abc](<url>) after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before abc| after");
init_textarea_state("before [abc](|) after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before abc| after");
init_textarea_state("before [abc](<def>) after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before abc <def> after");
// Undo link, description selected
init_textarea_state("before [|](def) after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before |def after");
init_textarea_state("before [|](url) after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before | after");
init_textarea_state("before [|]() after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before | after");
init_textarea_state("before [<abc>](def) after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before <abc> def after");
init_textarea_state("before [<abc>](url) after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before <abc> after");
init_textarea_state("before [<abc>]() after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before <abc> after");
// Undo link selected text, syntax selected
init_textarea_state("before <[abc](def)> after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before <abc def> after");
init_textarea_state("before <[abc](url)> after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before <abc> after");
init_textarea_state("before <[abc]()> after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before <abc> after");
init_textarea_state("before <[](def)> after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before <def> after");
init_textarea_state("before <[](url)> after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before | after");
init_textarea_state("before <[]()> after");
compose_ui.format_text($textarea, "link");
assert.equal(get_textarea_state(), "before | after");
});
run_test("markdown_shortcuts", ({override_rewire}) => {
let format_text_type;
override_rewire(compose_ui, "format_text", (_$textarea, type) => {
format_text_type = type;
});
const event = {
key: "b",
target: {
id: "compose-textarea",
},
stopPropagation: noop,
preventDefault: noop,
};
function all_markdown_test(isCtrl, isCmd) {
// Test bold:
// Mac env = Cmd+b
// Windows/Linux = Ctrl+b
event.key = "b";
event.ctrlKey = isCtrl;
event.metaKey = isCmd;
compose_ui.handle_keydown(event, $("textarea#compose-textarea"));
assert.equal(format_text_type, "bold");
format_text_type = undefined;
// Test italic:
// Mac = Cmd+I
// Windows/Linux = Ctrl+I
// We use event.key = "I" to emulate user using Caps Lock key.
event.key = "I";
event.shiftKey = false;
compose_ui.handle_keydown(event, $("textarea#compose-textarea"));
assert.equal(format_text_type, "italic");
format_text_type = undefined;
// Test link insertion:
// Mac = Cmd+Shift+L
// Windows/Linux = Ctrl+Shift+L
event.key = "l";
event.shiftKey = true;
compose_ui.handle_keydown(event, $("textarea#compose-textarea"));
assert.equal(format_text_type, "link");
format_text_type = undefined;
}
// This function cross tests the Cmd/Ctrl + Markdown shortcuts in
// Mac and Linux/Windows environments. So in short, this tests
// that e.g. Cmd+B should be ignored on Linux/Windows and Ctrl+B
// should be ignored on Mac.
function os_specific_markdown_test(isCtrl, isCmd) {
event.ctrlKey = isCtrl;
event.metaKey = isCmd;
event.key = "b";
compose_ui.handle_keydown(event, $("textarea#compose-textarea"));
assert.equal(format_text_type, undefined);
event.key = "i";
event.shiftKey = false;
compose_ui.handle_keydown(event, $("textarea#compose-textarea"));
assert.equal(format_text_type, undefined);
event.key = "l";
event.shiftKey = true;
compose_ui.handle_keydown(event, $("textarea#compose-textarea"));
assert.equal(format_text_type, undefined);
}
// These keyboard shortcuts differ as to what key one should use
// on MacOS vs. other platforms: Cmd (Mac) vs. Ctrl (non-Mac).
// Default (Linux/Windows) userAgent tests:
navigator.platform = "";
// Check all the Ctrl + Markdown shortcuts work correctly
all_markdown_test(true, false);
// The Cmd + Markdown shortcuts should do nothing on Linux/Windows
os_specific_markdown_test(false, true);
// Setting following platform to test in mac env
navigator.platform = "MacIntel";
// Mac userAgent tests:
// The Ctrl + Markdown shortcuts should do nothing on mac
os_specific_markdown_test(true, false);
// Check all the Cmd + Markdown shortcuts work correctly
all_markdown_test(false, true);
// Reset userAgent
navigator.userAgent = "";
});
run_test("right-to-left", () => {
const $textarea = $("textarea#compose-textarea");
const event = {
key: "A",
};
assert.equal($textarea.hasClass("rtl"), false);
$textarea.val("```quote\nمرحبا");
compose_ui.handle_keyup(event, $("textarea#compose-textarea"));
assert.equal($textarea.hasClass("rtl"), true);
$textarea.val("```quote foo");
compose_ui.handle_keyup(event, $textarea);
assert.equal($textarea.hasClass("rtl"), false);
});
const get_focus_area = compose_ui._get_focus_area;
run_test("get_focus_area", () => {
assert.equal(get_focus_area("private", {}), "#private_message_recipient");
assert.equal(
get_focus_area("private", {
private_message_recipient: "bob@example.com",
}),
"textarea#compose-textarea",
);
assert.equal(get_focus_area("stream", {}), "#compose_select_recipient_widget_wrapper");
assert.equal(
get_focus_area("stream", {stream_name: "fun", stream_id: 4}),
"input#stream_message_recipient_topic",
);
assert.equal(
get_focus_area("stream", {stream_name: "fun", stream_id: 4, topic: "more"}),
"textarea#compose-textarea",
);
assert.equal(
get_focus_area("stream", {
stream_id: 4,
topic: "more",
trigger: "clear topic button",
}),
"input#stream_message_recipient_topic",
);
});