@hmcts/media-viewer 4.2.4-exui-3994-f → 4.2.4-exui-3994-g

package/projects/media-viewer/src/lib/store/store-utils.spec.ts

@@ -1,127 +0,0 @@
-import { Comment } from '../annotations/comment-set/comment/comment.model';
-import { StoreUtils } from './store-utils';
-
-describe('StoreUtils', () => {
-
-  describe('groupByKeyEntities', () => {
-    it('should group entities by key', () => {
-      const mockAnnotations = [
-        { page: 1, annotationId: '123' },
-        { page: 1, annotationId: '234' },
-        { page: 3, annotationId: '456' }
-      ];
-      expect(StoreUtils.groupByKeyEntities(mockAnnotations, 'page')).toEqual({
-        1: [
-          { page: 1, annotationId: '123' },
-          { page: 1, annotationId: '234' },
-        ],
-        3: [{ page: 3, annotationId: '456' }]
-      });
-    });
-  });
-
-  describe('resetCommentEntSelect', () => {
-    it('should reset comment entity select and editable props', () => {
-      const mockEntity = {
-        annotationId: '123',
-        content: 'comment',
-        tags: [],
-        page: 1,
-        pages: {},
-        pageHeight: 200,
-        selected: true,
-        editable: true,
-        id: '111',
-        createdBy: null,
-        createdByDetails: null,
-        createdDate: null,
-        lastModifiedBy: null,
-        lastModifiedByDetails: null,
-        lastModifiedDate: null
-      };
-
-      expect(StoreUtils.resetCommentEntSelect({ '123': mockEntity })).toEqual({
-        '123': {
-          ...mockEntity,
-          selected: false,
-          editable: false
-        }
-      });
-    });
-  });
-
-  describe('filterCommentsSummary', () => {
-    const mockComments: Array<Comment> = [
-      {
-        annotationId: '123',
-        content: 'test text',
-        tags: [{ name: 'Tag1', label: 'Tag one'}],
-        page: 1,
-        pages: {},
-        pageHeight: 200,
-        selected: true,
-        editable: false,
-        id: '123',
-        createdBy: 'user1',
-        createdByDetails: null,
-        createdDate: '2021-01-03T10:00:00Z',
-        lastModifiedBy: null,
-        lastModifiedByDetails: null,
-        lastModifiedDate: '2021-01-03T10:00:00Z'
-      },
-      {
-        annotationId: '234',
-        content: 'Test comment',
-        tags: [{ name: 'Tag2', label: 'Tag two'}],
-        page: 2,
-        pages: {},
-        pageHeight: 200,
-        selected: true,
-        editable: false,
-        id: '234',
-        createdBy: 'user1',
-        createdByDetails: null,
-        createdDate: '2021-01-04T10:00:00Z',
-        lastModifiedBy: null,
-        lastModifiedByDetails: null,
-        lastModifiedDate: '2021-01-04T10:00:00Z'
-      }
-    ];
-
-    it('should return original array if filers are no set', () => {
-      expect(StoreUtils.filterCommentsSummary(mockComments, {})).toEqual(mockComments);
-    });
-
-    it('should return filtered array by tag filter', () => {
-      const result = StoreUtils.filterCommentsSummary(mockComments, { tagFilters: { 'Tag1': true } });
-      expect(result).toEqual([mockComments[0]]);
-    });
-
-    it('should return filtered array by date from filter', () => {
-      const result = StoreUtils.filterCommentsSummary(mockComments, {
-        tagFilters: {},
-        dateRangeFrom: new Date('2021-01-03T00:00:00Z').getTime(),
-        dateRangeTo: null
-      });
-      expect(result).toEqual(mockComments);
-    });
-
-    it('should return filtered array by date to filter', () => {
-      const result = StoreUtils.filterCommentsSummary(mockComments, {
-        tagFilters: {},
-        dateRangeTo: new Date('2021-01-04T00:00:00Z').getTime(),
-        dateRangeFrom: null
-      });
-      expect(result).toEqual([mockComments[0]]);
-    });
-
-    it('should return filtered array by date to and from filters', () => {
-      const result = StoreUtils.filterCommentsSummary(mockComments, {
-        tagFilters: {},
-        dateRangeFrom: new Date('2021-01-03T12:00:00Z').getTime(),
-        dateRangeTo: new Date('2021-01-05T10:00:00Z').getTime()
-      });
-      expect(result).toEqual([mockComments[1]]);
-    });
-  });
-});

