Add new emoji bar and some tests for it

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

@@ -1,19 +1,40 @@
-const operations = {
-  ModulesQuery: {},
-  AssignmentWithSubmissions: {
-    assignment: {
-      title: 'Ein Auftragstitel',
-      solution: '<p>Eine Lösung</p>',
-      assignment: 'Ein Auftrag',
-      submissions: [],
-    },
-  },
-  MeQuery: {
-    me: {},
-  },
-};
-
 describe('Assignments', () => {
+  const studentSubmission = {
+    id: 'submission-id',
+    text: '',
+    document: '',
+    assignment: {},
+    submissionFeedback: {
+      id: 'feedback-id',
+      text: '',
+      final: false,
+    },
+  };
+
+  const operations = {
+    ModulesQuery: {},
+    AssignmentWithSubmissions: {
+      assignment: {
+        title: 'Ein Auftragstitel',
+        solution: '<p>Eine Lösung</p>',
+        assignment: 'Ein Auftrag',
+        submissions: [studentSubmission],
+      },
+    },
+    MeQuery: {
+      me: {},
+    },
+    ModuleDetailsQuery: {},
+    StudentSubmissions: {
+      studentSubmission
+    },
+    UpdateSubmissionFeedback: {
+      updateSubmissionFeedback: {
+        successful: true,
+      },
+    },
+  };
+
   beforeEach(() => {
     cy.setup();
 
@@ -26,4 +47,14 @@ describe('Assignments', () => {
     cy.visit('/module/lohn-und-budget/submissions/QXNzaWdubWVudE5vZGU6MQ==');
     cy.getByDataCy('assignment-solution').should('have.text', 'Eine Lösung');
   });
+
+  it('gives feedback as teacher (with Emojis 🧐)', () => {
+    const finalText = 'This is a feedback 🖐️';
+    cy.visit('/submission/submission-id');
+    cy.getByDataCy('submission-textarea').type('This is a feedback ');
+    cy.getByDataCy('emoji-button').should('have.length', 9).first().click();
+    cy.getByDataCy('submission-textarea').should('have.value', finalText);
+    cy.getByDataCy('submission-form-submit').click();
+    cy.getByDataCy('submission-form-submit').should('not.exist');
+  });
 });

client/cypress/integration/frontend/rooms/article-page.spec.js

@@ -0,0 +1,25 @@
+import {getMinimalMe} from '../../../support/helpers';
+
+describe('Article page', () => {
+  const operations = {
+    MeQuery: getMinimalMe({}),
+    RoomEntryQuery: {}
+  };
+
+  beforeEach(() => {
+    cy.setup();
+  });
+
+  it('goes to article and leaves a comment', () => {
+    cy.mockGraphqlOps({
+      operations
+    });
+
+    const commentText = 'First!';
+    cy.visit('/article/this-article-has-a-slug');
+    cy.getByDataCy('emoji-button').should('have.length', 9);
+    cy.getByDataCy('add-comment-input').type(commentText);
+    cy.getByDataCy('submit-comment').should('contain', 'Kommentar teilen').click();
+    cy.getByDataCy('comment').first().should('contain', commentText);
+  });
+});

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

@@ -129,12 +129,8 @@
   @import '~styles/helpers';
 
   .submission-form-container {
+    @include form-with-border;
 
-    @include input-box-shadow;
-    background-color: $color-white;
-    border-radius: $input-border-radius;
-    border: 1px solid $color-silver;
-    padding: $medium-spacing;
     margin-bottom: $medium-spacing;
 
     &__inputs {

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

@@ -6,6 +6,7 @@
       :readonly="readonly"
       :value="inputText"
       :class="{'submission-form__textarea--readonly': readonly}"
+      data-cy="submission-textarea"
       rows="1"
       class="submission-form__textarea"
       @input="$emit('input', $event.target.value)"
@@ -53,15 +54,7 @@
     justify-content: space-between;
 
     &__textarea {
-      display: flex;
+      @include borderless-textarea;
-      width: 95%;
-      padding: 0;
-      box-sizing: border-box;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      line-height: 1.5;
-      border: 0;
-      min-height: 110px;
     }
 
     &__save-status {

client/src/components/ui/EmojiBar.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <span
+      :key="index"
+      class="emojis__emoji"
+      data-cy="emoji-button"
+      v-for="(emoji, index) in emojis"
+      @click="$emit('add-emoji', emoji)">{{ emoji }}</span>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        emojis: ['🖐️', '👍', '👎', '👏', '👋', '🎉', '😍', '😮', '🤔'],
+      };
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+</style>

client/src/pages/studentSubmission.vue

@@ -31,15 +31,11 @@
         @saveInput="saveInput"
         @reopen="reopen"
       >
-        <div
+        <emoji-bar
           class="feedback-submission__emojis emojis"
-          v-if="!final">
+          v-if="!final"
-          <span
+          @add-emoji="addEmoji" />
-            :key="index"
+
-            class="emojis__emoji"
-            v-for="(emoji, index) in emojis"
-            @click="addEmoji(emoji)">{{ emoji }}</span>
-        </div>
       </submission-form>
     </div>
   </div>
@@ -57,11 +53,13 @@
   import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm';
 
   import me from '@/mixins/me';
+  import EmojiBar from '@/components/ui/EmojiBar';
 
   export default {
 
     mixins: [me],
     components: {
+      EmojiBar,
       StudentSubmissionDocument,
       SubmissionForm,
     },
@@ -85,7 +83,6 @@
         },
         unsaved: false,
         saving: 0,
-        emojis: ['👍', '👎', '🙂', '😐', '😕', '🙁', '😮', '😉', '🙄', '❕', '❔', '🧐', '🤩', '🤗', '🤬', '🤢'],
       };
     },