WIP: Update dependencies to work on recent node versions

README.md

@@ -37,11 +37,15 @@ Then copy the `build/` folder to your web server or S3.
 ## Testing
 2 distinct test suites exist.
 
-**Unit-like tests**, under `test/specs`    
+### Unit-like tests
+These live under `test/specs`.
+
 These should be isolated and fast, with as much mocking/stubbing as possible, suitable for TDD. Run with:    
 `mocha --opts test/specs/mocha.opts test/specs` or `npm test`
 
-**Integration tests**, under `test/integration`    
+### Integration tests
+
+These live under `test/integration`
 These are end-to-end, cross-browser tests, that should test as much of the stack as possible. Currently they are run on Browser Stack against various browsers. They can be run locally against a Web Driver compatible browser client like [chromedriver](https://sites.google.com/a/chromium.org/chromedriver/) or [geckodriver](https://github.com/mozilla/geckodriver). 
 You will need a running [Catalog API](https://github.com/hotosm/oam-catalog), the repo has a Dockerfile to quickly get
 a local version of the API running. Then you can run tests with;
@@ -52,6 +56,26 @@ Note that Browserstack tests both a pinned version of the API (defined in `packa
 Because `wdio` wraps `mocha`, you can send `mocha` args via `wdio.default.conf.js`'s `mochaOpts` field. For instance `grep` has been added so you can isolate a single test run with:    
 `MOCHA_MATCH='should find imagery' wdio test/integration/wdio.local.conf.js`
 
+#### Example running on chrome
+
+1. Start oam-api:
+
+   `oam-api$ docker-compose up`
+
+2. Start chromedriver:
+
+    `chromdriver`
+
+3. Run the tests, specifying `WD_BROWSER` to point to chrome:
+
+    `WD_BROWSER="chrome" node_modules/.bin/wdio test/integration/wdio.local.conf.js`
+
+
+#### Running on your own upload bucket
+
+Note that if you have configured oam-api to target your own S3 buckets for testing, you also need
+to adapt the `uploadBucket` in `src/config/test.js`
+
 ## Contributing
 
 Contributions are very welcome. Please see [CONTRIBUTING.md](./CONTRIBUTING.md).

package.json

@@ -26,9 +26,16 @@
     "test": "NODE_ENV=test NODE_PATH=src:test/specs mocha --opts test/specs/mocha.opts test/specs/*_spec.js"
   },
   "devDependencies": {
+    "@wdio/browserstack-service": "^6.0.4",
+    "@wdio/cli": "^6.0.5",
+    "@wdio/local-runner": "^6.0.5",
+    "@wdio/mocha-framework": "^6.0.4",
+    "@wdio/spec-reporter": "^6.0.4",
+    "@wdio/sync": "^6.0.1",
     "babel-preset-react-app": "^3.1.0",
-    "chai": "^3.5.0",
-    "chai-webdriverio": "^0.3.0",
+    "chai": "^4.2.0",
+    "chai-webdriverio": "^1.0.0",
+    "chromedriver": "^80.0.1",
     "custom-react-scripts": "^0.2.0",
     "enzyme": "^2.8.2",
     "eslint": "^4.10.0",
@@ -44,10 +51,8 @@
     "react-addons-test-utils": "^15.5.1",
     "react-test-renderer": "^15.5.4",
     "source-map-explorer": "^1.4.0",
-    "wdio-browserstack-service": "^0.1.11",
-    "wdio-mocha-framework": "^0.5.10",
-    "wdio-spec-reporter": "^0.1.0",
-    "webdriverio": "^4.7.1"
+    "wdio-chromedriver-service": "^5.0.2",
+    "webdriverio": "^6.0.5"
   },
   "dependencies": {
     "classnames": "^2.2.5",
@@ -75,12 +80,14 @@
     "react-validation-mixin": "^4.2.0",
     "react-widgets": "^3.4.6",
     "reflux": "^0.4.1",
+    "sinon": "^9.0.1",
     "tilebelt": "^1.0.1",
     "titlecase": "^1.0.2",
     "turf-centroid": "^1.1.2",
     "turf-extent": "^1.0.4",
     "turf-inside": "^1.1.4",
     "turf-overlaps": "^1.0.3",
+    "wdio-spec-reporter": "^0.1.5",
     "wellknown": "^0.5.0"
   },
   "babel": {

test/integration/general_test.js

@@ -14,9 +14,9 @@ function dropDatabase() {
   }
 }
 
-function waitUntilGone(selector) {
+function waitUntilGone(selector, timeout=300000) {
   // The `true` in the third arg reverses the test, ie waiting for invisible
-  browser.waitForVisible(selector, 300000, true);
+  $(selector).waitForDisplayed({timeout: timeout, reverse: true});
 }
 
 function finishLoading() {
@@ -25,19 +25,20 @@ function finishLoading() {
 
 function logIn() {
   browser.url("#/");
-  browser.click("a=Sign In");
-  browser.waitForVisible(".facebook_login");
-  browser.click(".facebook_login");
+  $("a=Sign In").click();
+  $(".facebook_login").waitForDisplayed();
+  $(".facebook_login").click();
   if (browser.getUrl().match(/facebook.com/)) {
     // Note that if you change the user, you will need to manually
     // step in at the point where you accept authorisation of the app.
     // ie: the bit where Facebook says something like, "This app would
     // like access to your personal, click 'Accept' to continue."
-    $("#email").setValue("open_dtqgedz_user@tfbnw.net");
+    //$("#email").setValue("open_dtqgedz_user@tfbnw.net");
+    $('#email').setValue("oam_ccxaflp_user@tfbnw.net");
     $("#pass").setValue("oamtestpassword");
-    browser.click("#loginbutton");
+    $("#loginbutton").click();
   }
-  expect(browser.waitForVisible("a=Upload")).to.eq(true);
+  expect($("a=Upload").waitForDisplayed()).to.eq(true);
 }
 
 // Use the following instead once IE Edge supports cookie and localStorage deletion.
@@ -48,9 +49,10 @@ function logIn() {
 function logOut() {
   browser.keys("Escape");
   browser.pause(500);
-  browser.click("a.menu_dropdown_button");
+  $("a.menu_dropdown_button").click();
   if ($("a=Logout").isExisting()) {
-    browser.click("a=Logout");
+    $("a=Logout").click();
+    waitUntilGone(".menu-profile_pic");
   }
 }
 
@@ -59,7 +61,7 @@ function submitImagery(imageryUri, title = "Test imagery") {
   browser.url("#/upload");
   fillInUploadForm(title);
   inputRemoteImageryUri(imageryUri);
-  browser.click("button=Submit");
+  $("button=Submit").click();
   return waitForImageryProcessing();
 }
 
@@ -68,11 +70,11 @@ function waitForImageryProcessing() {
   // The file has to upload from the local machine, it is small but let's
   // give a few seconds in case there's a slow connection (like when you're
   // writing tests over your phone's 3G connection :/)
-  browser.waitForVisible("a=Check upload status.", 10000);
-  browser.click("a=Check upload status.");
-  browser.waitForVisible(".status");
+  $("a=Check upload status.").waitForDisplayed(10000);
+  $("a=Check upload status.").click();
+  $(".status").waitForDisplayed();
   for (var i = 0; i < 1000; i++) {
-    status = browser.getText(".status").toLowerCase();
+    status = $(".status").getText().toLowerCase();
     if (status !== "pending" && status !== "processing") return status;
     browser.pause(500);
   }
@@ -86,7 +88,7 @@ function fillInUploadForm(title) {
 }
 
 function inputRemoteImageryUri(imageryUri) {
-  browser.click("button=Url");
+  $("button=Url").click();
   $("#scene-0-img-loc-0-url").setValue(imageryUri);
   // The URL button is pretty sensitive, sometimes you press
   // it and 2 inputs appear.
@@ -101,7 +103,7 @@ function getImageryResults() {
   // Just give the image a few moments to get into the DB. TODO: we shouldn't
   // have to wait.
   browser.pause(1000);
-  browser.waitForExist(resultsSelector);
+  $(resultsSelector).waitForExist();
   return $$(resultsSelector);
 }
 
@@ -120,10 +122,10 @@ describe("Map", function() {
       submitImagery(everest);
       browser.url("#/");
       $("#global-search__input").setValue(["Mount Everest", "Enter"]);
-      waitUntilGone(".autocomplete__menu-item*=Loading...");
-      browser.click(".autocomplete__menu-item.is-highlighted");
+      $(".autocomplete__menu-item.is-highlighted").waitForDisplayed(1000);
+      $(".autocomplete__menu-item.is-highlighted").click();
       finishLoading();
-      browser.click("#map");
+      $('#map').click();
       finishLoading();
       let results = getImageryResults();
       expect(results.length).to.be.at.least(1);
@@ -142,25 +144,25 @@ describe("User authentication", function() {
 
     it("should log a user out", () => {
       logIn();
-      expect(".menu-profile_pic img").to.be.there();
+      expect(".menu-profile_pic").to.be.there();
       logOut();
-      expect(".menu-profile_pic img").to.not.be.there();
+      expect(".menu-profile_pic").to.not.be.there();
     });
   });
 
   describe("Preventing access", function() {
     it("should not let you access the upload page", () => {
       browser.url("#/upload");
       expect("p*=You must be logged in").to.be.there();
-      expect("p*=By submitting imagery to OpenAerialMap").to.not.be.there();
+      expect("p*=By submitting imagery to OpenAerialMap").to.not.be.displayed();
     });
   });
 
   describe("Allowing access", function() {
     it("should let you access the upload page", () => {
       logIn();
       browser.url("#/upload");
-      expect("p*=You must be logged in").to.not.be.there();
+      expect("p*=You must be logged in").to.not.be.displayed();
       expect("p*=By submitting imagery to OpenAerialMap").to.be.there();
     });
   });
@@ -175,7 +177,7 @@ describe("Imagery", function() {
         .toString(36)
         .slice(2);
       submitImagery(everest, title);
-      browser.click("a=View image");
+      $("a=View image").click();
       expect("h2=" + title).to.be.there();
       const src = $(".result-thumbnail img").getAttribute("src");
       expect(src).to.match(/_thumb/);
@@ -192,9 +194,9 @@ describe("Imagery", function() {
       logIn();
       browser.url("#/upload");
       fillInUploadForm(title);
-      browser.click("button=Local File");
+      $("button=Local File").click();
       browser.chooseFile("#scene-0-img-loc-0-url", localPath);
-      browser.click("button=Submit");
+      $("button=Submit").click();
       waitForImageryProcessing();
       expect("a=View image").to.be.there();
     });
@@ -208,8 +210,8 @@ describe("Imagery", function() {
       browser.url("#/");
       finishLoading();
       getImageryResults();
-      browser.click(".results-list li:first-child");
-      browser.click(".user-details a");
+      $(".results-list li:first-child").click();
+      $(".user-details a").click();
       finishLoading();
       expect("h2*=Open Graph Test User").to.be.there();
       expect("h2=" + title).to.be.there();
@@ -232,8 +234,8 @@ describe("Imagery", function() {
       finishLoading();
       expect(".button-zoom--in.disabled");
       // Click the 'TMS' button
-      browser.waitForVisible("button=TMS");
-      browser.click("button=TMS");
+      $("button=TMS").waitForDisplayed();
+      $("button=TMS").click();
       // TODO: waiting here is necessary because of a blocking sync AJAX hack
       // in map.js getLayerMaxZoom().
       waitUntilGone(".button-zoom--in.disabled");
@@ -247,10 +249,10 @@ describe("Imagery", function() {
       submitImagery(everest);
       browser.url("#/account");
       finishLoading();
-      browser.click("a=Edit");
+      $("a=Edit").click();
       finishLoading();
       $("#scene-0-title").setValue("A different title");
-      browser.click("button=Submit");
+      $("button=Submit").click();
       finishLoading();
       browser.url("#/account");
       finishLoading();
@@ -262,7 +264,7 @@ describe("Imagery", function() {
       browser.url("#/account");
       finishLoading();
       expect("strong=Delete me :(").to.be.there();
-      browser.click("a=Delete");
+      $("a=Delete").click();
       finishLoading();
       browser.url("#/account");
       finishLoading();

test/integration/wdio.local.conf.js

@@ -11,11 +11,11 @@ const defaultConf = require("./wdio.default.conf.js").config;
 const browserStackConf = {
   host: process.env.WD_HOST || "localhost",
   port: process.env.WD_PORT || 9515,
-  path: process.env.WD_PATH || "/wd/hub",
+  path: process.env.WD_PATH || "/",
 
   capabilities: [
     {
-      browser: process.env.WD_BROWSER || "chromium"
+      browserName: process.env.WD_BROWSER || "chromium"
     }
   ]
 };