[#11878] Add tests for Account Request Table

src/web/app/components/account-requests-table/account-request-table.component.html

@@ -66,12 +66,12 @@
                     <i class="fa-solid fa-eye"></i>
                 </a>
               </div>
-              <button id="approve-account-request-{{i}}" class="btn btn-success" [disabled]="accountRequest.registeredAtText || accountRequest.status === 'APPROVED'" (click)="$event.stopPropagation(); approveAccountRequest(accountRequest)">Approve</button>
+              <button id="approve-account-request-{{i}}" class="btn btn-success" [disabled]="accountRequest.status === 'APPROVED' || accountRequest.status === 'REGISTERED'" (click)="$event.stopPropagation(); approveAccountRequest(accountRequest)">Approve</button>
               <span ngbDropdown container="body">
-                <button id="reject-account-request-{{i}}" type="button" class="btn btn-warning" [disabled]="accountRequest.registeredAtText || accountRequest.status === 'APPROVED' || accountRequest.status === 'REJECTED'" ngbDropdownToggle> Reject </button>
+                <button id="reject-account-request-{{i}}" type="button" class="btn btn-warning" [disabled]="accountRequest.status === 'REGISTERED' || accountRequest.status === 'APPROVED' || accountRequest.status === 'REJECTED'" ngbDropdownToggle> Reject </button>
                 <div ngbDropdownMenu (click)="$event.stopPropagation()">
-                  <button class="btn btn-light btn-sm dropdown-item" (click)="$event.stopPropagation(); rejectAccountRequest(accountRequest)"> Reject </button>
-                  <button class="btn btn-light btn-sm dropdown-item" (click)="$event.stopPropagation(); rejectAccountRequestWithReason(accountRequest)"> Reject With Reason </button>
+                  <button id="reject-request-{{i}}" class="btn btn-light btn-sm dropdown-item" (click)="$event.stopPropagation(); rejectAccountRequest(accountRequest)"> Reject </button>
+                  <button id="reject-request-with-reason-{{i}}" class="btn btn-light btn-sm dropdown-item" (click)="$event.stopPropagation(); rejectAccountRequestWithReason(accountRequest)"> Reject With Reason </button>
                 </div>
               </span>
               <div *ngIf="searchString" class="ngb-tooltip-class" [ngbTooltip]="accountRequest.registeredAtText && 'Account requests of registered instructors cannot be deleted'">

src/web/app/components/account-requests-table/account-request-table.component.ts

@@ -8,7 +8,7 @@ import {
 import { AccountService } from '../../../services/account.service';
 import { SimpleModalService } from '../../../services/simple-modal.service';
 import { StatusMessageService } from '../../../services/status-message.service';
-import { AccountRequest, AccountRequestStatus, MessageOutput } from '../../../types/api-output';
+import { AccountRequest, MessageOutput } from '../../../types/api-output';
 import { ErrorMessageOutput } from '../../error-message-output';
 import { SimpleModalType } from '../simple-modal/simple-modal-type';
 import { collapseAnim } from '../teammates-common/collapse-anim';
@@ -89,8 +89,8 @@ export class AccountRequestTableComponent {
     this.accountService.approveAccountRequest(accountRequest.id, accountRequest.name,
         accountRequest.email, accountRequest.instituteAndCountry)
     .subscribe({
-      next: () => {
-        accountRequest.status = AccountRequestStatus.APPROVED;
+      next: (resp : AccountRequest) => {
+        accountRequest.status = resp.status;
       },
       error: (resp: ErrorMessageOutput) => {
         this.statusMessageService.showErrorToast(resp.error.message);

src/web/app/components/account-requests-table/admin-edit-request-modal/__snapshots__/admin-edit-request-modal.component.spec.ts.snap

@@ -0,0 +1,215 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RejectWithReasonModal should show empty fields 1`] = `
+<tm-edit-request-modal
+  accountRequestComments=""
+  accountRequestEmail=""
+  accountRequestInstitution=""
+  accountRequestName=""
+  activeModal={[Function NgbActiveModal]}
+>
+  <div
+    class="modal-header bg-primary"
+  >
+    <h5
+      class="modal-title text-white"
+    >
+      <div>
+        Edit Account Request for 
+      </div>
+    </h5>
+    <button
+      class="btn-close"
+      type="button"
+    />
+  </div><div
+    class="modal-body"
+    id="reject-account-request-modal"
+  >
+    <div>
+      <label>
+        <b>
+          Name:
+        </b>
+      </label>
+      <input
+        class="form-control"
+        id="request-name"
+        type="text"
+      />
+    </div>
+    <div>
+      <label>
+        <b>
+          Email:
+        </b>
+      </label>
+      <input
+        class="form-control"
+        id="request-email"
+        type="text"
+      />
+    </div>
+    <div>
+      <label>
+        <b>
+          Institution, Country:
+        </b>
+      </label>
+      <input
+        class="form-control"
+        id="request-institution"
+        type="text"
+      />
+    </div>
+    <div
+      class="row"
+    >
+      <div
+        class="col-12"
+      >
+        <div>
+          <label>
+            <b>
+              Comments:
+            </b>
+          </label>
+        </div>
+        <div
+          class="form-group"
+        >
+          <textarea
+            class="form-control"
+            id="request-comments"
+            rows="5"
+          />
+        </div>
+      </div>
+      <div
+        class="modal-footer"
+      >
+        <button
+          class="btn btn-light"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="btn btn-primary"
+          id="btn-confirm-edit-request"
+          type="button"
+        >
+           Save 
+        </button>
+      </div>
+    </div>
+  </div>
+</tm-edit-request-modal>
+`;
+
+exports[`RejectWithReasonModal should show populated data 1`] = `
+<tm-edit-request-modal
+  accountRequestComments={[Function String]}
+  accountRequestEmail={[Function String]}
+  accountRequestInstitution={[Function String]}
+  accountRequestName={[Function String]}
+  activeModal={[Function NgbActiveModal]}
+>
+  <div
+    class="modal-header bg-primary"
+  >
+    <h5
+      class="modal-title text-white"
+    >
+      <div>
+        Edit Account Request for John Doe
+      </div>
+    </h5>
+    <button
+      class="btn-close"
+      type="button"
+    />
+  </div><div
+    class="modal-body"
+    id="reject-account-request-modal"
+  >
+    <div>
+      <label>
+        <b>
+          Name:
+        </b>
+      </label>
+      <input
+        class="form-control"
+        id="request-name"
+        type="text"
+      />
+    </div>
+    <div>
+      <label>
+        <b>
+          Email:
+        </b>
+      </label>
+      <input
+        class="form-control"
+        id="request-email"
+        type="text"
+      />
+    </div>
+    <div>
+      <label>
+        <b>
+          Institution, Country:
+        </b>
+      </label>
+      <input
+        class="form-control"
+        id="request-institution"
+        type="text"
+      />
+    </div>
+    <div
+      class="row"
+    >
+      <div
+        class="col-12"
+      >
+        <div>
+          <label>
+            <b>
+              Comments:
+            </b>
+          </label>
+        </div>
+        <div
+          class="form-group"
+        >
+          <textarea
+            class="form-control"
+            id="request-comments"
+            rows="5"
+          />
+        </div>
+      </div>
+      <div
+        class="modal-footer"
+      >
+        <button
+          class="btn btn-light"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="btn btn-primary"
+          id="btn-confirm-edit-request"
+          type="button"
+        >
+           Save 
+        </button>
+      </div>
+    </div>
+  </div>
+</tm-edit-request-modal>
+`;

src/web/app/components/account-requests-table/admin-edit-request-modal/admin-edit-request-modal.component.html

@@ -28,7 +28,7 @@ <h5 class="modal-title text-white">
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-light" (click)="activeModal.dismiss()">Cancel</button>
-    <button id="btn-confirm-reject-request" type="button" class="btn btn-primary" (click)="edit()">
+    <button id="btn-confirm-edit-request" type="button" class="btn btn-primary" (click)="edit()">
         Save
     </button>
   </div>

src/web/app/components/account-requests-table/admin-edit-request-modal/admin-edit-request-modal.component.spec.ts

@@ -0,0 +1,60 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { EditRequestModalComponent } from './admin-edit-request-modal.component';
+
+describe('RejectWithReasonModal', () => {
+  let fixture: ComponentFixture<EditRequestModalComponent>;
+  let component: EditRequestModalComponent;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [],
+      imports: [
+        HttpClientTestingModule,
+      ],
+      providers: [NgbActiveModal],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditRequestModalComponent);
+    fixture.detectChanges();
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show empty fields', () => {
+    expect(fixture).toMatchSnapshot();
+  });
+
+  it('should show populated data', () => {
+    component.accountRequestName = 'John Doe';
+    component.accountRequestEmail = 'johndoe@email.com';
+    component.accountRequestInstitution = 'NUS';
+    component.accountRequestComments = 'Comments';
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+
+  it('should close modal with data', () => {
+    const spyActiveModal = jest.spyOn(component.activeModal, 'close');
+    component.accountRequestName = 'John Doe';
+    component.accountRequestEmail = 'johndoe@email.com';
+    component.accountRequestInstitution = 'NUS';
+    component.accountRequestComments = 'Comments';
+    fixture.detectChanges();
+    component.edit();
+    expect(spyActiveModal).toHaveBeenCalled();
+    expect(spyActiveModal).toHaveBeenCalledWith({
+      accountRequestName: 'John Doe',
+      accountRequestEmail: 'johndoe@email.com',
+      accountRequestInstitution: 'NUS',
+      accountRequestComment: 'Comments',
+    });
+  });
+});