Fix: message for 0 connections not rendering

webapp/components/features/FollowList.spec.js

@@ -75,6 +75,40 @@ describe('FollowList.vue', () => {
         }),
       )
     })
+
+    describe('given a user without connections', () => {
+      ;['following', 'followedBy'].forEach((type) =>
+        describe(`and type=${type}`, () => {
+          let wrapper
+
+          beforeAll(() => {
+            wrapper = mount(FollowList, {
+              store,
+              mocks: {
+                $t: jest.fn().mockReturnValue('has no connections'),
+              },
+              localVue,
+              propsData: {
+                user: {
+                  ...propsData.user,
+                  followedByCount: 0,
+                  followingCount: 0,
+                  followedBy: [],
+                  following: [],
+                },
+                type,
+              },
+            })
+          })
+
+          it('displays ne no-follower message', () => {
+            expect(wrapper.find('.no-connections-message').text()).toBe(
+              `${user.name} ${wrapper.vm.$t(`profile.network.${type}Nobody`)}`,
+            )
+          })
+        }),
+      )
+    })
   })
 })
 

webapp/components/features/FollowList.story.js

@@ -84,6 +84,21 @@ const allConnectionsUser = {
 storiesOf('FollowList', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
+  .add('without connections', () => {
+    const user = {
+      ...sevenConnectionsUser,
+      followedBy: [],
+      followedByCount: 0,
+    }
+    return {
+      components: { FollowList },
+      store: helpers.store,
+      data() {
+        return { user }
+      },
+      template: `<follow-list :user="user" type="followedBy" />`,
+    }
+  })
   .add('with up to 7 connections', () => {
     const user = sevenConnectionsUser
     return {
@@ -94,7 +109,6 @@ storiesOf('FollowList', module)
           user,
         }
       },
-
       template: `<follow-list :user="user" type="followedBy" />`,
     }
   })
@@ -109,7 +123,6 @@ storiesOf('FollowList', module)
           user,
         }
       },
-
       template: `<follow-list :user="user" type="followedBy" />`,
     }
   })

webapp/components/features/FollowList.vue

@@ -1,10 +1,13 @@
 <template>
-  <base-card style="position: relative; height: 424px;">
+  <base-card style="position: relative; max-height: 424px;">
     <ds-space v-if="this.connections && this.connections.length" margin="x-small">
       <ds-text tag="h5" color="soft">
         {{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }}
       </ds-text>
     </ds-space>
+    <template v-else>
+      <p class="no-connections-message">{{ userName }} {{ $t(`profile.network.${type}Nobody`) }}</p>
+    </template>
     <ds-space v-if="this.connections && this.connections.length > 7" margin="x-small">
       <ds-input
         ref="filter"
@@ -45,11 +48,6 @@
         </ds-space>
       </div>
     </template>
-    <template v-else>
-      <p style="text-align: center; opacity: 0.5;">
-        {{ userName }} {{ $t(`profile.network.${type}Nobody`) }}
-      </p>
-    </template>
   </base-card>
 </template>
 
@@ -133,6 +131,10 @@ export default {
 </script>
 
 <style lang="scss">
+.no-connections-message {
+  text-align: center;
+  opacity: 0.5;
+}
 .overflow-container {
   max-height: 300px;
   overflow-y: auto;