Add test for creating content blocks

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
   });
 });

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>

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

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

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)"
     >