test: working provider e2e test for local env

package.json

@@ -198,7 +198,7 @@
     "test:endtoend:build-ci": "./bin/endtoend-build-ci",
     "test:endtoend:build": "./bin/endtoend-build",
     "test:endtoend:local": "npm run test:endtoend:build && wdio test/endtoend/wdio.local.conf.js",
-    "test:endtoend:providers": "npm run test:endtoend:build && . ./test/endtoend/providers/env.sh && wdio test/endtoend/wdio.local.conf.js --spec test/endtoend/providers/disabled.test.js",
+    "test:endtoend:providers": "npm run test:endtoend:build && . ./test/endtoend/providers/env.sh && wdio test/endtoend/wdio.local.conf.js --spec test/endtoend/providers/provider.*.test.js",
     "test:endtoend:prepare-ci": "npm-run-all --parallel --race test:endtoend:registry test:endtoend:build-ci",
     "test:endtoend:registry": "verdaccio --listen 4002 --config test/endtoend/verdaccio.yaml",
     "test:endtoend": "npm run test:endtoend:prepare-ci && wdio test/endtoend/wdio.remote.conf.js",

test/endtoend/providers/disabled.test.js

@@ -1,157 +0,0 @@
-/* global browser  */
-
-/*
-  WARNING! PLEASE READ THIS BEFORE ENABLING THIS TEST ON TRAVIS.
-
-  Before enabling this test on travis, please keep in mind that with this "no_ssl_bump_domains" option set
-  here https://github.com/transloadit/uppy/blob/998c7b1805acb8d305a562dd9726ebae98575e07/.travis.yml#L33
-  SSL encryption may not be enabled between the running companion and the testing browser client.
-
-  Hence, provider tokens (Google, Instagram, Dropbox) may be at risk of getting hijacked.
-*/
-const testURL = 'http://localhost:4567/providers'
-
-describe('File upload with Providers', () => {
-  beforeEach(() => {
-    // close other tabs that might be left from failed tests
-    while (browser.getTabIds().length > 1) {
-      browser.switchTab(browser.getTabIds()[1])
-      browser.close()
-    }
-
-    browser.url(testURL)
-  })
-
-  // not using arrow functions as cb so to keep mocha in the 'this' context
-  it('should upload a file completely with Google Drive', function () {
-    if (process.env.UPPY_GOOGLE_EMAIL == undefined) {
-      console.log('skipping Google Drive integration test')
-      return this.skip()
-    }
-
-    // ensure session is cleared
-    startUploadTest(browser, 'GoogleDrive')
-    signIntoGoogle(browser)
-    finishUploadTest(browser)
-  })
-
-  // not using arrow functions as cb so to keep mocha in the 'this' context
-  it('should upload a file completely with Instagram', function () {
-    const isFirefox = browser.desiredCapabilities.browserName === 'firefox'
-    if (process.env.UPPY_INSTAGRAM_USERNAME == undefined || !isFirefox) {
-      console.log('skipping Instagram integration test')
-      return this.skip()
-    }
-
-    // ensure session is cleared
-    startUploadTest(browser, 'Instagram')
-    // do oauth authentication
-    browser.waitForExist('input[name=username]', 20000)
-    browser.setValue('input[name=username]', process.env.UPPY_INSTAGRAM_USERNAME)
-    browser.setValue('input[name=password]', process.env.UPPY_INSTAGRAM_PASSWORD)
-    browser.click('form button[type=submit]')
-    if (browser.getTabIds().length > 1) {
-      // wait a bit for submission
-      browser.pause(3000)
-      // if suspicious login was detected, the window will remain unclosed
-      // so we have to input the security code sent
-      if (browser.isExisting('input[name="choice"]')) {
-        browser.click('form button')
-        browser.waitForExist('input[name=security_code]')
-        // we can't automate the submission of security code
-        // because it is sent to the email. So we wait till it is filled manually
-        browser.waitUntil(
-          () => browser('input[name=security_code]').getValue(),
-          30000, 'expected security code to be manually entered')
-      }
-
-      // instagram may ask for auth confirmation to allow companion
-      if (browser.isExisting('button[value="Authorize"]')) {
-        browser.click('button[value="Authorize"]')
-      }
-    }
-
-    finishUploadTest(browser)
-  })
-
-  // not using arrow functions as cb so to keep mocha in the 'this' context
-  it('should upload a file completely with Dropbox', function () {
-    if (process.env.UPPY_GOOGLE_EMAIL === undefined) {
-      console.log('skipping Dropbox integration test')
-      return this.skip()
-    }
-
-    // ensure session is cleared
-    startUploadTest(browser, 'Dropbox')
-    // do oauth authentication
-    browser.waitForVisible('button.auth-google')
-    browser.click('button.auth-google')
-    browser.pause(3000)
-    // we login with google to avoid captcha
-    signIntoGoogle(browser)
-    browser.pause(5000)
-    // if we dropbox displays a warning about trusting the companion app
-    //  we allow it because we trust companion. Companion is our friend.
-    if (browser.isExisting('#warning-button-continue')) {
-      browser.click('#warning-button-continue')
-    }
-
-    browser.pause(3000)
-    // finish oauth
-    browser.waitForVisible('button[name=allow_access]')
-    browser.click('button[name=allow_access]')
-
-    finishUploadTest(browser)
-  })
-})
-
-const startUploadTest = (browser, providerName) => {
-  browser.click(`.uppy-DashboardTab-btn[aria-controls=uppy-DashboardContent-panel--${providerName}]`)
-  browser.waitForVisible('.uppy-Provider-authBtn', 3000)
-  browser.click('.uppy-Provider-authBtn')
-  // move control to instagram auth tab
-  browser.switchTab(browser.getTabIds()[1])
-}
-
-const finishUploadTest = (browser) => {
-  // switch back to uppy tab
-  browser.switchTab(browser.getTabIds()[0])
-  browser.waitForVisible('.uppy-ProviderBrowser-list li.uppy-ProviderBrowserItem')
-  browser.click('.uppy-ProviderBrowser-list li.uppy-ProviderBrowserItem:last-child button')
-
-  browser.waitForVisible('.uppy-ProviderBrowser-footer .uppy-u-reset.uppy-c-btn.uppy-c-btn-primary')
-  browser.click('.uppy-ProviderBrowser-footer .uppy-u-reset.uppy-c-btn.uppy-c-btn-primary')
-  browser.waitForVisible('.uppy-StatusBar-content[title="Complete"]', 20000)
-}
-
-const signIntoGoogle = (browser) => {
-  if (browser.isExisting(`li div[data-identifier="${process.env.UPPY_GOOGLE_EMAIL}"]`)) {
-    // if user is already signed in, just select user
-    browser.click(`li div[data-identifier="${process.env.UPPY_GOOGLE_EMAIL}"]`)
-    return
-  }
-
-  browser.waitForExist('#identifierId')
-  browser.setValue('#identifierId', process.env.UPPY_GOOGLE_EMAIL)
-  browser.click('#identifierNext')
-  browser.waitForVisible('input[name=password]')
-  browser.setValue('input[name=password]', process.env.UPPY_GOOGLE_PASSWORD)
-  browser.click('#passwordNext')
-  // if suspicious login was detected, the window will remain unclosed
-  // so we have to confirm the recovery email or phone no
-  if (browser.getTabIds().length > 1) {
-    // confirm recovery email option
-    if (browser.isExisting('li div[data-challengetype="12"]')) {
-      browser.click('li div[data-challengetype="12"]')
-      browser.waitForVisible('input[name=knowledgePreregisteredEmailResponse]')
-      browser.setValue('input[name=knowledgePreregisteredEmailResponse]', process.env.UPPY_GOOGLE_RECOVERY_EMAIL)
-      browser.click('#next[role=button]')
-      // confirm recovery phone number
-    } else if (browser.isExisting('#countryList')) {
-      browser.click('div#countryList')
-      browser.click('div[data-value=nl]')
-      browser.setValue('input#phoneNumberId', process.env.UPPY_GOOGLE_PHONE_NO)
-      browser.click('#next[role=button]')
-    }
-  }
-}

