test(cypress): Add end-to-end test infrastructure and base cases (#543)

jstoffan · mergify[bot] · web-flow · commit 24660b89dfa7 · 2020-07-27T21:08:54.000Z
* test(cypress): Add end-to-end test infrastructure and base cases

* test(cypress): Update test script to better handle edge cases

Co-authored-by: mergify[bot] &lt;37929162+mergify[bot]@users.noreply.github.com&gt;
diff --git a/.travis.yml b/.travis.yml
@@ -22,7 +22,10 @@ jobs:
           script: yarn lint
         - name: 'Unit Tests'
           script: yarn test
+        - name: 'E2E Tests'
+          if: fork = false # Note: We can only run E2E tests on canonical due to security concerns
+          script: yarn test:e2e
 notifications:
     email:
         recipients:
-            - preview-alerts@box.com
+            - preview-dev@box.com
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
         "babel-plugin-istanbul": "^6.0.0",
         "babel-plugin-react-intl": "^7.5.1",
         "babel-plugin-transform-require-ignore": "^0.1.1",
+        "box-node-sdk": "^1.33.0",
         "circular-dependency-plugin": "^5.2.0",
         "conventional-github-releaser": "^3.1.3",
         "core-js": "^3.6.5",
@@ -140,8 +141,8 @@
         "start:dev": "yarn setup && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev yarn webpack-dev-server --config scripts/webpack.config.js --mode development",
         "start:linked": "IS_LINKED=1 yarn start",
         "test": "BABEL_ENV=test NODE_ENV=test yarn jest",
-        "test:e2e": "npm-run-all -p -r start:dev cy:run",
-        "test:e2e:open": "npm-run-all -p -r start:dev cy:open",
+        "test:e2e": "node scripts/cypress.js",
+        "test:e2e:open": "node scripts/cypress.js -o",
         "test:watch": "yarn test --watch"
     },
     "husky": {
diff --git a/scripts/cypress.js b/scripts/cypress.js
@@ -0,0 +1,89 @@
+/* eslint-disable no-console */
+const BoxSDK = require('box-node-sdk');
+const childProcess = require('child_process');
+
+const { argv, env } = process;
+const { E2E_ACCESS_TOKEN, E2E_CLIENT_ID } = env;
+const KILL_SIGNALS = [
+    'SIGABRT',
+    'SIGBUS',
+    'SIGFPE',
+    'SIGHUP',
+    'SIGILL',
+    'SIGINT',
+    'SIGQUIT',
+    'SIGSEGV',
+    'SIGTERM',
+    'SIGTRAP',
+    'SIGUSR1',
+    'SIGUSR2',
+];
+
+if (!E2E_ACCESS_TOKEN) {
+    throw new Error('E2E_ACCESS_TOKEN must be set as an environment variable');
+}
+
+if (!E2E_CLIENT_ID) {
+    throw new Error('E2E_CLIENT_ID must be set as an environment variable');
+}
+
+const sdk = new BoxSDK({
+    clientID: E2E_CLIENT_ID,
+    clientSecret: 'none',
+});
+
+const client = sdk.getBasicClient(E2E_ACCESS_TOKEN);
+
+async function cleanup(folderId) {
+    console.log('Cleanup test folder and files...');
+
+    try {
+        await client.folders.delete(folderId, { recursive: true });
+        console.log('Cleanup complete.');
+    } catch (error) {
+        console.error(`Cleanup failed. Error: ${error.message}`);
+    }
+}
+
+async function main() {
+    const testFolderName = `Test ${new Date().toISOString()}`;
+
+    // Bootstrap the test folder and copy template files into it
+    console.log(`Setup test folder: ${testFolderName}...`);
+    const { id: folderId } = await client.folders.create('118537970832', testFolderName); // Test folder
+    const { id: documentId } = await client.files.copy('694470903390', folderId); // Document template
+    const { id: imageId } = await client.files.copy('694468799644', folderId); // Image template
+    console.log('Setup complete.');
+
+    // Attempt to cleanup test folder before script is killed (example: CTL+C)
+    KILL_SIGNALS.forEach(signal => process.on(signal, () => cleanup(folderId)));
+
+    try {
+        console.log('Cypress run starting...');
+
+        const suffix = argv.indexOf('-o') >= 0 ? 'open' : 'run'; // Pass -o to run Cypress in "open" mode
+        const output = childProcess.execSync(`yarn npm-run-all -p -r start:dev cy:${suffix}`, {
+            env: {
+                ...env,
+                CYPRESS_ACCESS_TOKEN: E2E_ACCESS_TOKEN,
+                CYPRESS_FILE_ID_DOC: documentId,
+                CYPRESS_FILE_ID_IMAGE: imageId,
+            },
+        });
+
+        console.log('Cypress run SUCCESS. Output:');
+        console.log('------------------------------');
+        console.log(output.toString());
+    } catch (error) {
+        console.log('Cypress run FAILURE. Output:');
+        console.log('------------------------------');
+        console.log(error.stdout.toString());
+        process.exitCode = error && error.status ? error.status : 0;
+    }
+
+    await cleanup(folderId);
+
+    console.log('Test script complete. Exiting.');
+}
+
+main();
diff --git a/scripts/release.sh b/scripts/release.sh
@@ -72,7 +72,7 @@ reset_to_master() {
 
 build_lint_and_test() {
     # The build command includes linting
-    yarn build && yarn test || return 1
+    yarn build && yarn test && yarn test:e2e || return 1
 }
 
 
diff --git a/test/index.html b/test/index.html
@@ -3,10 +3,10 @@
         <meta name="viewport" content="width=device-width" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <link rel="stylesheet" href="./styles.css" />
-        <link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/preview/2.32.1/en-US/preview.css" />
+        <link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/preview/2.47.0/en-US/preview.css" />
         <link rel="stylesheet" href="./annotations.css" />
         <script src="https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js"></script>
-        <script src="https://cdn01.boxcdn.net/platform/preview/2.32.1/en-US/preview.js"></script>
+        <script src="https://cdn01.boxcdn.net/platform/preview/2.47.0/en-US/preview.js"></script>
         <script src="./annotations.js"></script>
     </head>
 
@@ -55,27 +55,17 @@
                     return;
                 }
 
-                // Load Preview + Annotations with the passed in file ID
-                var options = {
-                    Image: {
-                        enabledTypes: ['point'],
-                    },
-                    Document: {
-                        enabledTypes: ['draw', 'point', 'highlight-comment', 'highlight'],
-                    },
-                    Presentation: {
-                        enabledTypes: ['draw', 'point', 'highlight-comment', 'highlight'],
-                    },
-                };
-
                 /* global BoxAnnotations */
-                var annotations = new BoxAnnotations(options);
+                var annotations = new BoxAnnotations();
 
                 /* global Box */
                 var preview = new Box.Preview();
+
                 preview.show(fileid, token, {
                     container: '.preview-container',
                     boxAnnotations: annotations,
+                    showAnnotations: true,
+                    showAnnotationsControls: true,
                 });
             }
 
