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

package/e2e/src/features/pdf.viewer.annotations.feature

@@ -0,0 +1,57 @@
+@MediaViewer @Annotations
+Feature: PDF Viewer Annotations
+
+  Background:
+    Given I am on Media Viewer Page
+    Then I expect the page header to be "MEDIA VIEWER DEMO"
+    When I click Annotate button
+    Then I expect Annotate button must be enabled
+
+  @EM-1711 @PDF_Text_Highlight
+  Scenario: Add a comment to PDF Text highlight
+    When I highlight text on a PDF document
+    Then I expect text highlight popup should appear
+
+
+  @EM-1717 @PDF_Add_Annotation @CreateAnnotation
+  Scenario: Highlight text and add comment
+    When I highlight text on a PDF document
+    Then I should be able to add comment for the highlight
+#    Then The context toolbar should disappear
+
+  @EM-1961 @PDF_Delete_Annotation
+  Scenario: Delete Textual comment
+    Given The PDF has atleast one comment
+    When I select a textual comment and delete
+    Then The comment should be deleted
+
+  @EM-1718 @Comment_update
+  Scenario: Update a PDF text Comment
+    When I highlight text on a PDF document
+    Then I should be able to add comment for the highlight
+    When I update the existing comment
+    Then I verify the amended text has been saved
+
+  @EM-1991 @PDF_Non_Textual_Add_Comment
+  Scenario: Add Non Textual Highlight and add comment in pdf viewer
+    When I highlight a portion of pdf in a Draw mode
+    Then I should be able to add comment for the highlight
+#    Then The context toolbar should disappear
+
+
+  @EM-1992 @PDF_Non_Textual_Delete_Comment
+  Scenario: Delete Non Textual comment
+    Given The PDF has atleast one non-textual comment
+    When I select a non-textual comment and delete
+    Then The comment should be deleted
+
+  @EM-1814 @Comments_Ellipsis_Test
+  Scenario: Comments Ellipsis Test
+    Given The PDF has atleast one long comment
+    When I click outside of the comment box
+    Then I expect comment should display in ellipsis format
+
+  @EM-2018 @PDF_Non_Textual
+  Scenario: Add multiple non-textual comments on PDF page
+    When I create multiple non-textual comments on a PDF document
+    Then I should be able to see all comments in the comments pane

package/e2e/src/features/pdf.viewer.redactions.feature

@@ -0,0 +1,45 @@
+@MediaViewer @Redaction
+Feature: Redact PDF E2E Tests
+
+  Background:
+    Given I am on Media Viewer Page
+    Then I expect the page header to be "MEDIA VIEWER DEMO"
+    When I click on the Redact button
+    And I clear all the redactions using the clear all button
+    Then all the redactions should be cleared
+
+  @EM-4020
+  Scenario: Redacting text and then removing the redaction
+    Given I click on redact text
+    When I highlight text on a PDF document
+    And I can ensure the area has been redacted
+    Then I can remove the redaction
+    And I can ensure the redaction has been removed
+
+  @EM-4020
+  Scenario: Drawing a box and then removing it
+    Given I click on draw a box
+    When I highlight a portion of pdf in a Draw mode
+    And I can ensure the area has been redacted
+    Then I can remove the redaction
+    And I can ensure the redaction has been removed
+
+  @EM-4020 @ci
+  Scenario: Testing the preview redactions button
+    Given that I have created both a text and box redaction
+    When I preview the document with the redactions
+    Then I ensure the preview is correct
+    And I switch back from the preview view
+
+  @EM-3946 @wip
+  Scenario: Testing the save document with redactions button
+    Given that I have change the document to a dm-store document
+    And that I have created both a text and box redaction
+    When I save the document with the redactions
+#    Then the document should be saved
+
+  @EM-4020 @ci
+  Scenario: Testing the clear all redactions button
+    Given that I have created both a text and box redaction
+    When I clear all the redactions using the clear all button
+    Then all the redactions should be cleared

package/e2e/src/features/print.download.feature

@@ -0,0 +1,11 @@
+@Print_And_Download
+Feature: Print And Download
+
+  Background:
+    Given I am on Media Viewer Page
+    Then I expect the page header to be "MEDIA VIEWER DEMO"
+
+  @EM-1247 @Print_Document @WIP
+  Scenario: Enable user to print file
+    When the user selects the print option
+    Then I expect the print dialog should appear and the file is queued for printing

package/e2e/src/features/rotate.feature