package/projects/media-viewer/src/lib/store/store-utils.ts

@@ -1,152 +0,0 @@
-import { Annotation } from '../annotations/annotation-set/annotation-view/annotation.model';
-import moment from 'moment-timezone';
-import { Redaction } from '../redaction/services/redaction.model';
-import { Filters } from './models/filters.interface';
-import { Comment } from '../annotations/comment-set/comment/comment.model';
-
-/*
-  @dynamic
-  marking class as dynamic to stop compiler throwing error for lambda in static function
-  see https://github.com/angular/angular/issues/19698#issuecomment-338340211
- */
-export class StoreUtils {
-
-  static groupByKeyEntities(annotations, key): {[id: string]: any[]} {
-    return annotations.reduce((h, obj) =>
-      Object.assign(h, { [obj[key]]: ( h[obj[key]] || [] ).concat(obj) }), {});
-  }
-
-  static generateCommentsEntities(annotations): {[id: string]: Comment} {
-     return annotations.reduce(
-      (commentEntities: { [id: string]: Annotation }, annotation: Annotation) => {
-        if (annotation.comments.length) {
-          const comment = {
-            ...annotation.comments[0] || '',
-            tags: [...annotation.tags || []]
-          };
-          return {
-            ...commentEntities,
-            [annotation.id]: comment
-          };
-        }
-        return {
-          ...commentEntities
-        };
-      }, {});
-  }
-
-  static genTagNameEntities(annotations) {
-    const filterAnnoWithoutCommentsTags = annotations.filter(a => (a.comments.length && a.tags.length));
-    const allTags = filterAnnoWithoutCommentsTags.map(anno => this.groupByKeyEntities(anno.tags, 'name'));
-    const groupedByName = allTags.reduce(
-      (tagEntitiy: { [id: string]: Annotation }, tagItem) => {
-        return {
-          ...tagEntitiy,
-          ...tagItem
-        };
-      }, {});
-
-    return this.genNameEnt(annotations, groupedByName);
-  }
-
-  static genNameEnt(annos, groupedByName) {
-     return Object.keys(groupedByName).reduce(
-      (tagNameEnt, key) => {
-        const readyAnno = annos.filter(anno => anno.tags.find(tag => tag.name === key))
-          .map(anno => anno.id)
-          .reduce((obj: {[id: string]: string}, anno: string) => ({ ...obj, [anno]: anno }), {});
-
-        return {
-          ...tagNameEnt,
-          [key]: readyAnno
-        };
-      }, {});
-
-  }
-
-  static generateAnnotationEntities(anno): {[id: string]: Annotation} {
-    return anno.reduce(
-      (annoEntities: { [id: string]: Annotation }, annotation: Annotation) => {
-        const annot = {
-          ...annotation,
-          positionTop: annotation.rectangles[0].y // todo remove this
-        };
-        return {
-          ...annoEntities,
-          [annotation.id]: annot
-        };
-      }, {});
-  }
-
-  static generateRedactionEntities(redactions: Redaction[]): { [id: string]: Redaction } {
-    return redactions.reduce(
-      (redactEntities: { [id: string]: Redaction }, redaction: Redaction) => {
-        return {
-          ...redactEntities,
-          [redaction.redactionId]: redaction
-        };
-      }, {});
-  }
-
-  static resetCommentEntSelect(ent: { [id: string]: Comment }) {
-    return Object.keys(ent).reduce((object, key) => {
-      object[key] = {
-        ...ent[key],
-        editable: false,
-        selected: false
-      };
-      return object;
-    }, {});
-  }
-
-  static filterCommentsSummary(comments: Array<Comment>, filters: Filters) {
-    if (Object.keys(filters).length) {
-      const tagFilterApplied = Object.keys(filters.tagFilters)
-        .filter(key => filters.tagFilters[key] === true).length;
-      const dateFilterApplied = (filters.dateRangeFrom || filters.dateRangeTo);
-      const filteredComments = comments.filter(comment => {
-        let hasTagFilter = false;
-        let hasDateFilter = false;
-        // check tags
-        if (filters.hasOwnProperty('tagFilters')) {
-          Object.keys(filters.tagFilters).forEach(filter => {
-            const label = filters.tagFilters[filter];
-            if (label) {
-              return comment.tags.forEach(tag => {
-                if (tag.name === filter && !hasTagFilter) {
-                  hasTagFilter = true;
-                }
-              });
-            }});
-        }
-        // check for dates
-        if (dateFilterApplied) {
-          const commentDate = moment(comment.lastModifiedDate);
-          const dateFrom =  filters.dateRangeFrom !== null ? moment(filters.dateRangeFrom) : undefined;
-          const dateTo = filters.dateRangeTo !== null ? moment(filters.dateRangeTo) : undefined;
-
-          if (dateTo && dateFrom) {
-            if (commentDate > dateFrom && commentDate < dateTo) {
-              hasDateFilter = true;
-            }
-          }
-          if (dateTo && !dateFrom) {
-            if (commentDate <= dateTo) {
-              hasDateFilter = true;
-            }
-          }
-          if (dateFrom && !dateTo) {
-            if (commentDate > dateFrom) {
-              hasDateFilter = true;
-            }
-          }
-        }
-
-        return (hasTagFilter || hasDateFilter);
-      });
-      return (tagFilterApplied || dateFilterApplied) ? filteredComments : comments;
-    } else {
-      return comments;
-    }
-  }
-}

