Add cypress test for validation case

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

@@ -1,3 +1,5 @@
+import {hasOperationName} from '../../support/graphql';
+
 const me = require('../../fixtures/me.join-class.json');
 const {getMinimalMe} = require('../../support/helpers');
 
@@ -28,7 +30,7 @@ describe('School Class Management', () => {
 
     const getSelectedClassWithName = () => ({
       id: 'selectedClassId',
-      name: selectedClassName
+      name: selectedClassName,
     });
 
     cy.mockGraphqlOps({
@@ -36,8 +38,8 @@ describe('School Class Management', () => {
         MeQuery: () => ({
           me: {
             ...teacher,
-            selectedClass: getSelectedClassWithName()
+            selectedClass: getSelectedClassWithName(),
-          }
+          },
         }),
         // JoinClass() {
         //   // fixme: is this necessary? the cache somehow does not seem to do anything for the MeQuery
@@ -62,17 +64,17 @@ describe('School Class Management', () => {
           return {
             joinClass: {
               success: true,
-              schoolClass: getSelectedClassWithName()
+              schoolClass: getSelectedClassWithName(),
-            }
+            },
           };
         },
         MySchoolClassQuery: () => ({
           me: {
             ...teacher,
-            selectedClass: getSelectedClassWithName()
+            selectedClass: getSelectedClassWithName(),
-          }
+          },
-        })
+        }),
-      }
+      },
     });
 
     cy.visit('/me/profile');
@@ -112,8 +114,8 @@ describe('School Class Management', () => {
         },
         MySchoolClassQuery: {
           me: {
-            ...teacher
+            ...teacher,
-          }
+          },
         },
       },
     });
@@ -169,7 +171,7 @@ describe('Teacher Class Management', () => {
     const {me: teacher} = getMinimalMe({});
 
     let localMe = {
-      me: teacher
+      me: teacher,
     };
 
     cy.mockGraphqlOps({
@@ -184,7 +186,7 @@ describe('Teacher Class Management', () => {
           updateSchoolClass: {
             success: true,
             schoolClass: {
-              name: className
+              name: className,
             },
           },
         },
@@ -204,7 +206,7 @@ describe('Teacher Class Management', () => {
     const memberId = btoa('GroupMemberNode:1');
     let classMembers = [
       {...teacher, id: myId, isMe: true, isTeacher: true},
-      ...members
+      ...members,
     ];
     let me = () => ({
       ...teacher,
@@ -213,14 +215,14 @@ describe('Teacher Class Management', () => {
         name: 'Just some class',
         id: 'selectedClassId',
         readOnly: false,
-        members: classMembers
+        members: classMembers,
-      }
+      },
     });
 
     cy.mockGraphqlOps({
       operations: {
         MeQuery: {
-          me: me()
+          me: me(),
         },
         AddRemoveMember: {
           addRemoveMember: {
@@ -228,7 +230,7 @@ describe('Teacher Class Management', () => {
           },
         },
         MySchoolClassQuery: {
-          me: me()
+          me: me(),
         },
       },
     });
@@ -249,46 +251,53 @@ describe('Teacher Class Management', () => {
     cy.getByDataCy('active-member').should('have.length', 2);
   });
 
-  it('creates a new class', () => {
+  it.only('creates a new class', () => {
     const name = 'Hill Valley';
     let selectedClass = teacher.selectedClass;
 
     const schoolClasses = [
-        teacher.selectedClass
+      teacher.selectedClass,
     ];
 
     const me = () => ({
       ...teacher,
       selectedClass,
-      schoolClasses
+      schoolClasses,
     });
 
+
     cy.mockGraphqlOps({
       operations: {
         MeQuery: () => ({
-          me: me()
+          me: me(),
         }),
-        CreateSchoolClass() {
-          const schoolClass = {
-            id: 'newSchoolClassId',
-            name,
-            readOnly: false
-          };
-          schoolClasses.push(schoolClass);
-          selectedClass = schoolClass;
-          return {
-            createSchoolClass: {
-              success: true,
-              schoolClass
-            }
-          };
-        },
         MySchoolClassQuery: () => ({
-          me: me()
+          me: me(),
-        })
+        }),
+      },
+    });
+
+    cy.intercept('POST', '/api/graphql', (req) => {
+      if (hasOperationName(req, 'CreateSchoolClass')) {
+        const schoolClass = {
+          __typename: 'SchoolClassNode',
+          id: 'newSchoolClassId',
+          name,
+          readOnly: false,
+        };
+        schoolClasses.push(schoolClass);
+        selectedClass = schoolClass;
+        req.reply({
+          data: {
+            createSchoolClass: {
+              result: schoolClass
+            }
+          }
+        });
       }
     });
 
+
     cy.visit('/me/my-class');
 
     cy.get('h1').should('exist');
@@ -317,4 +326,71 @@ describe('Teacher Class Management', () => {
     cy.get('[data-cy=class-selection]').click();
     cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
   });
+
+  it('tries to create a new class with duplicate name', () => {
+    const name = 'Hill Billy Valley';
+    let selectedClass = teacher.selectedClass;
+    selectedClass.name = 'Some stupid class';
+
+    const schoolClasses = [
+      teacher.selectedClass,
+    ];
+
+    const me = () => ({
+      ...teacher,
+      selectedClass,
+      schoolClasses,
+    });
+
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery: () => ({
+          me: me(),
+        }),
+        WhateverNode() {
+          console.log('Through here');
+          return {};
+        },
+        MySchoolClassQuery: () => ({
+          me: me(),
+        }),
+      },
+    });
+
+    // since recently, graphql requests can be intercepted by cypress
+    cy.intercept('POST', '/api/graphql', (req) => {
+      if (hasOperationName(req, 'CreateSchoolClass')) {
+        req.reply({
+          data: {
+            createSchoolClass: {
+              result: {
+                __typename: 'DuplicateName',
+                reason: 'Dieser Name wird bereits verwendet.'
+              }
+            }
+          }
+        });
+      }
+    });
+
+    cy.visit('/me/my-class');
+
+    cy.get('h1').should('exist');
+
+    cy.get('[data-cy=header-user-widget]').within(() => {
+      cy.get('[data-cy=user-widget-avatar]').click();
+    });
+
+    cy.get('[data-cy=class-selection]').click();
+    cy.get('[data-cy=class-selection-entry]').should('have.length', 1);
+
+    cy.get('[data-cy=create-class-link]').click();
+
+    cy.get('[data-cy=join-form-input]').type(name);
+
+    cy.get('[data-cy=join-form-confirm]').click();
+
+    cy.getByDataCy('join-form-input-error').should('contain', 'Dieser Name wird bereits verwendet.');
+
+  });
 });

client/src/components/profile/JoinForm.vue

@@ -19,6 +19,7 @@
         >
         <small
           class="skillboxform-input__error"
+          data-cy="join-form-input-error"
           v-if="error"
         >{{ error }}
         </small>

server/users/schema/mutations.py

@@ -210,7 +210,7 @@ class CreateSchoolClass(TeacherOnlyMutation):
             user.set_selected_class(school_class)
             return cls(result=school_class)
         except IntegrityError:
-            return cls(result={"reason": "Name wird bereits verwendet"})
+            return cls(result={"reason": "Dieser Name wird bereits verwendet."})
 
 
 class CreateTeam(TeacherOnlyMutation):