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

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-view/rectangle/rectangle.component.spec.ts

@@ -1,239 +0,0 @@
-import { ComponentFixture, TestBed} from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
-import { RectangleComponent } from './rectangle.component';
-import { FormsModule } from '@angular/forms';
-import { MutableDivModule } from 'mutable-div';
-import { By } from '@angular/platform-browser';
-import { HighlightCreateService } from '../../annotation-create/highlight-create/highlight-create.service';
-import { StoreModule } from '@ngrx/store';
-import { reducers } from '../../../../store/reducers/reducers';
-
-describe('RectangleComponent', () => {
-  let component: RectangleComponent;
-  let fixture: ComponentFixture<RectangleComponent>;
-  let rectangleEl: DebugElement;
-  let nativeElement;
-  let mockRectangle;
-
-  beforeEach(() => {
-    mockRectangle = {
-      id: '16d5c513-15f9-4c39-8102-88bdb85d8831',
-      createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-      createdByDetails: {
-        'forename': 'Linus',
-        'surname': 'Norton',
-        'email': 'linus.norton@hmcts.net'
-      },
-      createdDate: '2018-05-28T08:48:33.206Z',
-      lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-      lastModifiedByDetails: {
-        'forename': 'Jeroen',
-        'surname': 'Rijks',
-        'email': 'jeroen.rijks@hmcts.net'
-      },
-      lastModifiedDate: '2019-05-28T08:48:33.206Z',
-      annotationId: '123annotationId',
-      height: 100,
-      width: 50,
-      x: 5,
-      y: 10,
-    };
-  });
-
-  beforeEach(() => {
-    return TestBed.configureTestingModule({
-      declarations: [RectangleComponent],
-      imports: [
-        FormsModule,
-        MutableDivModule,
-        StoreModule.forFeature('media-viewer', reducers),
-        StoreModule.forRoot({})
-      ],
-      providers: [HighlightCreateService],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA, ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(RectangleComponent);
-    component = fixture.componentInstance;
-    component.annoRect = mockRectangle;
-    component.pageHeight = 800;
-    component.pageWidth = 400;
-    component.zoom = 1;
-    component.rotate = 0;
-    component.editable = true;
-    component.selected = false;
-    component.enableGrabNDrag = false;
-    nativeElement = fixture.debugElement.nativeElement;
-    fixture.detectChanges();
-    rectangleEl = fixture.debugElement.query(By.css('.rectangle'));
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should set dimentions on annoRect input with 0.5 zoom', () => {
-    component.zoom = 0.5;
-    component.annoRect = mockRectangle;
-
-    expect(component.height).toBe(50);
-    expect(component.width).toBe(25);
-    expect(component.top).toBe(5);
-    expect(component.left).toBe(2.5);
-  });
-
-  it('should maitain dimensions when rotation is zero', () => {
-    component.zoom = 0.5;
-    component.annoRect = mockRectangle;
-    component.adjustForRotation(0);
-
-    expect(component.height).toBe(50);
-    expect(component.width).toBe(25);
-    expect(component.top).toBe(5);
-    expect(component.left).toBe(2.5);
-  });
-
-  it('should adjust dimensions when rotation is 90deg', () => {
-    component.zoom = 0.5;
-    component.annoRect = mockRectangle;
-    component.adjustForRotation(90);
-
-    expect(component.height).toBe(25);
-    expect(component.width).toBe(50);
-    expect(component.top).toBe(2.5);
-    expect(component.left).toBe(345);
-  });
-
-  it('should adjust dimensions when rotation is 180deg', () => {
-    component.zoom = 0.5;
-    component.annoRect = mockRectangle;
-    component.adjustForRotation(180);
-
-    expect(component.height).toBe(50);
-    expect(component.width).toBe(25);
-    expect(component.top).toBe(745);
-    expect(component.left).toBe(372.5);
-  });
-
-  it('should adjust dimensions when rotation is 270deg', () => {
-    component.zoom = 0.5;
-    component.annoRect = mockRectangle;
-    component.adjustForRotation(270);
-
-    expect(component.height).toBe(25);
-    expect(component.width).toBe(50);
-    expect(component.top).toBe(772.5);
-    expect(component.left).toBe(5);
-  });
-
-  it('should emit a click', () => {
-    spyOn(component.selectEvent, 'emit');
-    component.onClick();
-
-    expect(component.selectEvent.emit).toHaveBeenCalledTimes(1);
-  });
-
-  it('should update the rectangle if moved', () => {
-    const oldLeft = rectangleEl.nativeElement.offsetLeft;
-    const oldTop = rectangleEl.nativeElement.offsetTop;
-
-    const pointerDownEvent = createPointerEvent('pointerdown', 500, 500, 500, 500);
-    const pointerMoveEvent = createPointerEvent('pointermove', 750, 750, 900, 900);
-    const pointerUpEvent = createPointerEvent('pointerup', 750, 800, 750, 800);
-
-    rectangleEl.nativeElement.dispatchEvent(pointerDownEvent);
-    rectangleEl.nativeElement.dispatchEvent(pointerMoveEvent);
-    rectangleEl.nativeElement.dispatchEvent(pointerUpEvent);
-
-    fixture.detectChanges();
-    expect(rectangleEl.nativeElement.offsetLeft).not.toEqual(oldLeft);
-    expect(rectangleEl.nativeElement.offsetTop).not.toEqual(oldTop);
-  });
-
-  it('should update the rectangle if resized', () => {
-    const oldWidth = rectangleEl.nativeElement.offsetWidth;
-    const oldHeight = rectangleEl.nativeElement.offsetHeight;
-
-    const pointerDownEvent = createPointerEvent('pointerdown', 500, 500, 500, 500);
-    const pointerMoveEvent = createPointerEvent('pointermove', 750, 750, 900, 900);
-    const pointerUpEvent = createPointerEvent('pointerup', 750, 800, 750, 800);
-
-    rectangleEl.nativeElement.dispatchEvent(new Event('pointerdown'));
-    fixture.detectChanges();
-    const bottomRightHandle = document.querySelector('.BOTTOM-RIGHT');
-    bottomRightHandle.dispatchEvent(pointerDownEvent);
-    bottomRightHandle.dispatchEvent(pointerMoveEvent);
-    bottomRightHandle.dispatchEvent(pointerUpEvent);
-
-    fixture.detectChanges();
-    expect(rectangleEl.nativeElement.offsetWidth).not.toEqual(oldWidth);
-    expect(rectangleEl.nativeElement.offsetHeight).not.toEqual(oldHeight);
-  });
-
-  it('should not update the rectangle if the rectangle did not change', () => {
-    spyOn(component.updateEvent, 'emit');
-    component.left = rectangleEl.nativeElement.offsetLeft;
-    component.top = rectangleEl.nativeElement.offsetTop;
-    component.width = rectangleEl.nativeElement.offsetWidth;
-    component.height = rectangleEl.nativeElement.offsetHeight;
-
-    const pointerDownEvent = createPointerEvent('pointerdown', 500, 500, 500, 500);
-    const pointerMoveEvent = createPointerEvent('pointermove', 500, 500, 500, 500);
-    const pointerUpEvent = createPointerEvent('pointerup', 500, 500, 500, 500);
-
-    rectangleEl.nativeElement.dispatchEvent(pointerDownEvent);
-    rectangleEl.nativeElement.dispatchEvent(pointerMoveEvent);
-    rectangleEl.nativeElement.dispatchEvent(pointerUpEvent);
-
-    fixture.detectChanges();
-    expect(rectangleEl.nativeElement.offsetLeft).toEqual(component.left);
-    expect(rectangleEl.nativeElement.offsetTop).toEqual(component.top);
-    expect(rectangleEl.nativeElement.offsetWidth).toEqual(component.width);
-    expect(rectangleEl.nativeElement.offsetHeight).toEqual(component.height);
-    expect(component.updateEvent.emit).not.toHaveBeenCalled();
-  });
-
-  it('should compare 2 rectangles values and see if its the same', () => {
-    const rect = {
-      offsetLeft: 100,
-      offsetTop: 100,
-      offsetWidth: 100,
-      offsetHeight: 100
-    };
-    let hasRectChanged = component.hasRectangleChanged(rect);
-    expect(hasRectChanged).toEqual(true);
-
-    component.top = 100;
-    component.left = 100;
-    component.height = 100;
-    component.width = 100;
-    hasRectChanged = component.hasRectangleChanged(rect);
-    expect(hasRectChanged).toEqual(false);
-  });
-
-  function createPointerEvent(typeArg: string, screenX: number, screenY: number, clientX: number, clientY: number) {
-    const pointerEvent = document.createEvent('MouseEvents');
-    pointerEvent.initMouseEvent(
-      typeArg,
-      true,
-      true,
-      window,
-      1,
-      screenX,
-      screenY,
-      clientX,
-      clientY,
-      false,
-      false,
-      false,
-      false,
-      0,
-      null
-    );
-    return pointerEvent as PointerEvent;
-  }
-});

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-view/rectangle/rectangle.component.ts

@@ -1,135 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnDestroy,
-  Output,
-  SimpleChanges,
-  ViewChild
-} from '@angular/core';
-import { Rectangle } from './rectangle.model';
-import { Subscription } from 'rxjs';
-import { ToolbarEventService } from '../../../../toolbar/toolbar-event.service';
-import { HighlightCreateService } from '../../annotation-create/highlight-create/highlight-create.service';
-
-@Component({
-    selector: 'mv-anno-rectangle',
-    templateUrl: './rectangle.component.html',
-    standalone: false
-})
-export class RectangleComponent implements OnChanges, AfterViewInit, OnDestroy {
-
-  @Input() color: String;
-  @Input() zoom: number;
-  @Input() rotate: number;
-  @Input() editable: boolean;
-  @Input() pageHeight: number;
-  @Input() pageWidth: number;
-
-  @Output() selectEvent = new EventEmitter<Rectangle>();
-  @Output() updateEvent = new EventEmitter<Rectangle>();
-
-  @ViewChild('rectElement', {static: false}) viewRect: ElementRef;
-
-  private subscriptions: Subscription[] = [];
-  _selected: boolean;
-  enableGrabNDrag = false;
-
-  height: number;
-  width: number;
-  top: number;
-  left: number;
-
-  _annoRect: Rectangle;
-  @Input()
-  set annoRect(annoRect: Rectangle) {
-    this._annoRect = { ...annoRect };
-    this.height = +(annoRect.height * this.zoom).toFixed(2);
-    this.width = +(annoRect.width * this.zoom).toFixed(2);
-    this.left = +(annoRect.x * this.zoom).toFixed(2);
-    this.top = +(annoRect.y * this.zoom).toFixed(2);
-  }
-
-  get annoRect() {
-    return this._annoRect;
-  }
-
-
-  constructor(private readonly toolbarEvents: ToolbarEventService,
-              private readonly highlightService: HighlightCreateService) {}
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.rotate) {
-      this.adjustForRotation(this.rotate);
-    }
-  }
-
-  ngAfterViewInit() {
-    this.subscriptions.push(
-      this.toolbarEvents.grabNDrag.subscribe(grabNDrag => this.enableGrabNDrag = grabNDrag)
-    );
-  }
-
-  ngOnDestroy(): void {
-    this.subscriptions.filter(subscription => !subscription.closed)
-      .forEach(subscription => subscription.unsubscribe());
-  }
-
-  @Input()
-  set selected(selected: boolean) {
-    this._selected = selected;
-    if (this._selected && this.viewRect) {
-      this.viewRect.nativeElement.focus();
-    }
-  }
-
-  get selected() {
-    return this._selected;
-  }
-
-  onClick() {
-    this.selectEvent.emit(this.annoRect);
-  }
-
-  onUpdate(viewRect: any) {
-    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = viewRect;
-    if (this.hasRectangleChanged(viewRect)) {
-      let rectangle = this.highlightService
-        .applyRotation(this.pageHeight, this.pageWidth, offsetHeight, offsetWidth, offsetTop, offsetLeft, this.rotate, this.zoom);
-      rectangle = { ...this.annoRect, ...rectangle };
-      this.updateEvent.emit({ ...rectangle });
-    }
-  }
-
-  adjustForRotation(rotation: number) {
-    const { top, left, height, width } = this;
-    switch (rotation) {
-      case 90:
-        this.width = height;
-        this.height = width;
-        this.left = this.pageWidth  - top - height;
-        this.top = left;
-        break;
-      case 180:
-        this.left = this.pageWidth - left - width;
-        this.top = this.pageHeight - top - height;
-        break;
-      case 270:
-        this.width = height;
-        this.height = width;
-        this.left = top;
-        this.top = this.pageHeight - left - width;
-        break;
-    }
-  }
-
-  hasRectangleChanged(viewRect): boolean {
-    return Math.round(this.left) !== viewRect.offsetLeft ||
-      Math.round(this.top) !== viewRect.offsetTop ||
-      Math.round(this.width) !== viewRect.offsetWidth ||
-      Math.round(this.height) !== viewRect.offsetHeight;
-  }
-}

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-view/rectangle/rectangle.model.ts

