Chore: Add e2e Thumbnail tests for large doc

cypress.json

@@ -1,5 +1,6 @@
 {
     "baseUrl": "http://localhost:8000/#",
+    "defaultCommandTimeout": 8000,
     "fileServerFolder": "test",
     "fixturesFolder": "test/fixtures",
     "integrationFolder": "test/integration",

package.json

@@ -41,6 +41,7 @@
     "eslint-config-prettier": "^2.9.0",
     "eslint-import-resolver-webpack": "^0.8.3",
     "eslint-plugin-babel": "^4.1.1",
+    "eslint-plugin-chai-friendly": "^0.4.1",
     "eslint-plugin-cypress": "^2.2.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",

test/.eslintrc.json

@@ -3,5 +3,9 @@
         "cypress/globals": true
     },
     "extends": ["plugin:cypress/recommended"],
-    "plugins": ["cypress"]
+    "plugins": ["cypress", "chai-friendly"],
+    "rules" : {
+        "no-unused-expressions": 0,
+        "chai-friendly/no-unused-expressions": 2
+    }
 }

test/integration/document/Thumbnails.e2e.test.js

@@ -1,16 +1,41 @@
 // <reference types="Cypress" />
 describe('Preview Document Thumbnails', () => {
     const token = Cypress.env('ACCESS_TOKEN');
-    const fileId = Cypress.env('FILE_ID_DOC');
+    const fileId = Cypress.env('FILE_ID_DOC_LARGE');
     const THUMBNAIL_SELECTED_CLASS = 'bp-thumbnail-is-selected';
 
-    /* eslint-disable */
+    /**
+     * Gets the thumbnail with the specified page number
+     * @param {number} pageNum - Page number
+     * @return {Element} Thumbnail subject
+     */
     const getThumbnail = (pageNum) => cy.get(`.bp-thumbnail[data-bp-page-num=${pageNum}]`);
+
+    /**
+     * Gets the thumbnail and ensures the thumbnail image has rendered
+     * @param {number} pageNum - Page number
+     * @return {Element} Thumbnail subject
+     */
+    const getThumbnailWithRenderedImage = (pageNum) => getThumbnail(pageNum).should(($thumbnail) => {
+        expect($thumbnail.find('.bp-thumbnail-image')).to.exist;
+        return $thumbnail;
+    });
+
+    /**
+     * Shows the document preview
+     * @param {Object} options - Preview options
+     * @return {void}
+     */
     const showDocumentPreview = ({ enableThumbnailsSidebar } = {}) => {
         cy.showPreview(token, fileId, { enableThumbnailsSidebar });
         cy.getPreviewPage(1);
-        cy.contains('The Content Platform for Your Apps');
+        cy.contains('IN  THE  HOUSE  OF  REPRESENTATIVES');
     };
+
+    /**
+     * Toggles the thumbnails sidebar
+     * @return {Element} The thumbnails sidebar subject
+     */
     const toggleThumbnails = () => {
         cy.showDocumentControls();
 
@@ -19,11 +44,27 @@ describe('Preview Document Thumbnails', () => {
             .should('be.visible')
             .click();
 
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
         cy.wait(301); // Wait for toggle animation to complete
 
         return cy.getByTestId('thumbnails-sidebar');
     };
-    /* eslint-enable */
+
+    /**
+     * Asserts that the thumbnails sidebar object is visible
+     * @param {Element} $thumbnailsSidebar - The thumbnails sidebar subject
+     * @return {Assertion} Chai Assertion
+     */
+    const beVisible = ($thumbnailsSidebar) =>
+        expect($thumbnailsSidebar).to.have.css('transform', 'matrix(1, 0, 0, 1, 0, 0)'); // translateX(0)
+
+    /**
+     * Asserts that the thumbnails sidebar object is not visible
+     * @param {Element} $thumbnailsSidebar - The thumbnails sidebar subject
+     * @return {Assertion} Chai Assertion
+     */
+    const notBeVisible = ($thumbnailsSidebar) =>
+        expect($thumbnailsSidebar).to.have.css('transform', 'matrix(1, 0, 0, 1, -201, 0)'); // translateX(-201px)
 
     beforeEach(() => {
         cy.visit('/');
@@ -46,29 +87,29 @@ describe('Preview Document Thumbnails', () => {
     it('Should render thumbnails when toggled', () => {
         showDocumentPreview({ enableThumbnailsSidebar: true });
 
-        toggleThumbnails().should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 0)'); // translateX(0)
+        toggleThumbnails().should(beVisible);
 
-        toggleThumbnails().should('have.css', 'transform', 'matrix(1, 0, 0, 1, -201, 0)'); // translateX(-201px)
+        toggleThumbnails().should(notBeVisible);
     });
 
     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')
+        cy
+            .getByTestId('current-page')
+            .as('currentPage')
             .invoke('text')
             .should('equal', '1');
 
-        toggleThumbnails().should('be.visible');
+        toggleThumbnails().should(beVisible);
 
         // Verify which thumbnail is selected
-        getThumbnail(1)
-            .should('have.class', THUMBNAIL_SELECTED_CLASS)
-            .as('thumbOne');
-        getThumbnail(2)
+        getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS);
+        getThumbnailWithRenderedImage(2)
             .click()
             .should('have.class', THUMBNAIL_SELECTED_CLASS);
-        cy.get('@thumbOne').should('not.have.class', THUMBNAIL_SELECTED_CLASS);
+        getThumbnailWithRenderedImage(1).should('not.have.class', THUMBNAIL_SELECTED_CLASS);
         cy
             .get('@currentPage')
             .invoke('text')
@@ -83,19 +124,85 @@ describe('Preview Document Thumbnails', () => {
             .invoke('text')
             .should('equal', '1');
 
-        toggleThumbnails().should('be.visible');
+        toggleThumbnails().should(beVisible);
 
-        getThumbnail(1)
-            .should('have.class', THUMBNAIL_SELECTED_CLASS)
-            .as('thumbOne');
+        getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS);
 
         cy.getByTitle('Next page').click();
 
-        getThumbnail(2).should('have.class', THUMBNAIL_SELECTED_CLASS);
-        cy.get('@thumbOne').should('not.have.class', THUMBNAIL_SELECTED_CLASS);
+        getThumbnailWithRenderedImage(2).should('have.class', THUMBNAIL_SELECTED_CLASS);
+        getThumbnailWithRenderedImage(1).should('not.have.class', THUMBNAIL_SELECTED_CLASS);
         cy
             .get('@currentPage')
             .invoke('text')
             .should('equal', '2');
     });
+
+    it('Should reflect the selected page even when thumbnail was not previously in rendered window', () => {
+        showDocumentPreview({ enableThumbnailsSidebar: true });
+        cy
+            .getByTestId('current-page')
+            .as('currentPage')
+            .invoke('text')
+            .should('equal', '1');
+
+        toggleThumbnails().should(beVisible);
+
+        getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS);
+
+        cy.showDocumentControls();
+        cy.getByTitle('Click to enter page number').click();
+        cy
+            .getByTestId('page-num-input')
+            .should('be.visible')
+            .type('200')
+            .blur();
+
+        getThumbnailWithRenderedImage(200).should('have.class', THUMBNAIL_SELECTED_CLASS);
+
+        getThumbnail(1).should('not.exist');
+        cy
+            .get('@currentPage')
+            .invoke('text')
+            .should('equal', '200');
+    });
+
+    it('Should still reflect the current viewed page when thumbnails sidebar is toggled open', () => {
+        showDocumentPreview({ enableThumbnailsSidebar: true });
+        cy
+            .getByTestId('current-page')
+            .as('currentPage')
+            .invoke('text')
+            .should('equal', '1');
+
+        toggleThumbnails().should(beVisible);
+
+        getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS);
+
+        cy.showDocumentControls();
+        cy.getByTitle('Click to enter page number').click();
+        cy
+            .getByTestId('page-num-input')
+            .should('be.visible')
+            .type('200')
+            .blur();
+
+        cy.getPreviewPage(200).should('be.visible');
+        getThumbnailWithRenderedImage(200).should('have.class', THUMBNAIL_SELECTED_CLASS);
+
+        toggleThumbnails().should(notBeVisible);
+
+        cy.getByTitle('Click to enter page number').click();
+        cy
+            .getByTestId('page-num-input')
+            .should('be.visible')
+            .type('1')
+            .blur();
+
+        cy.getPreviewPage(1).should('be.visible');
+
+        toggleThumbnails().should(beVisible);
+
+        getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS);
+    });
 });

