Skip to content

Commit

Permalink
Chore: Adding Cypress tests to cover existing functional tests (#912)
Browse files Browse the repository at this point in the history
  • Loading branch information
Conrad Chan committed Feb 5, 2019
1 parent f4956aa commit 0093c93
Show file tree
Hide file tree
Showing 12 changed files with 338 additions and 112 deletions.
9 changes: 5 additions & 4 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
loadPreview();
}

function loadPreview() {
function loadPreview(options) {
var token = localStorage.getItem('token');
var fileid = localStorage.getItem('fileid');

Expand All @@ -92,10 +92,11 @@

/* global Box */
var preview = new Box.Preview();
preview.show(fileid, token, {
container: ".preview-container",
});

var previewOptions = options || {};
previewOptions.container = '.preview-container';

preview.show(fileid, token, previewOptions);
}

// Try to load all properties from storage on page load
Expand Down
4 changes: 3 additions & 1 deletion src/lib/Controls.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,10 @@ class Controls {
constructor(container) {
this.containerEl = container;

const controlsWrapperEl = this.containerEl.appendChild(document.createElement('div'));
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.className = 'bp-controls';
Expand Down
4 changes: 2 additions & 2 deletions src/lib/PageControls.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const NEXT_PAGE = 'bp-next-page';

const pageNumTemplate = `
<div class='${CONTROLS_PAGE_NUM_WRAPPER_CLASS}'>
<span class=${CONTROLS_CURRENT_PAGE}>1</span>
<input type='number' pattern='[0-9]*' min='1' value='' size='3' class='${CONTROLS_PAGE_NUM_INPUT_CLASS}' />
<span class=${CONTROLS_CURRENT_PAGE} data-testid='current-page'>1</span>
<input type='number' pattern='[0-9]*' min='1' value='' size='3' class='${CONTROLS_PAGE_NUM_INPUT_CLASS}' data-testid='page-num-input'/>
<span class='bp-page-num-divider'>&nbsp;/&nbsp;</span>
<span class='${CONTROLS_TOTAL_PAGES}'>1</span>
</div>`.replace(/>\s*</g, '><');
Expand Down
8 changes: 4 additions & 4 deletions src/lib/shell.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@
</span>
<img class="bp-is-hidden bp-custom-logo"></img>
<div class="bp-header-btns">
<button class="bp-btn-plain bp-btn-annotate-draw bp-is-hidden">
<button class="bp-btn-plain bp-btn-annotate-draw bp-is-hidden" data-testid="draw-annotation">
<svg class="bp-btn-annotate-draw-enter" width="22" height="21" viewBox="0 0 14.88 14.88" focusable="false">
<path d="M11.65,6.64,5.11,13.17.06,14.94,1.83,9.89,8.37,3.35Zm1.41-1.41L9.78,1.94,11.37.35a1,1,0,0,1,1.41,0l1.87,1.87a1,1,0,0,1,0,1.41Z" transform="translate(-0.06 -0.06)" fill-rule="evenodd"/>
</svg>
</button>
<button class="bp-btn-plain bp-btn-annotate-point bp-is-hidden">
<button class="bp-btn-plain bp-btn-annotate-point bp-is-hidden" data-testid="point-annotation">
<svg width="22" height="21" viewBox="0 0 22 21" focusable="false">
<path d="M11 21l-4-4H1.99C.89 17 0 16.11 0 15V2C0 .895.89 0 1.99 0h18.02C21.11 0 22 .89 22 2v13c0 1.105-.89 2-1.99 2H15l-4 4zm-7-9.5c0-.276.228-.5.51-.5h8.98c.282 0 .51.232.51.5 0 .276-.228.5-.51.5H4.51c-.282 0-.51-.232-.51-.5zm0-3c0-.276.23-.5.5-.5h11c.276 0 .5.232.5.5 0 .276-.23.5-.5.5h-11c-.276 0-.5-.232-.5-.5zm0-3c0-.276.22-.5.498-.5h13.004c.275 0 .498.232.498.5 0 .276-.22.5-.498.5H4.498C4.223 6 4 5.768 4 5.5z" fill-rule="evenodd"/>
</svg>
</button>
<button class="bp-btn-plain bp-btn-print bp-is-hidden">
<button class="bp-btn-plain bp-btn-print bp-is-hidden" data-testid="print-preview">
<svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
<path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
<button class="bp-btn-plain bp-btn-download bp-is-hidden">
<button class="bp-btn-plain bp-btn-download bp-is-hidden" data-testid="download-preview">
<svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
Expand Down
1 change: 1 addition & 0 deletions src/lib/viewers/doc/DocBaseViewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -778,6 +778,7 @@ class DocBaseViewer extends BaseViewer {
PDFJS.PDFPageView.prototype.reset = function reset(...args) {
resetFunc.bind(this)(args);
this.loadingIconDiv.classList.add(CLASS_SPINNER);
this.loadingIconDiv.setAttribute('data-testid', 'page-loading-indicator');
this.loadingIconDiv.innerHTML = '<div></div>';
};
}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/viewers/media/MediaControls.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="bp-media-controls-wrapper">
<div class="bp-media-controls-wrapper" data-testid="media-controls-wrapper">
<div class="bp-media-time-scrubber-container" tabindex="0"></div>
<div class="bp-media-controls-container">
<button class="bp-media-controls-btn bp-media-playpause-icon">
Expand Down
101 changes: 101 additions & 0 deletions test/integration/document/Controls.e2e.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
// <reference types="Cypress" />
describe('Preview Document Controls', () => {
const token = Cypress.env('ACCESS_TOKEN');
const fileId = Cypress.env('FILE_ID_DOC');

/* eslint-disable */
const showControls = () => {
cy.getByTestId('bp').trigger('mouseover');
cy.getByTestId('controls-wrapper').should('be.visible');
};
/* eslint-enable */

beforeEach(() => {
cy.visit('/');
cy.showPreview(token, fileId);
cy.getByTestId('current-page').as('currentPage');
});

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

showControls();

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

showControls();

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 buttons', () => {
cy.getPreviewPage(1).should('be.visible');
cy.contains('The Content Platform for Your Apps');
cy.get('@currentPage').invoke('text').should('equal', '1');

showControls();
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');

showControls();
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');
});

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');

showControls();
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');
});

// Fullscreen won't allow a non user gesture to trigger fullscreen
// There is an open issue for cypress to allow this
// https://github.com/cypress-io/cypress/issues/1213
//
// it('Should handle going fullscreen', () => {
// cy.getPreviewPage(1).should('be.visible');
// cy.contains('The Content Platform for Your Apps');
// showControls();
// cy.getByTitle('Enter fullscreen').should('be.visible').click();
// cy.getByTitle('Exit fullscreen').should('be.visible');
// });
});
68 changes: 68 additions & 0 deletions test/integration/sanity/FileOptions.e2e.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
// <reference types="Cypress" />
describe('Preview File Options', () => {
const token = Cypress.env('ACCESS_TOKEN');

const fileIdDoc = Cypress.env('FILE_ID_DOC');
const fileIdVideo = Cypress.env('FILE_ID_VIDEO');
const fileIdMp3 = Cypress.env('FILE_ID_MP3');

const fileOptions = {
[fileIdDoc]: {
startAt: {
value: 2,
unit: 'pages'
}
},
[fileIdVideo]: {
startAt: {
value: 15,
unit: 'seconds'
}
},
[fileIdMp3]: {
startAt: {
value: 3,
unit: 'seconds'
}
}
};

/* eslint-disable */
const showMediaControls = () => {
// Hover over the preview to trigger the controls
cy.getByTestId('bp').trigger('mouseover');
// Assert that the controls are shown
return cy.getByTestId('media-controls-wrapper').should('be.visible');
};
/* eslint-enable */

beforeEach(() => {
cy.visit('/');
});

it('Should open document preview on the specified page', () => {
cy.showPreview(token, fileIdDoc, { fileOptions });

cy.getPreviewPage(2).should('be.visible');
cy.contains('Discover how your business can use Box Platform');
cy.getByTestId('current-page').invoke('text').should('equal', '2');
});

it('Should open video(DASH) to the specified timestamp', () => {
cy.showPreview(token, fileIdVideo, { fileOptions });

showMediaControls().contains('0:15');
});

it('Should open video(MP4) to the specified timestamp', () => {
cy.showPreview(token, fileIdVideo, { fileOptions, viewers: { 'Dash': { disabled: true } } });

showMediaControls().contains('0:15');
});

it('Should open MP3 to the specified timestamp', () => {
cy.showPreview(token, fileIdMp3, { fileOptions });

showMediaControls().contains('0:03');
});
});
21 changes: 21 additions & 0 deletions test/integration/sanity/Header.e2e.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// <reference types="Cypress" />
describe('Preview Header', () => {
const token = Cypress.env('ACCESS_TOKEN');
const fileIdDoc = Cypress.env('FILE_ID_DOC');
// const urlRegex = /https:\/\/dl[0-9]*\.boxcloud\.com.+\/download/;

beforeEach(() => {
cy.server();
cy.route('GET', '**/files/*?fields=download_url', { download_url: '' });
cy.visit('/');
cy.showPreview(token, fileIdDoc, { showDownload: true });
});

it('Should see the download button for the file', () => {
cy.getByTestId('download-preview').should('be.visible');
// TODO: no click() is executed because it will cause the Cypress test execution
// to hang while a dialog waits user input to save the download
// https://github.com/cypress-io/cypress/issues/949
// cy.getByTestId('downloadiframe').then((iframe) => expect(urlRegex.test(iframe[0].src)).to.be.true);
});
});
8 changes: 2 additions & 6 deletions test/integration/sanity/Sanity.e2e.test.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
// <reference types="Cypress" />
describe('Preview Sanity', () => {
let token;
const token = Cypress.env('ACCESS_TOKEN');
const fileId = Cypress.env('FILE_ID_DOC');

beforeEach(() => {
token = Cypress.env('ACCESS_TOKEN');
cy.visit('/');
});

it('Should load a document preview', () => {
const fileId = Cypress.env('FILE_ID_DOC');

// Show the preview
cy.showPreview(token, fileId);
// Wait for .bp to load viewer
cy.getByTestId('bp').should('have.class', 'bp-loaded')
// Assert document content is present
cy.contains('The Content Platform for Your Apps');
});
Expand Down
28 changes: 23 additions & 5 deletions test/support/commands.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,26 @@
Cypress.Commands.add('getByTestId', (testId) => cy.get(`[data-testid="${testId}"]`));
Cypress.Commands.add('getByTitle', (title) => cy.get(`[title="${title}"]`));
Cypress.Commands.add('showPreview', (token, fileId) => {
cy.get('[data-testid="token"]').type(token);
cy.get('[data-testid="token-set"]').click();
cy.get('[data-testid="fileid"]').type(fileId);
cy.get('[data-testid="fileid-set"]').click();
Cypress.Commands.add('getPreviewPage', (pageNum) => {
cy
.get(`.page[data-page-number=${pageNum}]`)
.as('previewPage')
.find('[data-testid="page-loading-indicator"]')
.should('not.exist');

return cy.get('@previewPage');
});
Cypress.Commands.add('showPreview', (token, fileId, options) => {
cy.getByTestId('token').type(token);
cy.getByTestId('token-set').click();
cy.getByTestId('fileid').type(fileId);
cy.getByTestId('fileid-set').click();

if (options) {
cy.window().then((win) => {
win.loadPreview(options);
});
}

// Wait for .bp to load viewer
return cy.getByTestId('bp').should('have.class', 'bp-loaded');
});

0 comments on commit 0093c93

Please sign in to comment.