Add comment count to room entry widget, with test

Resolves MS-344

client/cypress/integration/frontend/rooms/room-page.spec.js

@@ -163,7 +163,7 @@ describe('The Room Page (Teacher)', () => {
     cy.getByDataCy('room-widget').first().click();
     cy.getByDataCy('toggle-more-actions-menu').click();
     cy.getByDataCy('delete-room').within(() => {
-     cy.get('a').click();
+      cy.get('a').click();
     });
     cy.url().should('include', 'rooms');
     cy.getByDataCy('room-widget').should('have.length', 1);
@@ -228,40 +228,42 @@ describe('The Room Page (student)', () => {
   const authorId = btoa(`PublicUserNode:${id}`);
   const entrySlug = 'entry-slug';
   const {selectedClass} = me;
-  const room = {
-    id,
-    slug,
-    schoolClass: selectedClass,
-    restricted: false,
-    roomEntries: {
-      edges: [],
-    },
-  };
-
-  const RoomEntriesQuery = {
-    room,
-  };
   const roomEntry = {
     id: 'entry-id',
     slug: entrySlug,
     title: 'My Entry',
     contents: [
       {
-        type:  'text_block',
+        type: 'text_block',
         value: {
-          text: 'some text'
-        }
-      }
+          text: 'some text',
+        },
+      },
     ],
-    comments: [],
+    comments: [{}, {}],
     author: {
       ...me,
       id: authorId,
       firstName: 'Hans',
       lastName: 'Was Heiri',
-      avatarUrl: ''
+      avatarUrl: '',
     },
   };
+  const room = {
+    id,
+    slug,
+    schoolClass: selectedClass,
+    restricted: false,
+    roomEntries: {
+      edges: [{
+        node: roomEntry,
+      }],
+    },
+  };
+
+  const RoomEntriesQuery = {
+    room,
+  };
 
   beforeEach(() => {
     cy.setup();
@@ -326,7 +328,7 @@ describe('The Room Page (student)', () => {
         room,
       },
       RoomEntryQuery: {
-        roomEntry
+        roomEntry,
       },
     };
     cy.mockGraphqlOps({
@@ -339,55 +341,18 @@ describe('The Room Page (student)', () => {
   });
 
   it('Deletes room entry', () => {
-    const MeQuery = getMinimalMe({isTeacher: false});
-    const {me} = MeQuery;
-    const authorId = btoa(`PublicUserNode:${id}`);
-    const entrySlug = 'entry-slug';
-    const roomEntry = {
-      id: 'entry-id',
-      slug: entrySlug,
-      title: 'My Entry',
-      contents: [
-        {
-          type:  'text_block',
-          value: {
-            text: 'some text'
-          }
-        }
-      ],
-      comments: [],
-      author: {
-        ...me,
-        id: authorId,
-        firstName: 'Hans',
-        lastName: 'Was Heiri',
-        avatarUrl: ''
-      },
-    };
-    const room = {
-      id: 'some-room',
-      slug,
-      roomEntries: {
-        edges: [{
-          node: roomEntry
-        }],
-      },
-    };
-
     const DeleteRoomEntry = {
       deleteRoomEntry: {
         success: true,
         errors: null,
-        roomSlug: slug
-      }
+        roomSlug: slug,
+      },
     };
 
     const operations = {
       MeQuery,
-      RoomEntriesQuery: {
-        room,
-      },
-      DeleteRoomEntry
+      RoomEntriesQuery,
+      DeleteRoomEntry,
     };
 
     cy.mockGraphqlOps({
@@ -401,4 +366,20 @@ describe('The Room Page (student)', () => {
     cy.getByDataCy('room-entry').should('have.length', 0);
 
   });
+
+  it('Shows room entries with comment count', () => {
+    const operations = {
+      MeQuery,
+      RoomEntriesQuery,
+    };
+    cy.mockGraphqlOps({
+      operations,
+    });
+
+    cy.visit(`/room/${slug}`);
+    cy.getByDataCy('room-entry').should('have.length', 1).within(() => {
+      cy.getByDataCy('entry-count').should('contain.text', '2');
+    });
+
+  });
 });

client/src/components/rooms/RoomEntry.vue

@@ -27,10 +27,16 @@
           class="room-entry__teaser"
           v-html="teaser"
         />
-        <user-meta-widget
-          v-bind="author"
-          class="room-entry__author"
-        />
+        <div class="room-entry__footer">
+          <user-meta-widget
+            v-bind="author"
+            class="room-entry__author"
+          />
+          <entry-count-widget
+            :entry-count="comments"
+            :verbose="false"
+          />
+        </div>
       </div>
     </router-link>
 
@@ -49,11 +55,13 @@
   import UserMetaWidget from '@/components/UserMetaWidget';
   import teaser from '@/helpers/teaser';
   import RoomEntryActions from '@/components/rooms/RoomEntryActions';
+  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
 
   export default {
-    props: ['title', 'author', 'contents', 'slug', 'id'],
+    props: ['title', 'author', 'contents', 'slug', 'id', 'comments'],
 
     components: {
+      EntryCountWidget,
       RoomEntryActions,
       UserMetaWidget,
     },
@@ -125,5 +133,12 @@
       right: 10px;
     }
 
+    &__footer {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
   }
 </style>

client/src/graphql/gql/fragments/roomEntryParts.gql

@@ -3,6 +3,9 @@ fragment RoomEntryParts on RoomEntryNode {
   slug
   title
   contents
+  comments {
+    id
+  }
   author {
     id
     firstName

client/src/pages/rooms/room.vue

@@ -44,8 +44,9 @@
         -->
       </add-room-entry-button>
       <room-entry
-        v-for="entry in room.roomEntries"
         v-bind="entry"
+        :comments="entry.comments.length"
+        v-for="entry in room.roomEntries"
         :key="entry.id"
       />
     </div>