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.

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

Chore: adding e2e tests for Thumbnails #915

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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: 5 additions & 3 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@
<input id='fileid-set' placeholder='Enter file ID' data-testid="fileid"/>
<button onClick="setProperty('fileid')" data-testid="fileid-set">Set new file ID</button>
</div>

<div class='container' id='load'>
<button onClick="loadPreview()" data-testid="load-preview">Load Preview</button>
</div>
</div>

<div class='preview-container' data-testid="preview-container"> </div>
Expand All @@ -77,9 +81,6 @@

// Cache it in local storage
localStorage.setItem(selector, value)

// Attempt to load Preview
loadPreview();
}

function loadPreview(options) {
Expand All @@ -102,6 +103,7 @@
// Try to load all properties from storage on page load
setProperty('token');
setProperty('fileid');
loadPreview();
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion src/lib/VirtualScroller.js
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ class VirtualScroller {

// If specified offset is in the last window into the list then
// render that last window instead of starting at that offset
const lastWindowOffset = this.totalItems - this.maxRenderedItems;
const lastWindowOffset = Math.max(0, this.totalItems - this.maxRenderedItems);
let newStartOffset = offset > lastWindowOffset ? lastWindowOffset : offset;
let newEndOffset = offset + this.maxRenderedItems;
// If the default count of items to render exceeds the totalItems count
Expand Down
2 changes: 1 addition & 1 deletion src/lib/shell.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
<button class="bp-btn-plain bp-btn-loading-download bp-is-invisible"></button>
</div>
</div>
<div class="bp-content">
<div class="bp-content" data-testid="bp-content">
Copy link
Contributor

Choose a reason for hiding this comment

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

Are we stripping out data-testid like in elements?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah we are, so this will get stripped out but html elements created via javascript won't. But when talking to @jstoffan this wasn't an issue because stripping these out is mainly to decrease bloat in the bundle.

<button class="bp-btn-plain bp-navigate bp-navigate-left bp-is-hidden">
<svg viewBox="0 0 48 48" focusable="false">
<path fill="#494949" stroke="#DCDCDC" stroke-miterlimit="10" d="M30.8,33.2L21.7,24l9.2-9.2L28,12L16,24l12,12L30.8,33.2z"/>
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 @@ -131,6 +131,7 @@ class DocBaseViewer extends BaseViewer {
if (this.options.enableThumbnailsSidebar) {
this.thumbnailsSidebarEl = document.createElement('div');
this.thumbnailsSidebarEl.className = `${CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER} ${CLASS_HIDDEN}`;
this.thumbnailsSidebarEl.setAttribute('data-testid', 'thumbnails-sidebar');
this.containerEl.parentNode.insertBefore(this.thumbnailsSidebarEl, this.containerEl);
}
}
Expand Down
20 changes: 7 additions & 13 deletions test/integration/document/Controls.e2e.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,11 @@ 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');
cy.getPreviewPage(1);
});

