From 61001d0e9a7dfc18d8350969a34fc58a4cd46bb7 Mon Sep 17 00:00:00 2001
From: Hayden Betts <haydenbetts@gmail.com>
Date: Wed, 27 Jun 2018 10:07:21 -0700
Subject: [PATCH] WIP Fix flicker when user mouses over the very leftmost edge
 of party member avatar (#10407)

* added 1px margin-right to .member-stats

* added unit test for flicker prevention style

* remove .only() from unit test

* rewrote margin test using computed style
---
 .../unit/specs/components/memberDetails.js    | 23 +++++++++++++++++++
 website/client/components/memberDetails.vue   |  1 +
 2 files changed, 24 insertions(+)
 create mode 100644 test/client/unit/specs/components/memberDetails.js

diff --git a/test/client/unit/specs/components/memberDetails.js b/test/client/unit/specs/components/memberDetails.js
new file mode 100644
index 0000000000..37c0f915fd
--- /dev/null
+++ b/test/client/unit/specs/components/memberDetails.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import MemberDetailsComponent from 'client/components/memberDetails.vue';
+
+describe('Members Details Component', () => {
+  let CTor;
+  let vm;
+
+  beforeEach(() => {
+    CTor = Vue.extend(MemberDetailsComponent);
+    vm = new CTor().$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('prevents flickering by setting a 1px margin-right on elements of class member-stats', () => {
+    const memberstats = vm.$el.querySelector('.member-stats');
+    const style = window.getComputedStyle(memberstats, null);
+    const marginRightProp = style.getPropertyValue('margin-right');
+    expect(marginRightProp).to.equal('1');
+  });
+});
diff --git a/website/client/components/memberDetails.vue b/website/client/components/memberDetails.vue
index e6cf6ca00d..478b145f92 100644
--- a/website/client/components/memberDetails.vue
+++ b/website/client/components/memberDetails.vue
@@ -48,6 +48,7 @@
   .member-stats {
     padding-left: 12px;
     padding-right: 24px;
+    margin-right: 1px;
     opacity: 1;
     transition: width 0.15s ease-out;
   }