From 6f1c5e3efa3b77e72172592a0b5e4ea52158e642 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Thu, 3 Oct 2019 11:04:23 +0200 Subject: [PATCH 1/5] Set hasMore to false when returned Posts are equal to pageSize - this was causing bugs on User profile page, and saves a database call --- backend/src/seed/seed-db.js | 92 ++++++++++++++++-------------- webapp/pages/index.vue | 4 +- webapp/pages/profile/_id/_slug.vue | 2 +- 3 files changed, 52 insertions(+), 46 deletions(-) diff --git a/backend/src/seed/seed-db.js b/backend/src/seed/seed-db.js index 8c87a3214..de4628891 100644 --- a/backend/src/seed/seed-db.js +++ b/backend/src/seed/seed-db.js @@ -24,10 +24,8 @@ import { gql } from '../jest/helpers' }) const { mutate } = createTestClient(server) - const f = Factory() - const [Hamburg, Berlin, Germany, Paris, France] = await Promise.all([ - f.create('Location', { + factory.create('Location', { id: 'region.5127278006398860', name: 'Hamburg', type: 'region', @@ -42,7 +40,7 @@ import { gql } from '../jest/helpers' nameNL: 'Hamburg', namePL: 'Hamburg', }), - f.create('Location', { + factory.create('Location', { id: 'region.14880313158564380', type: 'region', name: 'Berlin', @@ -57,7 +55,7 @@ import { gql } from '../jest/helpers' nameNL: 'Berlijn', namePL: 'Berlin', }), - f.create('Location', { + factory.create('Location', { id: 'country.10743216036480410', name: 'Germany', type: 'country', @@ -70,7 +68,7 @@ import { gql } from '../jest/helpers' nameIT: 'Germania', nameEN: 'Germany', }), - f.create('Location', { + factory.create('Location', { id: 'region.9397217726497330', name: 'Paris', type: 'region', @@ -85,7 +83,7 @@ import { gql } from '../jest/helpers' nameNL: 'Parijs', namePL: 'Paryż', }), - f.create('Location', { + factory.create('Location', { id: 'country.9759535382641660', name: 'France', type: 'country', @@ -106,27 +104,27 @@ import { gql } from '../jest/helpers' ]) const [racoon, rabbit, wolf, bear, turtle, rhino] = await Promise.all([ - f.create('Badge', { + factory.create('Badge', { id: 'indiegogo_en_racoon', icon: '/img/badges/indiegogo_en_racoon.svg', }), - f.create('Badge', { + factory.create('Badge', { id: 'indiegogo_en_rabbit', icon: '/img/badges/indiegogo_en_rabbit.svg', }), - f.create('Badge', { + factory.create('Badge', { id: 'indiegogo_en_wolf', - icon: '/img/badges/indiegogo_en_wolf.svg', + icon: '/img/badges/indiegogo_en_wolfactory.svg', }), - f.create('Badge', { + factory.create('Badge', { id: 'indiegogo_en_bear', icon: '/img/badges/indiegogo_en_bear.svg', }), - f.create('Badge', { + factory.create('Badge', { id: 'indiegogo_en_turtle', icon: '/img/badges/indiegogo_en_turtle.svg', }), - f.create('Badge', { + factory.create('Badge', { id: 'indiegogo_en_rhino', icon: '/img/badges/indiegogo_en_rhino.svg', }), @@ -141,49 +139,49 @@ import { gql } from '../jest/helpers' louie, dagobert, ] = await Promise.all([ - f.create('User', { + factory.create('User', { id: 'u1', name: 'Peter Lustig', slug: 'peter-lustig', role: 'admin', email: 'admin@example.org', }), - f.create('User', { + factory.create('User', { id: 'u2', name: 'Bob der Baumeister', slug: 'bob-der-baumeister', role: 'moderator', email: 'moderator@example.org', }), - f.create('User', { + factory.create('User', { id: 'u3', name: 'Jenny Rostock', slug: 'jenny-rostock', role: 'user', email: 'user@example.org', }), - f.create('User', { + factory.create('User', { id: 'u4', name: 'Huey', slug: 'huey', role: 'user', email: 'huey@example.org', }), - f.create('User', { + factory.create('User', { id: 'u5', name: 'Dewey', slug: 'dewey', role: 'user', email: 'dewey@example.org', }), - f.create('User', { + factory.create('User', { id: 'u6', name: 'Louie', slug: 'louie', role: 'user', email: 'louie@example.org', }), - f.create('User', { + factory.create('User', { id: 'u7', name: 'Dagobert', slug: 'dagobert', @@ -226,97 +224,97 @@ import { gql } from '../jest/helpers' ]) await Promise.all([ - f.create('Category', { + factory.create('Category', { id: 'cat1', name: 'Just For Fun', slug: 'just-for-fun', icon: 'smile', }), - f.create('Category', { + factory.create('Category', { id: 'cat2', name: 'Happiness & Values', slug: 'happiness-values', icon: 'heart-o', }), - f.create('Category', { + factory.create('Category', { id: 'cat3', name: 'Health & Wellbeing', slug: 'health-wellbeing', icon: 'medkit', }), - f.create('Category', { + factory.create('Category', { id: 'cat4', name: 'Environment & Nature', slug: 'environment-nature', icon: 'tree', }), - f.create('Category', { + factory.create('Category', { id: 'cat5', name: 'Animal Protection', slug: 'animal-protection', icon: 'paw', }), - f.create('Category', { + factory.create('Category', { id: 'cat6', name: 'Human Rights & Justice', slug: 'human-rights-justice', icon: 'balance-scale', }), - f.create('Category', { + factory.create('Category', { id: 'cat7', name: 'Education & Sciences', slug: 'education-sciences', icon: 'graduation-cap', }), - f.create('Category', { + factory.create('Category', { id: 'cat8', name: 'Cooperation & Development', slug: 'cooperation-development', icon: 'users', }), - f.create('Category', { + factory.create('Category', { id: 'cat9', name: 'Democracy & Politics', slug: 'democracy-politics', icon: 'university', }), - f.create('Category', { + factory.create('Category', { id: 'cat10', name: 'Economy & Finances', slug: 'economy-finances', icon: 'money', }), - f.create('Category', { + factory.create('Category', { id: 'cat11', name: 'Energy & Technology', slug: 'energy-technology', icon: 'flash', }), - f.create('Category', { + factory.create('Category', { id: 'cat12', name: 'IT, Internet & Data Privacy', slug: 'it-internet-data-privacy', icon: 'mouse-pointer', }), - f.create('Category', { + factory.create('Category', { id: 'cat13', name: 'Art, Culture & Sport', slug: 'art-culture-sport', icon: 'paint-brush', }), - f.create('Category', { + factory.create('Category', { id: 'cat14', name: 'Freedom of Speech', slug: 'freedom-of-speech', icon: 'bullhorn', }), - f.create('Category', { + factory.create('Category', { id: 'cat15', name: 'Consumption & Sustainability', slug: 'consumption-sustainability', icon: 'shopping-cart', }), - f.create('Category', { + factory.create('Category', { id: 'cat16', name: 'Global Peace & Nonviolence', slug: 'global-peace-nonviolence', @@ -325,16 +323,16 @@ import { gql } from '../jest/helpers' ]) const [environment, nature, democracy, freedom] = await Promise.all([ - f.create('Tag', { + factory.create('Tag', { id: 'Environment', }), - f.create('Tag', { + factory.create('Tag', { id: 'Nature', }), - f.create('Tag', { + factory.create('Tag', { id: 'Democracy', }), - f.create('Tag', { + factory.create('Tag', { id: 'Freedom', }), ]) @@ -684,10 +682,18 @@ import { gql } from '../jest/helpers' await Promise.all( [...Array(30).keys()].map(i => { - return f.create('User') + return factory.create('User') + }), + ) + + await Promise.all( + [...Array(30).keys()].map(() => { + return factory.create('Post', { + author: jennyRostock, + image: faker.image.unsplash.objects(), + }) }), ) - /* eslint-disable-next-line no-console */ console.log('Seeded Data...') process.exit(0) diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index 31e07f382..d41e7d440 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -50,7 +50,7 @@ :infinite-scroll-throttle-delay="800" :infinite-scroll-immediate-check="true" > - + @@ -151,7 +151,7 @@ export default { orderBy: this.sorting, }, updateQuery: (previousResult, { fetchMoreResult }) => { - if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) { + if (!fetchMoreResult || fetchMoreResult.Post.length <= this.pageSize) { this.hasMore = false } const result = Object.assign({}, previousResult, { diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue index 29a94022d..8879190f5 100644 --- a/webapp/pages/profile/_id/_slug.vue +++ b/webapp/pages/profile/_id/_slug.vue @@ -385,7 +385,7 @@ export default { orderBy: this.sorting, }, updateQuery: (previousResult, { fetchMoreResult }) => { - if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) { + if (!fetchMoreResult || fetchMoreResult.Post.length <= this.pageSize) { this.hasMore = false } const result = Object.assign({}, previousResult, { From a6d86f78f4700428e0f4174315bca7a8dfb47220 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Thu, 3 Oct 2019 12:04:07 +0200 Subject: [PATCH 2/5] Fix lint --- backend/src/seed/seed-db.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/src/seed/seed-db.js b/backend/src/seed/seed-db.js index de4628891..afdd6adef 100644 --- a/backend/src/seed/seed-db.js +++ b/backend/src/seed/seed-db.js @@ -685,7 +685,7 @@ import { gql } from '../jest/helpers' return factory.create('User') }), ) - + await Promise.all( [...Array(30).keys()].map(() => { return factory.create('Post', { From 3b5e39c54dafc2e701eb3ce1e830737a9b4bcf82 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Fri, 4 Oct 2019 11:42:55 +0200 Subject: [PATCH 3/5] Update orderBy, remove >=, more realistic seed data --- backend/src/seed/seed-db.js | 210 ++++++++++++++++++++++++++++- webapp/pages/index.vue | 2 +- webapp/pages/profile/_id/_slug.vue | 8 +- 3 files changed, 214 insertions(+), 6 deletions(-) diff --git a/backend/src/seed/seed-db.js b/backend/src/seed/seed-db.js index afdd6adef..d64aa998c 100644 --- a/backend/src/seed/seed-db.js +++ b/backend/src/seed/seed-db.js @@ -114,7 +114,7 @@ import { gql } from '../jest/helpers' }), factory.create('Badge', { id: 'indiegogo_en_wolf', - icon: '/img/badges/indiegogo_en_wolfactory.svg', + icon: '/img/badges/indiegogo_en_wolf.svg', }), factory.create('Badge', { id: 'indiegogo_en_bear', @@ -694,6 +694,214 @@ import { gql } from '../jest/helpers' }) }), ) + + await Promise.all( + [...Array(6).keys()].map(() => { + return factory.create('Comment', { + author: jennyRostock, + postId: 'p2', + }) + }) + ) + + await Promise.all( + [...Array(4).keys()].map(() => { + return factory.create('Comment', { + author: jennyRostock, + postId: 'p15', + }) + }) + ) + + await Promise.all( + [...Array(2).keys()].map(() => { + return factory.create('Comment', { + author: jennyRostock, + postId: 'p4', + }) + }) + ) + + await Promise.all( + [...Array(21).keys()].map(() => { + return factory.create('Post', { + author: peterLustig, + image: faker.image.unsplash.buildings(), + }) + }), + ) + + await Promise.all( + [...Array(3).keys()].map(() => { + return factory.create('Comment', { + author: peterLustig, + postId: 'p4', + }) + }) + ) + + await Promise.all( + [...Array(5).keys()].map(() => { + return factory.create('Comment', { + author: peterLustig, + postId: 'p14', + }) + }) + ) + + await Promise.all( + [...Array(6).keys()].map(() => { + return factory.create('Comment', { + author: peterLustig, + postId: 'p0', + }) + }) + ) + + await Promise.all( + [...Array(11).keys()].map(() => { + return factory.create('Post', { + author: dewey, + image: faker.image.unsplash.food(), + }) + }), + ) + + await Promise.all( + [...Array(7).keys()].map(() => { + return factory.create('Comment', { + author: dewey, + postId: 'p2', + }) + }) + ) + + await Promise.all( + [...Array(5).keys()].map(() => { + return factory.create('Comment', { + author: dewey, + postId: 'p6', + }) + }) + ) + + await Promise.all( + [...Array(2).keys()].map(() => { + return factory.create('Comment', { + author: dewey, + postId: 'p9', + }) + }) + ) + + await Promise.all( + [...Array(16).keys()].map(() => { + return factory.create('Post', { + author: louie, + image: faker.image.unsplash.technology(), + }) + }), + ) + + await Promise.all( + [...Array(4).keys()].map(() => { + return factory.create('Comment', { + author: louie, + postId: 'p1', + }) + }) + ) + + await Promise.all( + [...Array(8).keys()].map(() => { + return factory.create('Comment', { + author: louie, + postId: 'p10', + }) + }) + ) + + await Promise.all( + [...Array(5).keys()].map(() => { + return factory.create('Comment', { + author: louie, + postId: 'p13', + }) + }) + ) + + await Promise.all( + [...Array(45).keys()].map(() => { + return factory.create('Post', { + author: bobDerBaumeister, + image: faker.image.unsplash.people(), + }) + }), + ) + + await Promise.all( + [...Array(2).keys()].map(() => { + return factory.create('Comment', { + author: bobDerBaumeister, + postId: 'p2', + }) + }) + ) + + await Promise.all( + [...Array(3).keys()].map(() => { + return factory.create('Comment', { + author: bobDerBaumeister, + postId: 'p12', + }) + }) + ) + + await Promise.all( + [...Array(7).keys()].map(() => { + return factory.create('Comment', { + author: bobDerBaumeister, + postId: 'p13', + }) + }) + ) + + await Promise.all( + [...Array(8).keys()].map(() => { + return factory.create('Post', { + author: huey, + image: faker.image.unsplash.nature(), + }) + }), + ) + + await Promise.all( + [...Array(6).keys()].map(() => { + return factory.create('Comment', { + author: huey, + postId: 'p0', + }) + }) + ) + + await Promise.all( + [...Array(8).keys()].map(() => { + return factory.create('Comment', { + author: huey, + postId: 'p13', + }) + }) + ) + + await Promise.all( + [...Array(9).keys()].map(() => { + return factory.create('Comment', { + author: huey, + postId: 'p15', + }) + }) + ) + /* eslint-disable-next-line no-console */ console.log('Seeded Data...') process.exit(0) diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index d41e7d440..360a72303 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -151,7 +151,7 @@ export default { orderBy: this.sorting, }, updateQuery: (previousResult, { fetchMoreResult }) => { - if (!fetchMoreResult || fetchMoreResult.Post.length <= this.pageSize) { + if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) { this.hasMore = false } const result = Object.assign({}, previousResult, { diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue index 8879190f5..abcb1dcda 100644 --- a/webapp/pages/profile/_id/_slug.vue +++ b/webapp/pages/profile/_id/_slug.vue @@ -251,7 +251,7 @@
{ - if (!fetchMoreResult || fetchMoreResult.Post.length <= this.pageSize) { + if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) { this.hasMore = false } const result = Object.assign({}, previousResult, { From c9219f0be3da3e1821b765ed2d72d87df9f9b243 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Fri, 4 Oct 2019 12:09:22 +0200 Subject: [PATCH 4/5] Fix lint --- backend/src/seed/seed-db.js | 46 ++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/backend/src/seed/seed-db.js b/backend/src/seed/seed-db.js index d64aa998c..1c57dd19b 100644 --- a/backend/src/seed/seed-db.js +++ b/backend/src/seed/seed-db.js @@ -694,14 +694,14 @@ import { gql } from '../jest/helpers' }) }), ) - + await Promise.all( [...Array(6).keys()].map(() => { return factory.create('Comment', { author: jennyRostock, postId: 'p2', }) - }) + }), ) await Promise.all( @@ -710,7 +710,7 @@ import { gql } from '../jest/helpers' author: jennyRostock, postId: 'p15', }) - }) + }), ) await Promise.all( @@ -719,7 +719,7 @@ import { gql } from '../jest/helpers' author: jennyRostock, postId: 'p4', }) - }) + }), ) await Promise.all( @@ -730,14 +730,14 @@ import { gql } from '../jest/helpers' }) }), ) - + await Promise.all( [...Array(3).keys()].map(() => { return factory.create('Comment', { author: peterLustig, postId: 'p4', }) - }) + }), ) await Promise.all( @@ -746,7 +746,7 @@ import { gql } from '../jest/helpers' author: peterLustig, postId: 'p14', }) - }) + }), ) await Promise.all( @@ -755,7 +755,7 @@ import { gql } from '../jest/helpers' author: peterLustig, postId: 'p0', }) - }) + }), ) await Promise.all( @@ -766,14 +766,14 @@ import { gql } from '../jest/helpers' }) }), ) - + await Promise.all( [...Array(7).keys()].map(() => { return factory.create('Comment', { author: dewey, postId: 'p2', }) - }) + }), ) await Promise.all( @@ -782,7 +782,7 @@ import { gql } from '../jest/helpers' author: dewey, postId: 'p6', }) - }) + }), ) await Promise.all( @@ -791,7 +791,7 @@ import { gql } from '../jest/helpers' author: dewey, postId: 'p9', }) - }) + }), ) await Promise.all( @@ -802,14 +802,14 @@ import { gql } from '../jest/helpers' }) }), ) - + await Promise.all( [...Array(4).keys()].map(() => { return factory.create('Comment', { author: louie, postId: 'p1', }) - }) + }), ) await Promise.all( @@ -818,7 +818,7 @@ import { gql } from '../jest/helpers' author: louie, postId: 'p10', }) - }) + }), ) await Promise.all( @@ -827,7 +827,7 @@ import { gql } from '../jest/helpers' author: louie, postId: 'p13', }) - }) + }), ) await Promise.all( @@ -838,14 +838,14 @@ import { gql } from '../jest/helpers' }) }), ) - + await Promise.all( [...Array(2).keys()].map(() => { return factory.create('Comment', { author: bobDerBaumeister, postId: 'p2', }) - }) + }), ) await Promise.all( @@ -854,7 +854,7 @@ import { gql } from '../jest/helpers' author: bobDerBaumeister, postId: 'p12', }) - }) + }), ) await Promise.all( @@ -863,7 +863,7 @@ import { gql } from '../jest/helpers' author: bobDerBaumeister, postId: 'p13', }) - }) + }), ) await Promise.all( @@ -881,7 +881,7 @@ import { gql } from '../jest/helpers' author: huey, postId: 'p0', }) - }) + }), ) await Promise.all( @@ -890,7 +890,7 @@ import { gql } from '../jest/helpers' author: huey, postId: 'p13', }) - }) + }), ) await Promise.all( @@ -899,7 +899,7 @@ import { gql } from '../jest/helpers' author: huey, postId: 'p15', }) - }) + }), ) /* eslint-disable-next-line no-console */ From fd388fc1ba0b1b5cc709d50d33695fcd862c9f6a Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Fri, 4 Oct 2019 12:34:48 +0200 Subject: [PATCH 5/5] Fix tests for changed implementation - we do not display a load more button when there are clearly no more posts to load... if there are at least 6, the pageSize, we display it because there might or might not be posts to load --- webapp/pages/profile/_id/_slug.spec.js | 35 +++++++++++++------------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/webapp/pages/profile/_id/_slug.spec.js b/webapp/pages/profile/_id/_slug.spec.js index 6470bb69a..f7eba10cc 100644 --- a/webapp/pages/profile/_id/_slug.spec.js +++ b/webapp/pages/profile/_id/_slug.spec.js @@ -139,7 +139,23 @@ describe('ProfileSlug', () => { wrapper.setData({ posts, hasMore: true }) }) - it('displays a "load more" button', () => { + it('does not display a "load more" button', () => { + expect(wrapper.find('.load-more').exists()).toBe(false) + }) + }) + + describe('pagination returned at least as many posts as pageSize', () => { + beforeEach(() => { + const posts = [1, 2, 3, 4, 5, 6].map(id => { + return { + ...aPost, + id, + } + }) + wrapper.setData({ posts }) + }) + + it('displays "load more" button', () => { expect(wrapper.find('.load-more').exists()).toBe(true) }) @@ -157,23 +173,6 @@ describe('ProfileSlug', () => { }) }) }) - - describe('pagination returned as many posts as available', () => { - beforeEach(() => { - const posts = [1, 2, 3, 4, 5, 6].map(id => { - return { - ...aPost, - id, - } - }) - - wrapper.setData({ posts, hasMore: false }) - }) - - it('displays no "load more" button', () => { - expect(wrapper.find('.load-more').exists()).toBe(false) - }) - }) }) }) })