From 263426aef1e9895bbaf13a97f6e2a0731e01d300 Mon Sep 17 00:00:00 2001
From: Gabriel Goh <77230723+gycgabriel@users.noreply.github.com>
Date: Thu, 14 Mar 2024 14:29:40 +0800
Subject: [PATCH] Deploy v1.1.1 (#292)

Co-authored-by: Arif Khalid <88131400+Arif-Khalid@users.noreply.github.com>
Co-authored-by: NereusWB922 <107099783+NereusWB922@users.noreply.github.com>
Co-authored-by: AdityaMisra <114080910+MadLamprey@users.noreply.github.com>
Co-authored-by: Misra Aditya <e1096355@u.nus.edu>
Co-authored-by: Vignesh Sankar Iyer <68676914+vigneshsankariyer1234567890@users.noreply.github.com>
---
 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, 341 insertions(+), 269 deletions(-)
 delete mode 100644 tests/app/issues-viewer/label-filter-bar/label-filter-bar.component.spec.ts
 create 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 6148a7c99..70efb1a57 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "WATcher",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "main.js",
   "scripts": {
     "ng": "ng",
@@ -24,7 +24,7 @@
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged",
-      "pre-push": "npm run lint"
+      "pre-push": "npm run lint && npm run test"
     }
   },
   "dependencies": {
diff --git a/src/app/core/models/milestone.model.ts b/src/app/core/models/milestone.model.ts
index b2a00e0f4..8f90e5058 100644
--- a/src/app/core/models/milestone.model.ts
+++ b/src/app/core/models/milestone.model.ts
@@ -2,18 +2,16 @@
  * Represents a milestone and its attributes fetched from Github.
  */
 export class Milestone {
-  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
+  static DefaultMilestone: Milestone = new Milestone({ title: 'Without a milestone', state: null });
   title: string;
   state: string;
 
-  constructor(milestone: { number: string; title: string; state: string }) {
-    this.number = milestone.number;
+  constructor(milestone: { title: string; state: string }) {
     this.title = milestone.title;
     this.state = milestone.state;
   }
 
   public equals(milestone: Milestone) {
-    return this.number === milestone.number;
+    return this.title === milestone.title;
   }
 }
diff --git a/src/app/core/services/filters.service.ts b/src/app/core/services/filters.service.ts
index aa1b4352e..c6c0af356 100644
--- a/src/app/core/services/filters.service.ts
+++ b/src/app/core/services/filters.service.ts
@@ -1,39 +1,57 @@
 import { Injectable } from '@angular/core';
+import { Sort } from '@angular/material/sort';
 import { BehaviorSubject, pipe } from 'rxjs';
-import { DEFAULT_DROPDOWN_FILTER, DropdownFilter } from '../../shared/issue-tables/dropdownfilter';
+
+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: []
+};
 
 @Injectable({
   providedIn: 'root'
 })
-
 /**
  * Responsible for centralising filters
  * Filters are subscribed to and emitted from this service
  */
 export class FiltersService {
-  public dropdownFilter$ = new BehaviorSubject<DropdownFilter>(DEFAULT_DROPDOWN_FILTER);
+  public filter$ = new BehaviorSubject<Filter>(DEFAULT_FILTER);
 
   private _validateFilter = pipe(this.updateStatusPairing, this.updateTypePairing);
 
   clearFilters(): void {
-    this.dropdownFilter$.next(DEFAULT_DROPDOWN_FILTER);
+    this.filter$.next(DEFAULT_FILTER);
   }
 
-  updateFilters(newFilters: Partial<DropdownFilter>): void {
-    let nextDropdownFilter: DropdownFilter = {
-      ...this.dropdownFilter$.value,
+  updateFilters(newFilters: Partial<Filter>): void {
+    let nextDropdownFilter: Filter = {
+      ...this.filter$.value,
       ...newFilters
     };
 
     nextDropdownFilter = this._validateFilter(nextDropdownFilter);
 
-    this.dropdownFilter$.next(nextDropdownFilter);
+    this.filter$.next(nextDropdownFilter);
   }
 
   /**
    * Changes type to a valid, default value when an incompatible combination of type and status is encountered.
    */
-  updateTypePairing(dropdownFilter: DropdownFilter): DropdownFilter {
+  updateTypePairing(dropdownFilter: Filter): Filter {
     if (dropdownFilter.status === 'merged') {
       dropdownFilter.type = 'pullrequest';
     }
@@ -43,7 +61,7 @@ export class FiltersService {
   /**
    * Changes status to a valid, default value when an incompatible combination of type and status is encountered.
    */
-  updateStatusPairing(dropdownFilter: DropdownFilter): DropdownFilter {
+  updateStatusPairing(dropdownFilter: Filter): Filter {
     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 872080b8d..8c2968a81 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" [dropdownFilter]="issues.dropdownFilter"></app-issue-pr-card>
+        <app-issue-pr-card [issue]="issue" [filter]="issues.filter"></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 39d0a718a..bad68b9cc 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)="applyFilter($event.target.value)" placeholder="Search" />
+      <input matInput (keyup)="this.filtersService.updateFilters({ title: $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.dropdownFilter.status" (selectionChange)="this.filtersService.updateFilters({ status: $event.value })">
+        <mat-select [value]="this.filter.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.dropdownFilter.type" (selectionChange)="this.filtersService.updateFilters({ type: $event.value })">
+        <mat-select [value]="this.filter.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.dropdownFilter.sort.active">
+        <mat-select [value]="this.filter.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.dropdownFilter.milestones"
+          [value]="this.filter.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.number">
+          <mat-option *ngFor="let milestone of this.milestoneService.milestones" [value]="milestone.title">
             {{ 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 ab6941934..c9bb21077 100644
--- a/src/app/shared/filter-bar/filter-bar.component.ts
+++ b/src/app/shared/filter-bar/filter-bar.component.ts
@@ -1,11 +1,10 @@
 import { AfterViewInit, Component, Input, OnDestroy, OnInit, QueryList, ViewChild } from '@angular/core';
 import { MatSelect } from '@angular/material/select';
 import { BehaviorSubject, Subscription } from 'rxjs';
-import { FiltersService } from '../../core/services/filters.service';
+import { DEFAULT_FILTER, Filter, 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';
 
@@ -24,7 +23,7 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
   repoChangeSubscription: Subscription;
 
   /** Selected dropdown filter value */
-  dropdownFilter: DropdownFilter = DEFAULT_DROPDOWN_FILTER;
+  filter: Filter = DEFAULT_FILTER;
 
   /** Milestone subscription */
   milestoneSubscription: Subscription;
@@ -47,9 +46,9 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit(): void {
-    this.filtersService.dropdownFilter$.subscribe((dropdownFilter) => {
-      this.dropdownFilter = dropdownFilter;
-      this.applyDropdownFilter();
+    this.filtersService.filter$.subscribe((dropdownFilter) => {
+      this.filter = dropdownFilter;
+      this.applyFilter();
     });
   }
 
@@ -60,24 +59,16 @@ export class FilterBarComponent implements OnInit, AfterViewInit, OnDestroy {
 
   /**
    * Signals to IssuesDataTable that a change has occurred in filter.
-   * @param filterValue
    */
-  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));
+  applyFilter() {
+    this.views$?.value?.forEach((v) => (v.retrieveFilterable().filter = this.filter));
   }
 
   /**
    * Checks if program is filtering by type issue.
    */
   isNotFilterIssue() {
-    return this.dropdownFilter.type !== 'issue';
+    return this.filter.type !== 'issue';
   }
 
   /**
@@ -88,7 +79,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.dropdownFilter.milestones.push(milestone.number));
+        this.milestoneService.milestones.forEach((milestone) => this.filter.milestones.push(milestone.title));
       },
       (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 0e092c5aa..9c9c36d87 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]="dropdownFilter?.hiddenLabels"></app-issue-pr-card-labels>
+        <app-issue-pr-card-labels [labels]="issue.githubLabels" [labelSet]="filter?.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 77176ba78..47fbf1a8f 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 { DropdownFilter } from '../issue-tables/dropdownfilter';
 })
 export class IssuePrCardComponent {
   @Input() issue: Issue;
-  @Input() dropdownFilter?: DropdownFilter;
+  @Input() filter?: Filter;
 
   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 c325f6a7c..eb805aade 100644
--- a/src/app/shared/issue-tables/IssuesDataTable.ts
+++ b/src/app/shared/issue-tables/IssuesDataTable.ts
@@ -4,8 +4,9 @@ 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, DEFAULT_DROPDOWN_FILTER, DropdownFilter } from './dropdownfilter';
+import { applyDropdownFilter } from './dropdownfilter';
 import { FilterableSource } from './filterableTypes';
 import { paginateData } from './issue-paginator';
 import { applySort } from './issue-sorter';
@@ -13,9 +14,7 @@ import { applySearchFilter } from './search-filter';
 
 export class IssuesDataTable extends DataSource<Issue> implements FilterableSource {
   public count = 0;
-  private filterChange = new BehaviorSubject('');
-  private dropdownFilterChange = new BehaviorSubject(DEFAULT_DROPDOWN_FILTER);
-  private teamFilterChange = new BehaviorSubject('');
+  private filterChange = new BehaviorSubject(DEFAULT_FILTER);
   private issuesSubject = new BehaviorSubject<Issue[]>([]);
   private issueSubscription: Subscription;
 
@@ -36,9 +35,7 @@ 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();
@@ -50,9 +47,7 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
       page = this.paginator.page;
     }
 
-    const displayDataChanges = [this.issueService.issues$, page, this.filterChange, this.dropdownFilterChange].filter(
-      (x) => x !== undefined
-    );
+    const displayDataChanges = [this.issueService.issues$, page, this.filterChange].filter((x) => x !== undefined);
 
     this.issueService.startPollIssues();
     this.issueSubscription = merge(...displayDataChanges)
@@ -80,13 +75,13 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
             });
           }
 
-          // Dropdown Filters
-          data = applyDropdownFilter(this.dropdownFilter, data);
+          // Apply Filters
+          data = applyDropdownFilter(this.filter, data);
 
-          data = applySearchFilter(this.filter, this.displayedColumn, this.issueService, data);
+          data = applySearchFilter(this.filter.title, this.displayedColumn, this.issueService, data);
           this.count = data.length;
 
-          data = applySort(this.dropdownFilter.sort, data);
+          data = applySort(this.filter.sort, data);
 
           if (this.paginator !== undefined) {
             data = paginateData(this.paginator, data);
@@ -99,19 +94,11 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
       });
   }
 
-  get filter(): string {
+  get filter(): Filter {
     return this.filterChange.value;
   }
 
-  set filter(filter: string) {
+  set filter(filter: Filter) {
     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 1aa834fe8..0b9e8ebef 100644
--- a/src/app/shared/issue-tables/dropdownfilter.ts
+++ b/src/app/shared/issue-tables/dropdownfilter.ts
@@ -1,22 +1,5 @@
-import { Sort } from '@angular/material/sort';
 import { Issue } from '../../core/models/issue.model';
-
-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: []
-};
+import { Filter } from '../../core/services/filters.service';
 
 /**
  * This module serves to improve separation of concerns in IssuesDataTable.ts and IssueList.ts module by containing the logic for
@@ -24,28 +7,28 @@ export const DEFAULT_DROPDOWN_FILTER = <DropdownFilter>{
  * 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(dropdownFilter: DropdownFilter, data: Issue[]): Issue[] {
+export function applyDropdownFilter(filter: Filter, data: Issue[]): Issue[] {
   const filteredData: Issue[] = data.filter((issue) => {
     let ret = true;
 
-    if (dropdownFilter.status === 'open') {
+    if (filter.status === 'open') {
       ret = ret && issue.state === 'OPEN';
-    } else if (dropdownFilter.status === 'closed') {
+    } else if (filter.status === 'closed') {
       // there is apparently also a status called 'all' based on github api
       ret = ret && issue.state === 'CLOSED';
-    } else if (dropdownFilter.status === 'merged') {
+    } else if (filter.status === 'merged') {
       ret = ret && issue.state === 'MERGED';
     }
 
-    if (dropdownFilter.type === 'issue') {
+    if (filter.type === 'issue') {
       ret = ret && issue.issueOrPr === 'Issue';
-    } else if (dropdownFilter.type === 'pullrequest') {
+    } else if (filter.type === 'pullrequest') {
       ret = ret && issue.issueOrPr === 'PullRequest';
     }
 
-    ret = ret && dropdownFilter.milestones.some((milestone) => issue.milestone.number === milestone);
+    ret = ret && filter.milestones.some((milestone) => issue.milestone.title === milestone);
 
-    return ret && dropdownFilter.labels.every((label) => issue.labels.includes(label));
+    return ret && filter.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 2f1fe2d04..148479c6e 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,8 +11,7 @@ import { DropdownFilter } from './dropdownfilter';
  * and applies the filter when these variables are changed.
  */
 export interface FilterableSource {
-  filter: string;
-  dropdownFilter: DropdownFilter;
+  filter: Filter;
 }
 
 /**
diff --git a/src/app/shared/issue-tables/issue-sorter.ts b/src/app/shared/issue-tables/issue-sorter.ts
index 3d8a73234..d881eef29 100644
--- a/src/app/shared/issue-tables/issue-sorter.ts
+++ b/src/app/shared/issue-tables/issue-sorter.ts
@@ -9,19 +9,15 @@ export function applySort(sort: Sort, data: Issue[]): Issue[] {
 
   const direction: number = sort.direction === 'asc' ? 1 : -1;
 
-  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]);
-    }
-  });
+  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]));
+  }
 }
 
 function compareByStringValue(valueA: string, valueB: string): number {
diff --git a/src/test.ts b/src/test.ts
index c4163e646..50befd1a2 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -1,8 +1,11 @@
 // 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
deleted file mode 100644
index fd5ca5305..000000000
--- a/tests/app/issues-viewer/label-filter-bar/label-filter-bar.component.spec.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-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
new file mode 100644
index 000000000..444413f1e
--- /dev/null
+++ b/tests/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.spec.ts
@@ -0,0 +1,140 @@
+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 39c202b67..79c047927 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 { getSortedData } from '../../../../src/app/shared/issue-tables/issue-sorter';
+import { applySort } 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('getSortedData()', () => {
+  describe('applySort()', () => {
     const dummyIssue: Issue = Issue.createPhaseBugReportingIssue(ISSUE_WITH_EMPTY_DESCRIPTION);
     const otherDummyIssue: Issue = Issue.createPhaseBugReportingIssue(ISSUE_WITH_ASSIGNEES);
     const issuesList: Issue[] = [dummyIssue, otherDummyIssue];
@@ -21,40 +21,29 @@ describe('issuer-sorter', () => {
     const matSort: MatSort = new MatSort();
 
     it('should return the same data if sort.active is not set', () => {
-      const sortedData = getSortedData(matSort, issuesList);
+      const sortedData = applySort(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 = getSortedData(matSort, issuesList);
+      const sortedIssuesByTitleAsc = applySort(matSort, issuesList);
       assertOrder(sortedIssuesByTitleAsc, dummyIssue, otherDummyIssue);
 
       matSort.direction = 'desc';
-      const sortedIssuesByTitleDesc = getSortedData(matSort, issuesList);
+      const sortedIssuesByTitleDesc = applySort(matSort, issuesList);
       assertOrder(sortedIssuesByTitleDesc, otherDummyIssue, dummyIssue);
     });
 
     it('sorts issues based on their id fields correctly', () => {
       matSort.active = 'id';
       matSort.direction = 'asc';
-      const sortedIssuedByIdAsc = getSortedData(matSort, issuesList);
+      const sortedIssuedByIdAsc = applySort(matSort, issuesList);
       assertOrder(sortedIssuedByIdAsc, otherDummyIssue, dummyIssue);
 
       matSort.direction = 'desc';
-      const sortedIssuedByIdDesc = getSortedData(matSort, issuesList);
+      const sortedIssuedByIdDesc = applySort(matSort, issuesList);
       assertOrder(sortedIssuedByIdDesc, dummyIssue, otherDummyIssue);
     });
 
@@ -62,11 +51,11 @@ describe('issuer-sorter', () => {
       matSort.active = 'date';
       matSort.direction = 'asc';
 
-      const sortedIssuedByDateAsc = getSortedData(matSort, issuesWithDifferentUpdatedDate);
+      const sortedIssuedByDateAsc = applySort(matSort, issuesWithDifferentUpdatedDate);
       assertOrder(sortedIssuedByDateAsc, issueUpdatedEarlier, issueUpdatedLater);
 
       matSort.direction = 'desc';
-      const sortedIssuedByDateDesc = getSortedData(matSort, issuesWithDifferentUpdatedDate);
+      const sortedIssuedByDateDesc = applySort(matSort, issuesWithDifferentUpdatedDate);
       assertOrder(sortedIssuedByDateDesc, issueUpdatedLater, issueUpdatedEarlier);
     });
   });
diff --git a/tests/constants/label.constants.ts b/tests/constants/label.constants.ts
index 9b040cf85..c49188af7 100644
--- a/tests/constants/label.constants.ts
+++ b/tests/constants/label.constants.ts
@@ -1,8 +1,10 @@
+import { SimpleLabel } from '../../src/app/core/models/label.model';
+
 // Label name constants
-export const SEVERITY_VERY_LOW = 'Very Low';
-export const SEVERITY_LOW = 'Low';
-export const SEVERITY_MEDIUM = 'Medium';
-export const SEVERITY_HIGH = 'High';
+export const SEVERITY_VERY_LOW = 'veryLow';
+export const SEVERITY_LOW = 'low';
+export const SEVERITY_MEDIUM = 'medium';
+export const SEVERITY_HIGH = 'high';
 
 // Label category constants
 export const CATEGORY_SEVERITY = 'severity';
@@ -74,3 +76,8 @@ 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 f663ec231..9abe936d0 100644
--- a/tests/services/phase.service.spec.ts
+++ b/tests/services/phase.service.spec.ts
@@ -1,3 +1,4 @@
+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';
@@ -13,14 +14,18 @@ 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', () => {
-  describe('setRepository(Repo, Repo[])', () => {
-    beforeEach(() => {
-      githubServiceSpy = jasmine.createSpyObj('GithubService', ['storePhaseDetails']);
-      phaseService = new PhaseService(githubServiceSpy, repoUrlCacheServiceSpy, loggingServiceSpy);
-    });
+  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[])', () => {
     it('should set the current repositories and update session data', () => {
       const repos: Repo[] = [CATCHER_REPO];
 
@@ -41,16 +46,17 @@ describe('PhaseService', () => {
       expect(githubServiceSpy.storePhaseDetails).toHaveBeenCalledWith(WATCHER_REPO.owner, WATCHER_REPO.name);
       expect(localStorageSetItem).toHaveBeenCalledWith('sessionData', JSON.stringify(phaseService.sessionData));
     });
-  });
 
-  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 navigate to the new repository', () => {
+      phaseService.setRepository(WATCHER_REPO);
+
+      expect(routerSpy.navigate).toHaveBeenCalledWith(['issuesViewer'], {
+        queryParams: { repo: WATCHER_REPO.toString() }
+      });
     });
+  });
 
+  describe('changeRepositoryIfValid(Repo)', () => {
     it('should set isChangingRepo to true at the start and false at the end', async () => {
       githubServiceSpy.isRepositoryPresent.and.returnValue(of(true));
 
@@ -72,7 +78,7 @@ describe('PhaseService', () => {
       );
     });
 
-    it('should set current repository if repository is valid', async () => {
+    it('should set and navigate to new repo if repo is valid', async () => {
       githubServiceSpy.isRepositoryPresent.and.returnValue(of(true));
 
       const repoChanged$Spy = spyOn(phaseService.repoChanged$, 'next');
@@ -81,6 +87,9 @@ 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);
     });
@@ -88,10 +97,6 @@ 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;
 
@@ -100,7 +105,7 @@ describe('PhaseService', () => {
       localStorageGetItemSpy.withArgs(STORAGE_KEYS.DATA_REPO).and.returnValue(repoName);
     });
 
-    it('should set repository if repository is valid', async () => {
+    it('should set and navigate to new repo if repo is valid', async () => {
       githubServiceSpy.isRepositoryPresent.and.returnValue(of(true));
 
       const repoSetSourceNext = spyOn(phaseService.repoSetSource, 'next');
@@ -109,6 +114,9 @@ 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);
     });
 
@@ -122,11 +130,6 @@ 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);
 
@@ -139,14 +142,55 @@ 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 53262db75..9c9378c3e 100644
--- a/tests/services/user.service.spec.ts
+++ b/tests/services/user.service.spec.ts
@@ -1,62 +1,35 @@
-import { of } from 'rxjs';
-import { User } from '../../src/app/core/models/user.model';
+import { GithubService } from '../../src/app/core/services/github.service';
+import { LoggingService } from '../../src/app/core/services/logging.service';
 import { UserService } from '../../src/app/core/services/user.service';
-import { jsonData, USER_JUNWEI, USER_Q, USER_SHUMING, USER_WITH_TWO_ROLES } from '../constants/data.constants';
+import { USER_JUNWEI } from '../constants/data.constants';
 
-let dataService: any;
+let githubServiceSpy: jasmine.SpyObj<GithubService>;
+let loggingServiceSpy: jasmine.SpyObj<LoggingService>;
+let userService: UserService;
 
 describe('UserService', () => {
-  describe('.createUserModel(loginId)', () => {
-    beforeAll(() => {
-      dataService = jasmine.createSpyObj('DataService', ['getDataFile']);
-      dataService.getDataFile.and.returnValue(of(jsonData));
-    });
-
-    it('creates a Student user correctly', async () => {
-      await createAndVerifyUser(USER_JUNWEI.loginId, USER_JUNWEI);
-    });
-
-    it('creates a Tutor user correctly when loginId is very short', async () => {
-      await createAndVerifyUser(USER_Q.loginId, USER_Q);
-    });
-
-    it('creates an Admin user correctly', async () => {
-      await createAndVerifyUser(USER_SHUMING.loginId, USER_SHUMING);
-    });
+  beforeAll(() => {
+    githubServiceSpy = jasmine.createSpyObj('GithubService', ['fetchAuthenticatedUser']);
+    loggingServiceSpy = jasmine.createSpyObj('LoggingService', ['info']);
+    userService = new UserService(githubServiceSpy, loggingServiceSpy);
+  });
 
-    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);
+  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('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();
-      });
+  describe('reset()', () => {
+    it('should set current user as undefined', async () => {
+      await userService.createUserModel(USER_JUNWEI.loginId).toPromise();
+      expect(userService.currentUser).toEqual(USER_JUNWEI);
 
-      userService.createUserModel('JUNWEi96').subscribe((user) => {
-        expect(user).toBeDefined();
-      });
-    });
+      userService.reset();
 
-    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();
-        }
-      );
+      expect(loggingServiceSpy.info).toHaveBeenCalledWith('UserService: Clearing current user');
+      expect(userService.currentUser).toEqual(undefined);
     });
   });
 });
-
-async function createAndVerifyUser(loginId: string, expectedUser: User) {
-  const userService = new UserService(null, dataService);
-  const actualUser = await userService.createUserModel(loginId).toPromise();
-  expect(actualUser).toEqual(expectedUser);
-}