Fix frontend tests

client/cypress/e2e/frontend/bookmarks.spec.js

@@ -87,6 +87,7 @@ describe('Bookmarks', () => {
 
   it('should bookmark instrument', () => {
     cy.visit('/instrument/an-instrument');
+    cy.wait('@InstrumentQuery');
 
     cy.getByDataCy('content-component').first().as('contentComponent');
 
@@ -110,10 +111,12 @@ describe('Bookmarks', () => {
     });
 
     cy.get('[data-cy=modal-save-button]').click();
+    cy.wait('@InstrumentQuery');
   });
 
   it('should bookmark module', () => {
     cy.visit('/module/lohn-und-budget/');
+    cy.wait('@ModuleDetailsQuery');
     cy.getByDataCy('module-bookmark-actions').as('moduleBookmark');
 
     cy.get('@moduleBookmark').within(() => {
@@ -136,10 +139,12 @@ describe('Bookmarks', () => {
     });
 
     cy.get('[data-cy=modal-save-button]').click();
+    cy.wait('@ModuleDetailsQuery');
   });
 
   it('should bookmark chapter', () => {
     cy.visit('/module/lohn-und-budget/');
+    cy.wait('@ModuleDetailsQuery');
 
     cy.getByDataCy('chapter-bookmark-actions').as('chapterBookmark');
 
@@ -163,10 +168,12 @@ describe('Bookmarks', () => {
     });
 
     cy.get('[data-cy=modal-save-button]').click();
+    cy.wait('@ModuleDetailsQuery');
   });
 
   it('should bookmark content block', () => {
     cy.visit('/module/lohn-und-budget/');
+    cy.wait('@ModuleDetailsQuery');
 
     cy.getByDataCy('content-component').contains('Das folgende Interview').parent().parent().as('interviewContent');
 
@@ -190,5 +197,6 @@ describe('Bookmarks', () => {
     });
 
     cy.get('[data-cy=modal-save-button]').click();
+    cy.wait('@ModuleDetailsQuery');
   });
 });

client/cypress/e2e/frontend/instruments/module-page.spec.js

@@ -38,6 +38,7 @@ describe('Instruments on Module page', () => {
                         value: {
                           description:
                             '<p>Ein Interview dient dazu, durch Befragung Informationen zu ermitteln. Bei journalistischen Interviews werden oft Expertinnen und Experten befragt, aber auch Personen.</p>',
+                          slug: 'interview',
                         },
                       },
                     ],

client/cypress/e2e/frontend/modules/highlights.cy.ts

@@ -291,6 +291,8 @@ describe('Highlights', () => {
     });
     cy.visit('/module/my-module');
 
+    cy.wait('@ModuleDetailsQuery');
+
     markText();
 
     const highlightedText = 'es ist ein';
@@ -331,6 +333,8 @@ describe('Highlights', () => {
 
     cy.visit('/module/my-module');
 
+    cy.wait('@ModuleDetailsQuery');
+
     markText();
   });
 
@@ -345,6 +349,7 @@ describe('Highlights', () => {
     });
 
     cy.visit('/module/my-module');
+    cy.wait('@ModuleDetailsQuery');
 
     markText();
     cy.getByDataCy('highlight-note').click();
@@ -358,6 +363,7 @@ describe('Highlights', () => {
       operations,
     });
     cy.visit('/module/my-module');
+    cy.wait('@ModuleDetailsQuery');
 
     markText();
     const highlightedText = 'es ist ein';
@@ -375,6 +381,7 @@ describe('Highlights', () => {
       operations: getOperations('ChapterNode'),
     });
     cy.visit('/module/my-module');
+    cy.wait('@ModuleDetailsQuery');
 
     markText('chapter-intro');
     const highlightedText = 'is is some';
@@ -393,6 +400,7 @@ describe('Highlights', () => {
       operations,
     });
     cy.visit('/module/my-module');
+    cy.wait('@ModuleDetailsQuery');
 
     markText('module-intro');
     const highlightedText = 'troducing';

client/cypress/e2e/frontend/portfolio/projects-page.spec.js

@@ -18,6 +18,7 @@ describe('Projects page', () => {
       operations,
     });
     cy.visit('/portfolio');
+    cy.wait('@ProjectsQuery');
     cy.getByDataCy('page-title').should('contain', 'Portfolio');
     cy.getByDataCy('portfolio-onboarding-illustration').should('exist');
     cy.getByDataCy('portfolio-onboarding-subtitle').should('contain', 'Woran denken Sie gerade');
@@ -53,6 +54,7 @@ describe('Projects page', () => {
       operations,
     });
     cy.visit('/portfolio');
+    cy.wait('@ProjectsQuery');
     cy.getByDataCy('page-title').should('contain', 'Portfolio');
     cy.getByDataCy('create-project-button').should('exist');
     cy.getByDataCy('project-list').should('exist');
@@ -99,6 +101,7 @@ describe('Projects page', () => {
     });
 
     cy.visit('/portfolio');
+    cy.wait('@ProjectsQuery');
 
     cy.getByDataCy('project').should('have.length', 1);
 
@@ -123,6 +126,7 @@ describe('Projects page', () => {
     });
     cy.viewport('iphone-8');
     cy.visit('/portfolio');
+    cy.wait('@ProjectsQuery');
 
     cy.getByDataCy('page-title').should('exist');
     cy.getByDataCy('create-project-button').should('not.exist');

client/src/components/ContentBlock.vue

@@ -100,7 +100,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, inject, onMounted, ref, computed, onUnmounted } from 'vue';
+import { inject, onMounted, ref, computed, onUnmounted } from 'vue';
 
 import { useMutation } from '@vue/apollo-composable';
 import AddContentButton from '@/components/AddContentButton.vue';
@@ -109,6 +109,7 @@ import UserWidget from '@/components/UserWidget.vue';
 import VisibilityAction from '@/components/visibility/VisibilityAction.vue';
 import PopoverLink from '@/components/ui/PopoverLink.vue';
 import CopyLink from '@/components/CopyLink.vue';
+import ContentComponent from '@/components/content-blocks/ContentComponent.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { hidden } from '@/helpers/visibility';
 import { insertAtIndex, removeAtIndex } from '@/graphql/immutable-operations';
@@ -144,8 +145,6 @@ export interface Props {
   editMode?: boolean;
 }
 
-const ContentComponent = defineAsyncComponent(() => import('@/components/content-blocks/ContentComponent.vue'));
-
 const { me, schoolClass } = getMe();
 
 const contentBlockDiv = ref<HTMLElement | null>(null);

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -58,9 +58,9 @@ export interface Props {
   saved: boolean;
   placeholder: string;
   action: string;
-  readOnly: boolean;
-  spellcheck: boolean;
-  spellcheckLoading: boolean;
+  readOnly?: boolean;
+  spellcheck?: boolean;
+  spellcheckLoading?: boolean;
   sharedMsg: string;
 }
 

client/src/components/content-blocks/assignment/SubmissionInput.vue

@@ -3,11 +3,11 @@
     <textarea
       :placeholder="placeholder"
       :readonly="readonly"
-      :value="inputText"
       :class="{ 'submission-form__textarea--readonly': readonly }"
       data-cy="submission-textarea"
       rows="1"
       class="borderless-textarea"
+      v-model="editText"
       v-auto-grow
       @input="input"
     />
@@ -27,7 +27,8 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, ref, watch } from 'vue';
+
 const TickCircleIcon = defineAsyncComponent(() => import('@/components/icons/TickCircleIcon.vue'));
 const LoadingIcon = defineAsyncComponent(() => import('@/components/icons/LoadingIcon.vue'));
 