package/projects/media-viewer/src/lib/toolbar/highlight-toolbar/highlight-toolbar.component.html

@@ -1,56 +0,0 @@
-<div class="redaction">
-  <label class="govuk-label redaction-title" data-l10n-id="redaction_options"
-    >{{ "Highlight options" | rpxTranslate }}</label
-  >
-
-  <button
-    id="mvDrawBtn"
-    #mvDrawBtn
-    class="mv-button mv-toolbar__menu-button--draw mv-tooltip"
-    [attr.data-tooltip]="'Draw a box' | rpxTranslate"
-    [class.toggled]="toolbarEventService.drawModeSubject | async"
-    aria-pressed="false"
-    data-l10n-id="mvDrawBtn"
-    (click)="onClickDrawToggle()"
-    [disabled]="redactionAllInProgress"
-  >
-    <span data-l10n-id="draw_label">{{ "Draw a box" | rpxTranslate }}</span>
-  </button>
-
-  <button
-    id="highlightTextBtn"
-    class="mv-button mv-toolbar__menu-button--highlight mv-tooltip"
-    [attr.data-tooltip]="'Highlight text' | rpxTranslate"
-    data-l10n-id="highlightTextBtn"
-    (click)="onHighlight()"
-    [class.toggled]="toolbarEventService.highlightModeSubject | async"
-    [disabled]="redactionAllInProgress"
-  >
-    <span data-l10n-id="highlightTextBtn_label">{{ "Highlight text" | rpxTranslate }}</span>
-  </button>
-
-  <button
-    id="mvHighlightFromSearchBtn"
-    [attr.data-tooltip]="'From search' | rpxTranslate"
-    data-l10n-id="fromSearchButton"
-    class="mv-button redaction-button--search mv-tooltip"
-    (click)="onAllSearch()"
-    [disabled]="redactionAllInProgress"
-  >
-    <span style="width: 5rem" data-l10n-id="fromSearchButton_label"
-      >{{ "From search" | rpxTranslate }}</span
-    >
-  </button>
-
-  <button
-    id="mvCloseBtn"
-    #mvCloseBtn
-    class="mv-button redaction-button--close mv-tooltip"
-    [attr.data-tooltip]="'Close highlight' | rpxTranslate"
-    data-l10n-id="mvRedactBtn"
-    (click)="onClose()"
-    [disabled]="redactionAllInProgress"
-  >
-    <span data-l10n-id="Close Redaction">{{ "Close Highlight" | rpxTranslate }}</span>
-  </button>
-</div>

