Emojiundo (#3405)

* Emoji and Emoji Undo

* Emoji Undo and tests

* Fix undo and add tests

* Clean up

* Add test and clean up

* Fix test

* Add crlf auto for hybrid environment

* Clean up

* Fix key down

* Clean up

* Clean up

* Support macOS

* Update entry

* Clean up

* Clean up

* Clean up

* Clean up

* Add test

* Fix ESLint

* Clean up

* Fix test

Co-authored-by: William Wong <compulim@hotmail.com>
Co-authored-by: William Wong <compulim@users.noreply.github.com>

.prettierrc.yml

@@ -1,5 +1,6 @@
 arrowParens: avoid
 bracketSpacing: true
+endOfLine: auto
 jsxBracketSameLine: false
 printWidth: 120
 proseWrap: preserve

CHANGELOG.md

@@ -131,6 +131,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Resolves [#3354](https://github.com/microsoft/BotFramework-WebChat/issues/3354). Added access key (<kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <kbd>A</kbd> for Windows and <kbd>CTRL</kbd> + <kbd>OPTION</kbd> + <kbd>A</kbd> for Mac) to suggested actions, by [@compulim](https://github.com/compulim), in PR [#3367](https://github.com/microsoft/BotFramework-WebChat/pull/3367)
 -  Resolves [#3247](https://github.com/microsoft/BotFramework-WebChat/issues/3247). Support activity ID on `useObserveScrollPosition` and `useScrollTo` hook, by [@compulim](https://github.com/compulim), in PR [#3372](https://github.com/microsoft/BotFramework-WebChat/pull/3372)
 -  Added support for [Redux DevTools](https://github.com/zalmoxisus/redux-devtools-extension), by [@tpdewolf](https://github.com/tpdewolf) and [@compulim](https://github.com/compulim), in PR [#3277](https://github.com/microsoft/BotFramework-WebChat/pull/3277)
+-  Resolves [#3249](https://github.com/microsoft/BotFramework-WebChat/issues/3249). Convert typed emoticons into Emoji, by [@corinagum](https://github.com/corinagum) and [@compulim](https://github.com/compulim), in PR [#3405](https://github.com/microsoft/BotFramework-WebChat/pull/3405)
 
 ### Fixed
 
@@ -140,6 +141,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Samples
 
 -  Fixes [#2828](https://github.com/microsoft.com/BotFramework-WebChat/issues/2828). Updated [`04.api/h.clear-after-idle` sample](https://microsoft.github.io/BotFramework-WebChat/04.api/h.clear-after-idle/), by [@compulim](https://github.com/compulim), in PR [#3376](https://github.com/microsoft/BotFramework-WebChat/pull/3376)
+-  Added custom Emoji set sample, by [@corinagum](https://github.com/corinagum), in PR [#3405](https://github.com/microsoft/BotFramework-WebChat/pull/3405)
 
 ## [4.9.2] - 2020-07-14
 

__tests__/emoji.customEmojiSet.js

@@ -0,0 +1,100 @@
+import { Key } from 'selenium-webdriver';
+
+import { timeouts } from './constants.json';
+import getSendBoxTextBox from './setup/elements/getSendBoxTextBox.js';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+describe('Emoji', () => {
+  let driver;
+
+  async function expectTextBox(value, selectionStart, selectionEnd) {
+    const textBox = await getSendBoxTextBox(driver);
+
+    // To improve test reliability, we will wait up to 500 ms for the expectation.
+    const getActual = () =>
+      driver.executeScript(
+        ({ selectionEnd, selectionStart, value }) => ({ selectionEnd, selectionStart, value }),
+        textBox
+      );
+
+    await driver
+      .wait(async () => {
+        const actual = await getActual();
+
+        return (
+          actual.selectionEnd === selectionEnd && actual.selectionStart == selectionStart && actual.value === value
+        );
+      }, timeouts.ui)
+      .catch(() => {});
+
+    const resultTask = getActual();
+
+    await expect(resultTask).resolves.toHaveProperty('value', value);
+    await expect(resultTask).resolves.toHaveProperty('selectionStart', selectionStart);
+    await expect(resultTask).resolves.toHaveProperty('selectionEnd', selectionEnd);
+  }
+
+  function sendKeyChord(modifier, key) {
+    return driver.actions().keyDown(modifier).sendKeys(key).keyUp(modifier).perform();
+  }
+
+  function sendControlKey(key) {
+    return sendKeyChord(Key.CONTROL, key);
+  }
+
+  function sendUndoKey() {
+    return sendControlKey('z');
+  }
+
+  test('disabled', async () => {
+    driver = (await setupWebDriver({ props: { styleOptions: { emojiSet: false } } })).driver;
+
+    const textBox = await getSendBoxTextBox(driver);
+
+    await driver.executeScript(textBox => textBox.focus(), textBox);
+    await driver.actions().sendKeys(':)').perform();
+
+    await expectTextBox(':)', 2, 2);
+
+    await sendUndoKey();
+
+    await expectTextBox('', 0, 0);
+  });
+
+  test('with only "100" is enabled', async () => {
+    driver = (await setupWebDriver({ props: { styleOptions: { emojiSet: { '100': '💯' } } } })).driver;
+
+    const textBox = await getSendBoxTextBox(driver);
+
+    await driver.executeScript(textBox => textBox.focus(), textBox);
+    await driver.actions().sendKeys(':) 100 :)').perform();
+
+    await expectTextBox(':) 💯 :)', 8, 8);
+  });
+
+  test('with conflicting emoticon 1', async () => {
+    driver = (await setupWebDriver({ props: { styleOptions: { emojiSet: { ':o': '😲', ':o)': '🤡' } } } })).driver;
+
+    const textBox = await getSendBoxTextBox(driver);
+
+    await driver.executeScript(textBox => textBox.focus(), textBox);
+    await driver.actions().sendKeys(':o)').perform();
+
+    await expectTextBox('😲)', 3, 3);
+  });
+
+  test('with conflicting emoticon 2', async () => {
+    driver = (await setupWebDriver({ props: { styleOptions: { emojiSet: { ':o)': '🤡', ':o': '😲' } } } })).driver;
+
+    const textBox = await getSendBoxTextBox(driver);
+
+    await driver.executeScript(textBox => textBox.focus(), textBox);
+    await driver.actions().sendKeys(':o)').perform();
+
+    await expectTextBox('😲)', 3, 3);
+  });
+});