test/support/constants.js

@@ -1,6 +1,7 @@
 Cypress.env({
     ACCESS_TOKEN: 'S8wjvjOL9GEK5VtXsQNVMOwSrx1g55oC',
     FILE_ID_DOC: '415542803939',
+    FILE_ID_DOC_LARGE: '420985736453',
     FILE_ID_HTML: '420872247534',
     FILE_ID_JS: '416043839991',
     FILE_ID_JSON: '420868959262',

yarn.lock

@@ -3630,6 +3630,11 @@ eslint-plugin-babel@^4.1.1:
   resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-4.1.2.tgz#79202a0e35757dd92780919b2336f1fa2fe53c1e"
   integrity sha1-eSAqDjV1fdkngJGbIzbx+i/lPB4=
 
+eslint-plugin-chai-friendly@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-chai-friendly/-/eslint-plugin-chai-friendly-0.4.1.tgz#9eeb17f92277ba80bb64f0e946c6936a3ae707b4"
+  integrity sha512-hkpLN7VVoGGsofZjUhcQ+sufC3FgqMJwD0DvAcRfxY1tVRyQyVsqpaKnToPHJQOrRo0FQ0fSEDwW2gr4rsNdGA==
+
 eslint-plugin-cypress@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-cypress/-/eslint-plugin-cypress-2.2.0.tgz#31f23bec82eb4078711b374af66af3daa9fdbd2e"