Implement frontend tests for assignment read only mode

client/cypress/integration/frontend/assignment-feedback-read-only.teacher.spec.js

@@ -1,8 +1,68 @@
+import mocks from '../../fixtures/mocks';
+
+const myText = 'Mein Feedback';
+
+const getOperations = ({readOnly}) => ({
+  MeQuery: {
+    me: {
+      onboardingVisited: true,
+      readOnly,
+    },
+  },
+  StudentSubmissions: {
+    studentSubmission: {
+      id: 'id',
+      text: 'Submission Text',
+      document: '',
+      student: {
+        firstName: 'Peter',
+        lastName: 'Student',
+      },
+      assignment: {
+        title: 'Assignment Title',
+        assignment: 'Assignment Text',
+      },
+      submissionFeedback: {
+        id: 'feedback-id',
+        text: myText,
+        final: true,
+      },
+    },
+  },
+});
+
 describe('Assignment feedback read-only - Teacher', () => {
-  it('can not edit', () => {
-    cy.get('.not-implemented');
+  beforeEach(() => {
+    cy.fakeLogin('nico.teacher', 'test');
+    cy.server();
+    cy.task('getSchema').then(schema => {
+      cy.mockGraphql({
+        schema,
+        mocks,
       });
-  it('can not share', () => {
-    cy.get('.not-implemented');
+    });
+  });
+
+  it('can not edit', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({readOnly: true}),
+    });
+
+    cy.visit('submission/submission-id');
+    // cy.get('.submission-form__textarea--readonly').as('textarea');
+    //
+    // cy.get('@textarea').invoke('val').should('contain', myText);
+    // cy.get('@textarea').should('have.attr', 'readonly');
+
+    cy.isSubmissionReadOnly(myText);
+    cy.canReopen(false);
+  });
+  it('can edit', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations({readOnly: false}),
+    });
+
+    cy.visit('submission/submission-id');
+    cy.canReopen(false);
   });
 });

client/cypress/integration/frontend/assignment-read-only.student.spec.js

@@ -56,10 +56,6 @@ const getOperations = ({final, readOnly}) => ({
   },
 });
 
-Cypress.Commands.add('canNotReopen', () => {
-  cy.getByDataCy('final-submission-reopen').should('not.exist');
-});
-
 describe('Assignments read-only - Student', () => {
   beforeEach(() => {
     cy.fakeLogin('rahel.cueni', 'test');
@@ -93,13 +89,8 @@ describe('Assignments read-only - Student', () => {
     });
     cy.visit('module/module-with-assignment');
 
-    cy.get('.submission-form__textarea--readonly').as('textarea');
-
-    cy.get('@textarea').invoke('val').should('contain', myText);
-    cy.get('@textarea').should('have.attr', 'readonly');
-
-    cy.getByDataCy('submission-form-submit').should('not.exist');
-    cy.canNotReopen();
+    cy.isSubmissionReadOnly(myText);
+    cy.canReopen(false);
   });
 
   it('can revoke turn in', () => {
@@ -119,6 +110,6 @@ describe('Assignments read-only - Student', () => {
 
     cy.visit('module/module-with-assignment');
     cy.getByDataCy('final-submission').should('exist');
-    cy.canNotReopen();
+    cy.canReopen(false);
   });
 });

client/cypress/support/commands.js

@@ -35,16 +35,16 @@ Cypress.Commands.add('apolloLogin', (username, password) => {
     'variables': {
       'input': {
         'usernameInput': username,
-        'passwordInput': password
-      }
+        'passwordInput': password,
       },
-    'query': 'mutation BetaLogin($input: BetaLoginInput!) {\n  betaLogin(input: $input) {\n    success\n    __typename\n  }\n}\n'
+    },
+    'query': 'mutation BetaLogin($input: BetaLoginInput!) {\n  betaLogin(input: $input) {\n    success\n    __typename\n  }\n}\n',
   };
 
   cy.request({
     method: 'POST',
     url: '/api/graphql-public/',
-    body: payload
+    body: payload,
   });
 });
 
@@ -78,8 +78,8 @@ Cypress.Commands.add('loginByCsrf', (username, password, csrftoken) => {
     body: {
       username: username,
       password: password,
-      csrfmiddlewaretoken: csrftoken
-    }
+      csrfmiddlewaretoken: csrftoken,
+    },
   });
 });
 
@@ -189,3 +189,21 @@ Cypress.Commands.add('fakeLogin', () => {
   cy.log('Logging in (fake)');
   cy.setCookie('loginStatus', 'true');
 });
+
+Cypress.Commands.add('canReopen', (exists) => {
+  let check;
+  if (exists) {
+    check = 'exist';
+  } else {
+    check = 'not.exist';
+  }
+  cy.getByDataCy('final-submission-reopen').should(check);
+});
+
+Cypress.Commands.add('isSubmissionReadOnly', (myText) => {
+  cy.get('.submission-form__textarea--readonly').as('textarea');
+
+  cy.get('@textarea').invoke('val').should('contain', myText);
+  cy.get('@textarea').should('have.attr', 'readonly');
+  cy.getByDataCy('submission-form-submit').should('not.exist');
+});

client/cypress/support/index.d.ts

@@ -23,5 +23,9 @@ declare namespace Cypress {
     login(username: string, password: string, visitLogin?: boolean): void
 
     fakeLogin(username: string, password: string): void
+
+    canReopen(exists: boolean): void
+
+    isSubmissionReadOnly(myText: string): void
   }
 }

client/src/pages/studentSubmission.vue

@@ -22,6 +22,7 @@
       <submission-form
         :user-input="feedback"
         :saved="!unsaved"
+        :read-only="me.readOnly"
         placeholder="Feedback erfassen"
         action="Feedback teilen"
         shared-msg="Dieses Feedback wurde geteilt."
@@ -55,7 +56,11 @@
   import UPDATE_FEEDBACK_WITH_TEXT_MUTATION from '@/graphql/gql/mutations/updateFeedbackWithText.gql';
   import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm';
 
+  import me from '@/mixins/me';
+
   export default {
+
+    mixins: [me],
     components: {
       StudentSubmissionDocument,
       SubmissionForm