fix(tests): Test avatar upload (#362)

Follow up of PR #358. Contributes to #199.

Also:
- removes all Webdriver leftovers;
- converts all Cypress support files to TypeScript;
- stops running Cypress tests from the "Docker" CI workflow. (too complicated for too little added value)

.github/workflows/docker.yml

@@ -31,8 +31,4 @@ jobs:
         run: |
           docker-compose exec -T web npm run test-api
 
-      - name: Run Cypress E2E tests
-        run: |
-          npx cypress@3.8.3 run --config pluginsFile=false # because plugins/index.js requires typescript, which is not installed in this production image
-
 # To publish the Docker image from here, see https://github.com/openwhyd/openwhyd/pull/308/commits/1eacaa98885789642ba0073c9bb4d822021f0d95#diff-12a86cef0c4707531fdbabac3e38cb2aR36

cypress.json

@@ -1,5 +1,6 @@
 {
   "screenshotOnRunFailure": false,
   "video": false,
+  "chromeWebSecurity": false,
   "baseUrl": "http://localhost:8080"
 }

cypress/integration/upload.spec.ts

@@ -1,4 +1,5 @@
 context('upload', () => {
+  const SAMPLE_IMG_PATH = 'upload-resources/sample-avatar.jpg';
   let userId;
 
   beforeEach('login', () => {
@@ -14,78 +15,30 @@ context('upload', () => {
     cy.request(`/images/blank_user.gif`).then((response) => {
       defaultImageBody = response.body;
     });
-    cy.request(`/img/u/${userId}?_t=${new Date().getTime()}`).should(
-      (response) => {
-        expect(response.body).to.equal(defaultImageBody);
-      }
+    cy.request(
+      `/img/u/${userId}?_t=${new Date().getTime()}`
+    ).should((response) =>
+      expect(response.body.length).to.equal(defaultImageBody.length)
     );
 
-    // upload a new profile image
+    // open the "edit profile" dialog
     cy.visit(`/u/${userId}`); // user's profile page
     cy.get('body').contains('Edit profile').click();
     cy.get('body').contains('Edit Profile Info').click();
+    cy.get('body').contains('Drop your image file here'); // to wait for upload scripts to load and init propertly on the page
 
-    // TODO: make the following tests (from webdriver) work:
-    /*
-    it(`upload sample avatar`, function() {
-      browser.pause(200);
-      var path = __dirname + 'test/specs/upload-resources/sample-avatar.jpg';
-      // 0. display form and file input (for browser security reasons)
-      browser.execute(function() {
-        $('#avatarForm').show();
-      });
-      browser.pause(200);
-      // 1. add file input
-      $('input[type="file"]').addValue(path);
-      browser.pause(200);
-      //browser.keys(path);
-      $('input[type="file"]').keys(path);
-      $('#avatarForm').submitForm();
-      browser.pause(200);
-      // 2. simulate drag and drop
-      / *
-      browser.execute(function(path) {
-        var files = [ path ];
-        var eve = document.createEvent("HTMLEvents");
-        eve.initEvent("drop", true, true);
-        eve.type = "drop";
-        eve.dataTransfer = {
-          preventDefault: function() {},
-          files: files,
-          item: function(i) { return files[i]; },
-        };
-        document.getElementById("avatarDrop").dispatchEvent(eve);
-        $('#avatarDrop')[0].ondrop({ preventDefault: function(){}, dataTransfer: { files: files } });
-      }, path);
-      * /
-      // test in browser:
-      // var path = '/Users/adrienjoly/dev/openwhyd/openwhyd/test/specs/upload-resources/sample-avatar.jpg';
-      // $('input[type="file"]').val(path); // does not work, for security reasons
-      // $('#avatarDrop')[0].ondrop({ preventDefault: function(){}, dataTransfer: { files: [ path ] } });
-    });
-
-    it(`save profile changes`, function() {
-      browser.pause(5000)
-      browser.clickOnContent('Save');
-    });
-
-    it(`has new avatar"`, function async() {
-      return new Promise(function (resolve, reject) {
-        browser.pause(1000).then(function() {
-          //assert.ok(!/blank_user.gif/.test($('.avatar-box img').getAttribute('src')));
-          request(`${URL_PREFIX}/img/u/${ADMIN_USER.id}?_t=${new Date().getTime()}`, function (error, response, body) {
-            console.log('defaultAvatarLen', defaultAvatarLen);
-            console.log('current avatar length', body.length);
-            assert.notEqual(defaultAvatarLen, body.length);
-            resolve();
-          });
-        });
-      });
-    });
+    // upload a new profile image
+    cy.get('input[type="file"]').attachFile(SAMPLE_IMG_PATH); // to upload the file
+    cy.get('body').contains('Drop your image file here'); // to wait for the progress bar to disappear
+    cy.wait(1000); // to wait for the form to be ready to save
+    cy.get('body').contains('Save').scrollIntoView().click({ force: true });
+    cy.wait(1000); // to wait for the dialog to close and page to refresh
 
-    it(`should output browser log`, function () {
-      console.log('browser log:', browser.log('browser').value.slice(-10));
-    });
-    */
+    // check that the user's profile image was updated
+    cy.request(
+      `/img/u/${userId}?_t=${new Date().getTime()}`
+    ).should((response) =>
+      expect(response.body.length).not.to.equal(defaultImageBody.length)
+    );
   });
 });

cypress/plugins/index.ts

@@ -0,0 +1,3 @@
+module.exports = (on) => {
+  on; // e.g. on('file:preprocessor', cypressTypeScriptPreprocessor);
+};

cypress/support/commands.js → cypress/support/commands.ts

@@ -1,5 +1,7 @@
 /* global Cypress, cy */
 
+import 'cypress-file-upload';
+
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite

cypress/support/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="cypress" />
-
 // To let TypeScript compiler know that we have added a custom command and have IntelliSense working
 // (see https://github.com/cypress-io/cypress-example-todomvc#cypress-intellisense)
 

cypress/support/index.js → cypress/support/index.ts

@@ -15,7 +15,9 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-require('./commands');
+/// <reference types="./" />
+
+import './commands';
 
 beforeEach(function () {
   // reset the db before each it() test, across all files no matter what,

package.json

@@ -71,6 +71,7 @@
     "@semantic-release/git": "^9.0.0",
     "all-contributors-cli": "6.17.2",
     "cypress": "^5.1.0",
+    "cypress-file-upload": "^4.1.1",
     "eslint": "^7.8.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",

tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "include": ["node_modules/cypress", "**/*.js", "cypress/*/*.ts"]
+  "include": ["node_modules/cypress", "cypress/*/*.ts", "cypress/*/*.d.ts"]
 }