package/projects/media-viewer/src/lib/toolbar/highlight-toolbar/highlight-toolbar.component.spec.ts

@@ -1,127 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { HighlightToolbarComponent } from './highlight-toolbar.component';
-import { FormsModule } from '@angular/forms';
-import { RpxTranslationModule } from 'rpx-xui-translation';
-import { StoreModule } from '@ngrx/store';
-import { reducers } from '../../store/reducers/reducers';
-import { ToolbarEventService } from '../toolbar-event.service';
-import { ToolbarButtonVisibilityService } from '../toolbar-button-visibility.service';
-
-describe('HighlightToolbarComponent', () => {
-  let component: HighlightToolbarComponent;
-  let fixture: ComponentFixture<HighlightToolbarComponent>;
-  let nativeElement;
-  let toolbarService: ToolbarEventService;
-
-  beforeEach(() => {
-    return TestBed.configureTestingModule({
-      declarations: [
-        HighlightToolbarComponent,
-      ],
-      imports: [
-        FormsModule,
-        StoreModule.forFeature('media-viewer', reducers),
-        StoreModule.forRoot({}),
-        RpxTranslationModule.forRoot({
-          baseUrl: '',
-          debounceTimeMs: 300,
-          validity: {
-            days: 1
-          },
-          testMode: true
-        })
-      ],
-      providers: [ToolbarButtonVisibilityService, ToolbarEventService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HighlightToolbarComponent);
-    component = fixture.componentInstance;
-    toolbarService = TestBed.inject(ToolbarEventService);
-    nativeElement = fixture.debugElement.nativeElement;
-    component.toolbarButtons.showHighlightButton = true;
-    component.toolbarButtons.showDrawButton = true;
-    component.toolbarButtons.showRotate = true;
-    component.toolbarButtons.showZoom = true;
-    component.toolbarButtons.showPrint = true;
-    component.toolbarButtons.showDownload = true;
-    component.toolbarButtons.showCommentSummary = true;
-    fixture.detectChanges();
-  });
-
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should start with both annotation modes deactivated', () => {
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--draw')).nativeElement).not.toHaveClass('toggled');
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).not.toHaveClass('toggled');
-  });
-
-  it('should toggle on the highlight button', () => {
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).not.toHaveClass('toggled');
-    component.onHighlight();
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).toHaveClass('toggled');
-  });
-
-  it('should toggle off the highlight button', () => {
-    component.onHighlight();
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).toHaveClass('toggled');
-    component.onHighlight();
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).not.toHaveClass('toggled');
-  });
-
-  it('should show the draw button if permitted', () => {
-    component.toolbarButtons.showHighlightButton = true;
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--draw')).nativeElement).toBeTruthy();
-  });
-
-  it('should toggle on the draw button', () => {
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--draw')).nativeElement).not.toHaveClass('toggled');
-    component.onClickDrawToggle();
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--draw')).nativeElement).toHaveClass('toggled');
-  });
-
-  it('should  toggle off the draw button', () => {
-    component.onClickDrawToggle();
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--draw')).nativeElement).toHaveClass('toggled');
-    component.onClickDrawToggle();
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--draw')).nativeElement).not.toHaveClass('toggled');
-  });
-
-  it('should turn draw mode off when highlight is selected', () => {
-    component.onClickDrawToggle();
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--draw')).nativeElement).toHaveClass('toggled');
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).not.toHaveClass('toggled');
-    component.onHighlight();
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).toHaveClass('toggled');
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--draw')).nativeElement).not.toHaveClass('toggled');
-  });
-
-  it('should turn highlight mode off when draw is selected', () => {
-    component.onHighlight();
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).toHaveClass('toggled');
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--draw')).nativeElement).not.toHaveClass('toggled');
-    component.onClickDrawToggle();
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--draw')).nativeElement).toHaveClass('toggled');
-    expect(fixture.debugElement.query(By.css('.mv-toolbar__menu-button--highlight')).nativeElement).not.toHaveClass('toggled');
-  });
-});

