test for load more button

LOAD_MORE_LIMIT constant

rename const

src/pages/list.js

@@ -61,6 +61,8 @@ import { clearRiver } from '../actions/river';
 
 const client = new ApiClient(API_HOST);
 
+export const LOAD_MORE_LIMIT = 4;
+
 export class List extends React.Component {
   static displayName = 'List';
 
@@ -106,14 +108,14 @@ export class List extends React.Component {
   }
 
   componentWillMount() {
-    if (this.props.river.size > 4) {
+    if (this.props.river.size > LOAD_MORE_LIMIT) {
       this.setState({ displayLoadMore: true });
     }
   }
 
   componentWillReceiveProps(nextProps) {
     let displayLoadMore = false;
-    if (nextProps.river.size > 4) {
+    if (nextProps.river.size > LOAD_MORE_LIMIT) {
       displayLoadMore = true;
     }
 
@@ -259,17 +261,19 @@ const selector = createSelector(
   state => state.get('schools'),
   state => state.get('users'),
   state => state.get('ui'),
-  (current_user, comments, create_post_form, following, posts, river, schools, users, ui) => ({
-    comments,
-    create_post_form,
-    following,
-    posts,
-    river,
-    schools,
-    users,
-    ui,
-    ...current_user
-  })
+  (current_user, comments, create_post_form, following, posts, river, schools, users, ui) => {
+    return {
+      comments,
+      create_post_form,
+      following,
+      posts,
+      river,
+      schools,
+      users,
+      ui,
+      ...current_user
+    };
+  }
 );
 
 export default connect(selector, dispatch => ({

test-helpers/factories/post.js

@@ -17,9 +17,28 @@
 */
 import uuid from 'uuid';
 import { Factory } from 'rosie';
+import { bookshelf } from '../db';
+
 const faker = require('faker');
 
-export default new Factory()
-  .attr('id', () => uuid.v4())
-  .attr('text', () => faker.lorem.paragraph())
-  .attr('type', 'short_text');
+const PostFactory = new Factory()
+      .attr('id', () => uuid.v4())
+      .attr('text', () => faker.lorem.paragraph())
+      .attr('type', 'short_text');
+
+export default PostFactory;
+
+
+const Post = bookshelf.model('Post');
+
+export async function createPost(author) {
+  const attrs = PostFactory.build();
+
+  return await new Post({
+    id: attrs.id,
+    type: attrs.type,
+    user_id: author.get('id'),
+    text: attrs.text
+  })
+    .save(null, { method: 'insert' });
+}

test/integration/pages/list.js

@@ -18,17 +18,17 @@
 /* eslint-env node, mocha */
 /* global $dbConfig */
 import { jsdom } from 'jsdom';
-import { v4 as uuid4 } from 'uuid';
-import sinon from 'sinon';
+// import sinon from 'sinon';
 
 import expect from '../../../test-helpers/expect';
 import initBookshelf from '../../../src/api/db';
 import { login } from '../../../test-helpers/api';
+import { createPost } from '../../../test-helpers/factories/post';
+import { LOAD_MORE_LIMIT } from '../../../src/pages/list';
 
 
-let bookshelf = initBookshelf($dbConfig);
-let Post = bookshelf.model('Post');
-let User = bookshelf.model('User');
+const bookshelf = initBookshelf($dbConfig);
+const User = bookshelf.model('User');
 
 describe('ListPage', () => {
   // before(() => {
@@ -46,6 +46,7 @@ describe('ListPage', () => {
   describe('when user is logged in', () => {
     let user;
     let sessionId;
+    const posts = [];
 
     before(async () => {
       await bookshelf.knex('users').del();
@@ -59,6 +60,15 @@ describe('ListPage', () => {
       await user.destroy();
     });
 
+    beforeEach(async () => {
+    });
+
+    afterEach(async () => {
+      posts.forEach(async (post) => {
+        await post.destroy();
+      });
+    });
+
     it('user can open / and see posting form', async () => {
       let context = await expect({ url: '/', session: sessionId }, 'to open successfully');
 
@@ -72,33 +82,31 @@ describe('ListPage', () => {
     });
 
     describe('when user made a post', () => {
-      let post;
-
-      before(async () => {
-        // FIXME: extract code from controller into model and reuse here
-        post = new Post({
-          id: uuid4(),
-          type: 'short_text',
-          user_id: user.get('id'),
-          text: 'Lorem ipsum'
-        });
-        await post.save(null, {method: 'insert'});
-      });
-
-      after(async () => {
-        await post.destroy();
-      });
 
       it('user can open / and see 1 post there', async () => {
-        let context = await expect({ url: '/', session: sessionId }, 'to open successfully');
+        const posts = [];
+        posts.push(await createPost(user));
+        const context = await expect({ url: '/', session: sessionId }, 'to open successfully');
+
+        const document = jsdom(context.httpResponse.body);
+
+        const pageContent = await expect(document.body, 'queried for first', '#content>.page .page__content');
+        await expect(pageContent, 'to contain elements matching', '.box-post');  // posting form
+        await expect(pageContent, 'to contain elements matching', '.card');  // post card
+        await expect(pageContent, 'to contain no elements matching', 'button[title="Load more..."]');  // no load more button
+      });
 
-        let document = jsdom(context.httpResponse.body);
+      it('Load more button is visible', async () => {
+        const posts = [];
+        for (let i = 0; i < LOAD_MORE_LIMIT + 1; ++i) { // create one more posts than limit on list page
+          posts.push(await createPost(user));
+        }
+        const context = await expect({ url: '/', session: sessionId }, 'to open successfully');
 
-        let pageContent = await expect(document.body, 'queried for first', '#content>.page .page__content');
-        await expect(pageContent, 'to have child', '.box-post');  // posting form
+        const document = jsdom(context.httpResponse.body);
 
-        let postsContainer = pageContent.childNodes[0];
-        await expect(postsContainer, 'to have children');
+        const pageContent = await expect(document.body, 'queried for first', '#content>.page .page__content');
+        await expect(pageContent, 'to contain elements matching', 'button[title="Load more..."]');  // no load more button
       });
     });
   });