Fix UI tests

src/directives/compose_area.ts

@@ -470,22 +470,27 @@ export default [
 
                 // Show emoji picker element
                 function showEmojiPicker() {
-                    const emojiPicker = wrapper[0].querySelector('div.twemoji-picker');
+                    // If the emoji picker is triggered too early, it's possible that the picker element
+                    // has not yet been fully loaded (e.g. during UI tests). Therefore enqueue the event
+                    // handler at the end of the event loop.
+                    $timeout(() => {
+                        const emojiPicker = wrapper[0].querySelector('div.twemoji-picker');
 
-                    // Show
-                    emojiKeyboard.addClass('active');
-                    emojiTrigger.addClass(TRIGGER_ACTIVE_CSS_CLASS);
+                        // Show
+                        emojiKeyboard.addClass('active');
+                        emojiTrigger.addClass(TRIGGER_ACTIVE_CSS_CLASS);
 
-                    // Find some selectors
-                    const allEmoji = angular.element(emojiPicker.querySelectorAll('.content .em'));
-                    const allEmojiTabs = angular.element(emojiPicker.querySelectorAll('.tab label img'));
+                        // Find some selectors
+                        const allEmoji = angular.element(emojiPicker.querySelectorAll('.content .em'));
+                        const allEmojiTabs = angular.element(emojiPicker.querySelectorAll('.tab label img'));
 
-                    // Add event handlers
-                    allEmoji.on('click', onEmojiChosen as any);
-                    allEmojiTabs.on('keydown', onEmojiTabSelected as any);
+                        // Add event handlers
+                        allEmoji.on('click', onEmojiChosen as any);
+                        allEmojiTabs.on('keydown', onEmojiTabSelected as any);
 
-                    // Focus compose area again
-                    $timeout(() => composeArea.focus());
+                        // Focus compose area again
+                        composeArea.focus();
+                    });
                 }
 
                 // Hide emoji picker element

tests/ui/run.ts

@@ -34,6 +34,20 @@ async function extractText(driver: WebDriver): Promise<string> {
     return driver.executeScript<string>(script);
 }
 
+/**
+ * Helper function to send a KeyDown event.
+ */
+async function sendKeyDown(driver: WebDriver, key: string): Promise<void> {
+    const script = `
+        const e = document.createEvent('HTMLEvents');
+        e.initEvent('keydown', false, true);
+        e.key = '${key}';
+        const element = document.querySelector("div.compose");
+        element.dispatchEvent(e);
+    `;
+    return driver.executeScript<void>(script);
+}
+
 /**
  * Helper function to send a KeyUp event.
  */
@@ -51,24 +65,24 @@ async function sendKeyUp(driver: WebDriver, key: string): Promise<void> {
 /**
  * The emoji trigger should toggle the emoji keyboard.
  */
-async function showEmojiSelector(driver: WebDriver) {
+async function buttonTogglesEmojiSelector(driver: WebDriver) {
     // Initially not visible
     expect(
-        await driver.findElement(emojiKeyboard).isDisplayed()
+        await driver.findElement(emojiKeyboard).isDisplayed(),
     ).to.be.false;
 
     // Show
     await driver.findElement(emojiTrigger).click();
 
     expect(
-        await driver.findElement(emojiKeyboard).isDisplayed()
+        await driver.findElement(emojiKeyboard).isDisplayed(),
     ).to.be.true;
 
     // Hide
     await driver.findElement(emojiTrigger).click();
 
     expect(
-        await driver.findElement(emojiKeyboard).isDisplayed()
+        await driver.findElement(emojiKeyboard).isDisplayed(),
     ).to.be.false;
 }
 
@@ -87,7 +101,8 @@ async function insertEmoji(driver: WebDriver) {
 
     // Insert beer
     await driver.findElement(By.className('em-food')).click();
-    await driver.findElement(By.css('.em[data-s=":beers:"]')).click();
+    const elem = await driver.findElement(By.css('.em[data-s=":beers:"]'));
+    await elem.click();
 
     // Validate emoji
     const emoji = await driver.findElement(composeArea).findElements(By.xpath('*'));
@@ -187,16 +202,16 @@ async function regression672(driver: WebDriver) {
 async function insertEmojiWithShortcode(driver: WebDriver) {
     // Insert text
     await driver.findElement(composeArea).click();
-    await driver.findElement(composeArea).sendKeys('hello :+1:');
-    await sendKeyUp(driver, ':');
+    await driver.findElement(composeArea).sendKeys('hello :+1');
+    await sendKeyDown(driver, ':');
 
     const text = await extractText(driver);
-    expect(text).to.equal('hello 👍');
+    expect(text).to.equal('hello 👍️');
 }
 
 // Register tests here
 const TESTS: Array<[string, Testfunc]> = [
-    ['Show and hide emoji selector', showEmojiSelector],
+    ['Show and hide emoji selector', buttonTogglesEmojiSelector],
     ['Insert emoji and text', insertEmoji],
     ['Insert three lines of text', insertNewline],
     ['Regression test #574', regression574],