From 22c5fb20b4a118dffc7669ac563ffd24c0ef9634 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 25 Jul 2017 12:22:47 +0200
Subject: [PATCH] FIX: emoji-picker broken and skipped specs

---
 .../discourse/components/emoji-picker.js.es6  | 18 +++---
 .../acceptance/emoji-picker-test.js.es6       | 59 +++++++------------
 2 files changed, 32 insertions(+), 45 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/emoji-picker.js.es6 b/app/assets/javascripts/discourse/components/emoji-picker.js.es6
index f79a58669a0..b9a4b777817 100644
--- a/app/assets/javascripts/discourse/components/emoji-picker.js.es6
+++ b/app/assets/javascripts/discourse/components/emoji-picker.js.es6
@@ -71,13 +71,7 @@ export default Ember.Component.extend({
       $.each($results.find(".emoji.diversity"), (_, button) => this._setButtonBackground(button, true) );
     }
 
-    $picker
-      .find(".diversity-picker .diversity-scale")
-      .removeClass("selected");
-
-    $picker
-      .find(`.diversity-picker .diversity-scale[data-level="${this.get("selectedDiversity")}"]`)
-      .addClass("selected");
+    this._updateSelectedDiversity();
   },
 
   @observes("recentEmojis")
@@ -141,9 +135,19 @@ export default Ember.Component.extend({
       this._loadCategoriesEmojis();
       this._positionPicker();
       this._scrollTo();
+      this._updateSelectedDiversity();
     });
   },
 
+  _updateSelectedDiversity() {
+    const $diversityPicker = $picker.find(".diversity-picker");
+
+    $diversityPicker.find(".diversity-scale").removeClass("selected");
+    $diversityPicker
+      .find(`.diversity-scale[data-level="${this.get("selectedDiversity")}"]`)
+      .addClass("selected");
+  },
+
   _sectionLoadingCheck() {
     _checkTimeout = setTimeout(() => { this._sectionLoadingCheck(); }, 500);
     Ember.run.throttle(this, this._checkVisibleSection, 100);
diff --git a/test/javascripts/acceptance/emoji-picker-test.js.es6 b/test/javascripts/acceptance/emoji-picker-test.js.es6
index 0575bcc48e8..56a0f2b9265 100644
--- a/test/javascripts/acceptance/emoji-picker-test.js.es6
+++ b/test/javascripts/acceptance/emoji-picker-test.js.es6
@@ -47,22 +47,7 @@ QUnit.test("emojis can be hovered to display info", assert => {
   });
 });
 
-QUnit.skip("emoji picker has sections", assert => {
-  visit("/t/internationalization-localization/280");
-  click("#topic-footer-buttons .btn.create");
-  click("button.emoji.btn");
-
-  click(".emoji-picker .categories-column button[title='travel']");
-  andThen(() => {
-    assert.notEqual(
-      find('.emoji-picker .list').scrollTop(),
-      0,
-      "it scrolls to section"
-    );
-  });
-});
-
-QUnit.skip("emoji picker triggers event when picking emoji", assert => {
+QUnit.test("emoji picker triggers event when picking emoji", assert => {
   visit("/t/internationalization-localization/280");
   click("#topic-footer-buttons .btn.create");
   click("button.emoji.btn");
@@ -82,7 +67,6 @@ QUnit.test("emoji picker has a list of recently used emojis", assert => {
   click("#topic-footer-buttons .btn.create");
   click("button.emoji.btn");
 
-  click(".emoji-picker .clear-recent");
   click(".emoji-picker .section[data-section='people'] button.emoji[title='grinning']");
   andThen(() => {
     assert.equal(
@@ -120,48 +104,47 @@ QUnit.test("emoji picker has a list of recently used emojis", assert => {
   });
 });
 
-QUnit.skip("emoji picker correctly orders recently used emojis", assert => {
+QUnit.test("emoji picker correctly orders recently used emojis", assert => {
   visit("/t/internationalization-localization/280");
   click("#topic-footer-buttons .btn.create");
+
   click("button.emoji.btn");
-  click(".emoji-picker .clear-recent");
-
-  click(".emoji-picker button[title='grinning']");
-  click(".emoji-picker button[title='sunglasses']");
-  click(".emoji-picker button[title='grinning']");
   andThen(() => {
-    assert.equal(
-      find('.section[data-section="recent"] .section-group button.emoji').length,
-      2,
-      "it has multiple recent emojis"
-    );
+    click(".emoji-picker button[title='sunglasses']");
+    click(".emoji-picker button[title='grinning']");
+    andThen(() => {
+      assert.equal(
+        find('.section[data-section="recent"] .section-group button.emoji').length,
+        2,
+        "it has multiple recent emojis"
+      );
 
-    assert.equal(
-      find('.section[data-section="recent"] .section-group button.emoji').first().attr('src'),
-      `/images/emoji/emoji_one/grinning.png?v=${v}`,
-      "it puts the last used emoji in first"
-    );
+      assert.equal(
+        /grinning/.test(find('.section[data-section="recent"] .section-group button.emoji').first().css('background-image')),
+        true,
+        "it puts the last used emoji in first"
+      );
+    });
   });
 });
 
-QUnit.skip("emoji picker lazy loads emojis", assert => {
+QUnit.test("emoji picker lazy loads emojis", assert => {
   visit("/t/internationalization-localization/280");
   click("#topic-footer-buttons .btn.create");
 
   click("button.emoji.btn");
 
   andThen(() => {
-    const $emoji = $('.emoji-picker button[title="massage_woman"] img');
     assert.equal(
-      $emoji.attr('src'),
-      "",
+      find('.emoji-picker button[title="massage_woman"]').css("background-image"),
+      "none",
       "it doesn't load invisible emojis"
     );
   });
 });
 
 
-QUnit.skip("emoji picker persists state", assert => {
+QUnit.test("emoji picker persists state", assert => {
   visit("/t/internationalization-localization/280");
   click("#topic-footer-buttons .btn.create");