test/endtoend/providers/helper.js

@@ -0,0 +1,25 @@
+exports.finishUploadTest = async (browser) => {
+  // switch back to uppy tab
+  await browser.switchWindow(/localhost/)
+  const fileItem = await browser.$('.uppy-ProviderBrowser-list li.uppy-ProviderBrowserItem:last-child button')
+  await fileItem.waitForDisplayed()
+  await fileItem.click()
+
+  const uploadButton = await browser.$('.uppy-ProviderBrowser-footer .uppy-u-reset.uppy-c-btn.uppy-c-btn-primary')
+  await uploadButton.click()
+  const completeBar = await browser.$('.uppy-StatusBar-content[title="Complete"]')
+  await completeBar.waitForDisplayed(20000)
+}
+
+exports.startUploadTest = async (browser, providerName, tabMatch) => {
+  const providerButton = await browser.$(
+    `.uppy-DashboardTab-btn[aria-controls=uppy-DashboardContent-panel--${providerName}]`)
+  await providerButton.click()
+  await browser.pause(2000)
+  const authButton = await browser.$('.uppy-Provider-authBtn')
+  await authButton.waitForDisplayed()
+  await authButton.click()
+  await browser.pause(5000)
+  // move control to provider oauth tab
+  await browser.switchWindow(tabMatch)
+}