@@ -0,0 +1,30 @@
+@MediaViewer @PDF_Image_Rotation
+Feature: PDF & Image Rotation
+
+  Background:
+    Given I am on Media Viewer Page
+    Then I expect the page header to be "MEDIA VIEWER DEMO"
+
+  @PDF_Rotation @EM-960 @flaky
+  Scenario Outline: PDF Rotation
+    When I use the "<PDF_Or_Image>" viewer rotate feature
+    Then I must rotate the "<PDF/Image>" document
+
+    Examples:
+      | PDF/Image | PDF_Or_Image |
+      | pdf       | pdf          |
+
+  @Image_Rotation @Test @EM-960
+  Scenario Outline: Image Rotation
+    When I use the "<PDF_Or_Image>" viewer rotate feature
+    Then I must rotate the "<PDF/Image>" document
+
+    Examples:
+      | PDF/Image | PDF_Or_Image |
+      | image     | image        |
+
+  @EM-1703 @PDFTextHighlight_Rotate
+  Scenario: PDF Text Highlighting - Rotate Support
+    Given the PDF viewer has atleast one highlight
+    When I rotate PDF doc the pdf text highlights should be rotate
+    Then I should expect pdf text highlights are inline with rotation

package/e2e/src/features/search.feature

@@ -0,0 +1,38 @@
+@MediaViewer @Search 
+Feature: Search
+
+  Background:
+    Given I am on Media Viewer Page
+    Then I expect the page header to be "MEDIA VIEWER DEMO"
+
+  @EM-1246 @MultipleWords_Search @ci @crossbrowser
+  Scenario Outline: Enable Search within a document
+    When the user populate the content search field with a '<keyword_search>'
+    Then clicks on search button
+    Then the "<search_results_count>" are displayed and highlighted to the user
+    And the section of the document is viewable to the user
+
+    Examples:
+      | keyword_search | search_results_count |
+      | family court    | Found 1 of 5      |
+
+  @EM-1246 @SingleWord_Search @crossbrowser
+  Scenario Outline: Enable Search within a document
+    When the user populate the content search field with a '<search_word>'
+    Then clicks on search button
+    Then the "<search_results_count>" are displayed and highlighted to the user
+    And the section of the document is viewable to the user
+
+    Examples:
+      | search_word  | search_results_count |
+      | children | Found 1 of 88       |
+
+  @EM-1246 @No_Search_Results
+  Scenario Outline: Enable Search within a document
+    When the user populate the content search field with a '<search_word>'
+    Then clicks on search button
+    Then the "<search_results_count>" are displayed and highlighted to the user
+
+    Examples:
+      | search_word | search_results_count |
+      | Phani Perla | No results found     |

package/e2e/src/features/zoom.feature

@@ -0,0 +1,16 @@
+@MediaViewer @Zoom_Feature @crossbrowser
+Feature: Zoom In/Out Feature
+
+  Background:
+    Given I am on Media Viewer Page
+    Then I expect the page header to be "MEDIA VIEWER DEMO"
+
+  @PDF_Zoom_IN_OUT @Image_Zoom_IN_OUT @EM-1720 @ci
+  Scenario Outline: PDF Viewer Zoom In/Out
+    When I use zoom feature for "<pdf_or_image>" viewer
+    Then I must able to zoom by defined zoom_option:<zoom_option>, <pdf_or_image>
+
+    Examples:
+      | pdf_or_image | zoom_option |
+      | pdf          | 150%        |
+      | image        | 150%        |

package/e2e/src/pages/app.po.ts

