Skip to content

Commit

Permalink
chore(controls): add e2e tests for toggle findbar and zoom (#1099)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ConradJChan
ConradJChan authored Nov 15, 2019
1 parent 477617a commit b21c506
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 61 deletions.
5 changes: 3 additions & 2 deletions src/lib/ZoomControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -81,7 +82,7 @@ class ZoomControls {
__('zoom_current_scale'),
undefined,
CLASS_ZOOM_CURRENT_SCALE,
'<span data-testid="current-zoom">100%</span>',
`<span class="${CLASS_ZOOM_CURRENT_SCALE_VALUE}" data-testid="current-zoom">100%</span>`,
'div',
groupElement,
);
Expand All @@ -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);
}

Expand Down
1 change: 1 addition & 0 deletions src/lib/viewers/doc/DocBaseViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
164 changes: 105 additions & 59 deletions test/integration/document/Controls.e2e.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit b21c506

Please sign in to comment.