Rename test, add new frontend test for single room view

client/cypress/integration/frontend/read-only/room-read-only.spec.js

@@ -14,27 +14,38 @@ const getOperations = ({readOnly, classReadOnly}) => ({
       },
     },
   },
-  RoomsQuery: {
-    rooms: {
+  RoomEntriesQuery: {
+    room: {
+      id: 'roomId',
+      slug: '',
+      title: 'room title',
+      entryCount: 3,
+      appearance: 'blue',
+      description: 'room description',
+      schoolClass: {
+        id: SELECTED_CLASS_ID,
+        name: 'selected class',
+      },
+      roomEntries: {
         edges: [
           {
             node: {
-            id: '',
+              id: 'entryId',
                 slug: '',
-            title: 'some room',
-            entryCount: 3,
-            appearance: 'red',
-            description: 'some description',
-            schoolClass: {
-              id: SELECTED_CLASS_ID,
-              name: 'bla',
-              readOnly: classReadOnly,
-            },
+                title: 'entry title',
+                contents: [],
+                author: {
+                  id: 'authorId',
+                  firstName: 'first',
+                  lastName: 'last',
+                  avatarUrl: ''
+                }
             },
           },
         ],
       },
     },
+  },
 });
 
 const checkRoomReadOnly = ({editable, readOnly, classReadOnly = false}) => {
@@ -45,10 +56,9 @@ const checkRoomReadOnly = ({editable, readOnly, classReadOnly = false}) => {
   });
 
   const exist = editable ? 'exist' : 'not.exist';
-  cy.visit('rooms');
-  cy.log('visit');
-  cy.get('.room-widget').should('exist');
-  cy.getByDataCy('add-room').should(exist);
+  cy.visit('room/some-room');
+  cy.get('.room-entry').should('exist');
+  cy.getByDataCy('add-room-entry-button').should(exist);
 };
 
 describe('Room Team Management - Read only', () => {

client/cypress/integration/frontend/read-only/rooms-read-only.spec.js

@@ -0,0 +1,78 @@
+import mocks from '../../../fixtures/mocks';
+
+const SELECTED_CLASS_ID = 'selectedClassId';
+
+const getOperations = ({readOnly, classReadOnly}) => ({
+  MeQuery: {
+    me: {
+      onboardingVisited: true,
+      readOnly,
+      isTeacher: true,
+      selectedClass: {
+        id: SELECTED_CLASS_ID,
+        readOnly: classReadOnly,
+      },
+    },
+  },
+  RoomsQuery: {
+    rooms: {
+      edges: [
+        {
+          node: {
+            id: '',
+            slug: '',
+            title: 'some room',
+            entryCount: 3,
+            appearance: 'red',
+            description: 'some description',
+            schoolClass: {
+              id: SELECTED_CLASS_ID,
+              name: 'bla',
+              readOnly: classReadOnly,
+            },
+          },
+        },
+      ],
+    },
+  },
+});
+
+const checkRoomsReadOnly = ({editable, readOnly, classReadOnly = false}) => {
+  const operations = getOperations({readOnly, classReadOnly});
+
+  cy.mockGraphqlOps({
+    operations,
+  });
+
+  const exist = editable ? 'exist' : 'not.exist';
+  cy.visit('rooms');
+  cy.log('visit');
+  cy.get('.room-widget').should('exist');
+  cy.getByDataCy('add-room').should(exist);
+};
+
+describe('Room Team Management - Read only', () => {
+  beforeEach(() => {
+    cy.fakeLogin('nino.teacher', 'test');
+    cy.server();
+    cy.viewport('macbook-15');
+    cy.task('getSchema').then(schema => {
+      cy.mockGraphql({
+        schema,
+        mocks,
+      });
+    });
+  });
+
+  it('can edit room', () => {
+    checkRoomsReadOnly({editable: true, readOnly: false});
+  });
+
+  it('can not edit room', () => {
+    checkRoomsReadOnly({editable: false, readOnly: true});
+  });
+
+  it('can not edit room of inactive class', () => {
+    checkRoomsReadOnly({editable: false, readOnly: false, classReadOnly: true});
+  });
+});

client/src/pages/room.vue

@@ -14,7 +14,7 @@
     <div class="room__content">
       <add-room-entry-button
         :parent="room"
-        v-if="room.id">
+        v-if="room.id && canAdd">
         <!--
         the v-if is there for the case where the room hasn't loaded yet, but there is already an attempt to create
         a new room entry. mainly happens during cypress testing, but could also happen on a very slow connection
@@ -30,11 +30,18 @@
 
 <script>
   import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
-  import roomMixin from '@/mixins/room';
+  import room from '@/mixins/room';
+  import me from '@/mixins/me';
 
   export default {
     props: ['slug'],
-    mixins: [roomMixin],
+    mixins: [room, me],
+
+    computed: {
+      canAdd() {
+        return !this.me.readOnly && !this.me.selectedClass.readOnly;
+      }
+    },
 
     apollo: {
       modules: {
@@ -59,5 +66,5 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_room.scss";
+  @import "~styles/room";
 </style>