test/endtoend/providers/main.js

@@ -8,7 +8,7 @@ const Dropbox = require('@uppy/dropbox')
 const Tus = require('@uppy/tus')
 
 const isOnTravis = !!(process.env.TRAVIS && process.env.CI)
-const companionUrl = isOnTravis ? 'http://companion.test:3030' : 'http://localhost:3030'
+const companionUrl = isOnTravis ? 'http://companion.test:3030' : 'http://localhost:3020'
 
 window.uppy = Uppy({
   id: 'uppyProvider',
@@ -22,4 +22,4 @@ window.uppy = Uppy({
   .use(GoogleDrive, { target: Dashboard, companionUrl })
   .use(Instagram, { target: Dashboard, companionUrl })
   .use(Dropbox, { target: Dashboard, companionUrl })
-  .use(Tus, { endpoint: 'http://localhost:1080/files/' })
+  .use(Tus, { endpoint: 'https://master.tus.io/files/' })

test/endtoend/providers/provider.dropbox.test.js

@@ -0,0 +1,79 @@
+/* global browser  */
+
+/*
+  WARNING! PLEASE READ THIS BEFORE ENABLING THIS TEST ON TRAVIS.
+
+  Before enabling this test on travis, please keep in mind that with this "no_ssl_bump_domains" option set
+  here https://github.com/transloadit/uppy/blob/998c7b1805acb8d305a562dd9726ebae98575e07/.travis.yml#L33
+  SSL encryption may not be enabled between the running companion and the testing browser client.
+
+  Hence, provider tokens (Google, Instagram, Dropbox) may be at risk of getting hijacked.
+*/
+const { finishUploadTest, startUploadTest } = require('./helper')
+const testURL = 'http://localhost:4567/providers'
+
+describe('File upload with Dropbox Provider', () => {
+  beforeEach(async () => {
+    await browser.url(testURL)
+  })
+
+  // not using arrow functions as cb so to keep mocha in the 'this' context
+  it('should upload a file completely with Dropbox', async function () {
+    if (!process.env.UPPY_GOOGLE_EMAIL) {
+      console.log('skipping Dropbox integration test')
+      return this.skip()
+    }
+
+    // ensure session is cleared
+    await startUploadTest(browser, 'Dropbox', /dropbox/)
+    // do oauth authentication
+    const authButton = await browser.$('button.auth-google')
+    await authButton.waitForDisplayed()
+    await authButton.click()
+    await browser.pause(3000)
+    // we login with google to avoid captcha
+    await signIntoGoogle(browser)
+    await browser.pause(5000)
+    // if we dropbox displays a warning about trusting the companion app
+    //  we allow it because we trust companion. Companion is our friend.
+    const acceptWarning = await browser.$('#warning-button-continue')
+    if (await acceptWarning.isExisting()) {
+      await acceptWarning.click()
+    }
+
+    await browser.pause(3000)
+    // finish oauth
+    const allowAccessButton = await browser.$('button[name=allow_access]')
+    await allowAccessButton.waitForDisplayed()
+    await allowAccessButton.click()
+
+    await finishUploadTest(browser)
+  })
+})
+
+const signIntoGoogle = async (browser) => {
+  const emailInput = await browser.$('#identifierId')
+  await emailInput.waitForExist(30000)
+  await emailInput.setValue(process.env.UPPY_GOOGLE_EMAIL)
+  let nextButton = await browser.$('#identifierNext')
+  await nextButton.click()
+
+  const passwordInput = await browser.$('input[name=password]')
+  await passwordInput.waitForDisplayed(30000)
+  await passwordInput.setValue(process.env.UPPY_GOOGLE_PASSWORD)
+  nextButton = await browser.$('#passwordNext')
+  await nextButton.click()
+  await browser.pause(3000)
+
+  const emailListItem = await browser.$(`li div[data-identifier="${process.env.UPPY_GOOGLE_EMAIL}"]`)
+  if (await emailListItem.isExisting()) {
+    // if user is already signed in, just select user
+    await emailListItem.click()
+  }
+
+  const allowDropboxButton = await browser.$('#submit_approve_access')
+  if (await allowDropboxButton.isExisting()) {
+    // if dropbox has never been allowed, allow it
+    await allowDropboxButton.click()
+  }
+}

test/endtoend/providers/provider.google.test.js

@@ -0,0 +1,46 @@
+/* global browser  */
+
+/*
+  WARNING! PLEASE READ THIS BEFORE ENABLING THIS TEST ON TRAVIS.
+
+  Before enabling this test on travis, please keep in mind that with this "no_ssl_bump_domains" option set
+  here https://github.com/transloadit/uppy/blob/998c7b1805acb8d305a562dd9726ebae98575e07/.travis.yml#L33
+  SSL encryption may not be enabled between the running companion and the testing browser client.
+
+  Hence, provider tokens (Google, Instagram, Dropbox) may be at risk of getting hijacked.
+*/
+const { finishUploadTest, startUploadTest } = require('./helper')
+const testURL = 'http://localhost:4567/providers'
+
+describe('File upload with Google Drive Provider', () => {
+  beforeEach(async () => {
+    await browser.url(testURL)
+  })
+
+  // not using arrow functions as cb so to keep mocha in the 'this' context
+  it('should upload a file completely with Google Drive', async function () {
+    if (!process.env.UPPY_GOOGLE_EMAIL) {
+      console.log('skipping Google Drive integration test')
+      return this.skip()
+    }
+
+    // ensure session is cleared
+    await startUploadTest(browser, 'GoogleDrive', /google/)
+    await signIntoGoogle(browser)
+    await finishUploadTest(browser)
+  })
+})
+
+const signIntoGoogle = async (browser) => {
+  const emailInput = await browser.$('#identifierId')
+  await emailInput.waitForExist(30000)
+  await emailInput.setValue(process.env.UPPY_GOOGLE_EMAIL)
+  let nextButton = await browser.$('#identifierNext')
+  await nextButton.click()
+
+  const passwordInput = await browser.$('input[name=password]')
+  await passwordInput.waitForDisplayed(30000)
+  await passwordInput.setValue(process.env.UPPY_GOOGLE_PASSWORD)
+  nextButton = await browser.$('#passwordNext')
+  await nextButton.click()
+}

test/endtoend/providers/provider.instagram.test.js

@@ -0,0 +1,67 @@
+/* global browser  */
+
+/*
+  WARNING! PLEASE READ THIS BEFORE ENABLING THIS TEST ON TRAVIS.
+
+  Before enabling this test on travis, please keep in mind that with this "no_ssl_bump_domains" option set
+  here https://github.com/transloadit/uppy/blob/998c7b1805acb8d305a562dd9726ebae98575e07/.travis.yml#L33
+  SSL encryption may not be enabled between the running companion and the testing browser client.
+
+  Hence, provider tokens (Google, Instagram, Dropbox) may be at risk of getting hijacked.
+*/
+const { finishUploadTest, startUploadTest } = require('./helper')
+const testURL = 'http://localhost:4567/providers'
+
+describe('File upload with Instagram Provider', () => {
+  beforeEach(async () => {
+    await browser.url(testURL)
+  })
+
+  // not using arrow functions as cb so to keep mocha in the 'this' context
+  it('should upload a file completely with Instagram', async function () {
+    if (!process.env.UPPY_INSTAGRAM_USERNAME) {
+      console.log('skipping Instagram integration test')
+      return this.skip()
+    }
+
+    // ensure session is cleared
+    await startUploadTest(browser, 'Instagram', /instagram/)
+    // do oauth authentication
+    const usernameInput = await browser.$('input[name=username]')
+    await usernameInput.waitForExist(20000)
+    await usernameInput.setValue(process.env.UPPY_INSTAGRAM_USERNAME)
+    const passwordInput = await browser.$('input[name=password]')
+    await passwordInput.setValue(process.env.UPPY_INSTAGRAM_PASSWORD)
+    const submit = await browser.$('form button[type=submit]')
+    await submit.click()
+    // wait a bit for submission
+    await browser.pause(5000)
+    if ((await browser.getWindowHandles()).length > 1) {
+      // if suspicious login was detected, the window will remain unclosed
+      // so we have to input the security code sent
+      const challengeChoice = await browser.$('input[name="choice"]')
+      if (await challengeChoice.isExisting()) {
+        const acceptChallengButton = await browser.$('form button')
+        await acceptChallengButton.click()
+
+        const securityCodeInput = await browser.$('input[name=security_code]')
+        await securityCodeInput.waitForExist()
+        // we can't automate the submission of security code
+        // because it is sent to the email. So we wait till it is filled manually
+        await securityCodeInput.waitUntil(
+          async () => {
+            await securityCodeInput.getValue()
+          },
+          30000, 'expected security code to be manually entered')
+      }
+
+      // instagram may ask for auth confirmation to allow companion
+      const allowButton = await browser.$('button[value="Authorize"]')
+      if (await allowButton.isExisting()) {
+        await allowButton.click()
+      }
+    }
+
+    await finishUploadTest(browser)
+  })
+})