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: Add support for integration testing with Cypress #909

Merged
merged 8 commits into from
Jan 31, 2019
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
5 changes: 5 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@
}],
["babel-plugin-transform-require-ignore", { "extensions": [".scss"] }]
]
},
"production": {
"plugins": [
["react-remove-properties", {"properties": ["data-testid"]}]
]
}
}
}
16 changes: 9 additions & 7 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
node_modules
*.swp
*.iml
.DS_Store
.idea
*.iml
*.swp
build/rsync.json
.DS_Store
dist
functional-tests/output
jsconfig.json
node_modules
npm-debug.log
reports
dist
src/i18n/json
jsconfig.json
functional-tests/output
test/screenshots
test/videos
yarn-error.log
2 changes: 2 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,5 @@ jobs:
addons:
chrome: beta
script: travis_retry yarn run functional-tests-ci
- name: "E2E Tests"
script: yarn test:e2e
3 changes: 2 additions & 1 deletion build/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ function updateConfig(conf, language, index) {
contentBase: './src',
disableHostCheck: true,
host: '0.0.0.0',
inline: true
inline: true,
port: 8000
}
});

Expand Down
13 changes: 13 additions & 0 deletions cypress.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"baseUrl": "http://localhost:8000/#",
"fileServerFolder": "test",
"fixturesFolder": "test/fixtures",
"integrationFolder": "test/integration",
"pluginsFile": "test/plugins/index.js",
"screenshotsFolder": "test/screenshots",
"supportFile": "test/support/index.js",
"video": false,
"videosFolder": "test/videos",
"viewportHeight": 1260,
"viewportWidth": 1600
}
10 changes: 10 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"babel-eslint": "^8.0.3",
"babel-loader": "^7.1.2",
"babel-plugin-istanbul": "^4.1.4",
"babel-plugin-react-remove-properties": "^0.2.5",
"babel-plugin-transform-builtin-extend": "^1.1.2",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
Expand All @@ -35,11 +36,13 @@
"create-react-class": "^15.6.2",
"css-loader": "^0.28.7",
"cssnano-cli": "^1.0.5",
"cypress": "^3.1.4",
"eslint": "^4.12.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-cypress": "^2.2.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1",
Expand Down Expand Up @@ -73,6 +76,7 @@
"mojito-rb-gen": "^0.0.1",
"node-noop": "^1.0.0",
"node-sass": "4.9.3",
"npm-run-all": "^4.1.5",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"phantomjs-prebuilt": "^2.1.16",
"postcss-loader": "^2.0.9",
Expand All @@ -95,6 +99,7 @@
"stylelint-config-standard": "^18.0.0",
"stylelint-order": "^0.7.0",
"stylelint-scss": "^2.2.0",
"wait-on": "^3.2.0",
"webdriverio": "^4.12.0",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.9.1",
Expand All @@ -112,6 +117,9 @@
"ci": "yarn install && yarn run clean && yarn run build-rb && yarn run lint && yarn run test && yarn run build-ci",
"clean": "rm -rf dist && rm -rf reports/coverage && rm -rf src/i18n/json",
"commitmsg": "commitlint -e",
"cy:open": "yarn cy:wait; yarn cypress open",
"cy:run": "yarn cy:wait; yarn cypress run --spec test/integration/**/*.test.js",
"cy:wait": "wait-on http-get://localhost:8000",
"debug": "yarn install && NODE_ENV=test ./node_modules/.bin/karma start build/karma.conf.js --no-single-run --auto-watch",
"dev": "yarn install && BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack --progress --colors --config build/webpack.config.js",
"functional-tests": "python -m SimpleHTTPServer 8000 & node ./node_modules/codeceptjs/bin/codecept.js run-multiple parallel --verbose ; pkill -i python -m SimpleHTTPServer 8000",
Expand All @@ -125,6 +133,8 @@
"start": "yarn install && BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack --watch --progress --colors --config build/webpack.config.js",
"start:dev": "yarn run build-rb && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev ./node_modules/.bin/webpack-dev-server --config build/webpack.config.js",
"test": "yarn install && NODE_ENV=test node --max_old_space_size=4096 ./node_modules/.bin/karma start build/karma.conf.js",
"test:e2e": "npm-run-all -p -r start:dev cy:run",
"test:e2e:open": "npm-run-all -p -r start:dev cy:open",
"upgrade-pdfjs": "./build/upgrade_pdfjs.sh && ./build/minify_pdfjs.sh",
"upgrade-annotations": "./build/upgrade_annotations.sh",
"major": "./build/release.sh -m",
Expand Down
10 changes: 5 additions & 5 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,18 +48,18 @@
<div class='setters-container'>
<div class='container' id='token'>
<div> Token: <span id='token-display'></span> </div>
<input id='token-set' placeholder='Enter token' />
<button onClick="setProperty('token')">Set new token</button>
<input id='token-set' data-testid="token" placeholder='Enter token' />
<button onClick="setProperty('token')" data-testid="token-set">Set new token</button>
</div>

<div class='container' id='file'>
<div> File ID: <span id='fileid-display'></span></div>
<input id='fileid-set' placeholder='Enter file ID' />
<button onClick="setProperty('fileid')">Set new file ID</button>
<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>

<div class='preview-container'> </div>
<div class='preview-container' data-testid="preview-container"> </div>
<script>
function setProperty(selector) {
// Get new value, fallback to local storage
Expand Down
2 changes: 1 addition & 1 deletion src/lib/shell.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
</div>
</div>
</div>
<div class="bp" tabindex="0">
<div class="bp" tabindex="0" data-testid="bp">
<div class="bp-loading-wrapper">
<div class="bp-loading">
<div class="bp-icon bp-icon-file"></div>
Expand Down
7 changes: 7 additions & 0 deletions test/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"env": {
"cypress/globals": true
},
"extends": ["plugin:cypress/recommended"],
"plugins": ["cypress"]
}
1 change: 1 addition & 0 deletions test/fixtures/index.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
20 changes: 20 additions & 0 deletions test/integration/sanity/Sanity.e2e.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// <reference types="Cypress" />
describe('Preview Sanity', () => {
let token;

beforeEach(() => {
token = Cypress.env('ACCESS_TOKEN');
Copy link
Collaborator

Choose a reason for hiding this comment

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

Seems like this could be made a const and done just inside describe above unless token is modified in tests.

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')
Copy link
Collaborator

Choose a reason for hiding this comment

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

Should this live in the showPreview helper?

// Assert document content is present
cy.contains('The Content Platform for Your Apps');
});
});
19 changes: 19 additions & 0 deletions test/plugins/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/* eslint-disable */
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}
/* eslint-enable */
8 changes: 8 additions & 0 deletions test/support/commands.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
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);
Copy link
Collaborator

Choose a reason for hiding this comment

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

These should be able to use cy.getByTestId since it's declared above.

cy.get('[data-testid="token-set"]').click();
cy.get('[data-testid="fileid"]').type(fileId);
cy.get('[data-testid="fileid-set"]').click();
});
7 changes: 7 additions & 0 deletions test/support/constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
Cypress.env({
FILE_ID_DOC: '287707140303',
FILE_ID_MP3: '286509191779',
FILE_ID_VIDEO: '286114565199',
FILE_ID_VIDEO_SUBTITLES_TRACKS: '286840567797',
FILE_ID_VIDEO_SMALL: '286114192023'
});
17 changes: 17 additions & 0 deletions test/support/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

import './commands'
import './constants'
Loading