Skip to content

Commit

Permalink
[#11878] Add tests for Account Request Table (#12977)
Browse files Browse the repository at this point in the history
* add component tests for account request table

* modify tests

* remove old tests

* remove comment

* remove unnecessary code

* add tests

* update disabled criteria

* remove extra builders and update snaps
  • Loading branch information
domoberzin committed Apr 14, 2024
1 parent 2bd06e2 commit 4682dff
Show file tree
Hide file tree
Showing 12 changed files with 1,703 additions and 404 deletions.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -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'">
Expand Down

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
@@ -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',
});
});
});
Loading

0 comments on commit 4682dff

Please sign in to comment.