test: e2e test for user management CRUD functionality (#310)

e2e/cypress/integration/pages/organizationmanagement/user-create.page.ts

@@ -0,0 +1,29 @@
+import { fillFormField } from '../../framework';
+
+declare interface B2BUserCreateForm {
+  title: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+}
+
+export class UserCreatePage {
+  readonly tag = 'ish-user-create-page';
+
+  private submitButton = () => cy.get('[data-testing-id="create-user-submit"]');
+
+  fillForm(content: B2BUserCreateForm) {
+    Object.keys(content)
+      .filter(key => content[key] !== undefined)
+      .forEach((key: keyof B2BUserCreateForm) => {
+        fillFormField(this.tag, key, content[key]);
+      });
+
+    return this;
+  }
+
+  submit() {
+    this.submitButton().click();
+  }
+}

e2e/cypress/integration/pages/organizationmanagement/user-edit.page.ts

@@ -0,0 +1,19 @@
+import { fillFormField } from '../../framework';
+
+export class UserEditPage {
+  readonly tag = 'ish-user-edit-profile-page';
+
+  private submitButton = () => cy.get('[data-testing-id="edit-user-submit"]');
+
+  editTitle(val: string) {
+    fillFormField(this.tag, 'title', val);
+  }
+
+  editFirstName(val: string) {
+    fillFormField(this.tag, 'firstName', val);
+  }
+
+  submit() {
+    this.submitButton().click();
+  }
+}

e2e/cypress/integration/pages/organizationmanagement/users-detail.page.ts

@@ -12,4 +12,12 @@ export class UsersDetailPage {
   get email() {
     return cy.get(this.tag).find('[data-testing-id="email-field"]');
   }
+
+  editUser() {
+    return cy.get('[data-testing-id="edit-user"]').click();
+  }
+
+  goToUserManagement() {
+    cy.get('[data-testing-id="back-to-user-management"]').click();
+  }
 }

e2e/cypress/integration/pages/organizationmanagement/users.page.ts

@@ -1,3 +1,4 @@
+import { waitLoadingEnd } from '../../framework';
 import { HeaderModule } from '../header.module';
 
 export class UsersPage {
@@ -13,7 +14,21 @@ export class UsersPage {
     return cy.get('div[data-testing-id="user-list"]');
   }
 
+  goToUser(name: string) {
+    this.usersList.find('a').contains(name).click();
+  }
+
   goToUserDetailLink(id: string) {
     cy.get(`a[href="/account/organization/users/${id}"]`).first().click();
   }
+
+  addUser() {
+    cy.get('a[data-testing-id="add-user-link"]').click();
+  }
+
+  deleteUser(name: string) {
+    cy.get(this.tag).contains('div.list-item-row', name).find('[data-testing-id="remove-user"]').click();
+    cy.get('[data-testing-id="confirm"]', { timeout: 2000 }).click();
+    waitLoadingEnd(2000);
+  }
 }

e2e/cypress/integration/specs/organizationmanagement/user-management-crud.b2b.e2e-spec.ts

@@ -0,0 +1,82 @@
+import { at } from '../../framework';
+import { createB2BUserViaREST } from '../../framework/b2b-user';
+import { LoginPage } from '../../pages/account/login.page';
+import { sensibleDefaults } from '../../pages/account/registration.page';
+import { UserCreatePage } from '../../pages/organizationmanagement/user-create.page';
+import { UserEditPage } from '../../pages/organizationmanagement/user-edit.page';
+import { UsersDetailPage } from '../../pages/organizationmanagement/users-detail.page';
+import { UsersPage } from '../../pages/organizationmanagement/users.page';
+
+// test for viewing functionality only
+
+const _ = {
+  user: {
+    login: `test${new Date().getTime()}@testcity.de`,
+    ...sensibleDefaults,
+  },
+  newUser: {
+    title: 'Mr.',
+    firstName: 'John',
+    lastName: 'Doe',
+    phone: '5551234',
+    email: `j.joe${new Date().getTime()}@testcity.de`,
+  },
+  editUser: {
+    title: 'Ms.',
+    firstName: 'Jane',
+  },
+};
+
+describe('User Management - CRUD', () => {
+  before(() => {
+    createB2BUserViaREST(_.user);
+  });
+
+  it('should start user management by logging in', () => {
+    LoginPage.navigateTo('/account/organization/users');
+    at(LoginPage, page => {
+      page.fillForm(_.user.login, _.user.password);
+      page.submit().its('status').should('equal', 200);
+    });
+    at(UsersPage, page => {
+      page.usersList.should('contain', `${_.user.firstName}`);
+    });
+  });
+
+  it('should be able to create a new user', () => {
+    at(UsersPage, page => page.addUser());
+    at(UserCreatePage, page => {
+      page.fillForm(_.newUser);
+      page.submit();
+    });
+    at(UsersPage, page => {
+      page.usersList.should('contain', `${_.newUser.firstName}`);
+    });
+  });
+
+  it('should be able to edit user', () => {
+    at(UsersPage, page => page.goToUser(`${_.newUser.firstName} ${_.newUser.lastName}`));
+    at(UsersDetailPage, page => {
+      page.name.should('contain', `${_.newUser.firstName} ${_.newUser.lastName}`);
+      page.editUser();
+    });
+    at(UserEditPage, page => {
+      page.editTitle(_.editUser.title);
+      page.editFirstName(_.editUser.firstName);
+      page.submit();
+    });
+    at(UsersDetailPage, page => {
+      page.name.should('contain', `${_.editUser.firstName} ${_.newUser.lastName}`);
+      page.goToUserManagement();
+    });
+  });
+
+  it('should be able to delete user', () => {
+    at(UsersPage, page => {
+      page.usersList.should('contain', `${_.editUser.firstName}`);
+      page.deleteUser(`${_.editUser.firstName} ${_.newUser.lastName}`);
+      page.usersList.should('not.contain', `${_.editUser.firstName}`);
+      page.usersList.should('contain', `${_.user.firstName}`);
+    });
+  });
+});

projects/organization-management/src/app/pages/user-create/user-create-page.component.html

@@ -5,10 +5,12 @@ <h1>{{ 'account.user.new.heading' | translate }}</h1>
       <ish-user-profile-form [form]="profile" [error]="userError$ | async"></ish-user-profile-form>
       <div class="row">
         <div class="offset-md-4 col-md-8">
-          <button type="submit" class="btn btn-primary" [disabled]="formDisabled">
+          <button type="submit" class="btn btn-primary" [disabled]="formDisabled" data-testing-id="create-user-submit">
             {{ 'account.user.new.button.create.label' | translate }}
           </button>
-          <a routerLink="../../" class="btn btn-secondary">{{ 'account.cancel.link' | translate }}</a>
+          <a routerLink="../../" class="btn btn-secondary" data-testing-id="create-user-cancel">{{
+            'account.cancel.link' | translate
+          }}</a>
         </div>
       </div>
     </form>

projects/organization-management/src/app/pages/user-detail/user-detail-page.component.html

@@ -33,4 +33,6 @@ <h3>{{ 'account.user.details.profile.heading' | translate }}</h3>
   </div>
 </div>
 
-<a routerLink="..">{{ 'account.organization.user_management.back_to_list' | translate }}</a>
+<a routerLink=".." data-testing-id="back-to-user-management">{{
+  'account.organization.user_management.back_to_list' | translate
+}}</a>

projects/organization-management/src/app/pages/user-edit-profile/user-edit-profile-page.component.html

@@ -4,10 +4,12 @@ <h1>{{ 'account.user.update_profile.heading' | translate }} - {{ user.firstName
     <ish-user-profile-form [form]="profileForm"></ish-user-profile-form>
     <div class="row">
       <div class="offset-md-4 col-md-8">
-        <button type="submit" class="btn btn-primary" [disabled]="formDisabled">
+        <button type="submit" class="btn btn-primary" [disabled]="formDisabled" data-testing-id="edit-user-submit">
           {{ 'account.update.button.label' | translate }}
         </button>
-        <a routerLink="../" class="btn btn-secondary">{{ 'account.cancel.link' | translate }}</a>
+        <a routerLink="../" class="btn btn-secondary" data-testing-id="edit-user-cancel">{{
+          'account.cancel.link' | translate
+        }}</a>
       </div>
     </div>
   </form>

projects/organization-management/src/app/pages/users/users-page.component.html

@@ -17,6 +17,7 @@ <h1>
         <div class="col-3 list-item text-right">
           <div class="float-right">
             <a
+              data-testing-id="remove-user"
               class="btn-tool"
               title="{{
                 'account.user.delete_user_dialog.header' | translate: { '0': user.firstName, '1': user.lastName }