Add solution block to client (including cypress test)

client/cypress/integration/solutions.spec.js

@@ -0,0 +1,17 @@
+describe('Solutions', () => {
+  it.only('does not display the solution at first, then displays them after clicking', () => {
+    cy.viewport('macbook-15');
+    cy.login('rahel.cueni', 'test');
+
+    cy.visit('/module/lohn-und-budget');
+    cy.get('[data-cy=solution]').first()
+      .should('contain', 'anzeigen').then($solution => {
+      cy.wrap($solution).within(() => {
+        cy.get('[data-cy=show-solution]').click();
+      });
+      cy.wrap($solution)
+        .should('contain', 'Lösungssatz')
+        .should('contain', 'ausblenden');
+    });
+  });
+});

client/src/components/ContentBlock.vue

@@ -38,6 +38,7 @@
   import LinkBlock from '@/components/content-blocks/LinkBlock';
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import Assignment from '@/components/content-blocks/assignment/Assignment';
+  import Solution from '@/components/content-blocks/Solution';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
   import VisibilityAction from '@/components/visibility/VisibilityAction';
   import EyeIcon from '@/components/icons/EyeIcon';
@@ -58,6 +59,7 @@
       'video_block': VideoBlock,
       'link_block': LinkBlock,
       'document_block': DocumentBlock,
+      Solution,
       Assignment,
       Task,
       AddContentBlockButton,

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

@@ -0,0 +1,26 @@
+<template>
+  <div class="solution" data-cy="solution">
+    <a data-cy="show-solution" @click="toggle">Lösung <span v-if="!visible">anzeigen</span><span v-if="visible">ausblenden</span></a>
+    <p class="solution-text" data-cy="solution-text" v-if="visible">
+      {{value.text}}
+    </p>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['value'],
+
+    methods: {
+      toggle() {
+        this.visible = !this.visible;
+      }
+    },
+
+    data() {
+      return {
+        visible: false
+      }
+    }
+  }
+</script>