@@ -38,12 +39,37 @@ interface Props {
   placeholder: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Ergebnis erfassen',
 });
 
+const editText = ref(props.inputText);
+
 const emit = defineEmits(['input']);
 
+const containsEmoji = (text: string) => {
+  if (!text) {
+    return false
+  }
+  const lastCharacter = Array.from(text)[Array.from(text).length - 1];
+
+  if (lastCharacter && lastCharacter.charCodeAt(0)> 55000) //fix for the hand symbol 🖐️
+    return true
+  const emojiRegex = /\p{Emoji}/u;
+  return emojiRegex.test(lastCharacter);
+};
+
+watch(
+  () => props.inputText,
+  (newValue) => {
+    // TODO: Lorenz this is an ugly fix!
+    if (containsEmoji(newValue)) {
+      editText.value = newValue;
+      emit('input', editText.value);
+    }
+  }
+);
+
 const input = (e: Event) => {
   const value = (e.target as HTMLInputElement).value;
   emit('input', value);

client/src/components/highlights/HighlightPopover.vue

@@ -49,7 +49,7 @@ export interface Props {
   showDelete: boolean;
 }
 
-const emit = defineEmits(['close', 'confirm', 'choose-color', 'delete']);
+const emit = defineEmits(['close', 'confirm', 'choose-color', 'delete', 'note']);
 defineProps<Props>();
 const confirmDelete = () => {
   modal