Change: use fakered users in storybook

webapp/components/features/FollowList.story.js

@@ -1,89 +1,69 @@
+import Vue from 'vue'
+import faker from 'faker'
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
+import apolloStorybookDecorator from 'apollo-storybook-vue'
 
 import helpers from '~/storybook/helpers'
 import FollowList from './FollowList.vue'
 
 helpers.init()
 
+const fakeUser = (n) => {
+  return new Array(n || 1).fill(0).map(() => {
+    const name = faker.name.findName()
+    return {
+      id: faker.random.uuid(),
+      name,
+      slug: faker.helpers.slugify(name),
+    }
+  })
+}
+
 const sevenConnectionsUser = {
   name: 'Jenny Rostock',
   id: 'u3',
   followedByCount: 12,
-  followedBy: [
-    {
-      id: '2877b626-bac0-43df-b2bf-4ee025ba38b2',
-      name: 'Kristina Beahan',
-      slug: 'kristina-beahan',
-    },
-    {
-      id: '16b8838d-cc9f-4d30-8601-e4dea77d2f02',
-      name: 'Rhonda Stokes',
-      slug: 'rhonda-stokes',
-    },
-    {
-      id: '47a9846a-87d4-43fa-bf81-51d21dc38ed3',
-      name: 'Benny Lang',
-      slug: 'benny-lang',
-    },
-    {
-      id: 'd3d43b17-e7bb-4778-a373-798df58a9a5f',
-      name: 'Ms. Rita Thompson',
-      slug: 'ms-rita-thompson',
-    },
-    {
-      id: '18a4827c-8b5f-4510-b6fe-09fe8688eed1',
-      name: 'Arthur Johns',
-      slug: 'arthur-johns',
-    },
-    {
-      id: '45313bea-9152-4c8d-9c6e-1eca029979f8',
-      name: 'Jeremiah Breitenberg',
-      slug: 'jeremiah-breitenberg',
-    },
-    {
-      id: 'cfaf1c25-f0ad-4bdf-82a3-e4d8d5e5093e',
-      name: 'Dominic Weimann Jr.',
-      slug: 'dominic-weimann-jr',
-    },
-  ],
+  followedBy: fakeUser(7),
 }
 
 const allConnectionsUser = {
   ...sevenConnectionsUser,
-  followedBy: [
-    ...sevenConnectionsUser.followedBy,
-    {
-      id: '9f305e7a-ae5a-4e22-8269-8b6899af674f',
-      name: 'Hugh Harris Sr.',
-      slug: 'hugh-harris-sr',
-    },
-    {
-      id: '69dbad2b-5749-4697-9976-221992439086',
-      name: 'Ashley Fisher',
-      slug: 'ashley-fisher',
-    },
-    {
-      id: 'eec8ee9e-ee4e-4b83-b655-a106eb857611',
-      name: 'Devin Reynolds',
-      slug: 'devin-reynolds',
-    },
-    {
-      id: 'f638fad4-73c2-4bc9-ae4e-2e53035397e9',
-      name: 'Sophia Jaskolski',
-      slug: 'sophia-jaskolski',
-    },
-    {
-      id: '61040fdf-da6a-489e-b79c-45f58d33386f',
-      name: 'Rodolfo Lind',
-      slug: 'rodolfo-lind',
-    },
-  ],
+  followedBy: [...sevenConnectionsUser.followedBy, ...fakeUser(5)],
 }
 
+const mocks = {
+  Query: () => ({
+    User: () => [allConnectionsUser],
+  }),
+}
+const typeDefs = `
+  type User {
+    followedByCount: Int
+    followedBy(offset: Int): [User] 
+    name: String
+    slug: String
+    id: String
+  }
+  
+  type Query {
+    User(id: ID!): [User]
+  }
+  schema {
+    query: Query
+  }
+`
+
 storiesOf('FollowList', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
+  .addDecorator(
+    apolloStorybookDecorator({
+      mocks,
+      typeDefs,
+      Vue,
+    }),
+  )
   .add('without connections', () => {
     const user = {
       ...sevenConnectionsUser,