Fix re-added tests

client/cypress/fixtures/mocks.js

@@ -1,3 +1,11 @@
+const selectedClass = {
+  id: 'selectedClassId',
+  name: 'Moordale',
+  readOnly: false,
+  code: 'XXXX',
+  members: []
+};
+
 export default {
   UUID: () => '123-456-789',
   GenericStreamFieldType: () => ({type: 'text_block', value: 'Generic Stream Field Type'}),
@@ -42,7 +50,13 @@ export default {
   }),
   PrivateUserNode: () => ({
     readOnly: false,
-    onboardingVisited: true
+    onboardingVisited: true,
+    selectedClass,
+    schoolClasses: {
+      edges: [
+        {node: selectedClass}
+      ]
+    }
   }),
   SchoolClassNode: () => ({
     readOnly: false

client/cypress/integration/frontend/school-class-management.spec.js

@@ -17,23 +17,33 @@ const members = [
   },
 ];
 
-const selectedClass = {
+const getSelectedClass = (classMembers = members) => ({
   name: 'Moordale',
-  members
-};
+  members: classMembers
+});
 
-describe('Class Management', () => {
+describe('School Class Management', () => {
   beforeEach(() => {
     cy.setup();
   });
 
   it('should join class', () => {
     const name = 'KF1A';
-    const id = 'U2Nob29sQ2xhc3NOb2RlOjI=';
+    let selectedClassName = 'Moordale';
+
+    const getSelectedClassWithName = () => ({
+      id: 'selectedClassId',
+      name: selectedClassName
+    });
 
     cy.mockGraphqlOps({
       operations: {
-        MeQuery,
+        MeQuery: () => ({
+          me: {
+            ...teacher,
+            selectedClass: getSelectedClassWithName()
+          }
+        }),
         // JoinClass() {
         //   // fixme: is this necessary? the cache somehow does not seem to do anything for the MeQuery
         //   let schoolClass = {
@@ -52,25 +62,21 @@ describe('Class Management', () => {
         //     }
         //   }
         // },
-        JoinClass: {
-          joinClass: {
-            success: true,
-            schoolClass: {
-              name,
-              id
+        JoinClass() {
+          selectedClassName = name;
+          return {
+            joinClass: {
+              success: true,
+              schoolClass: getSelectedClassWithName()
             }
-          }
+          };
         },
-        MySchoolClassQuery: {
+        MySchoolClassQuery: () => ({
           me: {
-            ...selectedClass.me,
-            selectedClass: {
-              name,
-              id,
-              members: []
-            }
+            ...teacher,
+            selectedClass: getSelectedClassWithName()
           }
-        }
+        })
       }
     });
 
@@ -85,10 +91,10 @@ describe('Class Management', () => {
 
     cy.get('[data-cy=join-class-link]').click();
 
-    cy.get('[data-cy=input-class-code]').type('XXXX');
-    cy.get('[data-cy=join-class]').click();
+    cy.get('[data-cy=join-form-input]').type('XXXX');
+    cy.get('[data-cy=join-form-confirm]').click();
 
-    cy.get('[data-cy=school-class-name]').should('contain', name);
+    cy.get('[data-cy=group-list-name]').should('contain', name);
     cy.get('[data-cy=current-class-name]').should('contain', name);
 
     cy.get('[data-cy=header-user-widget]').within(() => {
@@ -97,7 +103,8 @@ describe('Class Management', () => {
 
     cy.get('[data-cy=class-selection]').click();
     cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
-  });
+  })
+  ;
 
   it('should leave and re-join class', () => {
     cy.mockGraphqlOps({
@@ -110,8 +117,7 @@ describe('Class Management', () => {
         },
         MySchoolClassQuery: {
           me: {
-            ...teacher,
-            selectedClass
+            ...teacher
           }
         },
       },
@@ -184,17 +190,14 @@ describe('Teacher Class Management', () => {
         MySchoolClassQuery: {
           me: {
             ...teacher,
-            selectedClass,
           },
         },
         UpdateSchoolClass: {
           updateSchoolClass: {
             success: true,
             schoolClass: {
-              name: className,
-              __typename: 'SchoolClassNode',
+              name: className
             },
-            __typename: 'UpdateSchoolClassPayload',
           },
         },
       },
@@ -212,35 +215,39 @@ describe('Teacher Class Management', () => {
     cy.get('not-implemented');
   });
 
-  // // fixme: cache misbehaves with mequery, but only for test
-  //
-  it('creates a new class', () => {
-    const name = 'Moordale';
-    const id = 'U2Nob29sQ2xhc3NOb2RlOjI=';
-    const __typename = 'SchoolClassNode';
-    let localMe = {
-      me: {
-        ...me.me,
-        isTeacher: true
+  it.only('creates a new class', () => {
+    const name = 'Hill Valley';
+    let selectedClass = teacher.selectedClass;
+
+    const schoolClasses = [
+      {
+        node: teacher.selectedClass
       }
-    };
+    ];
+
+    const me = () => ({
+      ...teacher,
+      selectedClass,
+      schoolClasses: {
+        edges: schoolClasses
+      }
+    });
 
     cy.mockGraphqlOps({
       operations: {
-        MeQuery: () => {
-          return localMe;
-        },
+        MeQuery: () => ({
+          me: me()
+        }),
         CreateSchoolClass() {
-          // fixme: is this necessary? the cache somehow does not seem to do anything for the MeQuery
-          let schoolClass = {
-            id,
+          const schoolClass = {
+            id: 'newSchoolClassId',
             name,
-            __typename
+            readOnly: false
           };
-          // localMe.me.schoolClasses.edges.push({
-          //   node: schoolClass,
-          //   __typename: 'SchoolClassNodeEdge'
-          // });
+          schoolClasses.push({
+            node: schoolClass
+          });
+          selectedClass = schoolClass;
           return {
             createSchoolClass: {
               success: true,
@@ -248,17 +255,9 @@ describe('Teacher Class Management', () => {
             }
           };
         },
-        MySchoolClassQuery: {
-          me: {
-            ...selectedClass.me,
-            selectedClass: {
-              __typename,
-              name,
-              id,
-              members: []
-            }
-          }
-        }
+        MySchoolClassQuery: () => ({
+          me: me()
+        })
       }
     });
 
@@ -275,11 +274,12 @@ describe('Teacher Class Management', () => {
 
     cy.get('[data-cy=create-class-link]').click();
 
-    cy.get('[data-cy=input-class-name]').type(name);
+    cy.get('[data-cy=join-form-input]').type(name);
 
-    cy.get('[data-cy=create-class]').click();
+    cy.get('[data-cy=join-form-confirm]').click();
 
-    cy.get('[data-cy=school-class-name]').should('contain', name);
+    cy.get('[data-cy=close-profile-sidebar-link]').click();
+    cy.get('[data-cy=group-list-name]').should('contain', name);
     cy.get('[data-cy=current-class-name]').should('contain', name);
 
     cy.get('[data-cy=header-user-widget]').within(() => {

client/src/components/profile/JoinForm.vue

@@ -10,7 +10,7 @@
           :class="{'skillboxform-input__input--error': error}"
           :value="value"
           class="skillbox-input skillboxform-input__input"
-          data-cy="input-form-code"
+          data-cy="join-form-input"
           id="join-code"
           @input="$emit('input', $event)">
         <small

client/src/components/profile/ProfileSidebar.vue

@@ -6,6 +6,7 @@
       v-if="sidebar.profile">
       <a
         class="profile-sidebar__close-link"
+        data-cy="close-profile-sidebar-link"
         @click="close">
         <cross class="profile-sidebar__close-icon"/>
       </a>