Merge pull request #1706 from transloadit/providers-e2e-again

e2e: reintroduce e2e test for providers locally

package.json

@@ -198,6 +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/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,117 +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(() => {
-    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 || process.env.UPPY_GOOGLE_EMAIL === undefined) {
-      console.log('skipping Google Drive integration test')
-      return this.skip()
-    }
-
-    // ensure session is cleared
-    browser.reload()
-    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 () {
-    if (process.env.UPPY_INSTAGRAM_USERNAME || process.env.UPPY_INSTAGRAM_USERNAME === undefined) {
-      console.log('skipping Instagram integration test')
-      return this.skip()
-    }
-
-    // ensure session is cleared
-    browser.reload()
-    startUploadTest(browser, 'Instagram')
-    // do oauth authentication
-    browser.waitForExist('input[name=username]')
-    browser.setValue('input[name=username]', process.env.UPPY_INSTAGRAM_USERNAME)
-    browser.setValue('input[name=password]', process.env.UPPY_INSTAGRAM_PASSWORD)
-    browser.click('form button')
-
-    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 || process.env.UPPY_GOOGLE_EMAIL === undefined) {
-      console.log('skipping Dropbox integration test')
-      return this.skip()
-    }
-
-    // ensure session is cleared
-    browser.reload()
-    startUploadTest(browser, 'Dropbox')
-    // do oauth authentication
-    browser.waitForVisible('button.auth-google')
-    browser.click('button.auth-google')
-    // we login with google to avoid captcha
-    signIntoGoogle(browser)
-    // 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) => {
-  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)
-      // 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/env.example.sh

@@ -0,0 +1,4 @@
+export UPPY_INSTAGRAM_USERNAME="***"
+export UPPY_INSTAGRAM_PASSWORD="***"
+export UPPY_GOOGLE_EMAIL="***"
+export UPPY_GOOGLE_PASSWORD="****"

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)
+  })
+})

test/endtoend/wdio.local.conf.js

@@ -34,6 +34,6 @@ exports.config = {
   mochaOpts: {
     ui: 'bdd',
     reporter: 'dot',
-    timeout: 60000
+    timeout: 120000
   }
 }