From 6c40fa0bd74d649a0d72e9f19093270648bda0c4 Mon Sep 17 00:00:00 2001
From: Nereus Ng Wei Bin <iamnereusng@gmail.com>
Date: Sun, 31 Mar 2024 13:58:49 +0800
Subject: [PATCH] Revert "Deploy v1.1.1 (#292)"

This reverts commit 263426aef1e9895bbaf13a97f6e2a0731e01d300.
---
 package.json                                  |   4 +-
 src/app/core/models/milestone.model.ts        |   8 +-
 src/app/core/services/filters.service.ts      |  38 ++---
 .../card-view/card-view.component.html        |   2 +-
 .../filter-bar/filter-bar.component.html      |  12 +-
 .../shared/filter-bar/filter-bar.component.ts |  27 ++--
 .../issue-pr-card.component.html              |   2 +-
 .../issue-pr-card/issue-pr-card.component.ts  |   4 +-
 .../shared/issue-tables/IssuesDataTable.ts    |  33 +++--
 src/app/shared/issue-tables/dropdownfilter.ts |  35 +++--
 .../shared/issue-tables/filterableTypes.ts    |   7 +-
 src/app/shared/issue-tables/issue-sorter.ts   |  22 +--
 src/test.ts                                   |   5 +-
 .../label-filter-bar.component.spec.ts        |  56 +++++++
 .../label-filter-bar.component.spec.ts        | 140 ------------------
 .../shared/issue-tables/issue-sorter.spec.ts  |  29 ++--
 tests/constants/label.constants.ts            |  15 +-
 tests/services/phase.service.spec.ts          |  98 ++++--------
 tests/services/user.service.spec.ts           |  73 ++++++---
 19 files changed, 269 insertions(+), 341 deletions(-)
 create mode 100644 tests/app/issues-viewer/label-filter-bar/label-filter-bar.component.spec.ts
 delete mode 100644 tests/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.spec.ts

