From 3045da7491af15feae10c492cf799c3a3f4a8c1d Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 12 Apr 2022 15:35:15 +0200
Subject: [PATCH] Add frontend tests for team creation

---
 .../frontend/school-class-management.spec.js  |  2 +-
 .../cypress/integration/frontend/team.spec.js | 77 +++++++++++++++++++
 client/src/pages/me/createTeam.vue            | 17 ++--
 client/src/pages/me/myTeam.vue                |  1 +
 4 files changed, 89 insertions(+), 8 deletions(-)
 create mode 100644 client/cypress/integration/frontend/team.spec.js

diff --git a/client/cypress/integration/frontend/school-class-management.spec.js b/client/cypress/integration/frontend/school-class-management.spec.js
index 694aef1e..88d6782c 100644
--- a/client/cypress/integration/frontend/school-class-management.spec.js
+++ b/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;
 
diff --git a/client/cypress/integration/frontend/team.spec.js b/client/cypress/integration/frontend/team.spec.js
new file mode 100644
index 00000000..95d65e6d
--- /dev/null
+++ b/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.');
+  });
+});
diff --git a/client/src/pages/me/createTeam.vue b/client/src/pages/me/createTeam.vue
index ee1b5154..1b570170 100644
--- a/client/src/pages/me/createTeam.vue
+++ b/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,
-            });
+              this.$router.push({
+                name: MY_TEAM,
+              });
+            }
           },
         });
       },
diff --git a/client/src/pages/me/myTeam.vue b/client/src/pages/me/myTeam.vue
index fe19e374..8c3aa711 100644
--- a/client/src/pages/me/myTeam.vue
+++ b/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