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

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

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,56 @@
+<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

@@ -0,0 +1,127 @@
+/* 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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,70 @@
+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);
+  });
+});