diff --git a/test/integration/Region.e2e.test.js b/test/integration/Region.e2e.test.js
@@ -0,0 +1,43 @@
+// <reference types="Cypress" />
+describe('Regions', () => {
+    beforeEach(() => {
+        cy.visit('/');
+    });
+
+    it('should create a new region on a document', () => {
+        // Show the preview
+        cy.showPreview(Cypress.env('FILE_ID_DOC'));
+
+        // Wait for the empty region layer to be present
+        cy.getByTestId('ba-Layer--region');
+
+        // Assert that the region creator does not exist and no annotations are present
+        cy.getByTestId('ba-RegionCreator').should('not.exist');
+        cy.get('[data-testid^="ba-AnnotationTarget"]').should('not.exist');
+
+        // Enter region creation mode
+        cy.getByTestId('bp-AnnotationsControls-regionBtn').click();
+
+        // Draw a 50x50 region on the first page starting at x50, y50
+        cy.getByTestId('ba-RegionCreator')
+            .first()
+            .trigger('mousedown', {
+                buttons: 1,
+                clientX: 50,
+                clientY: 50,
+            })
+            .trigger('mousemove', {
+                buttons: 1,
+                clientX: 100,
+                clientY: 100,
+            })
+            .trigger('mouseup');
+
+        // Type a message in the reply form and save the new annotation
+        cy.getByTestId('ba-ReplyField-editor').type('This is an automated test annotation.');
+        cy.getByTestId('ba-Popup-submit').click();
+
+        // Assert that at least one annotation is present on the image
+        cy.get('[data-testid^="ba-AnnotationTarget"]');
+    });
+});
diff --git a/test/integration/Sanity.e2e.test.js b/test/integration/Sanity.e2e.test.js
@@ -1,22 +1,35 @@
 // <reference types="Cypress" />
