Add frontend tests for team creation

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

@@ -251,7 +251,7 @@ describe('Teacher Class Management', () => {
     cy.getByDataCy('active-member').should('have.length', 2);
   });
 
-  it.only('creates a new class', () => {
+  it('creates a new class', () => {
     const name = 'Hill Valley';
     let selectedClass = teacher.selectedClass;
 

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

@@ -0,0 +1,77 @@
+import {getMinimalMe} from '../../support/helpers';
+import {hasOperationName} from '../../support/graphql';
+
+const teacher = getMinimalMe();
+
+const mockCreateTeamCall = (name) => {
+  cy.intercept('POST', '/api/graphql', (req) => {
+    if (hasOperationName(req, 'CreateTeamMutation')) {
+      let result;
+      if (name) {
+        result = {
+          __typename: 'TeamNode',
+          id: 'newTeamId',
+          name,
+          code: 'ABC',
+          members: [],
+        };
+      } else {
+        result = {
+          __typename: 'DuplicateName',
+          reason: 'Dieser Name wird bereits verwendet.'
+        };
+      }
+      req.reply({
+        data: {
+          createTeam: {
+            result,
+          },
+        },
+      });
+    }
+  });
+
+};
+
+describe('Team', () => {
+  beforeEach(() => {
+    cy.setup();
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery: {
+          me: {
+            ...teacher,
+            team: null,
+          },
+        },
+      },
+    });
+  });
+
+  it('creates a new team', () => {
+    const name = 'Team Böhmi';
+
+    mockCreateTeamCall(name);
+
+    cy.visit('/me/team');
+
+    cy.getByDataCy('create-team-button').click();
+    cy.getByDataCy('join-form-input').type(name);
+    cy.getByDataCy('join-form-confirm').click();
+
+    cy.getByDataCy('group-list-name').should('contain', name);
+  });
+
+  it('tries to create team but fails due to duplicate name', () => {
+    const name = 'Gibt\'s schon';
+
+    mockCreateTeamCall(false);
+    cy.visit('/me/team');
+
+    cy.getByDataCy('create-team-button').click();
+    cy.getByDataCy('join-form-input').type(name);
+    cy.getByDataCy('join-form-confirm').click();
+
+    cy.getByDataCy('join-form-input-error').should('contain', 'Dieser Name wird bereits verwendet.');
+  });
+});

client/src/pages/me/createTeam.vue

@@ -5,6 +5,7 @@
     title="Team erfassen"
     ok-text="Team erfassen"
     label-text="Name"
+    :error="error"
     cancel-text="Abbrechen"
     @input="updateName"
     @cancel="cancel"
@@ -34,8 +35,6 @@
       updateName(event) {
         this.name = event.target.value;
         this.error = '';
-        // todo: pass error to component
-        // throw new Error('NotImplemented');
       },
       createTeam(name) {
         this.$apollo.mutate({
@@ -45,12 +44,16 @@
               name,
             },
           },
-          update: (store, {data: {createTeam: {team}}}) => {
-            addTeam(store, team);
+          update: (store, {data: {createTeam: {result}}}) => {
+            if(result.__typename === 'DuplicateName') {
+              this.error = result.reason;
+            } else {
+              addTeam(store, result);
 
               this.$router.push({
                 name: MY_TEAM,
               });
+            }
           },
         });
       },

client/src/pages/me/myTeam.vue

@@ -34,6 +34,7 @@
         </h2>
         <router-link
           :to="createTeamRoute"
+          data-cy="create-team-button"
           class="button button--primary"
         >
           Team erfassen