-
Notifications
You must be signed in to change notification settings - Fork 113
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 Cypress tests to cover existing functional tests #912
Changes from 2 commits
a29b464
b2fc624
65a970d
b8b15b0
567c44f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
// <reference types="Cypress" /> | ||
describe('Preview Document Controls', () => { | ||
const token = Cypress.env('ACCESS_TOKEN'); | ||
const fileId = Cypress.env('FILE_ID_DOC'); | ||
|
||
/* eslint-disable */ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What rules are we breaking here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think jsdoc comments for the functions |
||
const getPage = (pageNum) => cy.get(`.page[data-page-number=${pageNum}]`); | ||
const showControls = () => { | ||
// Hover over the preview to trigger the controls | ||
cy.getByTestId('bp').trigger('mouseover'); | ||
// Assert that the controls are shown | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm a fan of code comments, but this logic seems pretty self-explanatory to me. Is a comment needed here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 will remove |
||
cy.getByTestId('controls-wrapper').should('be.visible'); | ||
}; | ||
/* eslint-enable */ | ||
|
||
beforeEach(() => { | ||
cy.visit('/'); | ||
// Show the preview | ||
cy.showPreview(token, fileId); | ||
}); | ||
|
||
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 | ||
getPage(1).then(($page) => { | ||
cy.wrap($page[0].scrollWidth).as('origWidth'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Generally want to avoid abbreviation where possible. |
||
cy.wrap($page[0].scrollHeight).as('origHeight'); | ||
}); | ||
|
||
showControls(); | ||
// Click the zoom out button | ||
cy.getByTestId('Zoom out').click(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Seems like a good use case for |
||
|
||
getPage(1).then(($page) => { | ||
const zoomedOutWidth = $page[0].scrollWidth; | ||
const zoomedOutHeight = $page[0].scrollHeight; | ||
|
||
cy.get('@origWidth').then((origWidth) => expect(origWidth).to.be.above(zoomedOutWidth)); | ||
cy.get('@origHeight').then((origHeight) => expect(origHeight).to.be.above(zoomedOutHeight)); | ||
|
||
cy.wrap(zoomedOutWidth).as('zoomedOutWidth'); | ||
cy.wrap(zoomedOutHeight).as('zoomedOutHeight'); | ||
}); | ||
|
||
// Hover over the preview to trigger the controls | ||
cy.getByTestId('bp').trigger('mouseover'); | ||
// Assert that the controls are shown | ||
cy.getByTestId('controls-wrapper').should('be.visible'); | ||
// Click the zoom out button | ||
cy.getByTestId('Zoom in').click(); | ||
|
||
getPage(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', () => { | ||
getPage(1).should('be.visible'); | ||
cy.contains('The Content Platform for Your Apps'); | ||
cy.getByTestId('current-page').invoke('text').should('equal', '1'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Minor: You can alias these elements for reuse later in the test rather than selecting them each time. |
||
|
||
showControls(); | ||
cy.getByTestId('Next page').click(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we should probably use |
||
|
||
getPage(2).should('be.visible'); | ||
cy.contains('Discover how your business can use Box Platform'); | ||
cy.getByTestId('current-page').invoke('text').should('equal', '2'); | ||
|
||
showControls(); | ||
cy.getByTestId('Previous page').click(); | ||
|
||
getPage(1).should('be.visible'); | ||
cy.contains('The Content Platform for Your Apps'); | ||
cy.getByTestId('current-page').invoke('text').should('equal', '1'); | ||
}); | ||
|
||
it('Should handle page navigation via input', () => { | ||
getPage(1).should('be.visible'); | ||
cy.contains('The Content Platform for Your Apps'); | ||
cy.getByTestId('current-page').invoke('text').should('equal', '1'); | ||
|
||
showControls(); | ||
cy.getByTestId('Click to enter page number').click(); | ||
cy.getByTestId('page-num-input').should('be.visible').type('2').blur(); | ||
// cy.getByTestId('page-num-input').type('2').blur(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not sure if this is intentional, but try to avoid commented code. |
||
|
||
getPage(2).should('be.visible'); | ||
cy.contains('Discover how your business can use Box Platform'); | ||
cy.getByTestId('current-page').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', () => { | ||
// getPage(1).should('be.visible'); | ||
// cy.contains('The Content Platform for Your Apps'); | ||
// showControls(); | ||
// cy.getByTestId('Enter fullscreen').should('be.visible').click(); | ||
// cy.getByTestId('Exit fullscreen').should('be.visible'); | ||
// }); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
// <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 getPage = (pageNum) => cy.get(`.page[data-page-number=${pageNum}]`); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If this is used in more than one file, we should probably share it between them somehow. |
||
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 }); | ||
|
||
getPage(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'); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
// <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.visit('/'); | ||
cy.showPreview(token, fileIdDoc, { showDownload: true }); | ||
}); | ||
|
||
it('Should be able to download the file', () => { | ||
cy.getByTestId('download-preview').should('be.visible').click(); | ||
cy.getByTestId('downloadiframe').then((iframe) => expect(urlRegex.test(iframe[0].src)).to.be.true); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,17 @@ | ||
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('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 | ||
cy.getByTestId('bp').should('have.class', 'bp-loaded') | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These files aren't transpiled by Babel, so I believe this will fail in IE11.