@@ -1,9 +0,0 @@
-import { ApiPersisted } from '../../../models/api-persisted.model';
-
-export interface Rectangle extends ApiPersisted {
-  annotationId: string;
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-}

package/projects/media-viewer/src/lib/annotations/annotation-set/ctx-toolbar/ctx-toolbar.component.html

@@ -1,30 +0,0 @@
-<div class="toolbar" *ngIf="rectangle"
-     [style.top.px]="top"
-     [style.left.px]="left">
-  <button *ngIf="canHighlight"
-          type="button" title="Highlight"
-          class="aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight"
-          (mousedown)="createHighlight()">
-    <span>Highlight</span>
-  </button>
-  <button *ngIf="canDelete"
-          type="button" title="Delete"
-          class="aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton"
-          (mousedown)="deleteHighlight()">
-    <span>Remove</span>
-  </button>
-  <button *ngIf="canComment"
-          type="button" title="Comment"
-          class="aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment"
-          (mousedown)="addOrEditComment()">
-    <span>Comment</span></button>
-  <button *ngIf="canBookmark"
-          type="button" title="Bookmark"
-          class="aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark"
-          id="bookmarkButton"
-          (mousedown)="createBookmark()">
-    <span>Bookmark</span></button>
-  <div class="arrow-down">
-    <div class="inner-triangle"></div>
-  </div>
-</div>

