From b21c5067b5181a7edcf420023c9c54dd896fc399 Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Fri, 15 Nov 2019 13:14:01 -0800 Subject: [PATCH] chore(controls): add e2e tests for toggle findbar and zoom (#1099) --- src/lib/ZoomControls.js | 5 +- src/lib/viewers/doc/DocBaseViewer.js | 1 + .../integration/document/Controls.e2e.test.js | 164 +++++++++++------- 3 files changed, 109 insertions(+), 61 deletions(-) diff --git a/src/lib/ZoomControls.js b/src/lib/ZoomControls.js index 767db517a..5cf43df57 100644 --- a/src/lib/ZoomControls.js +++ b/src/lib/ZoomControls.js @@ -4,6 +4,7 @@ import { ICON_ZOOM_IN, ICON_ZOOM_OUT } from './icons/icons'; import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from './Controls'; const CLASS_ZOOM_CURRENT_SCALE = 'bp-zoom-current-scale'; +const CLASS_ZOOM_CURRENT_SCALE_VALUE = 'bp-zoom-current-scale-value'; const CLASS_ZOOM_IN_BUTTON = 'bp-zoom-in-btn'; const CLASS_ZOOM_OUT_BUTTON = 'bp-zoom-out-btn'; const CLASS_ZOOM_BUTTON = 'bp-zoom-btn'; @@ -81,7 +82,7 @@ class ZoomControls { __('zoom_current_scale'), undefined, CLASS_ZOOM_CURRENT_SCALE, - '100%', + `100%`, 'div', groupElement, ); @@ -94,7 +95,7 @@ class ZoomControls { groupElement, ); - this.currentScaleElement = this.controlsElement.querySelector(`.${CLASS_ZOOM_CURRENT_SCALE}`); + this.currentScaleElement = this.controlsElement.querySelector(`.${CLASS_ZOOM_CURRENT_SCALE_VALUE}`); this.setCurrentScale(currentScale); } diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index d03dd7b57..125a6eda6 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -770,6 +770,7 @@ class DocBaseViewer extends BaseViewer { initFind() { this.findBarEl = this.containerEl.appendChild(document.createElement('div')); this.findBarEl.classList.add(CLASS_BOX_PREVIEW_FIND_BAR); + this.findBarEl.setAttribute('data-testid', 'document-findbar'); // Only initialize the find bar if the user has download permissions on // the file. Users without download permissions shouldn't be able to diff --git a/test/integration/document/Controls.e2e.test.js b/test/integration/document/Controls.e2e.test.js index 23814c81f..cf0521c8d 100644 --- a/test/integration/document/Controls.e2e.test.js +++ b/test/integration/document/Controls.e2e.test.js @@ -10,75 +10,121 @@ describe('Preview Document Controls', () => { cy.getPreviewPage(1); }); - it('Should zoom in and out', () => { - // Assert document content is present - cy.contains('The Content Platform for Your Apps'); - // Get the current dimensions of the page - cy.getPreviewPage(1).then(($page) => { - cy.wrap($page[0].scrollWidth).as('originalWidth'); - cy.wrap($page[0].scrollHeight).as('originalHeight'); + describe('Zoom controls', () => { + const zoom = inOrOut => { + cy.getByTestId('current-zoom') + .invoke('text') + .then(originalZoom => { + cy.getByTitle(`Zoom ${inOrOut}`).click(); + + cy.getByTestId('current-zoom') + .invoke('text') + .should('not.equal', originalZoom); + }); + }; + + it('Should zoom in and out', () => { + // Assert document content is present + cy.contains('The Content Platform for Your Apps'); + // Get the current dimensions of the page + cy.getPreviewPage(1).then($page => { + cy.wrap($page[0].scrollWidth).as('originalWidth'); + cy.wrap($page[0].scrollHeight).as('originalHeight'); + }); + + cy.showDocumentControls(); + + zoom('out'); + + cy.getPreviewPage(1).then($page => { + const zoomedOutWidth = $page[0].scrollWidth; + const zoomedOutHeight = $page[0].scrollHeight; + + cy.get('@originalWidth').then(originalWidth => expect(originalWidth).to.be.above(zoomedOutWidth)); + cy.get('@originalHeight').then(originalHeight => expect(originalHeight).to.be.above(zoomedOutHeight)); + + cy.wrap(zoomedOutWidth).as('zoomedOutWidth'); + cy.wrap(zoomedOutHeight).as('zoomedOutHeight'); + }); + + cy.showDocumentControls(); + + zoom('in'); + + cy.getPreviewPage(1).then($page => { + const zoomedInWidth = $page[0].scrollWidth; + const zoomedInHeight = $page[0].scrollHeight; + + cy.get('@zoomedOutWidth').then(zoomedOutWidth => expect(zoomedOutWidth).to.be.below(zoomedInWidth)); + cy.get('@zoomedOutHeight').then(zoomedOutHeight => expect(zoomedOutHeight).to.be.below(zoomedInHeight)); + }); }); + }); - cy.showDocumentControls(); - - cy.getByTitle('Zoom out').click(); - - cy.getPreviewPage(1).then(($page) => { - const zoomedOutWidth = $page[0].scrollWidth; - const zoomedOutHeight = $page[0].scrollHeight; - - cy.get('@originalWidth').then((originalWidth) => expect(originalWidth).to.be.above(zoomedOutWidth)); - cy.get('@originalHeight').then((originalHeight) => expect(originalHeight).to.be.above(zoomedOutHeight)); - - cy.wrap(zoomedOutWidth).as('zoomedOutWidth'); - cy.wrap(zoomedOutHeight).as('zoomedOutHeight'); + describe('Document page controls', () => { + it('Should handle page navigation via buttons', () => { + cy.getPreviewPage(1).should('be.visible'); + cy.contains('The Content Platform for Your Apps'); + cy.get('@currentPage') + .invoke('text') + .should('equal', '1'); + + cy.showDocumentControls(); + cy.getByTitle('Next page').click(); + + cy.getPreviewPage(2).should('be.visible'); + cy.contains('Discover how your business can use Box Platform'); + cy.get('@currentPage') + .invoke('text') + .should('equal', '2'); + + cy.showDocumentControls(); + cy.getByTitle('Previous page').click(); + + cy.getPreviewPage(1).should('be.visible'); + cy.contains('The Content Platform for Your Apps'); + cy.get('@currentPage') + .invoke('text') + .should('equal', '1'); }); - cy.showDocumentControls(); - - cy.getByTitle('Zoom in').click(); - - cy.getPreviewPage(1).then(($page) => { - const zoomedInWidth = $page[0].scrollWidth; - const zoomedInHeight = $page[0].scrollHeight; - - cy.get('@zoomedOutWidth').then((zoomedOutWidth) => expect(zoomedOutWidth).to.be.below(zoomedInWidth)); - cy.get('@zoomedOutHeight').then((zoomedOutHeight) => expect(zoomedOutHeight).to.be.below(zoomedInHeight)); + it('Should handle page navigation via input', () => { + cy.getPreviewPage(1).should('be.visible'); + cy.contains('The Content Platform for Your Apps'); + cy.get('@currentPage') + .invoke('text') + .should('equal', '1'); + + cy.showDocumentControls(); + cy.getByTitle('Click to enter page number').click(); + cy.getByTestId('page-num-input') + .should('be.visible') + .type('2') + .blur(); + + cy.getPreviewPage(2).should('be.visible'); + cy.contains('Discover how your business can use Box Platform'); + cy.get('@currentPage') + .invoke('text') + .should('equal', '2'); }); }); - it('Should handle page navigation via buttons', () => { - cy.getPreviewPage(1).should('be.visible'); - cy.contains('The Content Platform for Your Apps'); - cy.get('@currentPage').invoke('text').should('equal', '1'); - - cy.showDocumentControls(); - cy.getByTitle('Next page').click(); + describe('Document find bar control', () => { + it('Should open the findbar', () => { + cy.getPreviewPage(1).should('be.visible'); + cy.contains('The Content Platform for Your Apps'); - cy.getPreviewPage(2).should('be.visible'); - cy.contains('Discover how your business can use Box Platform'); - cy.get('@currentPage').invoke('text').should('equal', '2'); + cy.getByTestId('document-findbar').should('not.be.visible'); - cy.showDocumentControls(); - cy.getByTitle('Previous page').click(); - - cy.getPreviewPage(1).should('be.visible'); - cy.contains('The Content Platform for Your Apps'); - cy.get('@currentPage').invoke('text').should('equal', '1'); - }); + cy.showDocumentControls(); + cy.getByTitle('Toggle findbar').click(); + cy.getByTestId('document-findbar').should('be.visible'); - it('Should handle page navigation via input', () => { - cy.getPreviewPage(1).should('be.visible'); - cy.contains('The Content Platform for Your Apps'); - cy.get('@currentPage').invoke('text').should('equal', '1'); - - cy.showDocumentControls(); - cy.getByTitle('Click to enter page number').click(); - cy.getByTestId('page-num-input').should('be.visible').type('2').blur(); - - cy.getPreviewPage(2).should('be.visible'); - cy.contains('Discover how your business can use Box Platform'); - cy.get('@currentPage').invoke('text').should('equal', '2'); + cy.showDocumentControls(); + cy.getByTitle('Toggle findbar').click(); + cy.getByTestId('document-findbar').should('not.be.visible'); + }); }); // Fullscreen won't allow a non user gesture to trigger fullscreen