package/projects/media-viewer/src/lib/toolbar/highlight-toolbar/highlight-toolbar.component.ts

@@ -1,53 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { SearchMode, SearchType, ToolbarEventService } from '../toolbar-event.service';
-import { ToolbarButtonVisibilityService } from '../toolbar-button-visibility.service';
-import * as fromStore from '../../store/reducers/reducers';
-import { Store, select } from '@ngrx/store';
-import { Subscription } from 'rxjs';
-import * as fromRedactSelectors from '../../store/selectors/redaction.selectors';
-
-@Component({
-    selector: 'mv-highlight-toolbar',
-    templateUrl: './highlight-toolbar.component.html',
-    styleUrls: ['./highlight-toolbar.component.scss'],
-    standalone: false
-})
-export class HighlightToolbarComponent implements OnInit, OnDestroy {
-
-  private subscriptions: Subscription[] = [];
-  redactionAllInProgress: boolean;
-
-  constructor(public readonly toolbarEventService: ToolbarEventService,
-    public readonly toolbarButtons: ToolbarButtonVisibilityService) { }
-
-  ngOnInit(): void {
-    this.subscriptions.push(this.toolbarEventService.redactAllInProgressSubject.subscribe(inprogress => {
-      this.redactionAllInProgress = inprogress;
-    }));
-  }
-
-  onAllSearch() {
-    this.toolbarEventService.openRedactionSearch.next({ modeType: SearchType.Highlight, isOpen: true } as SearchMode);
-  }
-
-  onHighlight() {
-    this.toolbarEventService.toggleHighlightMode();
-  }
-
-  onClickDrawToggle() {
-    this.toolbarEventService.toggleDrawMode();
-  }
-
-  onClose() {
-    this.toolbarEventService.highlightToolbarSubject.next(false);
-    this.toolbarEventService.highlightModeSubject.next(false);
-    this.toolbarEventService.openRedactionSearch.next({ modeType: SearchType.Highlight, isOpen: false } as SearchMode);
-  }
-
-  ngOnDestroy(): void {
-    for (const subscription of this.subscriptions) {
-      subscription.unsubscribe();
-    }
-  }
-
-}

package/projects/media-viewer/src/lib/toolbar/icp-event.service.ts

@@ -1,45 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Subject } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class IcpEventService {
-
-  enabled = new BehaviorSubject(false);
-  sessionLaunch = new Subject<void>();
-  becomingPresenter = new Subject<void>();
-  stoppingPresenting = new Subject<void>();
-  leavingSession = new BehaviorSubject(false);
-  sessionExitConfirmed = new Subject<void>();
-  participantsListVisible = new BehaviorSubject(false);
-
-  constructor() { }
-
-  launchSession = () => {
-    this.sessionLaunch.next();
-  };
-
-  enable = () => {
-    this.enabled.next(true);
-    this.launchSession();
-  };
-
-  becomePresenter = () => {
-    this.becomingPresenter.next();
-  };
-
-  stopPresenting = () => {
-    this.stoppingPresenting.next();
-  };
-
-  leaveSession = () => {
-    this.leavingSession.next(true);
-  };
-
-  confirmExit = () => {
-    this.sessionExitConfirmed.next();
-    this.participantsListVisible.next(false);
-    this.enabled.next(false);
-  };
-}

package/projects/media-viewer/src/lib/toolbar/icp-toolbar/icp-toolbar.component.html