package/projects/media-viewer/src/lib/annotations/annotation-set/ctx-toolbar/ctx-toolbar.component.spec.ts

@@ -1,278 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CtxToolbarComponent } from './ctx-toolbar.component';
-import { By } from '@angular/platform-browser';
-import { EventEmitter } from '@angular/core';
-
-describe('CtxToolbarComponent', () => {
-  let component: CtxToolbarComponent;
-  let fixture: ComponentFixture<CtxToolbarComponent>;
-  const mockRectangle = {
-    x: 100, y: 100, width: 100, height: 20,
-    id: '16d5c513-15f9-4c39-8102-88bdb85d8831',
-    annotationId: '4f3f9361-6d17-4689-81dd-5cb2e317b329',
-    createdDate: '2018-05-28T08:48:33.206Z',
-    createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-    createdByDetails: {
-      'forename': 'Linus',
-      'surname': 'Norton',
-      'email': 'linus.norton@hmcts.net'
-    },
-    lastModifiedDate: '2019-05-28T08:48:33.206Z',
-    lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-    lastModifiedByDetails: {
-      'forename': 'Jeroen',
-      'surname': 'Rijks',
-      'email': 'jeroen.rijks@hmcts.net'
-    },
-  };
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [CtxToolbarComponent]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(CtxToolbarComponent);
-    component = fixture.componentInstance;
-    component.rectangles = [mockRectangle];
-    component.zoom = 1;
-    component.ngOnChanges({ zoom: { previousValue: undefined, currentValue: 1, firstChange: true, isFirstChange: () => true }});
-
-    fixture.detectChanges();
-  });
-
-  afterEach(() => {
-    if (component.rectangle) {
-      component.rectangle.x = 100;
-      component.rectangle.y = 100;
-    }
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should set rectangle', () => {
-    const rectangles = [{ y: 10 }, { y: 20 }] as any;
-    component.rectangles = rectangles;
-
-    expect(component._rectangles).toEqual(rectangles);
-    expect(component.rectangle).toEqual({ y: 10 } as any);
-  });
-
-  it('should create highlight', function () {
-    spyOn(component.createHighlightEvent, 'emit');
-    component.rectangle = { id: 'rectId' } as any;
-
-    component.createHighlight();
-
-    expect(component.createHighlightEvent.emit).toHaveBeenCalled();
-    expect(component.rectangle).toBeUndefined();
-  });
-
-  it('should delete highlight', () => {
-    const mockDeleteEvent = new EventEmitter();
-    spyOn(mockDeleteEvent, 'emit');
-    component.canDelete = true;
-    fixture.detectChanges();
-
-    component.deleteHighlightEvent = mockDeleteEvent;
-    const deleteBtn = fixture.debugElement.query(By.css('button[title=Delete]'));
-    deleteBtn.triggerEventHandler('mousedown', {});
-
-    expect(mockDeleteEvent.emit).toHaveBeenCalledWith();
-  });
-
-  it('should create comment', () => {
-    const mockCommentEvent = new EventEmitter();
-    spyOn(mockCommentEvent, 'emit');
-    component.canComment = true;
-    fixture.detectChanges();
-
-    component.addOrEditCommentEvent = mockCommentEvent;
-    const commentBtn = fixture.debugElement.query(By.css('button[title=Comment]'));
-    commentBtn.triggerEventHandler('mousedown', {});
-
-    expect(mockCommentEvent.emit).toHaveBeenCalledWith();
-  });
-
-  it('adjust its position', () => {
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.left).toEqual('0px');
-    expect(element.styles.top).toEqual('30px');
-  });
-
-  it('rotate 90 should align to top and horizontally with highlight', () => {
-    component.rotate = 90;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.left).toEqual('0px');
-    expect(element.styles.top).toEqual('30px');
-  });
-
-  it('rotate 180 should align to left and horizontally with highlight (accounting for highlight dimensions)', () => {
-    component.rotate = 180;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.left).toEqual('0px');
-    expect(element.styles.top).toEqual('30px');
-  });
-
-  it('rotate 270 should align to bottom and horizontally with highlight (accounting for highlight dimensions)', () => {
-    component.rotate = 270;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.left).toEqual('0px');
-    expect(element.styles.top).toEqual('30px');
-  });
-
-  it('top should default to 30px when annotation is at the top of the page', () => {
-    component.rotate = 0;
-    component.rectangle.y = 0;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.top).toEqual('30px');
-  });
-
-  it('rotate 90 should set top to calculated value when pop-up is not at the edge of the page', () => {
-    component.rotate = 90;
-    component.rectangle.y = 200;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.top).toEqual('30px');
-  });
-
-  it('rotate 90 should align top to the height of the page when annotation is at far left of page', () => {
-    component.rotate = 90;
-    component.rectangle.y = 600;
-    component.pageHeight = 750;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.top).toEqual('30px');
-  });
-
-  it('rotate 270 should set top to calculated value when pop-up is not at the edge of the page', () => {
-    component.rotate = 270;
-    component.rectangle.y = 250;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.top).toEqual('30px');
-  });
-
-  it('rotate 270 should align top to 30px when annotation is at the far right of the page', () => {
-    component.rotate = 270;
-    component.rectangle.y = 900;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.top).toEqual('30px');
-  });
-
-  it('left should default to 0px when annotation is at the far left of the page', () => {
-    component.rotate = 0;
-    component.rectangle.x = 0;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.left).toEqual('0px');
-  });
-
-  it('left should default to 0px when annotation is at the far right of the page', () => {
-    component.rotate = 0;
-    component.rectangle.x = 600;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.left).toEqual('0px');
-  });
-
-  it('left should be set to calculated value when pop-up is not at the edge of the page', () => {
-    component.rotate = 0;
-    component.rectangle.x = 250;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.left).toEqual('0px');
-  });
-
-  it('rotate 180 should align left to width - defaultWidth when annotation is at the far left of the page', () => {
-    component.rotate = 180;
-    component.rectangle.x = 750;
-    component.pageWidth = 350;
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-    expect(element.styles.left).toEqual('0px');
-  });
-
-  it('rotate 180 should set left to calculated value when pop-up is not at the edge of the page', () => {
-    component.rotate = 180;
-    component.rectangle.x = 250;
-
-    fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('div'));
-
-    expect(element.styles.left).toEqual('0px');
-  });
-
-  describe('rectangles', () => {
-    it('should call setRectangle, popupTop and popupLeft when rectangles provided', () => {
-      spyOn(component, 'setRectangle').and.callThrough();
-
-      component.rectangles = [mockRectangle];
-      fixture.detectChanges();
-
-      expect(component.setRectangle).toHaveBeenCalled();
-    });
-
-    it('should not call setRectangle, popupTop and popupLeft when rectangles is not provided', () => {
-      spyOn(component, 'setRectangle').and.callThrough();
-      spyOn(component, 'popupTop').and.callThrough();
-      spyOn(component, 'popupLeft').and.callThrough();
-
-      component.rectangles = null;
-      fixture.detectChanges();
-
-      expect(component.setRectangle).not.toHaveBeenCalled();
-      expect(component.popupTop).not.toHaveBeenCalled();
-      expect(component.popupLeft).not.toHaveBeenCalled();
-    });
-  });
-
-  it('should emit an event when createBookmark called', () => {
-    component.rectangle = mockRectangle;
-    fixture.detectChanges();
-
-    spyOn(component.createBookmarkEvent, 'emit').and.callThrough();
-    component.createBookmark();
-
-    expect(component.createBookmarkEvent.emit).toHaveBeenCalledWith(mockRectangle);
-    expect(component.rectangle).toBeUndefined();
-  });
-
-  describe('setRectangle', () => {
-    beforeEach(() => {
-      component.pageWidth = 300;
-      component.pageHeight = 200;
-    });
-
-    [
-      { rotate: 90, zoom: 1, rectangle: { x: 180, y: 100, width: 20, height: 100 } },
-      { rotate: 90, zoom: 2, rectangle: { x: 30, y: 100, width: 20, height: 100 } },
-      { rotate: 180, zoom: 1, rectangle: { x: 100, y: 80, width: 100, height: 20 } },
-      { rotate: 180, zoom: 2, rectangle: { x: -50, y: -20, width: 100, height: 20 } },
-      { rotate: 270, zoom: 1, rectangle: { x: 100, y: 0, width: 20, height: 100 } },
-      { rotate: 270, zoom: 2, rectangle: { x: 100, y: -100, width: 20, height: 100 } }
-    ]
-      .forEach((take: {rotate: number, zoom: number, rectangle: { x: number, y: number, width: number, height: number}}) => {
-        it(`should update the rectangle when rotate ${take.rotate}deg, zoom = ${take.zoom}`, () => {
-          component.rotate = take.rotate;
-          component.zoom = take.zoom;
-          fixture.detectChanges();
-
-          component.setRectangle();
-
-          expect(component.rectangle.x).toEqual(take.rectangle.x);
-          expect(component.rectangle.y).toEqual(take.rectangle.y);
-          expect(component.rectangle.width).toEqual(take.rectangle.width);
-          expect(component.rectangle.height).toEqual(take.rectangle.height);
-        });
-      }
-    );
-  });
-});