puppeteer: Migrate mention test from casper.

Also add helper functions needed.
`select_item_via_typeahead` has been ported from casper
and is exactly same in puppeteer to as I couldn't find
any better way for that purpose.

frontend_tests/casper_tests/11-mention.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var common = require("../casper_lib/common.js");
-
-common.start_and_log_in();
-
-casper.waitUntilVisible("#zhome", function () {
-    casper.test.info("compose box visible");
-    casper.page.sendEvent("keypress", "c"); // brings up the compose box
-});
-
-casper.then(function () {
-    casper.fill('form[action^="/json/messages"]', {
-        stream_message_recipient_stream: "Verona",
-        stream_message_recipient_topic: "Test mention all",
-    });
-});
-common.select_item_via_typeahead("#compose-textarea", "@**all**", "all");
-
-casper.then(function () {
-    common.turn_off_press_enter_to_send();
-    casper.test.info("Checking for all everyone warning");
-    var stream_size = this.evaluate(function () {
-        return stream_data.get_sub("Verona").subscribers.size;
-    });
-    casper.test.info(stream_size);
-    var threshold = this.evaluate(function () {
-        compose.all_everyone_warn_threshold = 5;
-        return compose.all_everyone_warn_threshold;
-    });
-    casper.test.assertTrue(stream_size > threshold);
-    casper.test.info("Click Send Button");
-    casper.click("#compose-send-button");
-});
-
-casper.then(function () {
-    common.wait_for_text(
-        ".compose-all-everyone-msg",
-        "Are you sure you want to mention all",
-        function () {
-            casper.test.info("Warning message appears when mentioning @**all**");
-            casper.test.assertSelectorHasText(
-                ".compose-all-everyone-msg",
-                "Are you sure you want to mention all"
-            );
-            casper.click(".compose-all-everyone-confirm");
-        }
-    );
-
-    casper.waitWhileVisible(".compose-all-everyone-confirm", function () {
-        casper.test.info("Check that error messages are gone.");
-        casper.test.assertNotVisible(".compose-all-everyone-msg");
-        casper.test.assertNotVisible("#compose-send-status");
-    });
-});
-
-casper.then(function () {
-    common.expected_messages(
-        "zhome",
-        ["Verona > Test mention all"],
-        ['<p><span class="user-mention user-mention-me" ' + 'data-user-id="*">@all</span></p>']
-    );
-});
-
-common.then_log_out();
-
-casper.run(function () {
-    casper.test.done();
-});

frontend_tests/puppeteer_lib/common.js

@@ -415,6 +415,33 @@ class CommonUtils {
         await page.click(organization_settings_data_section);
     }
 
+    async select_item_via_typeahead(page, field_selector, str, item) {
+        console.log(`Looking in ${field_selector} to select ${str}, ${item}`);
+        await page.evaluate(
+            (field_selector, str, item) => {
+                // Set the value and then send a bogus keyup event to trigger
+                // the typeahead.
+                $(field_selector)
+                    .trigger("focus")
+                    .val(str)
+                    .trigger($.Event("keyup", {which: 0}));
+
+                // Trigger the typeahead.
+                // Reaching into the guts of Bootstrap Typeahead like this is not
+                // great, but I found it very hard to do it any other way.
+
+                const tah = $(field_selector).data().typeahead;
+                tah.mouseenter({
+                    currentTarget: $('.typeahead:visible li:contains("' + item + '")')[0],
+                });
+                tah.select();
+            },
+            field_selector,
+            str,
+            item,
+        );
+    }
+
     async run_test(test_function) {
         // Pass a page instance to test so we can take
         // a screenshot of it when the test fails.

frontend_tests/puppeteer_tests/09-mention.js

@@ -0,0 +1,41 @@
+"use strict";
+
+const assert = require("assert").strict;
+
+const common = require("../puppeteer_lib/common");
+
+async function test_mention(page) {
+    await common.log_in(page);
+    await page.keyboard.press("KeyC");
+    await page.waitForSelector("#compose", {visible: true});
+
+    await common.fill_form(page, 'form[action^="/json/messages"]', {
+        stream_message_recipient_stream: "Verona",
+        stream_message_recipient_topic: "Test mention all",
+    });
+    await common.select_item_via_typeahead(page, "#compose-textarea", "@**all**", "all");
+    await common.ensure_enter_does_not_send(page);
+
+    console.log("Checking for all everyone warning");
+    const stream_size = await page.evaluate(() => stream_data.get_sub("Verona").subscribers.size);
+    const threshold = await page.evaluate(() => {
+        compose.all_everyone_warn_threshold = 5;
+        return compose.all_everyone_warn_threshold;
+    });
+    assert(stream_size > threshold);
+    await page.click("#compose-send-button");
+
+    await common.wait_for_text(
+        page,
+        ".compose-all-everyone-msg",
+        "Are you sure you want to mention all",
+    );
+    await page.click(".compose-all-everyone-confirm");
+    await page.waitForSelector(".compose-all-everyone-msg", {hidden: true});
+    await page.waitForSelector("#compose-send-status", {hidden: true});
+
+    await common.check_messages_sent(page, "zhome", [["Verona > Test mention all", ["@all"]]]);
+    await common.log_out(page);
+}
+
+common.run_test(test_mention);