Add test for subtitle in room entry, add missing block

Resolves MS-487

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

@@ -3,11 +3,22 @@ import {getMinimalMe} from '../../../support/helpers';
 describe('Article page', () => {
   const slug = 'this-article-has-a-slug';
   const roomEntry = {
-        slug,
-        id: 'room-entry-id',
-        title: 'Some Room Entry, yay!',
-        comments: [],
-      };
+    slug,
+    id: 'room-entry-id',
+    title: 'Some Room Entry, yay!',
+    comments: [],
+    contents: [{
+      type: 'text_block',
+      value: {
+        text: 'Ein Text',
+      },
+    }, {
+      type: 'subtitle',
+      value: {
+        text: 'Ein Untertitel'
+      }
+    }],
+  };
 
   const operations = {
     MeQuery: getMinimalMe({}),
@@ -23,18 +34,28 @@ describe('Article page', () => {
             roomEntry: roomEntry,
             owner: {
               firstName: 'Matt',
-              lastName: 'Damon'
-            }
-          }
-        }
+              lastName: 'Damon',
+            },
+          },
+        },
       };
-    }
+    },
   };
 
   beforeEach(() => {
     cy.setup();
   });
 
+  it('shows the article with contents', () => {
+    cy.mockGraphqlOps({
+      operations,
+    });
+
+    cy.visit(`/article/${slug}`);
+    cy.getByDataCy('text-block').should('contain.text', 'Ein Text');
+    cy.getByDataCy('subtitle-block').should('contain.text', 'Ein Untertitel');
+  });
+
   it('goes to article and leaves a comment', () => {
     cy.mockGraphqlOps({
       operations,

client/src/components/content-blocks/SubtitleBlock.vue

@@ -2,6 +2,7 @@
   <!-- eslint-disable vue/no-v-html -->
   <h5
     class="subtitle"
+    data-cy="subtitle-block"
     v-html="sanitizedText"
   />
 </template>

client/src/components/content-blocks/TextBlock.vue

@@ -2,6 +2,7 @@
   <!-- eslint-disable vue/no-v-html -->
   <div
     class="text-block"
+    data-cy="text-block"
     v-html="sanitizedText"
   />
 </template>

client/src/pages/article.vue

@@ -40,6 +40,7 @@
   const VideoBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock');
   const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
   const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
+  const SubtitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock');
 
   export default {
     components: {
@@ -51,6 +52,7 @@
       'video_block': VideoBlock,
       'link_block': LinkBlock,
       'document_block': DocumentBlock,
+      'subtitle': SubtitleBlock,
       UserMetaWidget,
     },