Cypress for testing

.gitignore

@@ -20,4 +20,7 @@ yarn-error.log*
 deploy/app-engine/public
 deploy/aws-lambda/node_modules
 deploy/aws-lambda/main
-deploy/aws-lambda/.serverless
+deploy/aws-lambda/.serverless
+
+website/cypress/videos
+website/cypress/screenshots

website/cypress.json

@@ -0,0 +1,3 @@
+{
+    "baseUrl": "http://localhost:3000"
+}

website/cypress/fixtures/data.txt

@@ -0,0 +1 @@
+hello world

website/cypress/integration/create_secret.js

@@ -0,0 +1,56 @@
+describe('Create Secret', function () {
+  let polyfill;
+
+  before(() => {
+    const polyfillUrl = 'https://unpkg.com/unfetch/dist/unfetch.umd.js';
+
+    cy.request(polyfillUrl).then((response) => {
+      polyfill = response.body;
+    });
+  });
+
+  beforeEach(() => {
+    cy.server();
+    cy.route({
+      method: 'POST',
+      url: '/secret',
+      response: { message: '75c3383d-a0d9-4296-8ca8-026cc2272271' },
+    }).as('post');
+
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        delete win.fetch;
+        win.eval(polyfill);
+        win.fetch = win.unfetch;
+      },
+    });
+  });
+
+  it('create secret', () => {
+    cy.get('textarea').type('hello world');
+    cy.contains('Encrypt Message').click();
+    cy.get('#full-i').should(
+      'contain.value',
+      'http://localhost:3000/#/s/75c3383d-a0d9-4296-8ca8-026cc2272271',
+    );
+    cy.get('@post').should((req) => {
+      console.log(req.request.body.message);
+      cy.route({
+        method: 'GET',
+        url: '/secret/75c3383d-a0d9-4296-8ca8-026cc2272271',
+        response: {
+          message: req.request.body.message,
+        },
+      });
+      expect(req.method).to.equal('POST');
+      expect(req.request.body.expiration).to.equal(3600);
+      expect(req.request.body.one_time).to.equal(true);
+    });
+    cy.get('#full-i')
+      .invoke('val')
+      .then((text) => {
+        cy.visit(text);
+        cy.contains('hello world');
+      });
+  });
+});

website/cypress/integration/upload_file.js

@@ -0,0 +1,63 @@
+describe('Upload/Download File', function () {
+  let polyfill;
+
+  before(() => {
+    const polyfillUrl = 'https://unpkg.com/unfetch/dist/unfetch.umd.js';
+
+    cy.request(polyfillUrl).then((response) => {
+      polyfill = response.body;
+    });
+  });
+
+  beforeEach(() => {
+    cy.server();
+    cy.route({
+      method: 'POST',
+      url: '/file',
+      response: { message: '75c3383d-a0d9-4296-8ca8-026cc2272271' },
+    }).as('post');
+
+    cy.visit('#/upload', {
+      onBeforeLoad(win) {
+        delete win.fetch;
+        win.eval(polyfill);
+        win.fetch = win.unfetch;
+      },
+    });
+  });
+
+  it('create secret', () => {
+    const yourFixturePath = 'data.txt';
+    cy.get('input').attachFile(yourFixturePath);
+    cy.get('#full-i').should(
+      'contain.value',
+      'http://localhost:3000/#/f/75c3383d-a0d9-4296-8ca8-026cc2272271',
+    );
+    cy.get('@post').should((req) => {
+      console.log(req.request.body.message);
+      cy.route({
+        method: 'GET',
+        url: '/file/75c3383d-a0d9-4296-8ca8-026cc2272271',
+        response: {
+          message: req.request.body.message,
+        },
+      });
+      expect(req.method).to.equal('POST');
+      expect(req.request.body.expiration).to.equal(3600);
+      expect(req.request.body.one_time).to.equal(true);
+    });
+    cy.get('#full-i')
+      .invoke('val')
+      .then((text) => {
+        cy.visit(text);
+        cy.contains(
+          'Downloading file and decrypting in browser, please hold...',
+        );
+        // File downloads not supported in headless mode.
+        // https://github.com/cypress-io/cypress/issues/949
+        //cy.readFile('cypress/downloads/data.txt').then((f) => {
+        //  expect(f).to.equal('hello world');
+        //});
+      });
+  });
+});

website/cypress/plugins/index.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// 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)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+const path = require('path');
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  // on('before:browser:launch', (browser = {}, launchOptions) => {
+  //   const downloadDirectory = path.join(__dirname, '..', 'downloads');
+  //   if (browser.family === 'chromium') {
+  //     launchOptions.preferences.default['download'] = {
+  //       default_directory: downloadDirectory,
+  //     };
+  //   }
+  //   return launchOptions;
+  // });
+};

website/cypress/support/commands.js

@@ -0,0 +1,26 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+import 'cypress-file-upload';

website/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// 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.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

website/package.json

@@ -25,7 +25,10 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "cypress": "cypress open",
+    "cy:run": "cypress run",
+    "ci": "start-server-and-test start http://localhost:3000 cy:run"
   },
   "devDependencies": {
     "@testing-library/react": "^9.5.0",
@@ -40,6 +43,8 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/reactstrap": "^8.4.2",
     "@types/testing-library__react": "^10.0.1",
+    "cypress": "^4.8.0",
+    "cypress-file-upload": "^4.0.7",
     "typescript": "^3.9.3"
   },
   "prettier": {

website/tsconfig.json

@@ -16,7 +16,7 @@
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noImplicitAny": true,
-    "importHelpers": true,
+    "importHelpers": false,
     "strictNullChecks": true,
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,