@@ -0,0 +1,381 @@
+import {$$, browser, by, element, ElementFinder, Locator, protractor} from 'protractor';
+import {By} from '@angular/platform-browser';
+import {String} from 'typescript-string-operations';
+
+const until = protractor.ExpectedConditions;
+
+export class AppPage {
+
+  contextToolbar: By = by.css('mv-ctx-toolbar .toolbar');
+  commentButton: By = by.css('mv-ctx-toolbar button[title=\'Comment\']');
+  bookmarkButton: By = by.css('#bookmarkButton');
+  annotationTextArea: By = by.css('textarea.expanded');
+  comments: By = by.css('textarea');
+  saveButton: By = by.xpath('//button[text()=\' Save \']');
+  editButton: By = by.xpath('//button[text()=\' Edit \']');
+  commentDeleteButtonXpath = '//textarea[@ng-reflect-model=\'{0}\']/..//button[text()=\' Delete \']';
+  page = '.page[data-page-number="{0}"]';
+  bookMarkRename = protractor.By.css('.outlineWithDeepNesting .bookmarks-tree .outlineItem .bookmark__rename');
+  bookMarkSave = protractor.By.css('.outlineWithDeepNesting .bookmarks-tree .bookmark__save');
+  bookMarkDelete = protractor.By.css('.outlineWithDeepNesting .bookmarks-tree .bookmark__delete');
+  bookMarkInput = protractor.By.css('.outlineWithDeepNesting .bookmarks-tree .node-wrapper .bookmark__input');
+  bookMarkItems = protractor.By.css('.outlineWithDeepNesting .bookmarks-tree .outlineItem');
+  mvIndexBtn = protractor.By.id('mvIndexBtn');
+  viewBookmark = protractor.By.id('viewBookmark');
+
+  async clickElement(selector: By) {
+    const el = await element(selector);
+    return el.click();
+  }
+
+
+  async showCustomToolbarButtons() {
+    const customToolbarToggle = await element(by.id('toggleCustomToolbar'));
+    const customToolbarOn = await customToolbarToggle.getAttribute('checked');
+    if (!customToolbarOn) {
+      await this.clickElement(by.css('label[for="toggleCustomToolbar"]'));
+    }
+  }
+
+  async getHeaderText() {
+    return element(by.css('a[class=\'govuk-tag govuk-tag--grey\']')).getText();
+  }
+
+  async selectPdfViewer() {
+    await this.clickElement(by.id('pdf-button'));
+  }
+
+  async selectImageViewer() {
+    await this.clickElement(by.id('image-button'));
+  }
+
+  async selectUnsupportedViewer() {
+    await this.clickElement(by.id('unsupported-button'));
+  }
+
+  async waitForPdfToLoad() {
+    await browser.wait(
+      until.presenceOf(element(by.css('div[class="page"'))),
+      15000,
+      'PDF viewer taking too long to load'
+    );
+  }
+
+  async waitForElement(selector: Locator) {
+    await browser.wait(async () => {
+      return (await element(selector)).isPresent();
+    }, 10000, 'failed to load search results');
+  }
+
+  async waitForElementsArray(selector: Locator) {
+    await browser.wait(async () => {
+      return (await element.all(selector).isPresent());
+    }, 10000, 'failed to load search results');
+  }
+
+  async getClassAttributeOfAnElementLocator(selector: By): Promise<string[]> {
+    return await this.getClassAttributeOfAnElement(element(selector));
+  }
+
+  async getClassAttributeOfAnElement(htmlElement: ElementFinder): Promise<string[]> {
+    let splitClasses: string[] = [];
+    return await htmlElement.getAttribute('class').then((classes) => {
+      splitClasses = classes.split(' ');
+      return splitClasses;
+    }).catch(() => {
+      return [];
+    });
+  }
+
+  async drawOnPDFPage(x: number, y: number) {
+
+    await this.executeScript(x, y, 0, 0, ['mousedown', 'mouseup'], 'page', 0);
+    await this.executeScript(x, y, 0, 0, ['mousedown', 'mousemove', 'mouseup'], 'shapeRectangle', 0);
+  }
+
+  async drawBoxOnPdfText(x: number, y: number) {
+    await this.executeScript(x, y, 950, 950, ['mousedown', 'mousemove', 'mouseup'], 'box-highlight', 0);
+  }
+
+  async executeScript(xAxis, yAxis, screenX, screenY, eventList, elementSelector, elementIndex) {
+
+    // tslint:disable-next-line:no-shadowed-variable
+    await browser.executeScript((xAxis, yAxis, screenX, screenY, eventList, elementSelector, elementIndex) => {
+
+      // tslint:disable-next-line:no-shadowed-variable
+      const createMouseEvent = (typeArg: string, screenX: number, screenY: number, clientX: number, clientY: number) => {
+        const mouseEvent = document.createEvent('MouseEvents');
+        mouseEvent.initMouseEvent(
+          typeArg,
+          true,
+          true,
+          window,
+          1,
+          screenX,
+          screenY,
+          clientX,
+          clientY,
+          false,
+          false,
+          false,
+          false,
+          0,
+          null
+        );
+        return mouseEvent;
+      };
+
+      const mouseDown = createMouseEvent('mousedown', 500, 500, 500, 500);
+      const mouseMove = createMouseEvent('mousemove', screenX, screenY, xAxis, yAxis);
+      const mouseUp = createMouseEvent('mouseup', 750, 800, 750, 800);
+
+      const selectedElement = document.getElementsByClassName(elementSelector)[elementIndex];
+
+      if (eventList.includes('mousedown')) {
+        selectedElement.dispatchEvent(mouseDown);
+      }
+      if (eventList.includes('mousemove')) {
+        selectedElement.dispatchEvent(mouseMove);
+      }
+      if (eventList.includes('mouseup')) {
+        selectedElement.dispatchEvent(mouseUp);
+      }
+    }, xAxis, yAxis, screenX, screenY, eventList, elementSelector, elementIndex);
+  }
+
+  async drawOnImagePage() {
+    await this.executeScript(900, 900, 750, 750, ['mousedown', 'mousemove', 'mouseup'], 'box-highlight', 0);
+  }
+
+
+  async highLightTextOnPdfPage() {
+    await browser.executeScript(() => {
+
+      const range = document.createRange();
+      const matchingElement = document.getElementsByClassName('textLayer')[0].children[4];
+      range.selectNodeContents(matchingElement);
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+
+      const mouseEvent = document.createEvent('MouseEvents');
+      mouseEvent.initMouseEvent(
+        'mouseup',
+        true,
+        true,
+        window,
+        1,
+        844,
+        497,
+        937,
+        403,
+        false,
+        false,
+        false,
+        false,
+        0,
+        null
+      );
+
+      // const mouseUp = 	mouseEvent;
+
+      const pageHandle = document.getElementsByClassName('textLayer')[0].children[4];
+      pageHandle.dispatchEvent(mouseEvent); // ('mouseup', 844,497,937,403)); //mouseUp Event
+
+    });
+
+  }
+
+  //
+  // async getHighlightPopUp() {
+  //   await browser.executeScript(() => {
+  //     const mouseDown = createMouseEvent("mousedown", 675, 405, 750, 412);
+  //     const mouseMove = createMouseEvent("mousemove", 750, 450, 900, 405);
+  //     const mouseUp =  createMouseEvent("mouseup", 844, 497, 937, 403);
+  //     const pageHandle = document.getElementsByClassName("pdfViewer")[2];
+  //
+  //     pageHandle.dispatchEvent(mouseDown);
+  //     pageHandle.dispatchEvent(mouseMove);
+  //     pageHandle.dispatchEvent(mouseUp);
+  //   });
+  // }
+
+  async clearBookmarks() {
+    await browser.sleep(1000);
+    await this.toggleIndexButton();
+    await browser.sleep(1000);
+    await element(this.viewBookmark).click();
+    await browser.sleep(1000);
+    await this.deleteBookmarks();
+    await browser.sleep(1000);
+    await this.toggleIndexButton();
+  }
+
+  async toggleIndexButton() {
+    await element(this.mvIndexBtn).click();
+  }
+
+  async saveBookmarks() {
+    await browser.sleep(5000);
+    await element.all(this.bookMarkSave).first().click();
+  }
+
+  async getBookMarksCount() {
+    await browser.sleep(1000);
+    const count: number = await element.all(this.bookMarkItems).count();
+    return count;
+  }
+
+  async getUpdatedBookMarkName() {
+    await browser.sleep(5000);
+    const name: String = await element.all(this.bookMarkItems).first().getText();
+    return name;
+  }
+
+  async getSaveBookMarksCount() {
+    await browser.sleep(5000);
+    const count: number = await element.all(this.bookMarkSave).count();
+    return count;
+  }
+
+  async updateBookmarks(updatedText: string) {
+    await browser.sleep(5000);
+    browser.sleep(1000);
+    await element.all(this.bookMarkRename).first().click();
+    browser.sleep(1000);
+    await element.all(this.bookMarkInput).first().clear();
+    browser.sleep(1000);
+    await element.all(this.bookMarkInput).first().sendKeys(updatedText);
+    browser.sleep(1000);
+    await element.all(this.bookMarkSave).first().click();
+  }
+
+  async deleteBookmarks() {
+    await browser.sleep(5000);
+    // tslint:disable-next-line:triple-equals
+    while (await this.getBookMarksCount() != 0) {
+      $$('.outlineWithDeepNesting .bookmarks-tree .bookmark__delete').click();
+    }
+  }
+
+  async createBookmarkUsingOverlay() {
+    await browser.sleep(5000);
+    // This is the Bookmark button on the Popup overlay.
+    await element(this.bookmarkButton).click();
+  }
+
+  async showBookmarks() {
+    await browser.sleep(5000);
+    await element(this.mvIndexBtn).click();
+    await browser.sleep(1000);
+    await element(this.viewBookmark).click();
+  }
+
+  async clickOnCommentButton() {
+    // await browser.waitForAngular()  // This feature did not work hence adding sleep.
+    await browser.sleep(5000);
+    await element(this.commentButton).click();
+  }
+
+  async enterTextInAnnotation(text: string) {
+    await element(this.annotationTextArea).sendKeys(text);
+  }
+
+  async clickOnSaveButton() {
+    await element(this.saveButton).click();
+  }
+
+  async clickOnEditButton() {
+    await element(this.editButton).click();
+  }
+
+  async isContextToolBarVisible(): Promise<boolean> {
+    let isVisible = false;
+    await element(this.contextToolbar).isDisplayed().then((value) => {
+      if (value === true) {
+        isVisible = true;
+        return isVisible;
+      }
+    }).catch(() => {
+      return false;
+    });
+    return isVisible;
+  }
+
+  async deleteComment(comment: string) {
+    await element(by.xpath(String.Format(this.commentDeleteButtonXpath, comment))).click();
+  }
+
+  async getAllComments(): Promise<string[]> {
+    const comments: string[] = [];
+    await browser.findElements(this.comments).then(async (elements) => {
+      for (const htmlElement of elements) {
+        await htmlElement.getAttribute('ng-reflect-model')
+          .then((a) => comments.push(a));
+      }
+      return comments;
+    });
+    return comments;
+  }
+
+  async updateComment(comment: string, newComment: string) {
+    await this.clickOnEditButton();
+    await element(this.annotationTextArea).clear();
+    await element(this.annotationTextArea).sendKeys(newComment);
+    await this.clickOnSaveButton();
+  }
+
+  async getComment(): Promise<string> {
+    return await element(this.annotationTextArea)
+      .getAttribute('ng-reflect-model')
+      .then(a => a);
+  }
+
+  async isPageDataLoaded(pageNumber: number): Promise<boolean> {
+    const cssSel = String.Format(this.page, pageNumber);
+    return await element(by.css(cssSel)).getAttribute('data-loaded')
+      .then((value) => {
+        if (value === 'true') {
+          return true;
+        }
+        return false;
+      });
+  }
+
+  async highLightTextForBookmarking() {
+
+    await browser.executeScript(() => {
+
+      const range = document.createRange();
+      const matchingElement = document.getElementsByClassName('textLayer')[0].children[4];
+      range.selectNodeContents(matchingElement);
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+
+      const mouseUpEvent = document.createEvent('MouseEvents');
+      mouseUpEvent.initMouseEvent(
+        'mouseup',
+        true,
+        true,
+        window,
+        1,
+        844,
+        497,
+        937,
+        403,
+        false,
+        false,
+        false,
+        false,
+        0,
+        null
+      );
+
+      const pageHandle = document.getElementsByClassName('textLayer')[0].children[4];
+      pageHandle.dispatchEvent(mouseUpEvent); // ('mouseup', 844,497,937,403)); //mouseUp Event
+
+    });
+
+  }
+}

