Fix content block deletion bug

client/cypress/fixtures/me.minimal.js

@@ -1,10 +1,17 @@
-export default {
-  username: '',
-  firstName: '',
-  lastName: '',
-  avatarUrl: '',
-  email: '',
-  onboardingVisited: true,
-  schoolClasses: {},
-  id: '',
+const minimalMe = {
+    username: '',
+    firstName: '',
+    lastName: '',
+    avatarUrl: '',
+    email: '',
+    onboardingVisited: true,
+    schoolClasses: {},
+    id: '',
 };
+
+export const getMe = isTeacher => ({
+    ...minimalMe,
+    isTeacher,
+});
+
+export default getMe;

client/cypress/fixtures/module.minimal.js

@@ -1,11 +1,15 @@
 export default {
-  title: 'title',
-  metaTitle: 'metaTitle',
+  title: 'A Module Mock Title',
+  metaTitle: 'A Module Meta Mock Title',
   heroImage: 'heroImage',
-  teaser: 'teaser',
+  teaser: 'A Module Mock Teaser',
   intro: 'intro',
   assignments: {},
   objectiveGroups: [],
   id: '',
   chapters: [],
+  topic: {
+    title: 'A Topic Mock Title',
+    description: 'A Topic Mock Description'
+  }
 };

client/cypress/integration/frontend/custom-content-block.spec.js

@@ -0,0 +1,75 @@
+import getMe from '../../fixtures/me.minimal';
+import module from '../../fixtures/module.minimal';
+import mocks from '../../fixtures/mocks';
+
+//   title: String
+//   slug: String!
+//   hiddenFor: [SchoolClassNode]
+//   visibleFor: [SchoolClassNode]
+//   userCreated: Boolean!
+//   contents: GenericStreamFieldType
+//   type: String
+//   id: ID!
+//   mine: Boolean
+//   bookmarks: [ContentBlockBookmarkNode]
+//   originalCreator: PublicUserNode
+const chapters = [{
+  title: 'ABC',
+  description: 'DEF',
+  contentBlocks: [
+    {
+      title: 'A ContentBlock',
+      userCreated: true,
+      mine: true,
+      contents: [],
+    },
+  ],
+}];
+
+const operations = {
+  MeQuery: {
+    me: getMe(true),
+  },
+  ModuleDetailsQuery: {
+    module: {
+      ...module,
+      chapters,
+    },
+  },
+  DeleteContentBlock: {
+    success: true,
+  },
+};
+
+describe('Custom Content Block', () => {
+  before(() => {
+    cy.task('getSchema').then(schema => {
+      cy.mockGraphql({
+        schema,
+        mocks,
+        operations,
+      });
+    });
+    cy.viewport('macbook-15');
+  });
+
+  it('Deletes the custom content block and removes it from the view', () => {
+    cy.fakeLogin('nico.zickgraf', 'test');
+    cy.visit('module/some-module');
+
+    cy.log('Toggling Edit Mode');
+    cy.getByDataCy('toggle-editing').click();
+
+        cy.getByDataCy('module-title').should('exist');
+    cy.get('.content-block').should('have.length', 1);
+
+    cy.log('Opening More Menu');
+    cy.getByDataCy('more-options-link').click();
+
+    // check if content block is still there
+    cy.log('Deleting Content Block');
+    cy.getByDataCy('delete-content-block-link').click();
+
+    cy.get('.content-block').should('have.length', 0);
+  });
+});

client/cypress/integration/frontend/snapshots.spec.js

@@ -1,16 +1,11 @@
-import minimalMe from '../../fixtures/me.minimal';
+import getMe from '../../fixtures/me.minimal';
 import module from '../../fixtures/module.minimal';
 import mocks from '../../fixtures/mocks';
 
-const me = isTeacher => ({
-  ...minimalMe,
-  isTeacher,
-});
-
 const operations = isTeacher => ({
   operations: {
     MeQuery: {
-      me: me(isTeacher),
+      me: getMe(isTeacher),
     },
     ModuleDetailsQuery: {
       module,

client/cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

client/src/components/ContentBlock.vue

@@ -13,7 +13,9 @@
           v-bind="me"
           class="block-actions__user-widget content-block__user-widget"/>
         <more-options-widget>
-          <li class="popover-links__link"><a @click="deleteContentBlock(contentBlock)">Löschen</a></li>
+          <li class="popover-links__link"><a
+            data-cy="delete-content-block-link"
+            @click="deleteContentBlock(contentBlock)">Löschen</a></li>
           <li class="popover-links__link"><a @click="editContentBlock(contentBlock)">Bearbeiten</a></li>
         </more-options-widget>
       </div>
@@ -193,7 +195,7 @@
                   id: parent
                 };
                 const data = store.readQuery({query, variables});
-                data.chapter.contentBlocks.edges.splice(data.chapter.contentBlocks.edges.findIndex(edge => edge.node.id === id), 1);
+                data.chapter.contentBlocks.splice(data.chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id), 1);
                 store.writeQuery({query, variables, data});
               }
             } catch (e) {

client/src/components/MoreOptionsWidget.vue

@@ -2,6 +2,7 @@
   <div class="more-options">
     <a
       class="more-options__more-link"
+      data-cy="more-options-link"
       @click="showMenu = !showMenu">
       <ellipses class="more-options__ellipses"/>
     </a>

client/src/components/toggle-menu/ToggleEditing.vue

@@ -1,6 +1,7 @@
 <template>
   <toggle
     :checked="checked"
+    data-cy="toggle-editing"
     label="Modul anpassen"
     @input="toggle"/>
 </template>