it('Should zoom in and out', () => {
Expand All @@ -25,7 +19,7 @@ describe('Preview Document Controls', () => {
cy.wrap($page[0].scrollHeight).as('originalHeight');
});

showControls();
cy.showDocumentControls();

cy.getByTitle('Zoom out').click();

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

showControls();
cy.showDocumentControls();

cy.getByTitle('Zoom in').click();

Expand All @@ -58,14 +52,14 @@ describe('Preview Document Controls', () => {
cy.contains('The Content Platform for Your Apps');
cy.get('@currentPage').invoke('text').should('equal', '1');

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

showControls();
cy.showDocumentControls();
cy.getByTitle('Previous page').click();

cy.getPreviewPage(1).should('be.visible');
Expand All @@ -78,7 +72,7 @@ describe('Preview Document Controls', () => {
cy.contains('The Content Platform for Your Apps');
cy.get('@currentPage').invoke('text').should('equal', '1');

showControls();
cy.showDocumentControls();
cy.getByTitle('Click to enter page number').click();
cy.getByTestId('page-num-input').should('be.visible').type('2').blur();

Expand All @@ -94,7 +88,7 @@ describe('Preview Document Controls', () => {
// it('Should handle going fullscreen', () => {
// cy.getPreviewPage(1).should('be.visible');
// cy.contains('The Content Platform for Your Apps');
// showControls();
// cy.showDocumentControls();
// cy.getByTitle('Enter fullscreen').should('be.visible').click();
// cy.getByTitle('Exit fullscreen').should('be.visible');
// });
Expand Down
99 changes: 99 additions & 0 deletions test/integration/document/Thumbnails.e2e.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
// <reference types="Cypress" />
describe('Preview Document Thumbnails', () => {
const token = Cypress.env('ACCESS_TOKEN');
const fileId = Cypress.env('FILE_ID_DOC');
const THUMBNAIL_SELECTED_CLASS = 'bp-thumbnail-is-selected';

/* eslint-disable */
const getThumbnail = (pageNum) => cy.get(`.bp-thumbnail[data-bp-page-num=${pageNum}]`);
const showDocumentPreview = ({ enableThumbnailsSidebar } = {}) => {
cy.showPreview(token, fileId, { enableThumbnailsSidebar });
cy.getPreviewPage(1);
cy.contains('The Content Platform for Your Apps');
};
const toggleThumbnails = () => {
cy.showDocumentControls();

cy
.getByTitle('Toggle thumbnails')
.should('be.visible')
.click();

return cy.getByTestId('thumbnails-sidebar');
};
/* eslint-enable */

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

it('Should not see the sidebar button if disabled', () => {
showDocumentPreview({ enableThumbnailsSidebar: false });

cy.showDocumentControls();
cy.getByTitle('Toggle thumbnails').should('not.be.visible');
});

it('Should see the sidebar button if enabled', () => {
showDocumentPreview({ enableThumbnailsSidebar: true });

cy.showDocumentControls();
cy.getByTitle('Toggle thumbnails').should('be.visible');
});

it('Should render thumbnails when toggled', () => {
showDocumentPreview({ enableThumbnailsSidebar: true });

toggleThumbnails().should('be.visible');

toggleThumbnails().should('not.be.visible');
});

it('Should be able to change page by clicking on the thumbnail', () => {
showDocumentPreview({ enableThumbnailsSidebar: true });

// Verify we're on page 1
cy.getByTestId('current-page').as('currentPage')
.invoke('text')
.should('equal', '1');

toggleThumbnails().should('be.visible');

// Verify which thumbnail is selected
getThumbnail(1)
.should('have.class', THUMBNAIL_SELECTED_CLASS)
.as('thumbOne');
getThumbnail(2)
.click()
.should('have.class', THUMBNAIL_SELECTED_CLASS);
cy.get('@thumbOne').should('not.have.class', THUMBNAIL_SELECTED_CLASS);
cy
.get('@currentPage')
.invoke('text')
.should('equal', '2');
});

it('Should reflect the selected page when page is changed', () => {
showDocumentPreview({ enableThumbnailsSidebar: true });
cy
.getByTestId('current-page')
.as('currentPage')
.invoke('text')
.should('equal', '1');

toggleThumbnails().should('be.visible');

getThumbnail(1)
.should('have.class', THUMBNAIL_SELECTED_CLASS)
.as('thumbOne');

cy.getByTitle('Next page').click();

getThumbnail(2).should('have.class', THUMBNAIL_SELECTED_CLASS);
cy.get('@thumbOne').should('not.have.class', THUMBNAIL_SELECTED_CLASS);
cy
.get('@currentPage')
.invoke('text')
.should('equal', '2');
});
});
3 changes: 1 addition & 2 deletions test/integration/sanity/Sanity.e2e.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,8 @@ describe('Preview Sanity', () => {
});

it('Should load a document preview', () => {
// Show the preview
cy.showPreview(token, fileId);
// Assert document content is present
cy.getPreviewPage(1);
cy.contains('The Content Platform for Your Apps');
});
});
16 changes: 10 additions & 6 deletions test/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,26 @@ Cypress.Commands.add('getPreviewPage', (pageNum) => {
cy
.get(`.page[data-page-number=${pageNum}]`)
.as('previewPage')
.find('[data-testid="page-loading-indicator"]')
// Adding timeout here because sometimes it takes more than the Cypress
// default timeout to render the preview
.find('[data-testid="page-loading-indicator"]', { timeout: 15000 })
.should('not.exist');

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.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);
});
}
cy.window().then((win) => {
win.loadPreview(options);
});

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