From d4e94645036ba2dc8039f29d01c480876e45d2ed Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 17 Feb 2022 16:26:25 +0100
Subject: [PATCH] Add test for creating content blocks

---
 .../modules/create-content-block.page.spec.js | 57 +++++++++++++++++--
 .../content-block-form/AddContentLink.vue     |  1 +
 .../content-block-form/ContentBlockForm.vue   |  3 +
 .../ContentBlockElementChooserWidget.vue      |  5 +-
 client/src/components/ui/InputWithLabel.vue   |  1 +
 5 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/client/cypress/integration/frontend/modules/create-content-block.page.spec.js b/client/cypress/integration/frontend/modules/create-content-block.page.spec.js
index aac14a9a..7897c895 100644
--- a/client/cypress/integration/frontend/modules/create-content-block.page.spec.js
+++ b/client/cypress/integration/frontend/modules/create-content-block.page.spec.js
@@ -1,19 +1,66 @@
+import {getMinimalMe} from '../../../support/helpers';
+
+const MeQuery = getMinimalMe();
+
 describe('Create Content Block', () => {
+  beforeEach(() => {
+    cy.setup();
+
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery,
+        ModuleDetailsQuery: {
+          module: {},
+        },
+        AddContentBlock: {
+          addContentBlock: {
+
+          }
+        }
+      },
+    });
+  });
+
   it('visits the page', () => {
     // todo:
     // add mocks
-    // cy.visit('/module/some-module/add/bliblablub');
+    cy.visit('/module/some-module/add-after/bliblablub');
     // add title
+    cy.getByDataCy('content-block-form-heading').should('exist');
+    cy.getByDataCy('content-list').should('not.exist');
+    cy.getByDataCy('save-button').should('exist').should('be.disabled');
+    cy.getByDataCy('content-block-title').within(() => {
+      cy.getByDataCy('input-with-label-input').type('Title of my book');
+    });
+
+    cy.getByDataCy('add-content-link').click();
+    cy.getByDataCy('chooser-heading').should('contain', 'Neuer Inhalt');
     // add text element
+    cy.getByDataCy('choose-text-widget').click();
+    cy.getByDataCy('text-form-input').type('Hallo Sam');
+
     // add list item
+    cy.getByDataCy('add-content-link').last().click();
+    cy.getByDataCy('convert-to-list-checkbox').click();
     // add text element to list item
-    // add second list item
-    // add text element to second list item
-    // add another text element to second list item
+    cy.getByDataCy('choose-text-widget').click();
+    cy.getByDataCy('content-list').within(() => {
+      cy.getByDataCy('text-form-input').last().type('Hallo Velo');
+      // add second list item
+      cy.getByDataCy('add-content-link').click();
+      // add text element to second list item
+      cy.getByDataCy('choose-text-widget').click();
+      cy.getByDataCy('text-form-input').last().type('Hallo Velo');
+      // add another text element to second list item
+      cy.getByDataCy('add-content-link').last().click();
+      cy.getByDataCy('choose-text-widget').click();
+      cy.getByDataCy('text-form-input').last().type('Hallo Outo');
+    });
     // save
+    cy.getByDataCy('save-button').should('exist').should('not.be.disabled').click();
 
     // another test
-    // go to pase
+    // go to page
     // click cancel, go back
   });
 });
diff --git a/client/src/components/content-block-form/AddContentLink.vue b/client/src/components/content-block-form/AddContentLink.vue
index 42b813ae..8554e48b 100644
--- a/client/src/components/content-block-form/AddContentLink.vue
+++ b/client/src/components/content-block-form/AddContentLink.vue
@@ -1,6 +1,7 @@
 <template>
   <a
     class="add-content-link"
+    data-cy="add-content-link"
     @click="$emit('click')"
   ><plus-icon class="add-content-link__icon" /> <span class="add-content-link__text">Neuer Inhalt</span></a>
 </template>
diff --git a/client/src/components/content-block-form/ContentBlockForm.vue b/client/src/components/content-block-form/ContentBlockForm.vue
index db4a5fe9..3ca34b47 100644
--- a/client/src/components/content-block-form/ContentBlockForm.vue
+++ b/client/src/components/content-block-form/ContentBlockForm.vue
@@ -21,6 +21,7 @@
       <content-form-section title="Titel">
         <input-with-label
           :value="localContentBlock.title"
+          data-cy="content-block-title"
           label="Name"
           placeholder="z.B. Auftrag 3"
           @input="localContentBlock.title=$event"
@@ -40,6 +41,7 @@
         <!-- If the block is a content list -->
         <div
           class="content-block-form__segment"
+          data-cy="content-list"
           v-if="block.type === 'content_list_item'"
         >
           <content-element-actions
@@ -102,6 +104,7 @@
         <button
           :disabled="!isValid"
           class="button button--primary"
+          data-cy="save-button"
           @click="save(localContentBlock)"
         >
           Speichern
diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
index 24606af5..5e392f6d 100644
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
@@ -6,7 +6,10 @@
     >
       <cross-icon class="icon-button__icon" />
     </button>
-    <h3 class="content-block-element-chooser-widget__heading">
+    <h3
+      class="content-block-element-chooser-widget__heading"
+      data-cy="chooser-heading"
+    >
       Neuer Inhalt
     </h3>
     <template
diff --git a/client/src/components/ui/InputWithLabel.vue b/client/src/components/ui/InputWithLabel.vue
index 2624cc2b..558dc957 100644
--- a/client/src/components/ui/InputWithLabel.vue
+++ b/client/src/components/ui/InputWithLabel.vue
@@ -4,6 +4,7 @@
     <input
       :value="value"
       :placeholder="placeholder"
+      data-cy="input-with-label-input"
       class="skillbox-input"
       @input="$emit('input', $event.target.value)"
     >