diff --git a/webapp/components/features/FollowList/FollowList.spec.js b/webapp/components/features/FollowList/FollowList.spec.js index f07dffa5f..ebce32a69 100644 --- a/webapp/components/features/FollowList/FollowList.spec.js +++ b/webapp/components/features/FollowList/FollowList.spec.js @@ -1,5 +1,7 @@ import { config, mount } from '@vue/test-utils' import Vuex from 'vuex' + +import helpers from '~/storybook/helpers' import FollowList from './FollowList.vue' const localVue = global.localVue @@ -21,7 +23,16 @@ describe('FollowList.vue', () => { }, 'auth/isModerator': () => false, } - propsData = { user } + const [_user] = helpers.fakeUser() + propsData = { + user: { + ..._user, + followedByCount: 12, + followingCount: 15, + followedBy: helpers.fakeUser(7), + following: helpers.fakeUser(7), + }, + } }) describe('mount', () => { @@ -56,7 +67,7 @@ describe('FollowList.vue', () => { }) it(`shows the users ${type}`, () => { - expect(wrapper.findAll('.user-teaser').length).toEqual(user[type].length) + expect(wrapper.findAll('.user-teaser').length).toEqual(propsData.user[type].length) }) it(`has a button to load all remaining users ${type}`, async () => { @@ -66,10 +77,10 @@ describe('FollowList.vue', () => { await jest.runAllTicks() await wrapper.vm.$nextTick() - expect(wrapper.vm.connections.length).toBe(user[`${type}Count`]) + expect(wrapper.vm.connections.length).toBe(propsData.user[`${type}Count`]) expect(queryMock).toHaveBeenCalledWith({ query: wrapper.vm.queries[type], - variables: { id: user.id }, + variables: { id: propsData.user.id }, }) }) }), @@ -102,8 +113,8 @@ describe('FollowList.vue', () => { }) it('displays ne no-follower message', () => { - expect(wrapper.find('.no-connections-message').text()).toBe( - `${user.name} ${wrapper.vm.$t(`profile.network.${type}Nobody`)}`, + expect(wrapper.find('.no-connections').text()).toBe( + `${propsData.user.name} ${wrapper.vm.$t()}`, ) }) }), @@ -112,156 +123,7 @@ describe('FollowList.vue', () => { }) }) -const user = { - name: 'Jenny Rostock', - id: 'u3', - followedByCount: 12, - followingCount: 15, - 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', - }, - ], - following: [ - { - 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: '18a4827c-8b5f-4510-b6fe-09fe8688eed1', - name: 'Arthur Johns', - slug: 'arthur-johns', - }, - { - id: 'cfaf1c25-f0ad-4bdf-82a3-e4d8d5e5093e', - name: 'Dominic Weimann Jr.', - slug: 'dominic-weimann-jr', - }, - { - id: '69dbad2b-5749-4697-9976-221992439086', - name: 'Ashley Fisher', - slug: 'ashley-fisher', - }, - { - id: 'a09a2341-0575-4235-96c6-2ebc7d77de3f', - name: 'Phil Dare', - slug: 'phil-dare', - }, - { - id: '2877b626-bac0-43df-b2bf-4ee025ba38b2', - name: 'Kristina Beahan', - slug: 'kristina-beahan', - }, - ], -} - const additionalConnections = { - 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', - }, - ], - - following: [ - { - id: '9011b4fd-feec-4b74-b6d0-e0a41b6658e6', - name: 'Lela Kautzer', - slug: 'lela-kautzer', - }, - { - id: '61040fdf-da6a-489e-b79c-45f58d33386f', - name: 'Rodolfo Lind', - slug: 'rodolfo-lind', - }, - { - id: '3a089655-19c8-478f-97c1-345b3dfc95a3', - name: 'Lee Erdman', - slug: 'lee-erdman', - }, - { - id: 'c5f7eea9-ee4b-4384-91cd-b6c7d128f122', - name: 'Omar Turcotte', - slug: 'omar-turcotte', - }, - { - id: 'f638fad4-73c2-4bc9-ae4e-2e53035397e9', - name: 'Sophia Jaskolski', - slug: 'sophia-jaskolski', - }, - { - id: 'u4', - name: 'Huey', - slug: 'huey', - }, - { - id: '6de37964-e79b-4be4-b384-ed571c37a31e', - name: 'Mr. Oliver Quitzon', - slug: 'mr-oliver-quitzon', - }, - { - id: 'd3d43b17-e7bb-4778-a373-798df58a9a5f', - name: 'Ms. Rita Thompson', - slug: 'ms-rita-thompson', - }, - ], + followedBy: helpers.fakeUser(5), + following: helpers.fakeUser(8), } diff --git a/webapp/components/features/FollowList/FollowList.story.js b/webapp/components/features/FollowList/FollowList.story.js index dc10a030c..7c6918c94 100644 --- a/webapp/components/features/FollowList/FollowList.story.js +++ b/webapp/components/features/FollowList/FollowList.story.js @@ -1,5 +1,4 @@ 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' @@ -9,27 +8,16 @@ 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: fakeUser(7), + followedBy: helpers.fakeUser(7), } const allConnectionsUser = { ...sevenConnectionsUser, - followedBy: [...sevenConnectionsUser.followedBy, ...fakeUser(5)], + followedBy: [...sevenConnectionsUser.followedBy, ...helpers.fakeUser(5)], } const mocks = { diff --git a/webapp/components/features/FollowList/FollowList.vue b/webapp/components/features/FollowList/FollowList.vue index 49b728610..7ec23af34 100644 --- a/webapp/components/features/FollowList/FollowList.vue +++ b/webapp/components/features/FollowList/FollowList.vue @@ -6,7 +6,7 @@ - {{ userName }} {{ $t(`profile.network.${type}Nobody`) }} + {{ userName }} {{ $t(`profile.network.${type}Nobody`) }} @@ -143,7 +143,7 @@ export default { max-height: 424px; width: auto; - > .no-connections-message { + > .no-connections { text-align: center; color: $text-color-soft; } diff --git a/webapp/storybook/helpers.js b/webapp/storybook/helpers.js index b6abf4c99..ea57600b8 100644 --- a/webapp/storybook/helpers.js +++ b/webapp/storybook/helpers.js @@ -1,5 +1,6 @@ import Vue from 'vue' import Vuex from 'vuex' +import faker from 'faker' import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js' import Styleguide from '@human-connection/styleguide' import Filters from '~/plugins/vue-filters' @@ -59,6 +60,16 @@ const helpers = { `, } }, + 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), + } + }) + }, } export default helpers
{{ userName }} {{ $t(`profile.network.${type}Nobody`) }}