diff --git a/src/lib/Controls.js b/src/lib/Controls.js index 58d9b22d0..b22bb6069 100644 --- a/src/lib/Controls.js +++ b/src/lib/Controls.js @@ -35,13 +35,9 @@ class Controls { constructor(container) { this.containerEl = container; - const controlsWrapperEl = document.createElement('div'); - controlsWrapperEl.className = 'bp-controls-wrapper'; - controlsWrapperEl.setAttribute('data-testid', 'controls-wrapper'); - this.containerEl.appendChild(controlsWrapperEl); - - this.controlsEl = controlsWrapperEl.appendChild(document.createElement('div')); + this.controlsEl = this.containerEl.appendChild(document.createElement('div')); this.controlsEl.className = 'bp-controls'; + this.controlsEl.setAttribute('data-testid', 'bp-controls'); this.containerEl.addEventListener('mousemove', this.mousemoveHandler); this.controlsEl.addEventListener('mouseenter', this.mouseenterHandler); diff --git a/src/lib/Controls.scss b/src/lib/Controls.scss index 93d49d0c5..39d07af3f 100644 --- a/src/lib/Controls.scss +++ b/src/lib/Controls.scss @@ -3,21 +3,14 @@ $controls-button-width: 32px; @import './AnnotationControls'; @import './ZoomControls'; -.bp-controls-wrapper { +.bp-controls { position: absolute; bottom: 25px; left: 50%; - margin: 0; - padding: 0; - border: 0 none; -} - -.bp-controls { - position: relative; - left: -50%; display: flex; background: fade-out($black, .2); border-radius: 3px; + transform: translateX(-50%); opacity: 0; transition: opacity .5s; diff --git a/src/lib/__tests__/Controls-test.js b/src/lib/__tests__/Controls-test.js index 82cfabf6a..d30945303 100644 --- a/src/lib/__tests__/Controls-test.js +++ b/src/lib/__tests__/Controls-test.js @@ -35,11 +35,6 @@ describe('lib/Controls', () => { it('should create the correct DOM structure', () => { expect(controls.containerEl).to.equal(document.getElementById('test-controls-container')); - const controlsWrapperEl = controls.controlsEl.parentNode; - expect(controlsWrapperEl.parentNode).to.equal(controls.containerEl); - expect(controlsWrapperEl.classList.contains('bp-controls-wrapper')).to.true; - - expect(controls.controlsEl.parentNode).to.equal(controlsWrapperEl); expect(controls.controlsEl.classList.contains('bp-controls')).to.true; }); }); diff --git a/test/integration/document/Controls.e2e.test.js b/test/integration/document/Controls.e2e.test.js index cf0521c8d..6d691bdff 100644 --- a/test/integration/document/Controls.e2e.test.js +++ b/test/integration/document/Controls.e2e.test.js @@ -32,7 +32,7 @@ describe('Preview Document Controls', () => { cy.wrap($page[0].scrollHeight).as('originalHeight'); }); - cy.showDocumentControls(); + cy.showControls(); zoom('out'); @@ -47,7 +47,7 @@ describe('Preview Document Controls', () => { cy.wrap(zoomedOutHeight).as('zoomedOutHeight'); }); - cy.showDocumentControls(); + cy.showControls(); zoom('in'); @@ -69,7 +69,7 @@ describe('Preview Document Controls', () => { .invoke('text') .should('equal', '1'); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Next page').click(); cy.getPreviewPage(2).should('be.visible'); @@ -78,7 +78,7 @@ describe('Preview Document Controls', () => { .invoke('text') .should('equal', '2'); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Previous page').click(); cy.getPreviewPage(1).should('be.visible'); @@ -95,7 +95,7 @@ describe('Preview Document Controls', () => { .invoke('text') .should('equal', '1'); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Click to enter page number').click(); cy.getByTestId('page-num-input') .should('be.visible') @@ -117,11 +117,11 @@ describe('Preview Document Controls', () => { cy.getByTestId('document-findbar').should('not.be.visible'); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Toggle findbar').click(); cy.getByTestId('document-findbar').should('be.visible'); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Toggle findbar').click(); cy.getByTestId('document-findbar').should('not.be.visible'); }); @@ -134,7 +134,7 @@ describe('Preview Document Controls', () => { // it('Should handle going fullscreen', () => { // cy.getPreviewPage(1).should('be.visible'); // cy.contains('The Content Platform for Your Apps'); - // cy.showDocumentControls(); + // cy.showControls(); // cy.getByTitle('Enter fullscreen').should('be.visible').click(); // cy.getByTitle('Exit fullscreen').should('be.visible'); // }); diff --git a/test/integration/document/Thumbnails.e2e.test.js b/test/integration/document/Thumbnails.e2e.test.js index a3c668a94..27b8604b3 100644 --- a/test/integration/document/Thumbnails.e2e.test.js +++ b/test/integration/document/Thumbnails.e2e.test.js @@ -39,7 +39,7 @@ describe('Preview Document Thumbnails', () => { * @return {Element} The thumbnails sidebar subject */ const toggleThumbnails = () => { - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Toggle thumbnails') .should('be.visible') @@ -58,14 +58,14 @@ describe('Preview Document Thumbnails', () => { it('Should not see the sidebar button if disabled', () => { showDocumentPreview({ enableThumbnailsSidebar: false }); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Toggle thumbnails').should('not.be.visible'); }); it('Should see the sidebar button if enabled', () => { showDocumentPreview({ enableThumbnailsSidebar: true }); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Toggle thumbnails').should('be.visible'); cy.getByTestId('thumbnails-sidebar').should('be.visible'); @@ -135,7 +135,7 @@ describe('Preview Document Thumbnails', () => { getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Click to enter page number').click(); cy.getByTestId('page-num-input') .should('be.visible') @@ -161,7 +161,7 @@ describe('Preview Document Thumbnails', () => { getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Click to enter page number').click(); cy.getByTestId('page-num-input') .should('be.visible') @@ -193,14 +193,14 @@ describe('Preview Document Thumbnails', () => { showDocumentPreview({ enableThumbnailsSidebar: true }); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Toggle thumbnails').should('not.be.visible'); }); it('Should hide the thumbnails when changing to small viewport', () => { showDocumentPreview({ enableThumbnailsSidebar: true }); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Toggle thumbnails').should('be.visible'); cy.getByTestId('thumbnails-sidebar').should('be.visible'); @@ -208,7 +208,7 @@ describe('Preview Document Thumbnails', () => { // Change to small viewport while thumbnails sidebar is open cy.viewport('iphone-6'); - cy.showDocumentControls(); + cy.showControls(); cy.getByTitle('Toggle thumbnails').should('not.be.visible'); cy.getByTestId('thumbnails-sidebar').should('not.be.visible'); }); diff --git a/test/support/commands.js b/test/support/commands.js index 45d490740..5d2e45960 100644 --- a/test/support/commands.js +++ b/test/support/commands.js @@ -1,8 +1,7 @@ Cypress.Commands.add('getByTestId', (testId, options = {}) => cy.get(`[data-testid="${testId}"]`, options)); Cypress.Commands.add('getByTitle', (title, options = {}) => cy.get(`[title="${title}"]`, options)); -Cypress.Commands.add('getPreviewPage', (pageNum) => { - cy - .get(`.page[data-page-number=${pageNum}]`) +Cypress.Commands.add('getPreviewPage', pageNum => { + cy.get(`.page[data-page-number=${pageNum}]`) .as('previewPage') // Adding timeout here because sometimes it takes more than the Cypress // default timeout to render the preview @@ -11,10 +10,6 @@ Cypress.Commands.add('getPreviewPage', (pageNum) => { return cy.get('@previewPage'); }); -Cypress.Commands.add('showDocumentControls', () => { - cy.getByTestId('bp').trigger('mousemove'); - return cy.getByTestId('controls-wrapper').should('be.visible'); -}); Cypress.Commands.add('showPreview', (token, fileId, options) => { cy.server(); cy.route('**/files/*').as('getFileInfo'); @@ -24,7 +19,7 @@ Cypress.Commands.add('showPreview', (token, fileId, options) => { cy.getByTestId('fileid').type(fileId); cy.getByTestId('fileid-set').click(); - cy.window().then((win) => { + cy.window().then(win => { win.loadPreview(options); }); @@ -34,8 +29,7 @@ Cypress.Commands.add('showPreview', (token, fileId, options) => { return cy.getByTestId('bp', { timeout: 15000 }).should('have.class', 'bp-loaded'); }); - Cypress.Commands.add('showControls', () => { cy.getByTestId('bp').trigger('mouseover'); - cy.getByTestId('controls-wrapper').should('be.visible'); -}) + cy.getByTestId('bp-controls').should('be.visible'); +});