From 5ce09a4e13209efcfc6b2372c25a16a729d1a837 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 4 Feb 2019 15:19:58 +0100
Subject: [PATCH] Add solution block to client (including cypress test)

---
 client/cypress/integration/solutions.spec.js  | 17 ++++++++++++
 client/src/components/ContentBlock.vue        |  2 ++
 .../components/content-blocks/Solution.vue    | 26 +++++++++++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 client/cypress/integration/solutions.spec.js
 create mode 100644 client/src/components/content-blocks/Solution.vue

diff --git a/client/cypress/integration/solutions.spec.js b/client/cypress/integration/solutions.spec.js
new file mode 100644
index 00000000..04cec8d4
--- /dev/null
+++ b/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');
+    });
+  });
+});
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index d1e1efca..e3aa0e5e 100644
--- a/client/src/components/ContentBlock.vue
+++ b/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,
diff --git a/client/src/components/content-blocks/Solution.vue b/client/src/components/content-blocks/Solution.vue
new file mode 100644
index 00000000..4dcfe3eb
--- /dev/null
+++ b/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>