From 2d52fbdfcb91d6bcb497893550bc187554fd7589 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 1 Oct 2019 22:54:13 +0300
Subject: [PATCH 1/3] Update card with user information

---
 src/lang/en.js           |  11 +++-
 src/views/users/show.vue | 137 +++++++++++++++++++++------------------
 2 files changed, 81 insertions(+), 67 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 8088e441..c1ecd22a 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -238,11 +238,16 @@ export default {
     tags: 'Tags',
     moderator: 'Moderator',
     admin: 'Admin',
-    local: 'Local',
+    local: 'local',
+    external: 'external',
+    localUppercase: 'Local',
     nickname: 'Nickname',
-    deactivated: 'Deactivated',
     recentStatuses: 'Recent Statues',
-    showPrivateStatuses: 'Show private statuses'
+    showPrivateStatuses: 'Show private statuses',
+    roles: 'Roles',
+    activeUppercase: 'Active',
+    active: 'active',
+    deactivated: 'deactivated'
   },
   usersFilter: {
     inputPlaceholder: 'Select filter',
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 049ae02f..00ca72b4 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -5,70 +5,66 @@
       <h1>{{ user.display_name }}</h1>
     </header>
     <el-row>
-      <el-col :span="6">
-        <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
-          <table class="el-table__body">
-            <tbody>
-              <tr class="el-table__row">
-                <td class="name-col">ID</td>
-                <td class="value-col">
-                  {{ user.id }}
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.tags') }}</td>
-                <td>
-                  <el-tag v-for="tag in user.tags" :key="tag">{{ tag }}</el-tag>
-                  <span v-if="user.tags.length === 0">None</span>
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.moderator') }}</td>
-                <td>
-                  <el-tag v-if="user.roles.moderator" type="success"><i class="el-icon-check" /></el-tag>
-                  <el-tag v-if="!user.roles.moderator" type="danger"><i class="el-icon-error" /></el-tag>
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.admin') }}</td>
-                <td>
-                  <el-tag v-if="user.roles.admin" type="success"><i class="el-icon-check" /></el-tag>
-                  <el-tag v-if="!user.roles.admin" type="danger"><i class="el-icon-error" /></el-tag>
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.local') }}</td>
-                <td>
-                  <el-tag v-if="user.local" type="success"><i class="el-icon-check" /></el-tag>
-                  <el-tag v-if="!user.local" type="danger"><i class="el-icon-error" /></el-tag>
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.deactivated') }}</td>
-                <td>
-                  <el-tag v-if="user.deactivated" type="success"><i class="el-icon-check" /></el-tag>
-                  <el-tag v-if="!user.deactivated" type="danger"><i class="el-icon-error" /></el-tag>
-                </td>
-              </tr>
-              <tr class="el-table__row">
-                <td>{{ $t('userProfile.nickname') }}</td>
-                <td>
-                  {{ user.nickname }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+      <el-col :span="8">
+        <el-card class="user-profile-card">
+          <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
+            <table class="user-profile-table">
+              <tbody>
+                <tr class="el-table__row">
+                  <td>{{ $t('userProfile.nickname') }}</td>
+                  <td>
+                    {{ user.nickname }}
+                  </td>
+                </tr>
+                <tr class="el-table__row">
+                  <td class="name-col">ID</td>
+                  <td class="value-col">
+                    {{ user.id }}
+                  </td>
+                </tr>
+                <tr class="el-table__row">
+                  <td>{{ $t('userProfile.tags') }}</td>
+                  <td>
+                    <el-tag v-for="tag in user.tags" :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
+                    <span v-if="user.tags.length === 0">—</span>
+                  </td>
+                </tr>
+                <tr class="el-table__row">
+                  <td>{{ $t('userProfile.roles') }}</td>
+                  <td>
+                    <el-tag v-if="user.roles.moderator" class="user-profile-tag"/>
+                    <el-tag v-if="user.roles.admin" class="user-profile-tag"/>
+                    <span v-if="!user.roles.moderator && !user.roles.admin">—</span>
+                  </td>
+                </tr>
+                <tr class="el-table__row">
+                  <td>{{ $t('userProfile.localUppercase') }}</td>
+                  <td>
+                    <el-tag v-if="user.local" type="info">{{ $t('userProfile.local') }}</el-tag>
+                    <el-tag v-if="!user.local" type="info">{{ $t('userProfile.external') }}</el-tag>
+                  </td>
+                </tr>
+                <tr class="el-table__row">
+                  <td>{{ $t('userProfile.activeUppercase') }}</td>
+                  <td>
+                    <el-tag v-if="user.deactivated" type="success">{{ $t('userProfile.active') }}</el-tag>
+                    <el-tag v-if="!user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
       </el-col>
-      <el-row type="flex" class="row-bg" justify="space-between">
-        <el-col :span="18"><h2>{{ $t('userProfile.recentStatuses') }}</h2></el-col>
-        <el-col :span="6" class="show-private">
-          <el-checkbox v-model="showPrivate" @change="onTogglePrivate">
-            {{ $t('userProfile.showPrivateStatuses') }}
-          </el-checkbox>
-        </el-col>
-      </el-row>
-      <el-col :span="18">
+      <el-col :span="16">
+        <el-row type="flex" class="row-bg" justify="space-between">
+          <el-col :span="18"><h2 class="recent-statuses-header">{{ $t('userProfile.recentStatuses') }}</h2></el-col>
+          <el-col :span="6" class="show-private">
+            <el-checkbox v-model="showPrivate" @change="onTogglePrivate">
+              {{ $t('userProfile.showPrivateStatuses') }}
+            </el-checkbox>
+          </el-col>
+        </el-row>
         <el-timeline class="statuses">
           <el-timeline-item v-for="status in statuses" :timestamp="createdAtLocaleString(status.created_at)" :key="status.id">
             <el-card>
@@ -168,12 +164,25 @@ table {
     width: 100%;
   }
 }
+.recent-statuses-header {
+  margin-top: 10px;
+}
 .statuses {
-  padding-right: 20px;
+  padding: 0 20px 0 0;
 }
 .show-private {
   text-align: right;
   line-height: 67px;
   padding-right: 20px;
 }
+.user-profile-card {
+  margin-left: 15px;
+  margin-right: 20px;
+}
+.user-profile-table {
+  margin: 0;
+}
+.user-profile-tag {
+  margin: 0 4px 4px 0;
+}
 </style>

From df26ac0858636455207a57627b9cc27c74f70393 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 4 Oct 2019 18:49:03 +0300
Subject: [PATCH 2/3] Display role tags

---
 src/views/users/show.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index 00ca72b4..a9dada5a 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -32,8 +32,12 @@
                 <tr class="el-table__row">
                   <td>{{ $t('userProfile.roles') }}</td>
                   <td>
-                    <el-tag v-if="user.roles.moderator" class="user-profile-tag"/>
-                    <el-tag v-if="user.roles.admin" class="user-profile-tag"/>
+                    <el-tag v-if="user.roles.admin" class="user-profile-tag">
+                      {{ $t('users.admin') }}
+                    </el-tag>
+                    <el-tag v-if="user.roles.moderator" class="user-profile-tag">
+                      {{ $t('users.moderator') }}
+                    </el-tag>
                     <span v-if="!user.roles.moderator && !user.roles.admin">—</span>
                   </td>
                 </tr>

From 85ab42bce0fdd4125f1b1519b2d73c15fa978c5b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 4 Oct 2019 21:06:01 +0300
Subject: [PATCH 3/3] Add test for rendering user profile

---
 src/api/__mocks__/users.js     | 12 +++++++++
 test/views/users/show.test.js  | 48 ++++++++++++++++++++++++++++++++++
 test/views/users/store.conf.js |  2 ++
 3 files changed, 62 insertions(+)
 create mode 100644 test/views/users/show.test.js

diff --git a/src/api/__mocks__/users.js b/src/api/__mocks__/users.js
index 016772a7..2211a4e3 100644
--- a/src/api/__mocks__/users.js
+++ b/src/api/__mocks__/users.js
@@ -4,6 +4,10 @@ export let users = [
   { active: false, deactivated: true, id: 'abc', nickname: 'john', local: true, external: false, roles: { admin: false, moderator: false }, tags: ['strip_media'] }
 ]
 
+const userProfile = { avatar: 'avatar.jpg', display_name: 'Allis', nickname: 'allis', id: '2', tags: [], roles: { admin: true, moderator: false }, local: true, external: false }
+
+const userStatuses = []
+
 const filterUsers = (str) => {
   const filters = str.split(',').filter(item => item.length > 0)
   if (filters.length === 0) {
@@ -20,6 +24,10 @@ const filterUsers = (str) => {
   return applyFilters([], filters, users)
 }
 
+export async function fetchUser(id, authHost, token) {
+  return Promise.resolve({ data: userProfile })
+}
+
 export async function fetchUsers(filters, authHost, token, page = 1) {
   const filteredUsers = filterUsers(filters)
   return Promise.resolve({ data: {
@@ -29,6 +37,10 @@ export async function fetchUsers(filters, authHost, token, page = 1) {
   }})
 }
 
+export async function fetchUserStatuses(id, authHost, godmode, token) {
+  return Promise.resolve({ data: userStatuses })
+}
+
 export async function getPasswordResetToken(nickname, authHost, token) {
   return Promise.resolve({ data: { token: 'g05lxnBJQnL', link: 'http://url/api/pleroma/password_reset/g05lxnBJQnL' }})
 }
diff --git a/test/views/users/show.test.js b/test/views/users/show.test.js
new file mode 100644
index 00000000..b57501c5
--- /dev/null
+++ b/test/views/users/show.test.js
@@ -0,0 +1,48 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue, config } from '@vue/test-utils'
+import flushPromises from 'flush-promises'
+import Element from 'element-ui'
+import UsersShow from '@/views/users/show'
+import storeConfig from './store.conf'
+import { cloneDeep } from 'lodash'
+
+config.mocks["$t"] = () => {}
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(Element)
+
+const $route = {
+  params: {
+    id: '2'
+  }
+}
+
+jest.mock('@/api/nodeInfo')
+jest.mock('@/api/users')
+
+describe('Search and filter users', () => {
+  let store
+
+  beforeEach(() => {
+    store = new Vuex.Store(cloneDeep(storeConfig))
+  })
+
+  it('fetches user profile', async (done) => {
+    const wrapper = mount(UsersShow, {
+      store,
+      localVue,
+      sync: false,
+      stubs: ['router-link'],
+      mocks: {
+        $route
+      }
+    })
+
+    await flushPromises()
+    expect(wrapper.find('.user-profile-card').isVisible()).toBe(true)
+    expect(store.state.userProfile.user.nickname).toBe('allis')
+    expect(store.state.userProfile.user.roles.admin).toBe(true)
+    done()
+  })
+})
diff --git a/test/views/users/store.conf.js b/test/views/users/store.conf.js
index 77e2b7c8..89a7622a 100644
--- a/test/views/users/store.conf.js
+++ b/test/views/users/store.conf.js
@@ -1,5 +1,6 @@
 import app from '@/store/modules/app'
 import user from '@/store/modules/user'
+import userProfile from '@/store/modules/userProfile'
 import users from '@/store/modules/users'
 import getters from '@/store/getters'
 
@@ -7,6 +8,7 @@ export default {
   modules: {
     app,
     user,
+    userProfile,
     users
   },
   getters