From 29f6bf7dc60c656fbaa044ac98876c6e009529cb Mon Sep 17 00:00:00 2001
From: Bart Enkelaar <benkelaar@bol.com>
Date: Sat, 9 May 2020 19:27:20 +0200
Subject: [PATCH] =?UTF-8?q?fix(chat)=20-=20Mention=20dot=20doesn't=20show?=
 =?UTF-8?q?=20if=20mention=20is=20preceded=20by=20weird=20=E2=80=A6=20(#12?=
 =?UTF-8?q?177)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(chat) - Mention dot doesn't show if mention is preceded by weird mention

* fix(chat) - add unit test for chatCard

* fix(chat) - Improve unit test to only mount the wrapper once
---
 .../client/src/components/chat/chatCard.vue   | 33 +++--------
 .../unit/components/chat/chatCard.spec.js     | 58 +++++++++++++++++++
 .../unit/components/{ => static}/home.spec.js |  0
 3 files changed, 65 insertions(+), 26 deletions(-)
 create mode 100644 website/client/tests/unit/components/chat/chatCard.spec.js
 rename website/client/tests/unit/components/{ => static}/home.spec.js (100%)

diff --git a/website/client/src/components/chat/chatCard.vue b/website/client/src/components/chat/chatCard.vue
index 8741debc59..eaa4b9c919 100644
--- a/website/client/src/components/chat/chatCard.vue
+++ b/website/client/src/components/chat/chatCard.vue
@@ -200,7 +200,6 @@
 import moment from 'moment';
 import cloneDeep from 'lodash/cloneDeep';
 import escapeRegExp from 'lodash/escapeRegExp';
-import max from 'lodash/max';
 
 import habiticaMarkdown from 'habitica-markdown';
 import { mapState } from '@/libs/store';
@@ -245,28 +244,14 @@ export default {
     ...mapState({ user: 'user.data' }),
     isUserMentioned () {
       const message = this.msg;
+
+      if (message.highlight) return true;
+
       const { user } = this;
-
-      if (message.highlight) return message.highlight;
-
-      message.highlight = false;
-      const messageText = message.text.toLowerCase();
       const displayName = user.profile.name;
-      const username = user.auth.local && user.auth.local.username;
-      const mentioned = max([
-        messageText.indexOf(username.toLowerCase()),
-        messageText.indexOf(displayName.toLowerCase()),
-      ]);
-      if (mentioned === -1) return message.highlight;
-
-      const escapedDisplayName = escapeRegExp(displayName);
-      const escapedUsername = escapeRegExp(username);
-      const pattern = `@(${escapedUsername}|${escapedDisplayName})(\\b)`;
-      const precedingChar = messageText.substring(mentioned - 1, mentioned);
-      if (mentioned === 0 || precedingChar.trim() === '' || precedingChar === '@') {
-        const regex = new RegExp(pattern, 'i');
-        message.highlight = regex.test(messageText);
-      }
+      const { username } = user.auth.local;
+      const pattern = `@(${escapeRegExp(displayName)}|${escapeRegExp(username)})(\\b)`;
+      message.highlight = new RegExp(pattern, 'i').test(message.text);
 
       return message.highlight;
     },
@@ -319,11 +304,7 @@ export default {
         chatId: message.id,
       });
 
-      if (!message.likes[this.user._id]) {
-        message.likes[this.user._id] = true;
-      } else {
-        message.likes[this.user._id] = !message.likes[this.user._id];
-      }
+      message.likes[this.user._id] = !message.likes[this.user._id];
 
       this.$emit('message-liked', message);
       this.$root.$emit('bv::hide::tooltip');
diff --git a/website/client/tests/unit/components/chat/chatCard.spec.js b/website/client/tests/unit/components/chat/chatCard.spec.js
new file mode 100644
index 0000000000..473a48696c
--- /dev/null
+++ b/website/client/tests/unit/components/chat/chatCard.spec.js
@@ -0,0 +1,58 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import ChatCard from '@/components/chat/chatCard.vue';
+import Store from '@/libs/store';
+
+const localVue = createLocalVue();
+localVue.use(Store);
+
+describe('ChatCard', () => {
+  function createMessage (text) {
+    return { text, likes: {} };
+  }
+
+  function createUser (username) {
+    return {
+      auth: { local: { username } },
+      profile: { name: username },
+      contributor: {},
+      flags: {},
+    };
+  }
+
+  const message = createMessage('test');
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(ChatCard, {
+      propsData: { msg: message },
+      store: new Store({
+        state: {
+          user: { data: createUser('Tester') },
+        },
+        getters: {},
+        actions: {},
+      }),
+      localVue,
+      mocks: { $t: string => string },
+    });
+  });
+
+  it('shows the message text', () => {
+    expect(wrapper.find('div.text').text()).to.equal(message.text);
+    expect(wrapper.find('div.mentioned-icon').exists()).to.be.false;
+  });
+
+  it('shows mention dot if user is mentioned', () => {
+    wrapper.setProps({ msg: createMessage('@Tester') });
+
+    expect(wrapper.find('div.mentioned-icon').exists()).to.be.true;
+  });
+
+  // Bug fixed by https://github.com/HabitRPG/habitica/pull/12177
+  it('shows mention dot if user is mentioned after almostmention', () => {
+    wrapper.setProps({ msg: createMessage('thetester @Tester') });
+
+    expect(wrapper.find('div.mentioned-icon').exists()).to.be.true;
+  });
+});
diff --git a/website/client/tests/unit/components/home.spec.js b/website/client/tests/unit/components/static/home.spec.js
similarity index 100%
rename from website/client/tests/unit/components/home.spec.js
rename to website/client/tests/unit/components/static/home.spec.js