From deb2a2cd1bc74fe5e010edb17df1c356bd812301 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 6 Jul 2022 11:00:22 +0200
Subject: [PATCH] Add test for subtitle in room entry, add missing block

Resolves MS-487
---
 .../frontend/rooms/article-page.spec.js       | 41 ++++++++++++++-----
 .../content-blocks/SubtitleBlock.vue          |  1 +
 .../components/content-blocks/TextBlock.vue   |  1 +
 client/src/pages/article.vue                  |  2 +
 4 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/client/cypress/integration/frontend/rooms/article-page.spec.js b/client/cypress/integration/frontend/rooms/article-page.spec.js
index 3830ed0a..692b9101 100644
--- a/client/cypress/integration/frontend/rooms/article-page.spec.js
+++ b/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,
diff --git a/client/src/components/content-blocks/SubtitleBlock.vue b/client/src/components/content-blocks/SubtitleBlock.vue
index 7838824d..eefab3d8 100644
--- a/client/src/components/content-blocks/SubtitleBlock.vue
+++ b/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>
diff --git a/client/src/components/content-blocks/TextBlock.vue b/client/src/components/content-blocks/TextBlock.vue
index 8ce03d97..21caa05e 100644
--- a/client/src/components/content-blocks/TextBlock.vue
+++ b/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>
diff --git a/client/src/pages/article.vue b/client/src/pages/article.vue
index 30aa98d9..de281c59 100644
--- a/client/src/pages/article.vue
+++ b/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,
     },