From 8f824e2b4d50b6bb844005b702d8d589759fa971 Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Wed, 13 Mar 2019 16:09:41 -0700 Subject: [PATCH 1/3] Chore: Add e2e Thumbnail tests for large doc --- .../document/Thumbnails.e2e.test.js | 124 +++++++++++++++--- test/support/constants.js | 1 + 2 files changed, 107 insertions(+), 18 deletions(-) diff --git a/test/integration/document/Thumbnails.e2e.test.js b/test/integration/document/Thumbnails.e2e.test.js index 7dcd04c6b..5e72e1688 100644 --- a/test/integration/document/Thumbnails.e2e.test.js +++ b/test/integration/document/Thumbnails.e2e.test.js @@ -1,16 +1,28 @@ // 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 */ - const getThumbnail = (pageNum) => cy.get(`.bp-thumbnail[data-bp-page-num=${pageNum}]`); + const getThumbnail = (pageNum) => { + return cy + .get(`.bp-thumbnail[data-bp-page-num=${pageNum}]`, { timeout: 5000 }) + .as('foundThumbnail') + }; + + const getThumbnailWithRenderedImage = (pageNum) => { + getThumbnail(pageNum).find('.bp-thumbnail-image').should('exist'); + + return cy.get('@foundThumbnail'); + }; + 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'); }; + const toggleThumbnails = () => { cy.showDocumentControls(); @@ -21,7 +33,13 @@ describe('Preview Document Thumbnails', () => { cy.wait(301); // Wait for toggle animation to complete - return cy.getByTestId('thumbnails-sidebar'); + const thumbnailSubject = cy.getByTestId('thumbnails-sidebar'); + + return { + ...thumbnailSubject, + shouldBeVisible: () => thumbnailSubject.should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 0)'), // translateX(0) + shouldNotBeVisible: () => thumbnailSubject.should('have.css', 'transform', 'matrix(1, 0, 0, 1, -201, 0)') // translateX(-201px) + }; }; /* eslint-enable */ @@ -46,29 +64,30 @@ 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().shouldBeVisible(); - toggleThumbnails().should('have.css', 'transform', 'matrix(1, 0, 0, 1, -201, 0)'); // translateX(-201px) + toggleThumbnails().shouldNotBeVisible(); }); 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().shouldBeVisible(); // Verify which thumbnail is selected - getThumbnail(1) + getThumbnailWithRenderedImage(1) .should('have.class', THUMBNAIL_SELECTED_CLASS) - .as('thumbOne'); - getThumbnail(2) + 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 +102,88 @@ describe('Preview Document Thumbnails', () => { .invoke('text') .should('equal', '1'); - toggleThumbnails().should('be.visible'); + toggleThumbnails().shouldBeVisible(); - 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().shouldBeVisible(); + + 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().shouldBeVisible(); + + 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().shouldNotBeVisible(); + + 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().shouldBeVisible(); + + getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS); + }); }); diff --git a/test/support/constants.js b/test/support/constants.js index 722a1eed9..52e39eaf2 100644 --- a/test/support/constants.js +++ b/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', From 839d6bf775f0192bbc44c736d2db14cb6b587cbd Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Wed, 13 Mar 2019 17:15:25 -0700 Subject: [PATCH 2/3] Chore: address PR comments --- cypress.json | 1 + .../document/Thumbnails.e2e.test.js | 53 +++++++++---------- 2 files changed, 25 insertions(+), 29 deletions(-) diff --git a/cypress.json b/cypress.json index 071241ed8..cdc04d1a8 100644 --- a/cypress.json +++ b/cypress.json @@ -1,5 +1,6 @@ { "baseUrl": "http://localhost:8000/#", + "defaultCommandTimeout": 8000, "fileServerFolder": "test", "fixturesFolder": "test/fixtures", "integrationFolder": "test/integration", diff --git a/test/integration/document/Thumbnails.e2e.test.js b/test/integration/document/Thumbnails.e2e.test.js index 5e72e1688..39e141e7b 100644 --- a/test/integration/document/Thumbnails.e2e.test.js +++ b/test/integration/document/Thumbnails.e2e.test.js @@ -6,15 +6,14 @@ describe('Preview Document Thumbnails', () => { /* eslint-disable */ const getThumbnail = (pageNum) => { - return cy - .get(`.bp-thumbnail[data-bp-page-num=${pageNum}]`, { timeout: 5000 }) - .as('foundThumbnail') + return cy.get(`.bp-thumbnail[data-bp-page-num=${pageNum}]`); }; const getThumbnailWithRenderedImage = (pageNum) => { - getThumbnail(pageNum).find('.bp-thumbnail-image').should('exist'); - - return cy.get('@foundThumbnail'); + return getThumbnail(pageNum).should(($thumbnail) => { + expect($thumbnail.find('.bp-thumbnail-image')).to.exist; + return $thumbnail; + }); }; const showDocumentPreview = ({ enableThumbnailsSidebar } = {}) => { @@ -33,14 +32,14 @@ describe('Preview Document Thumbnails', () => { cy.wait(301); // Wait for toggle animation to complete - const thumbnailSubject = cy.getByTestId('thumbnails-sidebar'); - - return { - ...thumbnailSubject, - shouldBeVisible: () => thumbnailSubject.should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 0)'), // translateX(0) - shouldNotBeVisible: () => thumbnailSubject.should('have.css', 'transform', 'matrix(1, 0, 0, 1, -201, 0)') // translateX(-201px) - }; + return cy.getByTestId('thumbnails-sidebar'); }; + + const beVisible = ($thumbnailsSidebar) => + expect($thumbnailsSidebar).to.have.css('transform', 'matrix(1, 0, 0, 1, 0, 0)'); // translateX(0) + + const notBeVisible = ($thumbnailsSidebar) => + expect($thumbnailsSidebar).to.have.css('transform', 'matrix(1, 0, 0, 1, -201, 0)'); // translateX(-201px) /* eslint-enable */ beforeEach(() => { @@ -64,9 +63,9 @@ describe('Preview Document Thumbnails', () => { it('Should render thumbnails when toggled', () => { showDocumentPreview({ enableThumbnailsSidebar: true }); - toggleThumbnails().shouldBeVisible(); + toggleThumbnails().should(beVisible); - toggleThumbnails().shouldNotBeVisible(); + toggleThumbnails().should(notBeVisible); }); it('Should be able to change page by clicking on the thumbnail', () => { @@ -79,11 +78,10 @@ describe('Preview Document Thumbnails', () => { .invoke('text') .should('equal', '1'); - toggleThumbnails().shouldBeVisible(); + toggleThumbnails().should(beVisible); // Verify which thumbnail is selected - getThumbnailWithRenderedImage(1) - .should('have.class', THUMBNAIL_SELECTED_CLASS) + getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS); getThumbnailWithRenderedImage(2) .click() .should('have.class', THUMBNAIL_SELECTED_CLASS); @@ -102,10 +100,9 @@ describe('Preview Document Thumbnails', () => { .invoke('text') .should('equal', '1'); - toggleThumbnails().shouldBeVisible(); + toggleThumbnails().should(beVisible); - getThumbnailWithRenderedImage(1) - .should('have.class', THUMBNAIL_SELECTED_CLASS); + getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS); cy.getByTitle('Next page').click(); @@ -125,10 +122,9 @@ describe('Preview Document Thumbnails', () => { .invoke('text') .should('equal', '1'); - toggleThumbnails().shouldBeVisible(); + toggleThumbnails().should(beVisible); - getThumbnailWithRenderedImage(1) - .should('have.class', THUMBNAIL_SELECTED_CLASS); + getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS); cy.showDocumentControls(); cy.getByTitle('Click to enter page number').click(); @@ -155,10 +151,9 @@ describe('Preview Document Thumbnails', () => { .invoke('text') .should('equal', '1'); - toggleThumbnails().shouldBeVisible(); + toggleThumbnails().should(beVisible); - getThumbnailWithRenderedImage(1) - .should('have.class', THUMBNAIL_SELECTED_CLASS); + getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS); cy.showDocumentControls(); cy.getByTitle('Click to enter page number').click(); @@ -171,7 +166,7 @@ describe('Preview Document Thumbnails', () => { cy.getPreviewPage(200).should('be.visible'); getThumbnailWithRenderedImage(200).should('have.class', THUMBNAIL_SELECTED_CLASS); - toggleThumbnails().shouldNotBeVisible(); + toggleThumbnails().should(notBeVisible); cy.getByTitle('Click to enter page number').click(); cy @@ -182,7 +177,7 @@ describe('Preview Document Thumbnails', () => { cy.getPreviewPage(1).should('be.visible'); - toggleThumbnails().shouldBeVisible(); + toggleThumbnails().should(beVisible); getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS); }); From 5584aac6b4e7c75502c98a6d5e0d6e2d0fd8c99b Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Thu, 14 Mar 2019 15:03:39 -0700 Subject: [PATCH 3/3] Chore: remote eslint ignores --- package.json | 1 + test/.eslintrc.json | 6 ++- .../document/Thumbnails.e2e.test.js | 48 ++++++++++++++----- yarn.lock | 5 ++ 4 files changed, 47 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 6b77ecdcb..95a29095b 100644 --- a/package.json +++ b/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", diff --git a/test/.eslintrc.json b/test/.eslintrc.json index 7a444ea42..e8dba98db 100644 --- a/test/.eslintrc.json +++ b/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 + } } diff --git a/test/integration/document/Thumbnails.e2e.test.js b/test/integration/document/Thumbnails.e2e.test.js index 39e141e7b..820075c4f 100644 --- a/test/integration/document/Thumbnails.e2e.test.js +++ b/test/integration/document/Thumbnails.e2e.test.js @@ -4,24 +4,38 @@ describe('Preview Document Thumbnails', () => { const fileId = Cypress.env('FILE_ID_DOC_LARGE'); const THUMBNAIL_SELECTED_CLASS = 'bp-thumbnail-is-selected'; - /* eslint-disable */ - const getThumbnail = (pageNum) => { - return cy.get(`.bp-thumbnail[data-bp-page-num=${pageNum}]`); - }; - - const getThumbnailWithRenderedImage = (pageNum) => { - return getThumbnail(pageNum).should(($thumbnail) => { - expect($thumbnail.find('.bp-thumbnail-image')).to.exist; - return $thumbnail; - }); - }; + /** + * 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('IN THE HOUSE OF REPRESENTATIVES'); }; + /** + * Toggles the thumbnails sidebar + * @return {Element} The thumbnails sidebar subject + */ const toggleThumbnails = () => { cy.showDocumentControls(); @@ -30,17 +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'); }; + /** + * 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) - /* eslint-enable */ beforeEach(() => { cy.visit('/'); diff --git a/yarn.lock b/yarn.lock index e8899e7b0..fddfac473 100644 --- a/yarn.lock +++ b/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"