@@ -1,47 +0,0 @@
-<div id="icp-toolbar" class="icpMode">
-  <div id="toolbar-title">
-    <label class="govuk-label" data-l10n-id="digitalEvidence_label">Digital evidence presentation</label>
-  </div>
-
-  <div id="presentation-mode">
-    <div class="item-label">
-      <label class="govuk-label" data-l10n-id="icpInfo_label">You are in presentation mode</label>
-    </div>
-    <div class="item-button">
-      <button class="govuk-button govuk-button--secondary" data-module="govuk-button" tabindex="0"
-        title="Leave presentation" (click)="leaveIcpSession()">
-        <span data-l10n-id="icp-leave-presentation_label">Leave presentation</span>
-      </button>
-    </div>
-  </div>
-
-  <div id="presenter-info">
-    <div class="item-label">
-      <label class="govuk-label" *ngIf="!presenterName" data-l10n-id="noPresenter_label">Waiting for presenter</label>
-      <label class="govuk-label" *ngIf="presenterName && isPresenter" data-l10n-id="isPresenter_label">You are
-        presenting</label>
-      <label class="govuk-label" *ngIf="presenterName && !isPresenter"
-        data-l10n-id="otherPresenter_label">{{ presenterName | titlecase }}
-        is presenting</label>
-    </div>
-    <div class="item-button">
-      <button *ngIf="!presenterName" class="govuk-button" id="icp-present" tabindex="0" title="Present"
-        (click)="present()">
-        <span data-l10n-id="icp-present_label">Start presenting</span>
-      </button>
-      <button *ngIf="isPresenter" class="govuk-button  govuk-button--warning" id="icp-stop-presenting" tabindex="0"
-        title="Stop presenting" (click)="stopPresenting()">
-        <span data-l10n-id="icp-stop-presenting_label">Stop Presenting</span>
-      </button>
-    </div>
-  </div>
-
-  <div id="participant-list">
-    <button class="govuk-button govuk-button--secondary" id="icp-participants-list" tabindex="0"
-      title="Participants list" (click)="showParticipantsList()">
-      <span
-        data-l10n-id="icp-stop-presenting_label">{{(icpEventService.participantsListVisible | async) ? 'Hide': 'Show'}}
-        participants</span>
-    </button>
-  </div>
-</div>

package/projects/media-viewer/src/lib/toolbar/icp-toolbar/icp-toolbar.component.spec.ts

@@ -1,70 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { StoreModule } from '@ngrx/store';
-import { reducers } from '../../store/reducers/reducers';
-import { IcpToolbarComponent } from './icp-toolbar.component';
-import { ToolbarEventService } from '../toolbar-event.service';
-import { BehaviorSubject } from 'rxjs';
-import { IcpEventService } from '../icp-event.service';
-
-describe('IcpToolbarComponent', () => {
-  let component: IcpToolbarComponent;
-  let fixture: ComponentFixture<IcpToolbarComponent>;
-  let toolbarEvents: ToolbarEventService;
-  let icpEventService: IcpEventService
-  const toolbarEventsMock = {
-    toggleParticipantsList: () => {}
-  };
-  const icpEventServiceMock = {
-    becomePresenter: jasmine.createSpy('becomePresenter'),
-    stopPresenting: jasmine.createSpy('stopPresenting'),
-    leaveSession: jasmine.createSpy('leaveSession'),
-    participantsListVisible: new BehaviorSubject<boolean>(false),
-  };
-
-  beforeEach(() => {
-    return TestBed.configureTestingModule({
-      declarations: [IcpToolbarComponent],
-      imports: [
-        StoreModule.forFeature('media-viewer', reducers),
-        StoreModule.forRoot({})
-      ],
-      providers: [{ provide: ToolbarEventService, useValue: toolbarEventsMock }, { provide: IcpEventService, useValue: icpEventServiceMock }]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(IcpToolbarComponent);
-    component = fixture.componentInstance;
-    toolbarEvents = TestBed.inject(ToolbarEventService);
-    icpEventService = TestBed.inject(IcpEventService);
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should present', () => {
-    component.present();
-    expect(icpEventService.becomePresenter).toHaveBeenCalled();
-  });
-
-  it('should stopPresenting', () => {
-    component.stopPresenting();
-    expect(icpEventService.stopPresenting).toHaveBeenCalled();
-  });
-
-  it('should leaveSession', () => {
-    component.leaveIcpSession();
-    expect(icpEventService.leaveSession).toHaveBeenCalled();
-  });
-
-  it('should show participants', () => {
-    spyOn(toolbarEvents, 'toggleParticipantsList');
-
-    component.showParticipantsList();
-
-    expect(toolbarEvents.toggleParticipantsList).toHaveBeenCalledWith(true);
-  });
-});