Chore: Add support for integration testing with Cypress (#909)

.babelrc

@@ -27,6 +27,11 @@
                 }],
                 ["babel-plugin-transform-require-ignore", { "extensions": [".scss"] }]
             ]
+        },
+        "production": {
+            "plugins": [
+                ["react-remove-properties", {"properties": ["data-testid"]}]
+            ]
         }
     }
 }

.gitignore

@@ -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

.travis.yml

@@ -19,3 +19,5 @@ jobs:
           addons:
               chrome: beta
           script: travis_retry yarn run functional-tests-ci
+        - name: "E2E Tests"
+          script: yarn test:e2e

build/webpack.config.js

@@ -45,7 +45,8 @@ function updateConfig(conf, language, index) {
             contentBase: './src',
             disableHostCheck: true,
             host: '0.0.0.0',
-            inline: true
+            inline: true,
+            port: 8000
         }
     });
 

cypress.json

@@ -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
+}

package.json

@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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",

src/index.html

@@ -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

src/lib/shell.html

@@ -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>

test/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+    "env": {
+        "cypress/globals": true
+    },
+    "extends": ["plugin:cypress/recommended"],
+    "plugins": ["cypress"]
+}

test/fixtures/index.json

@@ -0,0 +1 @@
+{}

test/integration/sanity/Sanity.e2e.test.js

@@ -0,0 +1,20 @@
+// <reference types="Cypress" />
+describe('Preview Sanity', () => {
+    let token;
+
+    beforeEach(() => {
+        token = Cypress.env('ACCESS_TOKEN');
+        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')
+        // Assert document content is present
+        cy.contains('The Content Platform for Your Apps');
+    });
+});

test/plugins/index.js

@@ -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 */

test/support/commands.js

@@ -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);
+    cy.get('[data-testid="token-set"]').click();
+    cy.get('[data-testid="fileid"]').type(fileId);
+    cy.get('[data-testid="fileid-set"]').click();
+});

test/support/constants.js

@@ -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'
+});

test/support/index.js

@@ -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'