updated integration tests for new ui

app/ui/archiveTile.js

@@ -196,6 +196,7 @@ module.exports.wip = function(state, emit) {
     ${expiryOptions(state, emit)}
     ${password(state, emit)}
     <button
+      id="upload-btn"
       class="flex-none border rounded bg-blue text-white mt-2 py-2 px-6"
       title="${state.translate('uploadFilesButton')}"
       onclick=${upload}>
@@ -314,6 +315,7 @@ module.exports.preview = function(state, emit) {
     ${archiveDetails(state.translate, archive)}
     <hr class="w-full border-t">
     <button
+      id="download-btn"
       class="flex-none border rounded bg-blue text-white mt-2 py-2 px-6"
       title="${state.translate('downloadButtonLabel')}"
       onclick=${download}>

app/ui/copyDialog.js

@@ -10,7 +10,7 @@ module.exports = function(name, url) {
         'copyUrlFormLabelWithName',
         { filename: name }
       )}</p>
-      <input type="text" class="w-full my-4 border rounded leading-loose" value=${url} readonly="true"/>
+      <input type="text" id="share-url" class="w-full my-4 border rounded leading-loose" value=${url} readonly="true"/>
       <button class="border rounded bg-blue text-white leading-loose w-full" onclick=${copy}>
         ${state.translate('copyUrlFormButton')}
       </button>

app/ui/download.js

@@ -87,7 +87,7 @@ module.exports = function(state, emit) {
         break;
       case 'complete':
         content = html`
-        <div class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2">
+        <div id="download-complete" class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2">
           <h1 class="text-center">${state.translate('downloadFinish')}</h1>
           <p class="">
             <a href="/" class="text-blue">${state.translate(

test/integration/download-tests.js

@@ -1,13 +1,13 @@
-/* global browser document */
+/* global browser */
 const assert = require('assert');
 const fs = require('fs');
 const path = require('path');
 
 const DownloadPage = require('./pages/desktop/download_page');
 const HomePage = require('./pages/desktop/home_page');
-const SharePage = require('./pages/desktop/share_page');
 
 describe('Firefox Send', function() {
+  const homePage = new HomePage();
   const downloadDir =
     browser.desiredCapabilities['moz:firefoxOptions']['prefs'][
       'browser.download.dir'
@@ -16,35 +16,21 @@ describe('Firefox Send', function() {
   const testFiles = fs.readdirSync(testFilesPath);
 
   beforeEach(function() {
-    browser.url('/');
+    homePage.open();
-    browser.execute(() => {
-      document.getElementById('file-upload').style.display = 'block';
-    });
-    browser.waitForExist('#file-upload');
   });
 
   testFiles.forEach(file => {
     it(`should upload and download files, file: ${file}`, function() {
-      browser.execute(() => {
+      browser.chooseFile(homePage.uploadInput, `${testFilesPath}/${file}`);
-        document.getElementById('file-upload').style.display = 'block';
+      browser.waitForExist(homePage.uploadButton);
-      });
+      browser.click(homePage.uploadButton);
-      browser.waitForExist('#file-upload');
+      browser.waitForExist(homePage.shareUrl);
-      const homePage = new HomePage();
+      const downloadPage = new DownloadPage(
-      browser.chooseFile('#file-upload', `${testFilesPath}/${file}`);
+        browser.getValue(homePage.shareUrl)
-      browser.click(homePage.readyToSend);
+      );
-      const sharePage = new SharePage();
+      downloadPage.open();
-      browser.waitForExist(sharePage.fileUrl);
+      downloadPage.download();
-      browser.url(browser.getValue(sharePage.fileUrl));
+      browser.waitForExist(downloadPage.downloadComplete);
-      const downloadPage = new DownloadPage();
-      downloadPage.waitForPageToLoad();
-      downloadPage.downloadBtn();
-      // Wait for download to complete
-      browser.waitUntil(() => {
-        browser.waitForExist(downloadPage.downloadComplete);
-        return (
-          browser.getText(downloadPage.downloadComplete) === 'DOWNLOAD COMPLETE'
-        );
-      });
       assert.ok(fs.existsSync(path.join(downloadDir, file)));
     });
   });

test/integration/homepage-tests.js

@@ -3,45 +3,30 @@ const assert = require('assert');
 const HomePage = require('./pages/desktop/home_page');
 
 describe('Firefox Send homepage', function() {
+  const homePage = new HomePage();
   const baseUrl = browser.options['baseUrl'];
-  const legalLinks = [
+  const footerLinks = [
     'legal',
     'about',
     'legal',
     'cookies',
-    'report-infringement'
+    'report-infringement',
+    'github',
+    'twitter'
   ];
-  const socialLinks = ['github', 'twitter', 'mozilla'];
 
   beforeEach(function() {
-    browser.url('/');
+    homePage.open();
-    browser.pause(500);
   });
 
   it('should have the right title', function() {
     assert.equal(browser.getTitle(), 'Firefox Send');
   });
 
-  legalLinks.forEach((link, i) => {
+  footerLinks.forEach((link, i) => {
-    it(`should navigate to the correct legal pages, page: ${link}`, function() {
+    it(`should navigate to the correct page: ${link}`, function() {
-      const homePage = new HomePage();
       // Click links on bottom of page
-      const els = browser.elements(homePage.legalLinks);
+      const els = browser.elements(homePage.footerLinks);
-      browser.elementIdClick(els.value[i].ELEMENT);
-      // Wait for page to load
-      browser.waitUntil(() => {
-        const url = browser.getUrl();
-        return url !== baseUrl;
-      });
-      assert.ok(browser.getUrl().includes(link));
-    });
-  });
-
-  socialLinks.forEach((link, i) => {
-    it(`should navigate to the correct social pages, page: ${link}`, function() {
-      const homePage = new HomePage();
-      // Click links on bottom of page
-      const els = browser.elements(homePage.socialLinks);
       browser.elementIdClick(els.value[i].ELEMENT);
       // Wait for page to load
       browser.waitUntil(() => {

test/integration/pages/desktop/download_page.js

@@ -2,10 +2,10 @@
 const Page = require('./page');
 
 class DownloadPage extends Page {
-  constructor() {
+  constructor(path) {
-    super();
+    super(path);
-    this.downloadBtnLocator = '.btn--download';
+    this.downloadButton = '#download-btn';
-    this.downloadCompletedLocator = '.btn--complete';
+    this.downloadComplete = '#download-complete';
   }
 
   /**
@@ -14,21 +14,12 @@ class DownloadPage extends Page {
    * @throws ElementNotFound
    */
   waitForPageToLoad() {
-    browser.waitUntil(() => {
+    browser.waitForExist(this.downloadButton);
-      browser.waitForExist(this.downloadBtnLocator);
-      const el = browser.element(this.downloadBtnLocator);
-      return browser.elementIdDisplayed(el.value.ELEMENT);
-    });
     return this;
   }
 
-  downloadBtn() {
+  download() {
-    this.waitForPageToLoad();
+    return browser.click(this.downloadButton);
-    return browser.click(this.downloadBtnLocator);
-  }
-
-  get downloadComplete() {
-    return this.downloadCompletedLocator;
   }
 }
 module.exports = DownloadPage;

test/integration/pages/desktop/home_page.js

@@ -1,23 +1,26 @@
+/* global browser document */
 const Page = require('./page');
 
 class HomePage extends Page {
   constructor() {
-    super();
+    super('/');
-    this.legalSectionLinks = '.legalSection .legalSection__link';
+    this.footerLinks = 'footer a';
-    this.readyToSendLocator = 'div#page-one button.btn';
+    this.uploadInput = '#file-upload';
-    this.socialLinksLocator = '.socialSection__link';
+    this.uploadButton = '#upload-btn';
+    this.progress = 'progress';
+    this.shareUrl = '#share-url';
   }
 
-  get legalLinks() {
+  waitForPageToLoad() {
-    return this.legalSectionLinks;
+    browser.waitForExist(this.uploadInput);
+    this.showUploadInput();
+    return this;
   }
 
-  get readyToSend() {
+  showUploadInput() {
-    return this.readyToSendLocator;
+    browser.execute(() => {
-  }
+      document.getElementById('file-upload').style.display = 'block';
-
+    });
-  get socialLinks() {
-    return this.socialLinksLocator;
   }
 }
 module.exports = HomePage;

test/integration/pages/desktop/page.js

@@ -1,9 +1,11 @@
 /* global browser */
 class Page {
-  constructor() {}
+  constructor(path) {
+    this.path = path;
+  }
 
-  open(path) {
+  open() {
-    browser.url(path);
+    browser.url(this.path);
     this.waitForPageToLoad();
   }
 
@@ -12,6 +14,8 @@ class Page {
    * @returns {Object} An object representing the page.
    * @throws ElementNotFound
    */
-  waitForPageToLoad() {}
+  waitForPageToLoad() {
+    return this;
+  }
 }
 module.exports = Page;

test/integration/pages/desktop/progress_page.js

@@ -1,31 +0,0 @@
-/* global browser */
-const Page = require('./page');
-const SharePage = require('./share_page');
-
-class ProgressPage extends Page {
-  constructor() {
-    super();
-    this.cancelBtnLocator = '.uploadCancel';
-    this.progressIconLocator = '.btn--stripes';
-  }
-
-  /**
-   * @function waitForPageToLoad
-   * @returns {Object} An object representing the Share page.
-   * @throws ElementNotFound
-   */
-  waitForPageToLoad() {
-    browser.waitUntil(() => {
-      browser.waitForExist(this.progressIconLocator);
-      const el = browser.element(this.progressIconLocator);
-      return browser.elementIdDisplayed(el.value.ELEMENT);
-    });
-    const sharePage = new SharePage();
-    return sharePage.waitForPageToLoad();
-  }
-
-  get cancelBtn() {
-    return this.cancelBtnLocator;
-  }
-}
-module.exports = ProgressPage;

test/integration/pages/desktop/share_page.js

@@ -1,24 +0,0 @@
-/* global browser */
-const Page = require('./page');
-
-class SharePage extends Page {
-  constructor() {
-    super();
-    this.sharePageLocator = '#shareWrapper';
-    this.shareUrlLocator = '#fileUrl';
-  }
-
-  waitForPageToLoad() {
-    browser.waitUntil(() => {
-      browser.waitForExist(this.sharePageLocator);
-      const el = browser.element(this.sharePageLocator);
-      return browser.elementIdDisplayed(el.value.ELEMENT);
-    });
-    return this;
-  }
-
-  get fileUrl() {
-    return this.shareUrlLocator;
-  }
-}
-module.exports = SharePage;

test/integration/progress-tests.js

@@ -1,22 +1,18 @@
-/* global browser document */
+/* global browser */
 const assert = require('assert');
-const ProgressPage = require('./pages/desktop/progress_page');
 const HomePage = require('./pages/desktop/home_page');
 
 describe('Firefox Send progress page', function() {
+  const homePage = new HomePage();
   beforeEach(function() {
-    browser.url('/');
+    homePage.open();
   });
 
-  it('should show an icon while an upload is in progress', function() {
+  it('should show progress when a file is uploading', function() {
-    browser.execute(() => {
+    browser.chooseFile(homePage.uploadInput, __filename);
-      document.getElementById('file-upload').style.display = 'block';
+    browser.waitForExist(homePage.uploadButton);
-    });
+    browser.click(homePage.uploadButton);
-    browser.waitForExist('#file-upload');
+
-    const homePage = new HomePage();
+    assert.ok(browser.waitForExist(homePage.progress));
-    browser.chooseFile('#file-upload', __filename);
-    browser.click(homePage.readyToSend);
-    const progressPage = new ProgressPage();
-    assert.ok(progressPage.waitForPageToLoad());
   });
 });