package/e2e/src/pages/comment.po.ts

@@ -0,0 +1,44 @@
+import {by, element, ElementFinder} from 'protractor';
+import {AppPage} from './app.po';
+import {By} from '@angular/platform-browser';
+
+export class CommentPage extends AppPage {
+  commentBox: By = by.xpath('//form[@class=\'aui-comment rotation rot0 ng-dirty ng-valid ng-touched\']//textarea[@name=\'content\']');
+  commentContainer: ElementFinder = element(by.xpath('//div[1]/div[@class=\'split right comment-container\' and 2]'));
+  commentsText: ElementFinder = element(by.xpath('//div[@class=\'unselectedText\']'));
+
+  async openModal() {
+    const el = await element(by.css('input[id="toggleCommentSummary"]'));
+    const checked = await el.getAttribute('checked');
+    if (!checked) {
+      await this.clickElement(by.css('label[for="toggleCommentSummary"]'));
+    }
+  }
+
+  async getModal() {
+    await this.waitForElement(by.id('modal'));
+    return (await element(by.id('modal')));
+  }
+
+  async getModalText() {
+    await this.waitForElement(by.id('modal'));
+    const modalText = await (await element(by.id('modal'))).getText();
+    return modalText;
+  }
+
+  async modalIsOpen() {
+    return (await element(by.id('modal'))).isPresent();
+  }
+
+  async clickCloseButton() {
+    await this.clickElement(by.id('modal-close-button'));
+  }
+
+  async clickCommentsContainer() {
+    await this.commentContainer.click();
+  }
+
+  async getCommentsText() {
+    return (await this.commentsText.getText());
+  }
+}