-describe('Annotations Sanity', () => {
-    let token;
-
+describe('Annotations', () => {
     beforeEach(() => {
-        token = Cypress.env('ACCESS_TOKEN');
         cy.visit('/');
     });
 
-    it('Should load a document with an annotation', () => {
-        const fileId = Cypress.env('FILE_ID_DOC');
-
+    it('should load annotations for a document file', () => {
         // Show the preview
-        cy.showPreview(token, fileId);
-        // Wait for .bp to load viewer
-        cy.getByTestId('bp').should('have.class', 'bp-loaded');
-        // Asserts that an annotation point icon has rendered
-        cy.getByTestId('annotation-marker');
+        cy.showPreview(Cypress.env('FILE_ID_DOC_SANITY'));
+
+        // Wait for viewer to load
+        cy.get('.bp').should('have.class', 'bp-loaded');
+        // Wait for annotations to load
+        cy.get('.bp-doc').should('have.class', 'ba-annotations-loaded');
+
         // Assert document content is present
         cy.contains('The Content Platform for Your Apps');
+
+        // Assert that at least one annotation is present on the document
+        cy.get('[data-testid^="ba-AnnotationTarget"]');
+    });
+
+    it('should load annotations for an image file', () => {
+        // Show the preview
+        cy.showPreview(Cypress.env('FILE_ID_IMAGE_SANITY'));
+
+        // Wait for viewer to load
+        cy.get('.bp').should('have.class', 'bp-loaded');
+        // Wait for annotations to load
+        cy.get('.bp-image').should('have.class', 'ba-annotations-loaded');
+
+        // Assert that at least one annotation is present on the image
+        cy.get('[data-testid^="ba-AnnotationTarget"]');
     });
 });
diff --git a/test/styles.css b/test/styles.css
@@ -1,5 +1,4 @@
 .setters-container {
-    height: 25vh;
     display: flex;
     font-size: 75%;
     justify-content: space-around;
@@ -13,15 +12,17 @@
     box-sizing: border-box;
 }
 
-.setters-container button,input {
+.setters-container button,
+.setters-container input {
     padding: 5px;
 }
 
-.container {
+.setters-container .container {
+    flex: 1 1 50%;
     text-align: center;
 }
 
-.container > input {
+.setters-container .container > input {
     text-align: center;
 }
 
diff --git a/test/support/commands.js b/test/support/commands.js
@@ -1,7 +1,10 @@
+// General commands
 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);
+
+// Preview-specific commands
+Cypress.Commands.add('showPreview', (fileId, { token } = {}) => {
+    cy.get('[data-testid="token"]').type(token || Cypress.env('ACCESS_TOKEN'));
     cy.get('[data-testid="token-set"]').click();
     cy.get('[data-testid="fileid"]').type(fileId);
     cy.get('[data-testid="fileid-set"]').click();
diff --git a/test/support/constants.js b/test/support/constants.js
@@ -1,5 +1,4 @@
 Cypress.env({
-    // NOTE: The token used is a readonly token accessing public data in a demo enterprise.
-    ACCESS_TOKEN: 'S8wjvjOL9GEK5VtXsQNVMOwSrx1g55oC',
-    FILE_ID_DOC: '415542803939',
+    FILE_ID_DOC_SANITY: '694517832310', // Read-only
+    FILE_ID_IMAGE_SANITY: '694517831110', // Read-only
 });
diff --git a/test/support/defaults.js b/test/support/defaults.js
@@ -0,0 +1,3 @@
+Cypress.Screenshot.defaults({
+    screenshotOnRunFailure: false,
+});
diff --git a/test/support/index.js b/test/support/index.js
@@ -13,5 +13,6 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-import './commands'
-import './constants'
+import './commands';
+import './constants';
+import './defaults';
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -72,7 +72,7 @@ reset_to_master() {`
`72`	`72`
`73`	`73`	`build_lint_and_test() {`
`74`	`74`	`# The build command includes linting`
`75`		`- yarn build && yarn test \|\| return 1`
	`75`	`+ yarn build && yarn test && yarn test:e2e \|\| return 1`
`76`	`76`	`}`
`77`	`77`
`78`	`78`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`.setters-container {`
`2`		`- height: 25vh;`
`3`	`2`	`display: flex;`
`4`	`3`	`font-size: 75%;`
`5`	`4`	`justify-content: space-around;`
`@@ -13,15 +12,17 @@`
`13`	`12`	`box-sizing: border-box;`
`14`	`13`	`}`
`15`	`14`
`16`		`-.setters-container button,input {`
	`15`	`+.setters-container button,`
	`16`	`+.setters-container input {`
`17`	`17`	`padding: 5px;`
`18`	`18`	`}`
`19`	`19`
`20`		`-.container {`
	`20`	`+.setters-container .container {`
	`21`	`+ flex: 1 1 50%;`
`21`	`22`	`text-align: center;`
`22`	`23`	`}`
`23`	`24`
`24`		`-.container > input {`
	`25`	`+.setters-container .container > input {`
`25`	`26`	`text-align: center;`
`26`	`27`	`}`
`27`	`28`