Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(controls): Remove controls wrapper #1185

Merged
merged 3 commits into from
Mar 27, 2020
Merged

fix(controls): Remove controls wrapper #1185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6985a1
fix(controls): Remove controls wrapper
Mar 26, 2020
24cb14d
fix(controls): Remove controls wrapper
Mar 26, 2020
1133965
Merge branch 'master' into fix-control-wrapper
Mar 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions src/lib/Controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure this isn't used by any end-to-end tests in other repos (elements, webapp, etc.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure this isn't used by any end-to-end tests in other repos (elements, webapp, etc.)

Checked (elements, webapp, annotations) and there's no usage of it.

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);
Expand Down
11 changes: 2 additions & 9 deletions src/lib/Controls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,14 @@ $controls-button-width: 32px;
@import './AnnotationControls';
@import './ZoomControls';

.bp-controls-wrapper {
.bp-controls {
position: absolute;
bottom: 25px;
left: 50%;
mxiao6 marked this conversation as resolved.
Show resolved Hide resolved
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;

Expand Down
5 changes: 0 additions & 5 deletions src/lib/__tests__/Controls-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});
});
Expand Down
16 changes: 8 additions & 8 deletions test/integration/document/Controls.e2e.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ describe('Preview Document Controls', () => {
cy.wrap($page[0].scrollHeight).as('originalHeight');
});

cy.showDocumentControls();
cy.showControls();

zoom('out');

Expand All @@ -47,7 +47,7 @@ describe('Preview Document Controls', () => {
cy.wrap(zoomedOutHeight).as('zoomedOutHeight');
});

cy.showDocumentControls();
cy.showControls();

zoom('in');

Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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')
Expand All @@ -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');
});
Expand All @@ -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');
// });
Expand Down
16 changes: 8 additions & 8 deletions test/integration/document/Thumbnails.e2e.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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');
Expand Down Expand Up @@ -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')
Expand All @@ -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')
Expand Down Expand Up @@ -193,22 +193,22 @@ 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');

// 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');
});
Expand Down
16 changes: 5 additions & 11 deletions test/support/commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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');
Expand All @@ -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);
});

Expand All @@ -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');
});