From 27d3525ea5de66ffccfc6f5322131e37b94b9f90 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Fri, 13 Aug 2021 16:59:03 +0200
Subject: [PATCH] Fix bug in modal text

---
 client/cypress/fixtures/mocks.js              |  2 +
 .../frontend/school-class-management.spec.js  | 66 ++++++++++++++-----
 client/cypress/support/helpers.js             |  2 +-
 .../components/profile/DeactivatePerson.vue   |  8 ++-
 client/src/components/profile/GroupList.vue   |  4 +-
 client/src/pages/myClass.vue                  |  4 +-
 6 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/client/cypress/fixtures/mocks.js b/client/cypress/fixtures/mocks.js
index 0fa91392..a6df8cfb 100644
--- a/client/cypress/fixtures/mocks.js
+++ b/client/cypress/fixtures/mocks.js
@@ -62,6 +62,8 @@ export default {
     readOnly: false
   }),
   ClassMemberNode: () => ({
+    firstName: 'First Name',
+    lastName: 'Last Name',
     active: true,
     isTeacher: false,
     isMe: false
diff --git a/client/cypress/integration/frontend/school-class-management.spec.js b/client/cypress/integration/frontend/school-class-management.spec.js
index 7a7f4f53..1a012e24 100644
--- a/client/cypress/integration/frontend/school-class-management.spec.js
+++ b/client/cypress/integration/frontend/school-class-management.spec.js
@@ -17,11 +17,6 @@ const members = [
   },
 ];
 
-const getSelectedClass = (classMembers = members) => ({
-  name: 'Moordale',
-  members: classMembers
-});
-
 describe('School Class Management', () => {
   beforeEach(() => {
     cy.setup();
@@ -133,18 +128,13 @@ describe('School Class Management', () => {
 
     cy.get('[data-cy=modal-save-button]').click();
 
-    cy.get('[data-cy=active-class-members-list]').within(() => {
-      cy.get('[data-cy=group-list-member]').should('have.length', 1);
-    });
-    cy.get('[data-cy=inactive-class-members-list]').within(() => {
-      cy.get('[data-cy=group-list-member]').should('have.length', 1);
-    });
+    cy.getByDataCy('active-member').should('have.length', 1);
+    cy.getByDataCy('inactive-member').should('have.length', 1);
 
     cy.get('[data-cy=add-to-class]').first().click();
 
-    cy.get('[data-cy=active-class-members-list]').within(() => {
-      cy.get('[data-cy=group-list-member]').should('have.length', 2);
-    });
+    cy.getByDataCy('active-member').should('have.length', 2);
+
     cy.get('[data-cy=inactive-class-members-list]').should('not.exist');
   });
 
@@ -212,10 +202,54 @@ describe('Teacher Class Management', () => {
   });
 
   it('removes student, then leaves class', () => {
-    cy.get('not-implemented');
+    const myId = btoa('PrivateUserNode:1');
+    const memberId = btoa('GroupMemberNode:1');
+    let classMembers = [
+      {...teacher, id: myId, isMe: true, isTeacher: true},
+      ...members
+    ];
+    let me = () => ({
+      ...teacher,
+      id: memberId,
+      selectedClass: {
+        name: 'Just some class',
+        id: 'selectedClassId',
+        readOnly: false,
+        members: classMembers
+      }
+    });
+
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery: {
+          me: me()
+        },
+        AddRemoveMember: {
+          addRemoveMember: {
+            success: true,
+          },
+        },
+        MySchoolClassQuery: {
+          me: me()
+        },
+      },
+    });
+
+    cy.visit('/me/my-class');
+    cy.getByDataCy('active-member').should('have.length', 3);
+    cy.getByDataCy('remove-from-class').first().click();
+    cy.getByDataCy('deactivate-person-modal').should('exist');
+    cy.getByDataCy('modal-body-text').should('contain', 'deaktivieren');
+    cy.getByDataCy('modal-save-button').click();
+    cy.getByDataCy('active-member').should('have.length', 2);
+    cy.getByDataCy('leave-group').click();
+    cy.getByDataCy('deactivate-person-modal').should('exist');
+    cy.getByDataCy('modal-body-text').should('contain', 'verlassen');
+    cy.getByDataCy('modal-save-button').click();
+    cy.getByDataCy('active-member').should('have.length', 1);
   });
 
-  it.only('creates a new class', () => {
+  it('creates a new class', () => {
     const name = 'Hill Valley';
     let selectedClass = teacher.selectedClass;
 
diff --git a/client/cypress/support/helpers.js b/client/cypress/support/helpers.js
index 34552e82..0e3cce59 100644
--- a/client/cypress/support/helpers.js
+++ b/client/cypress/support/helpers.js
@@ -2,7 +2,7 @@
 
 export const getMinimalMe = ({readOnly = false, classReadOnly = false, isTeacher = true}) => ({
   me: {
-    id: 'meId',
+    id: btoa('PrivateUserNode:1'),
     readOnly,
     isTeacher,
     selectedClass: {
diff --git a/client/src/components/profile/DeactivatePerson.vue b/client/src/components/profile/DeactivatePerson.vue
index 12f18506..b78b2e96 100644
--- a/client/src/components/profile/DeactivatePerson.vue
+++ b/client/src/components/profile/DeactivatePerson.vue
@@ -2,6 +2,7 @@
   <modal
     :hide-header="true"
     :small="true"
+    data-cy="deactivate-person-modal"
     class="deactivate-user">
     <h3 class="deactivate-user__heading">
       <template v-if="myself">
@@ -12,7 +13,9 @@
       </template>
       deaktivieren
     </h3>
-    <p class="deactivate-user__text deactivate-user__paragraph">
+    <p
+      class="deactivate-user__text deactivate-user__paragraph"
+      data-cy="modal-body-text">
       <template v-if="myself">
         Möchten Sie die Klasse <strong class="deactivate-user__text--strong">{{ schoolClass }}</strong> verlassen?
       </template>
@@ -95,8 +98,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .deactivate-user {
     &__heading {
diff --git a/client/src/components/profile/GroupList.vue b/client/src/components/profile/GroupList.vue
index 6a9686be..6597cbfb 100644
--- a/client/src/components/profile/GroupList.vue
+++ b/client/src/components/profile/GroupList.vue
@@ -25,7 +25,7 @@
           <li
             :key="member.id"
             class="simple-list__item member-item"
-            data-cy="group-list-member"
+            data-cy="active-member"
             v-for="member in activeMembers">
             <span class="member-item__name">{{ fullName(member) }}</span>
             <span class="member-item__role">{{ role(member) }} </span>
@@ -49,7 +49,7 @@
             <li
               :key="member.id"
               class="simple-list__item member-item"
-              data-cy="group-list-member"
+              data-cy="inactive-member"
               v-for="member in inactiveMembers">
               <span class="member-item__name">{{ fullName(member) }}</span>
               <span class="member-item__role">{{ role(member) }}</span>
diff --git a/client/src/pages/myClass.vue b/client/src/pages/myClass.vue
index de7bbd5a..fd3e71bd 100644
--- a/client/src/pages/myClass.vue
+++ b/client/src/pages/myClass.vue
@@ -76,8 +76,10 @@
         this.changeMember(member, true);
       },
       remove(member) {
+        const memberId = atob(member.id).split(':')[1];
+        const meId = atob(this.me.id).split(':')[1];
         this.$modal.open('deactivate-person', {
-            myself: member.id === this.me.id,
+            myself: memberId === meId,
             name: `${member.firstName} ${member.lastName}`,
             className: this.me.selectedClass.name,
           })