diff --git a/package.json b/package.json
index 70efb1a57..6148a7c99 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "WATcher",
-  "version": "1.1.1",
+  "version": "1.1.0",
   "main": "main.js",
   "scripts": {
     "ng": "ng",
@@ -24,7 +24,7 @@
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged",
-      "pre-push": "npm run lint && npm run test"
+      "pre-push": "npm run lint"
     }
   },
   "dependencies": {
diff --git a/src/app/core/models/milestone.model.ts b/src/app/core/models/milestone.model.ts
index 8f90e5058..b2a00e0f4 100644
--- a/src/app/core/models/milestone.model.ts
+++ b/src/app/core/models/milestone.model.ts
@@ -2,16 +2,18 @@
  * Represents a milestone and its attributes fetched from Github.
  */
 export class Milestone {
-  static DefaultMilestone: Milestone = new Milestone({ title: 'Without a milestone', state: null });
+  static DefaultMilestone: Milestone = new Milestone({ number: 'untracked', title: 'Without a milestone', state: null });
+  readonly number: string; // equivalent to the id of an issue e.g. milestone #1
   title: string;
   state: string;
 
-  constructor(milestone: { title: string; state: string }) {
+  constructor(milestone: { number: string; title: string; state: string }) {
+    this.number = milestone.number;
     this.title = milestone.title;
     this.state = milestone.state;
   }
 
   public equals(milestone: Milestone) {
-    return this.title === milestone.title;
+    return this.number === milestone.number;
   }
 }
diff --git a/src/app/core/services/filters.service.ts b/src/app/core/services/filters.service.ts
index c6c0af356..aa1b4352e 100644
--- a/src/app/core/services/filters.service.ts
+++ b/src/app/core/services/filters.service.ts
@@ -1,57 +1,39 @@
 import { Injectable } from '@angular/core';
-import { Sort } from '@angular/material/sort';
 import { BehaviorSubject, pipe } from 'rxjs';
-
-export type Filter = {
-  title: string;
-  status: string;
-  type: string;
-  sort: Sort;
-  labels: string[];
-  milestones: string[];
-  hiddenLabels?: Set<string>;
-};
-
-export const DEFAULT_FILTER: Filter = {
-  title: '',
-  status: 'all',
-  type: 'all',
-  sort: { active: 'id', direction: 'asc' },
-  labels: [],
-  milestones: []
-};
+import { DEFAULT_DROPDOWN_FILTER, DropdownFilter } from '../../shared/issue-tables/dropdownfilter';
 
 @Injectable({
   providedIn: 'root'
 })
+
 /**
  * Responsible for centralising filters
  * Filters are subscribed to and emitted from this service
  */
 export class FiltersService {
-  public filter$ = new BehaviorSubject<Filter>(DEFAULT_FILTER);
+  public dropdownFilter$ = new BehaviorSubject<DropdownFilter>(DEFAULT_DROPDOWN_FILTER);
 
   private _validateFilter = pipe(this.updateStatusPairing, this.updateTypePairing);
 
   clearFilters(): void {
-    this.filter$.next(DEFAULT_FILTER);
+    this.dropdownFilter$.next(DEFAULT_DROPDOWN_FILTER);
   }
 
-  updateFilters(newFilters: Partial<Filter>): void {
-    let nextDropdownFilter: Filter = {
-      ...this.filter$.value,
+  updateFilters(newFilters: Partial<DropdownFilter>): void {
+    let nextDropdownFilter: DropdownFilter = {
+      ...this.dropdownFilter$.value,
       ...newFilters
     };
 
     nextDropdownFilter = this._validateFilter(nextDropdownFilter);
 
-    this.filter$.next(nextDropdownFilter);
+    this.dropdownFilter$.next(nextDropdownFilter);
   }
 
   /**
    * Changes type to a valid, default value when an incompatible combination of type and status is encountered.
    */
-  updateTypePairing(dropdownFilter: Filter): Filter {
+  updateTypePairing(dropdownFilter: DropdownFilter): DropdownFilter {
     if (dropdownFilter.status === 'merged') {
       dropdownFilter.type = 'pullrequest';
     }
@@ -61,7 +43,7 @@ export class FiltersService {
   /**
    * Changes status to a valid, default value when an incompatible combination of type and status is encountered.
    */
-  updateStatusPairing(dropdownFilter: Filter): Filter {
+  updateStatusPairing(dropdownFilter: DropdownFilter): DropdownFilter {
     if (dropdownFilter.status === 'merged' && dropdownFilter.type === 'issue') {
       dropdownFilter.status = 'all';
     }
diff --git a/src/app/issues-viewer/card-view/card-view.component.html b/src/app/issues-viewer/card-view/card-view.component.html
index 8c2968a81..872080b8d 100644
--- a/src/app/issues-viewer/card-view/card-view.component.html
+++ b/src/app/issues-viewer/card-view/card-view.component.html
@@ -21,7 +21,7 @@
   <div class="scrollable-container-wrapper">
     <div class="scrollable-container">
       <div class="issue-pr-cards" *ngFor="let issue of this.issues$ | async; index as i">
-        <app-issue-pr-card [issue]="issue" [filter]="issues.filter"></app-issue-pr-card>
+        <app-issue-pr-card [issue]="issue" [dropdownFilter]="issues.dropdownFilter"></app-issue-pr-card>
       </div>
       <mat-card class="loading-spinner" *ngIf="this.issues.isLoading$ | async">
         <mat-progress-spinner color="primary" mode="indeterminate" diameter="50" strokeWidth="5"></mat-progress-spinner>
diff --git a/src/app/shared/filter-bar/filter-bar.component.html b/src/app/shared/filter-bar/filter-bar.component.html
index bad68b9cc..39d0a718a 100644
--- a/src/app/shared/filter-bar/filter-bar.component.html
+++ b/src/app/shared/filter-bar/filter-bar.component.html
@@ -1,7 +1,7 @@
 <mat-grid-list cols="7" rowHeight="80px">
   <mat-grid-tile colspan="3">
     <mat-form-field class="search-bar">
-      <input matInput (keyup)="this.filtersService.updateFilters({ title: $event.target.value })" placeholder="Search" />
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" />
     </mat-form-field>
   </mat-grid-tile>
 
@@ -9,7 +9,7 @@
     <div class="dropdown-filters">
       <mat-form-field appearance="standard">
         <mat-label>Status</mat-label>
-        <mat-select [value]="this.filter.status" (selectionChange)="this.filtersService.updateFilters({ status: $event.value })">
+        <mat-select [value]="this.dropdownFilter.status" (selectionChange)="this.filtersService.updateFilters({ status: $event.value })">
           <mat-option value="all">All</mat-option>
           <mat-option value="open">Open</mat-option>
           <mat-option value="closed">Closed</mat-option>
@@ -18,7 +18,7 @@
       </mat-form-field>
       <mat-form-field appearance="standard">
         <mat-label>Type</mat-label>
-        <mat-select [value]="this.filter.type" (selectionChange)="this.filtersService.updateFilters({ type: $event.value })">
+        <mat-select [value]="this.dropdownFilter.type" (selectionChange)="this.filtersService.updateFilters({ type: $event.value })">
           <mat-option value="all">All</mat-option>
           <mat-option value="issue">Issue</mat-option>
           <mat-option value="pullrequest">Pull Request</mat-option>
@@ -31,7 +31,7 @@
         (matSortChange)="this.filtersService.updateFilters({ sort: $event })"
       >
         <mat-label>Sort</mat-label>
-        <mat-select [value]="this.filter.sort.active">
+        <mat-select [value]="this.dropdownFilter.sort.active">
           <mat-option value="id">
             <span mat-sort-header="id">ID</span>
           </mat-option>
@@ -47,7 +47,7 @@
         <mat-label>Milestone</mat-label>
         <mat-select
           #milestoneSelectorRef
-          [value]="this.filter.milestones"
+          [value]="this.dropdownFilter.milestones"
           (selectionChange)="this.filtersService.updateFilters({ milestones: $event.value })"
           [disabled]="this.milestoneService.hasNoMilestones"
           multiple
@@ -55,7 +55,7 @@
           <mat-select-trigger *ngIf="this.milestoneService.hasNoMilestones">
             <span>No Milestones</span>
           </mat-select-trigger>
-          <mat-option *ngFor="let milestone of this.milestoneService.milestones" [value]="milestone.title">
+          <mat-option *ngFor="let milestone of this.milestoneService.milestones" [value]="milestone.number">
             {{ milestone.title }}
           </mat-option>
         </mat-select>
diff --git a/src/app/shared/filter-bar/filter-bar.component.ts b/src/app/shared/filter-bar/filter-bar.component.ts
index c9bb21077..ab6941934 100644
--- a/src/app/shared/filter-bar/filter-bar.component.ts
+++ b/src/app/shared/filter-bar/filter-bar.component.ts
@@ -1,10 +1,11 @@
 import { AfterViewInit, Component, Input, OnDestroy, OnInit, QueryList, ViewChild } from '@angular/core';
 import { MatSelect } from '@angular/material/select';
 import { BehaviorSubject, Subscription } from 'rxjs';
-import { DEFAULT_FILTER, Filter, FiltersService } from '../../core/services/filters.service';
+import { FiltersService } from '../../core/services/filters.service';
 import { LoggingService } from '../../core/services/logging.service';
 import { MilestoneService } from '../../core/services/milestone.service';
 import { PhaseService } from '../../core/services/phase.service';
+import { DEFAULT_DROPDOWN_FILTER, DropdownFilter } from '../issue-tables/dropdownfilter';
 import { FilterableComponent } from '../issue-tables/filterableTypes';
 import { LabelFilterBarComponent } from './label-filter-bar/label-filter-bar.component';
 
@@ -23,7 +24,7 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
   repoChangeSubscription: Subscription;
 
   /** Selected dropdown filter value */
-  filter: Filter = DEFAULT_FILTER;
+  dropdownFilter: DropdownFilter = DEFAULT_DROPDOWN_FILTER;
 
   /** Milestone subscription */
   milestoneSubscription: Subscription;
@@ -46,9 +47,9 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit(): void {
-    this.filtersService.filter$.subscribe((dropdownFilter) => {
-      this.filter = dropdownFilter;
-      this.applyFilter();
+    this.filtersService.dropdownFilter$.subscribe((dropdownFilter) => {
+      this.dropdownFilter = dropdownFilter;
+      this.applyDropdownFilter();
     });
   }
 
@@ -59,16 +60,24 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
 
   /**
    * Signals to IssuesDataTable that a change has occurred in filter.
+   * @param filterValue
    */
-  applyFilter() {
-    this.views$?.value?.forEach((v) => (v.retrieveFilterable().filter = this.filter));
+  applyFilter(filterValue: string) {
+    this.views$?.value?.forEach((v) => (v.retrieveFilterable().filter = filterValue));
+  }
+
+  /**
+   * Signals to IssuesDataTable that a change has occurred in dropdown filter.
+   */
+  applyDropdownFilter() {
+    this.views$?.value?.forEach((v) => (v.retrieveFilterable().dropdownFilter = this.dropdownFilter));
   }
 
   /**
    * Checks if program is filtering by type issue.
    */
   isNotFilterIssue() {
-    return this.filter.type !== 'issue';
+    return this.dropdownFilter.type !== 'issue';
   }
 
   /**
@@ -79,7 +88,7 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
     this.milestoneSubscription = this.milestoneService.fetchMilestones().subscribe(
       (response) => {
         this.logger.debug('IssuesViewerComponent: Fetched milestones from Github');
-        this.milestoneService.milestones.forEach((milestone) => this.filter.milestones.push(milestone.title));
+        this.milestoneService.milestones.forEach((milestone) => this.dropdownFilter.milestones.push(milestone.number));
       },
       (err) => {},
       () => {}
diff --git a/src/app/shared/issue-pr-card/issue-pr-card.component.html b/src/app/shared/issue-pr-card/issue-pr-card.component.html
index 9c9c36d87..0e092c5aa 100644
--- a/src/app/shared/issue-pr-card/issue-pr-card.component.html
+++ b/src/app/shared/issue-pr-card/issue-pr-card.component.html
@@ -4,7 +4,7 @@
       <app-issue-pr-card-header [issue]="issue"></app-issue-pr-card-header>
       <mat-card-content>
         <app-issue-pr-card-milestone [milestone]="issue.milestone"></app-issue-pr-card-milestone>
-        <app-issue-pr-card-labels [labels]="issue.githubLabels" [labelSet]="filter?.hiddenLabels"></app-issue-pr-card-labels>
+        <app-issue-pr-card-labels [labels]="issue.githubLabels" [labelSet]="dropdownFilter?.hiddenLabels"></app-issue-pr-card-labels>
       </mat-card-content>
     </span>
   </a>
diff --git a/src/app/shared/issue-pr-card/issue-pr-card.component.ts b/src/app/shared/issue-pr-card/issue-pr-card.component.ts
index 47fbf1a8f..77176ba78 100644
--- a/src/app/shared/issue-pr-card/issue-pr-card.component.ts
+++ b/src/app/shared/issue-pr-card/issue-pr-card.component.ts
@@ -1,9 +1,9 @@
 import { Component, Input } from '@angular/core';
 import { Issue } from '../../core/models/issue.model';
-import { Filter } from '../../core/services/filters.service';
 import { GithubService } from '../../core/services/github.service';
 import { LabelService } from '../../core/services/label.service';
 import { LoggingService } from '../../core/services/logging.service';
+import { DropdownFilter } from '../issue-tables/dropdownfilter';
 
 @Component({
   selector: 'app-issue-pr-card',
@@ -12,7 +12,7 @@ import { LoggingService } from '../../core/services/logging.service';
 })
 export class IssuePrCardComponent {
   @Input() issue: Issue;
-  @Input() filter?: Filter;
+  @Input() dropdownFilter?: DropdownFilter;
 
   constructor(private logger: LoggingService, private githubService: GithubService, public labelService: LabelService) {}
 
diff --git a/src/app/shared/issue-tables/IssuesDataTable.ts b/src/app/shared/issue-tables/IssuesDataTable.ts
index eb805aade..c325f6a7c 100644
--- a/src/app/shared/issue-tables/IssuesDataTable.ts
+++ b/src/app/shared/issue-tables/IssuesDataTable.ts
@@ -4,9 +4,8 @@ import { BehaviorSubject, merge, Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { GithubUser } from '../../core/models/github-user.model';
 import { Issue } from '../../core/models/issue.model';
-import { DEFAULT_FILTER, Filter } from '../../core/services/filters.service';
 import { IssueService } from '../../core/services/issue.service';
-import { applyDropdownFilter } from './dropdownfilter';
+import { applyDropdownFilter, DEFAULT_DROPDOWN_FILTER, DropdownFilter } from './dropdownfilter';
 import { FilterableSource } from './filterableTypes';
 import { paginateData } from './issue-paginator';
 import { applySort } from './issue-sorter';
@@ -14,7 +13,9 @@ import { applySearchFilter } from './search-filter';
 
 export class IssuesDataTable extends DataSource<Issue> implements FilterableSource {
   public count = 0;
-  private filterChange = new BehaviorSubject(DEFAULT_FILTER);
+  private filterChange = new BehaviorSubject('');
+  private dropdownFilterChange = new BehaviorSubject(DEFAULT_DROPDOWN_FILTER);
+  private teamFilterChange = new BehaviorSubject('');
   private issuesSubject = new BehaviorSubject<Issue[]>([]);
   private issueSubscription: Subscription;
 
@@ -35,7 +36,9 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
   }
 
   disconnect() {
+    this.dropdownFilterChange.complete();
     this.filterChange.complete();
+    this.teamFilterChange.complete();
     this.issuesSubject.complete();
     this.issueSubscription.unsubscribe();
     this.issueService.stopPollIssues();
@@ -47,7 +50,9 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
       page = this.paginator.page;
     }
 
-    const displayDataChanges = [this.issueService.issues$, page, this.filterChange].filter((x) => x !== undefined);
+    const displayDataChanges = [this.issueService.issues$, page, this.filterChange, this.dropdownFilterChange].filter(
+      (x) => x !== undefined
+    );
 
     this.issueService.startPollIssues();
     this.issueSubscription = merge(...displayDataChanges)
@@ -75,13 +80,13 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
             });
           }
 
-          // Apply Filters
-          data = applyDropdownFilter(this.filter, data);
+          // Dropdown Filters
+          data = applyDropdownFilter(this.dropdownFilter, data);
 
-          data = applySearchFilter(this.filter.title, this.displayedColumn, this.issueService, data);
+          data = applySearchFilter(this.filter, this.displayedColumn, this.issueService, data);
           this.count = data.length;
 
-          data = applySort(this.filter.sort, data);
+          data = applySort(this.dropdownFilter.sort, data);
 
           if (this.paginator !== undefined) {
             data = paginateData(this.paginator, data);
@@ -94,11 +99,19 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
       });
   }
 
-  get filter(): Filter {
+  get filter(): string {
     return this.filterChange.value;
   }
 
-  set filter(filter: Filter) {
+  set filter(filter: string) {
     this.filterChange.next(filter);
   }
+
+  get dropdownFilter(): DropdownFilter {
+    return this.dropdownFilterChange.value;
+  }
+
+  set dropdownFilter(filter: DropdownFilter) {
+    this.dropdownFilterChange.next(filter);
+  }
 }
diff --git a/src/app/shared/issue-tables/dropdownfilter.ts b/src/app/shared/issue-tables/dropdownfilter.ts
index 0b9e8ebef..1aa834fe8 100644
--- a/src/app/shared/issue-tables/dropdownfilter.ts
+++ b/src/app/shared/issue-tables/dropdownfilter.ts
@@ -1,5 +1,22 @@
+import { Sort } from '@angular/material/sort';
 import { Issue } from '../../core/models/issue.model';
-import { Filter } from '../../core/services/filters.service';
+
+export type DropdownFilter = {
+  status: string;
+  type: string;
+  sort: Sort;
+  labels: string[];
+  milestones: string[];
+  hiddenLabels?: Set<string>;
+};
+
+export const DEFAULT_DROPDOWN_FILTER = <DropdownFilter>{
+  status: 'all',
+  type: 'all',
+  sort: { active: 'id', direction: 'asc' },
+  labels: [],
+  milestones: []
+};
 
 /**
  * This module serves to improve separation of concerns in IssuesDataTable.ts and IssueList.ts module by containing the logic for
@@ -7,28 +24,28 @@ import { Filter } from '../../core/services/filters.service';
  * This module exports a single function applyDropDownFilter which is called by IssueList.
  * This functions returns the data passed in after all the filters of dropdownFilters are applied
  */
-export function applyDropdownFilter(filter: Filter, data: Issue[]): Issue[] {
+export function applyDropdownFilter(dropdownFilter: DropdownFilter, data: Issue[]): Issue[] {
   const filteredData: Issue[] = data.filter((issue) => {
     let ret = true;
 
-    if (filter.status === 'open') {
+    if (dropdownFilter.status === 'open') {
       ret = ret && issue.state === 'OPEN';
-    } else if (filter.status === 'closed') {
+    } else if (dropdownFilter.status === 'closed') {
       // there is apparently also a status called 'all' based on github api
       ret = ret && issue.state === 'CLOSED';
-    } else if (filter.status === 'merged') {
+    } else if (dropdownFilter.status === 'merged') {
       ret = ret && issue.state === 'MERGED';
     }
 
-    if (filter.type === 'issue') {
+    if (dropdownFilter.type === 'issue') {
       ret = ret && issue.issueOrPr === 'Issue';
-    } else if (filter.type === 'pullrequest') {
+    } else if (dropdownFilter.type === 'pullrequest') {
       ret = ret && issue.issueOrPr === 'PullRequest';
     }
 
-    ret = ret && filter.milestones.some((milestone) => issue.milestone.title === milestone);
+    ret = ret && dropdownFilter.milestones.some((milestone) => issue.milestone.number === milestone);
 
-    return ret && filter.labels.every((label) => issue.labels.includes(label));
+    return ret && dropdownFilter.labels.every((label) => issue.labels.includes(label));
   });
   return filteredData;
 }
diff --git a/src/app/shared/issue-tables/filterableTypes.ts b/src/app/shared/issue-tables/filterableTypes.ts
index 148479c6e..2f1fe2d04 100644
--- a/src/app/shared/issue-tables/filterableTypes.ts
+++ b/src/app/shared/issue-tables/filterableTypes.ts
@@ -1,9 +1,9 @@
+import { DropdownFilter } from './dropdownfilter';
+
 /**
  * This module aims to abstract out classes that can be filtered
  */
 
-import { Filter } from '../../core/services/filters.service';
-
 /**
  * FilterableSource is an interface that contains a source that can be filtered
  * by a string filter or dropdownFilter.
@@ -11,7 +11,8 @@ import { Filter } from '../../core/services/filters.service';
  * and applies the filter when these variables are changed.
  */
 export interface FilterableSource {
-  filter: Filter;
+  filter: string;
+  dropdownFilter: DropdownFilter;
 }
 
 /**
diff --git a/src/app/shared/issue-tables/issue-sorter.ts b/src/app/shared/issue-tables/issue-sorter.ts
index d881eef29..3d8a73234 100644
--- a/src/app/shared/issue-tables/issue-sorter.ts
+++ b/src/app/shared/issue-tables/issue-sorter.ts
@@ -9,15 +9,19 @@ export function applySort(sort: Sort, data: Issue[]): Issue[] {
 
   const direction: number = sort.direction === 'asc' ? 1 : -1;
 
-  switch (sort.active) {
-    case 'id':
-      return data.sort((a, b) => direction * compareByIntegerValue(a.id, b.id));
-    case 'date':
-      return data.sort((a, b) => direction * compareByDateValue(a.updated_at, b.updated_at));
-    default:
-      // title, responseTag are string values
-      return data.sort((a, b) => direction * compareByStringValue(a[sort.active], b[sort.active]));
-  }
+  return data.sort((a, b) => {
+    switch (sort.active) {
+      case 'assignees':
+        return direction * compareByStringValue(a.assignees.join(', '), b.assignees.join(', '));
+      case 'id':
+        return direction * compareByIntegerValue(a.id, b.id);
+      case 'date':
+        return direction * compareByDateValue(a.updated_at, b.updated_at);
+      default:
+        // title, responseTag are string values
+        return direction * compareByStringValue(a[sort.active], b[sort.active]);
+    }
+  });
 }
 
 function compareByStringValue(valueA: string, valueB: string): number {
diff --git a/src/test.ts b/src/test.ts
index 50befd1a2..c4163e646 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -1,11 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-// tslint:disable:ordered-imports
-// Ordered-imports rule is disabled here because the import statement for 'zone-testing' must be
-// at the top to prevent test setup breakage in 'npm run test'.
-import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import 'zone.js/dist/zone-testing';
 
 declare const require: any;
 
diff --git a/tests/app/issues-viewer/label-filter-bar/label-filter-bar.component.spec.ts b/tests/app/issues-viewer/label-filter-bar/label-filter-bar.component.spec.ts
new file mode 100644
index 000000000..fd5ca5305
--- /dev/null
+++ b/tests/app/issues-viewer/label-filter-bar/label-filter-bar.component.spec.ts
@@ -0,0 +1,56 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { LabelFilterBarComponent } from '../../../../src/app/issues-viewer/label-filter-bar/label-filter-bar.component';
+
+// const dummyDataLabels: simplifiedLabel[] = [
+//   {
+//     name: 'dummy1',
+//     color: '#2A6478'
+//   },
+//   {
+//     name: 'dummy2',
+//     color: '#705335'
+//   },
+//   {
+//     name: 'dummy3',
+//     color: '#6D3F5B'
+//   },
+//   {
+//     name: 'dummy4',
+//     color: '#587246'
+//   },
+//   {
+//     name: 'dummy5',
+//     color: '#FF7514'
+//   },
+//   {
+//     name: 'dummy6',
+//     color: '#1D334A'
+//   }
+// ];
+
+describe('LabelFilterBarComponent', () => {
+  let component: LabelFilterBarComponent;
+  let fixture: ComponentFixture<LabelFilterBarComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [LabelFilterBarComponent]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LabelFilterBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    console.log(component);
+  });
+
+  it('can filter for labels containing the search key', () => {});
+});
diff --git a/tests/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.spec.ts b/tests/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.spec.ts
deleted file mode 100644
index 444413f1e..000000000
--- a/tests/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.spec.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { MatSelectionList } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { BehaviorSubject, of } from 'rxjs';
-import { SimpleLabel } from '../../../../../src/app/core/models/label.model';
-import { FiltersService } from '../../../../../src/app/core/services/filters.service';
-import { LabelService } from '../../../../../src/app/core/services/label.service';
-import { LoggingService } from '../../../../../src/app/core/services/logging.service';
-import { LabelFilterBarComponent } from '../../../../../src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component';
-import { LABEL_NAME_SEVERITY_HIGH, LABEL_NAME_SEVERITY_LOW, SEVERITY_SIMPLE_LABELS } from '../../../../constants/label.constants';
-
-describe('LabelFilterBarComponent', () => {
-  let component: LabelFilterBarComponent;
-  let fixture: ComponentFixture<LabelFilterBarComponent>;
-  let labelServiceSpy: jasmine.SpyObj<LabelService>;
-  let loggingServiceSpy: jasmine.SpyObj<LoggingService>;
-  let filtersServiceSpy: jasmine.SpyObj<FiltersService>;
-  let labelsSubject: BehaviorSubject<SimpleLabel[]>;
-
-  beforeEach(async () => {
-    labelServiceSpy = jasmine.createSpyObj('LabelService', ['connect', 'startPollLabels', 'fetchLabels']);
-    loggingServiceSpy = jasmine.createSpyObj('LoggingService', ['info', 'debug']);
-    filtersServiceSpy = jasmine.createSpyObj('FiltersService', ['updateFilters']);
-
-    TestBed.configureTestingModule({
-      providers: [
-        { provide: LabelService, useValue: labelServiceSpy },
-        { provide: LoggingService, useValue: loggingServiceSpy },
-        { provide: FiltersService, useValue: filtersServiceSpy }
-      ],
-      imports: [MatMenuModule],
-      declarations: [LabelFilterBarComponent],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(LabelFilterBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  describe('ngAfterViewInit', () => {
-    beforeEach(() => {
-      // Setup labels observable
-      labelsSubject = new BehaviorSubject<SimpleLabel[]>([]);
-      labelServiceSpy.fetchLabels.and.returnValue(of([]));
-      labelServiceSpy.connect.and.returnValue(labelsSubject.asObservable());
-    });
-
-    it('should update allLabels with latest emmitted value after ngAfterViewInit', fakeAsync(() => {
-      component.ngAfterViewInit();
-      labelsSubject.next(SEVERITY_SIMPLE_LABELS);
-      tick();
-      expect(component.allLabels).toEqual(SEVERITY_SIMPLE_LABELS);
-    }));
-  });
-
-  describe('hide(label)', () => {
-    it('should add label to hidden labels set and update filter', () => {
-      const label = LABEL_NAME_SEVERITY_HIGH;
-      expect(component.hiddenLabelNames).not.toContain(label);
-
-      component.hide(label);
-
-      expect(component.hiddenLabelNames).toContain(label);
-      expect(filtersServiceSpy.updateFilters).toHaveBeenCalledWith({ hiddenLabels: component.hiddenLabelNames });
-    });
-  });
-
-  describe('show(label)', () => {
-    it('should remove label from hidden labels set and update filter', () => {
-      const label = LABEL_NAME_SEVERITY_HIGH;
-      component.hide(label);
-      expect(component.hiddenLabelNames).toContain(label);
-
-      component.show(label);
-
-      expect(component.hiddenLabelNames).not.toContain(label);
-      expect(filtersServiceSpy.updateFilters).toHaveBeenCalledWith({ hiddenLabels: component.hiddenLabelNames });
-    });
-  });
-
-  describe('hasLabels', () => {
-    beforeEach(() => {
-      component.allLabels = SEVERITY_SIMPLE_LABELS;
-    });
-
-    it('should return true if any label match the filter', () => {
-      const filter = 'low';
-
-      const result = component.hasLabels(filter);
-
-      expect(result).toBeTrue();
-    });
-
-    it('should return false if no label match the filter', () => {
-      const filter = 'priority';
-
-      const result = component.hasLabels(filter);
-
-      expect(result).toBeFalse();
-    });
-
-    it('should return false if no label exists', () => {
-      const filter = 'low';
-      component.allLabels = [];
-
-      const result = component.hasLabels(filter);
-
-      expect(result).toBeFalse();
-    });
-  });
-
-  describe('updateSelection', () => {
-    it('should update filters service with selected labels', () => {
-      const selectedLabels = [LABEL_NAME_SEVERITY_HIGH, LABEL_NAME_SEVERITY_LOW];
-      component.selectedLabelNames = selectedLabels;
-
-      component.updateSelection();
-
-      expect(filtersServiceSpy.updateFilters).toHaveBeenCalledWith({ labels: selectedLabels });
-    });
-  });
-
-  describe('removeAllSelection', () => {
-    it('should deselect all labels and update the filter', () => {
-      const matSelectionListSpy = jasmine.createSpyObj<MatSelectionList>('MatSelectionList', ['deselectAll']);
-      component.matSelectionList = matSelectionListSpy;
-
-      component.removeAllSelection();
-
-      expect(matSelectionListSpy.deselectAll).toHaveBeenCalled();
-      expect(filtersServiceSpy.updateFilters).toHaveBeenCalledWith({ labels: [] });
-    });
-  });
-});
diff --git a/tests/app/shared/issue-tables/issue-sorter.spec.ts b/tests/app/shared/issue-tables/issue-sorter.spec.ts
index 79c047927..39c202b67 100644
--- a/tests/app/shared/issue-tables/issue-sorter.spec.ts
+++ b/tests/app/shared/issue-tables/issue-sorter.spec.ts
@@ -1,6 +1,6 @@
 import { MatSort } from '@angular/material/sort';
 import { Issue } from '../../../../src/app/core/models/issue.model';
-import { applySort } from '../../../../src/app/shared/issue-tables/issue-sorter';
+import { getSortedData } from '../../../../src/app/shared/issue-tables/issue-sorter';
 import {
   ISSUE_UPDATED_EARLIER,
   ISSUE_UPDATED_LATER,
@@ -9,7 +9,7 @@ import {
 } from '../../../constants/githubissue.constants';
 
 describe('issuer-sorter', () => {
-  describe('applySort()', () => {
+  describe('getSortedData()', () => {
     const dummyIssue: Issue = Issue.createPhaseBugReportingIssue(ISSUE_WITH_EMPTY_DESCRIPTION);
     const otherDummyIssue: Issue = Issue.createPhaseBugReportingIssue(ISSUE_WITH_ASSIGNEES);
     const issuesList: Issue[] = [dummyIssue, otherDummyIssue];
@@ -21,29 +21,40 @@ describe('issuer-sorter', () => {
     const matSort: MatSort = new MatSort();
 
     it('should return the same data if sort.active is not set', () => {
-      const sortedData = applySort(matSort, issuesList);
+      const sortedData = getSortedData(matSort, issuesList);
       expect(sortedData).toEqual(issuesList);
     });
 
+    it('sorts issues based on their assignees correctly', () => {
+      matSort.active = 'assignees';
+      matSort.direction = 'asc';
+      const sortedIssuesByAssigneesAsc = getSortedData(matSort, issuesList);
+      assertOrder(sortedIssuesByAssigneesAsc, dummyIssue, otherDummyIssue);
+
+      matSort.direction = 'desc';
+      const sortedIssuesByAssigneesDesc = getSortedData(matSort, issuesList);
+      assertOrder(sortedIssuesByAssigneesDesc, otherDummyIssue, dummyIssue);
+    });
+
     it('sorts issues based on their string fields correctly', () => {
       matSort.active = 'title';
       matSort.direction = 'asc';
-      const sortedIssuesByTitleAsc = applySort(matSort, issuesList);
+      const sortedIssuesByTitleAsc = getSortedData(matSort, issuesList);
       assertOrder(sortedIssuesByTitleAsc, dummyIssue, otherDummyIssue);
 
       matSort.direction = 'desc';
-      const sortedIssuesByTitleDesc = applySort(matSort, issuesList);
+      const sortedIssuesByTitleDesc = getSortedData(matSort, issuesList);
       assertOrder(sortedIssuesByTitleDesc, otherDummyIssue, dummyIssue);
     });
 
     it('sorts issues based on their id fields correctly', () => {
       matSort.active = 'id';
       matSort.direction = 'asc';
-      const sortedIssuedByIdAsc = applySort(matSort, issuesList);
+      const sortedIssuedByIdAsc = getSortedData(matSort, issuesList);
       assertOrder(sortedIssuedByIdAsc, otherDummyIssue, dummyIssue);
 
       matSort.direction = 'desc';
-      const sortedIssuedByIdDesc = applySort(matSort, issuesList);
+      const sortedIssuedByIdDesc = getSortedData(matSort, issuesList);
       assertOrder(sortedIssuedByIdDesc, dummyIssue, otherDummyIssue);
     });
 
@@ -51,11 +62,11 @@ describe('issuer-sorter', () => {
       matSort.active = 'date';
       matSort.direction = 'asc';
 
-      const sortedIssuedByDateAsc = applySort(matSort, issuesWithDifferentUpdatedDate);
+      const sortedIssuedByDateAsc = getSortedData(matSort, issuesWithDifferentUpdatedDate);
       assertOrder(sortedIssuedByDateAsc, issueUpdatedEarlier, issueUpdatedLater);
 
       matSort.direction = 'desc';
-      const sortedIssuedByDateDesc = applySort(matSort, issuesWithDifferentUpdatedDate);
+      const sortedIssuedByDateDesc = getSortedData(matSort, issuesWithDifferentUpdatedDate);
       assertOrder(sortedIssuedByDateDesc, issueUpdatedLater, issueUpdatedEarlier);
     });
   });
diff --git a/tests/constants/label.constants.ts b/tests/constants/label.constants.ts
index c49188af7..9b040cf85 100644
--- a/tests/constants/label.constants.ts
+++ b/tests/constants/label.constants.ts
@@ -1,10 +1,8 @@
-import { SimpleLabel } from '../../src/app/core/models/label.model';
-
 // Label name constants
-export const SEVERITY_VERY_LOW = 'veryLow';
-export const SEVERITY_LOW = 'low';
-export const SEVERITY_MEDIUM = 'medium';
-export const SEVERITY_HIGH = 'high';
+export const SEVERITY_VERY_LOW = 'Very Low';
+export const SEVERITY_LOW = 'Low';
+export const SEVERITY_MEDIUM = 'Medium';
+export const SEVERITY_HIGH = 'High';
 
 // Label category constants
 export const CATEGORY_SEVERITY = 'severity';
@@ -76,8 +74,3 @@ export const SEVERITY_LABELS = [
     definition: DEFINITION_SEVERITY_HIGH
   }
 ];
-
-export const SEVERITY_SIMPLE_LABELS: SimpleLabel[] = SEVERITY_LABELS.map((label) => ({
-  name: label.name,
-  color: label.color
-}));
diff --git a/tests/services/phase.service.spec.ts b/tests/services/phase.service.spec.ts
index 9abe936d0..f663ec231 100644
--- a/tests/services/phase.service.spec.ts
+++ b/tests/services/phase.service.spec.ts
@@ -1,4 +1,3 @@
-import { Router } from '@angular/router';
 import { of } from 'rxjs';
 import { STORAGE_KEYS } from '../../src/app/core/constants/storage-keys.constants';
 import { Phase } from '../../src/app/core/models/phase.model';
@@ -14,18 +13,14 @@ let phaseService: PhaseService;
 let githubServiceSpy: jasmine.SpyObj<GithubService>;
 let repoUrlCacheServiceSpy: jasmine.SpyObj<RepoUrlCacheService>;
 let loggingServiceSpy: jasmine.SpyObj<LoggingService>;
-let routerSpy: jasmine.SpyObj<Router>;
 
 describe('PhaseService', () => {
-  beforeEach(() => {
-    githubServiceSpy = jasmine.createSpyObj('GithubService', ['isRepositoryPresent', 'storePhaseDetails']);
-    routerSpy = jasmine.createSpyObj('Router', ['navigate']);
-    repoUrlCacheServiceSpy = jasmine.createSpyObj('RepoUrlCacheService', ['cache']);
-    loggingServiceSpy = jasmine.createSpyObj('LoggingService', ['info']);
-    phaseService = new PhaseService(githubServiceSpy, repoUrlCacheServiceSpy, loggingServiceSpy, routerSpy);
-  });
-
   describe('setRepository(Repo, Repo[])', () => {
+    beforeEach(() => {
+      githubServiceSpy = jasmine.createSpyObj('GithubService', ['storePhaseDetails']);
+      phaseService = new PhaseService(githubServiceSpy, repoUrlCacheServiceSpy, loggingServiceSpy);
+    });
+
     it('should set the current repositories and update session data', () => {
       const repos: Repo[] = [CATCHER_REPO];
 
@@ -46,17 +41,16 @@ describe('PhaseService', () => {
       expect(githubServiceSpy.storePhaseDetails).toHaveBeenCalledWith(WATCHER_REPO.owner, WATCHER_REPO.name);
       expect(localStorageSetItem).toHaveBeenCalledWith('sessionData', JSON.stringify(phaseService.sessionData));
     });
-
-    it('should navigate to the new repository', () => {
-      phaseService.setRepository(WATCHER_REPO);
-
-      expect(routerSpy.navigate).toHaveBeenCalledWith(['issuesViewer'], {
-        queryParams: { repo: WATCHER_REPO.toString() }
-      });
-    });
   });
 
   describe('changeRepositoryIfValid(Repo)', () => {
+    beforeEach(() => {
+      githubServiceSpy = jasmine.createSpyObj('GithubService', ['isRepositoryPresent', 'storePhaseDetails']);
+      repoUrlCacheServiceSpy = jasmine.createSpyObj('RepoUrlCacheService', ['cache']);
+      loggingServiceSpy = jasmine.createSpyObj('LoggingService', ['info']);
+      phaseService = new PhaseService(githubServiceSpy, repoUrlCacheServiceSpy, loggingServiceSpy);
+    });
+
     it('should set isChangingRepo to true at the start and false at the end', async () => {
       githubServiceSpy.isRepositoryPresent.and.returnValue(of(true));
 
@@ -78,7 +72,7 @@ describe('PhaseService', () => {
       );
     });
 
-    it('should set and navigate to new repo if repo is valid', async () => {
+    it('should set current repository if repository is valid', async () => {
       githubServiceSpy.isRepositoryPresent.and.returnValue(of(true));
 
       const repoChanged$Spy = spyOn(phaseService.repoChanged$, 'next');
@@ -87,9 +81,6 @@ describe('PhaseService', () => {
 
       expect(loggingServiceSpy.info).toHaveBeenCalledWith(`PhaseService: Changing current repository to '${WATCHER_REPO}'`);
       expect(phaseService.currentRepo).toEqual(WATCHER_REPO);
-      expect(routerSpy.navigate).toHaveBeenCalledWith(['issuesViewer'], {
-        queryParams: { repo: WATCHER_REPO.toString() }
-      });
       expect(repoUrlCacheServiceSpy.cache).toHaveBeenCalledWith(WATCHER_REPO.toString());
       expect(repoChanged$Spy).toHaveBeenCalledWith(WATCHER_REPO);
     });
@@ -97,6 +88,10 @@ describe('PhaseService', () => {
 
   describe('initializeCurrentRepository()', () => {
     beforeEach(() => {
+      githubServiceSpy = jasmine.createSpyObj('GithubService', ['isRepositoryPresent', 'storePhaseDetails']);
+      loggingServiceSpy = jasmine.createSpyObj('LoggingService', ['info']);
+      phaseService = new PhaseService(githubServiceSpy, repoUrlCacheServiceSpy, loggingServiceSpy);
+
       const org = WATCHER_REPO.owner;
       const repoName = WATCHER_REPO.name;
 
@@ -105,7 +100,7 @@ describe('PhaseService', () => {
       localStorageGetItemSpy.withArgs(STORAGE_KEYS.DATA_REPO).and.returnValue(repoName);
     });
 
-    it('should set and navigate to new repo if repo is valid', async () => {
+    it('should set repository if repository is valid', async () => {
       githubServiceSpy.isRepositoryPresent.and.returnValue(of(true));
 
       const repoSetSourceNext = spyOn(phaseService.repoSetSource, 'next');
@@ -114,9 +109,6 @@ describe('PhaseService', () => {
 
       expect(loggingServiceSpy.info).toHaveBeenCalledWith(`PhaseService: Repo is ${WATCHER_REPO}`);
       expect(phaseService.currentRepo).toEqual(WATCHER_REPO);
-      expect(routerSpy.navigate).toHaveBeenCalledWith(['issuesViewer'], {
-        queryParams: { repo: WATCHER_REPO.toString() }
-      });
       expect(repoSetSourceNext).toHaveBeenCalledWith(true);
     });
 
@@ -130,6 +122,11 @@ describe('PhaseService', () => {
   });
 
   describe('changePhase(Phase)', () => {
+    beforeEach(() => {
+      githubServiceSpy = jasmine.createSpyObj('GithubService', ['storePhaseDetails']);
+      phaseService = new PhaseService(githubServiceSpy, repoUrlCacheServiceSpy, loggingServiceSpy);
+    });
+
     it('should set current phase', () => {
       phaseService.setRepository(WATCHER_REPO);
 
@@ -142,55 +139,14 @@ describe('PhaseService', () => {
   });
 
   describe('.reset()', () => {
+    beforeEach(() => {
+      phaseService = new PhaseService(githubServiceSpy, repoUrlCacheServiceSpy, loggingServiceSpy);
+    });
+
     it('should reset the currentPhase of the PhaseService', () => {
       phaseService.currentPhase = Phase.activityDashboard;
       phaseService.reset();
       expect(phaseService.currentPhase).toBe(Phase.issuesViewer);
     });
   });
-
-  describe('setupFromUrl(url)', () => {
-    it('should set items in local storage if url is valid', async () => {
-      const validUrl = `/issuesViewer?repo=${WATCHER_REPO.owner}%2F${WATCHER_REPO.name}`;
-      const localStorageSetItemSpy = spyOn(window.localStorage, 'setItem');
-
-      await phaseService.setupFromUrl(validUrl).toPromise();
-
-      expect(localStorageSetItemSpy).toHaveBeenCalledWith(STORAGE_KEYS.ORG, WATCHER_REPO.owner);
-      expect(localStorageSetItemSpy).toHaveBeenCalledWith(STORAGE_KEYS.DATA_REPO, WATCHER_REPO.name);
-    });
-
-    it('should throw error for url without repo paramater', (done) => {
-      const urlWithoutRepo = '/issuesViewer';
-
-      phaseService.setupFromUrl(urlWithoutRepo).subscribe({
-        error: (err) => {
-          expect(err).toEqual(new Error(ErrorMessageService.invalidUrlMessage()));
-          done();
-        }
-      });
-    });
-
-    it('should throw error for empty url', (done) => {
-      const emptyUrl = '';
-
-      phaseService.setupFromUrl(emptyUrl).subscribe({
-        error: (err) => {
-          expect(err).toEqual(new Error(ErrorMessageService.invalidUrlMessage()));
-          done();
-        }
-      });
-    });
-
-    it('should throw error for url with invalid repo format', (done) => {
-      const urlWithInvalidRepoFormat = '/issuesViewer?repo=InvalidRepo';
-
-      phaseService.setupFromUrl(urlWithInvalidRepoFormat).subscribe({
-        error: (err) => {
-          expect(err).toEqual(new Error(ErrorMessageService.repositoryNotPresentMessage()));
-          done();
-        }
-      });
-    });
-  });
 });
diff --git a/tests/services/user.service.spec.ts b/tests/services/user.service.spec.ts
index 9c9378c3e..53262db75 100644
--- a/tests/services/user.service.spec.ts
+++ b/tests/services/user.service.spec.ts
@@ -1,35 +1,62 @@
-import { GithubService } from '../../src/app/core/services/github.service';
-import { LoggingService } from '../../src/app/core/services/logging.service';
+import { of } from 'rxjs';
+import { User } from '../../src/app/core/models/user.model';
 import { UserService } from '../../src/app/core/services/user.service';
-import { USER_JUNWEI } from '../constants/data.constants';
+import { jsonData, USER_JUNWEI, USER_Q, USER_SHUMING, USER_WITH_TWO_ROLES } from '../constants/data.constants';
 
-let githubServiceSpy: jasmine.SpyObj<GithubService>;
-let loggingServiceSpy: jasmine.SpyObj<LoggingService>;
-let userService: UserService;
+let dataService: any;
 
 describe('UserService', () => {
-  beforeAll(() => {
-    githubServiceSpy = jasmine.createSpyObj('GithubService', ['fetchAuthenticatedUser']);
-    loggingServiceSpy = jasmine.createSpyObj('LoggingService', ['info']);
-    userService = new UserService(githubServiceSpy, loggingServiceSpy);
-  });
+  describe('.createUserModel(loginId)', () => {
+    beforeAll(() => {
+      dataService = jasmine.createSpyObj('DataService', ['getDataFile']);
+      dataService.getDataFile.and.returnValue(of(jsonData));
+    });
 
-  describe('createUserModel(loginId)', () => {
-    it('should create a user correctly', async () => {
-      const createdUser = await userService.createUserModel(USER_JUNWEI.loginId).toPromise();
-      expect(createdUser).toEqual(USER_JUNWEI);
+    it('creates a Student user correctly', async () => {
+      await createAndVerifyUser(USER_JUNWEI.loginId, USER_JUNWEI);
     });
-  });
 
-  describe('reset()', () => {
-    it('should set current user as undefined', async () => {
-      await userService.createUserModel(USER_JUNWEI.loginId).toPromise();
-      expect(userService.currentUser).toEqual(USER_JUNWEI);
+    it('creates a Tutor user correctly when loginId is very short', async () => {
+      await createAndVerifyUser(USER_Q.loginId, USER_Q);
+    });
 
-      userService.reset();
+    it('creates an Admin user correctly', async () => {
+      await createAndVerifyUser(USER_SHUMING.loginId, USER_SHUMING);
+    });
 
-      expect(loggingServiceSpy.info).toHaveBeenCalledWith('UserService: Clearing current user');
-      expect(userService.currentUser).toEqual(undefined);
+    it('assigns highest possible role to a user who has multiple roles in data.csv', async () => {
+      await createAndVerifyUser(USER_WITH_TWO_ROLES.loginId, USER_WITH_TWO_ROLES);
+    });
+
+    it('should authorize User despite loginId being of different casing', () => {
+      const userService = new UserService(null, dataService);
+      userService.createUserModel(USER_JUNWEI.loginId).subscribe((user) => {
+        expect(user).toBeDefined();
+      });
+
+      userService.createUserModel('JUNWEi96').subscribe((user) => {
+        expect(user).toBeDefined();
+      });
+    });
+
+    it('throws an error if the user is unauthorized', (done) => {
+      const userService = new UserService(null, dataService);
+      userService.createUserModel('RandomUser').subscribe(
+        (user) => {
+          fail('This test case should have failed.');
+          done();
+        },
+        (error) => {
+          expect(error).toEqual(new Error('Unauthorized user.'));
+          done();
+        }
+      );
     });
   });
 });
+
+async function createAndVerifyUser(loginId: string, expectedUser: User) {
+  const userService = new UserService(null, dataService);
+  const actualUser = await userService.createUserModel(loginId).toPromise();
+  expect(actualUser).toEqual(expectedUser);
+}