refactor: translations, tests

webapp/locales/de.json

@@ -320,7 +320,7 @@
       "how-to": "Du kannst andere Benutzer auf deren Profilseite über das Inhaltsmenü blockieren.",
       "block": "Nutzer blockieren",
       "unblock": "Nutzer entblocken",
-      "unblocked": "ist wieder entblockt"
+      "unblocked": "{name} ist wieder entblockt"
     }
   },
   "admin": {

webapp/locales/en.json

@@ -321,7 +321,7 @@
       "how-to": "You can block other users on their profile page via the content menu.",
       "block": "Block user",
       "unblock": "Unblock user",
-      "unblocked": "is unblocked again"
+      "unblocked": "{name} is unblocked again"
     }
   },
   "admin": {

webapp/pages/settings/blocked-users.spec.js

@@ -0,0 +1,69 @@
+import { config, mount, createLocalVue } from '@vue/test-utils'
+import BlockedUsers from './blocked-users.vue'
+import Styleguide from '@human-connection/styleguide'
+import Filters from '~/plugins/vue-filters'
+import { Unblock } from '~/graphql/settings/BlockedUsers'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+localVue.use(Filters)
+
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+describe('blocked-users.vue', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+      $apollo: {
+        mutate: jest.fn(),
+        queries: {
+          blockedUsers: {
+            refetch: jest.fn(),
+          },
+        },
+      },
+      $toast: {
+        error: jest.fn(),
+        success: jest.fn(),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(BlockedUsers, { mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.is('div')).toBe(true)
+    })
+
+    describe('given a list of blocked users', () => {
+      beforeEach(() => {
+        const blockedUsers = [{ id: 'u1', name: 'John Doe', slug: 'john-doe', avatar: '' }]
+        wrapper.setData({ blockedUsers })
+      })
+
+      describe('click unblock', () => {
+        beforeEach(() => {
+          wrapper.find('button').trigger('click')
+        })
+
+        it('calls unblock mutation with given user', () => {
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith({
+            mutation: Unblock(),
+            variables: { id: 'u1' },
+          })
+        })
+      })
+    })
+  })
+})

webapp/pages/settings/blocked-users.vue

@@ -58,7 +58,7 @@
         </template>
 
         <template slot="unblock" slot-scope="scope">
-          <ds-button size="small" @click="unblock(scope)"><ds-icon name="power-off" /></ds-button>
+          <ds-button size="small" @click="unblock(scope)"><ds-icon name="user-plus" /></ds-button>
         </template>
       </ds-table>
     </ds-card>
@@ -107,7 +107,8 @@ export default {
     async unblock(user) {
       await this.$apollo.mutate({ mutation: Unblock(), variables: { id: user.row.id } })
       this.$apollo.queries.blockedUsers.refetch()
-      this.$toast.success(user.row.slug + ' ' + this.$t('settings.blocked-users.unblocked'))
+      const { name } = user.row
+      this.$toast.success(this.$t('settings.blocked-users.unblocked', { name }))
     },
   },
 }