This adds some user integration tests to aide the SoftVision team a bit. Right now I have 3 tests.

    test_upload: This will create a file and make sure it uploads by verifying a file uploads and is assigned a URL.

    test_download: This will create a file, upload it and then download it making sure it is the same filename that was uploaded. We can expand this later to maybe check the sizes and such.

    test_progress: This will create a file and make sure the progress bar shows up after it begins uploading.

    These are python tests and use Pipenv to manage dependencies as well as tox as the virtualenv manager, and finally pytest as the test runner.

.dockerignore

@@ -1,5 +1,6 @@
 node_modules
 .git
+.tox
 .DS_Store
 firefox
 assets
@@ -7,4 +8,4 @@ docs
 public
 test
 coverage
-.nyc_output
+.nyc_output

.gitignore

@@ -3,4 +3,6 @@ coverage
 dist
 .idea
 .DS_Store
-.nyc_output
+.nyc_output
+.tox
+.pytest_cache

circle.yml

@@ -31,9 +31,49 @@ jobs:
             - node_modules
       - run: npm run check
       - run: npm run lint
-      - run: npm test
+      - run: npm run test
       - store_artifacts:
           path: coverage
+  integration_tests:
+    working_directory: ~/send
+    machine: true
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - uitest-cache-{{ checksum "test/integration/Pipfile" }}
+            - uitest-cache-{{ checksum "test/integration/pipenv.txt" }}
+      - run:
+          name: Install Docker Compose
+          command: |
+            set -x
+            pip install docker-compose>=1.18
+            docker-compose --version
+      - run:
+          name: Install Tox
+          command: |
+            set -x
+            pip install tox
+      - run:
+          name: Start docker container
+          command: docker-compose up -d
+      - run:
+          name: Run User Integration Tests
+          command: |
+            npm run start:integration-docker
+            npm run test-integration-docker
+          environment:
+            MOZ_HEADLESS: 1
+      - store_artifacts:
+          path: send-test.html
+      - save_cache:
+          key: uitest-cache-{{ checksum "test/integration/Pipfile" }}
+          paths:
+            - test/integration/.tox
+      - save_cache:
+          key: uitest-cache-{{ checksum "test/integration/pipenv.txt" }}
+          paths:
+            - test/integration/.tox
   deploy_dev:
     machine: true
     steps:
@@ -58,6 +98,7 @@ workflows:
           filters:
             branches:
               ignore: master
+      - integration_tests
   build_and_deploy_dev:
     jobs:
       - build:
@@ -96,4 +137,4 @@ workflows:
             branches:
               ignore: /.*/
             tags:
-              only: /^v.*/
+              only: /^v.*/

docker-compose.yml

@@ -10,3 +10,16 @@ services:
       - REDIS_HOST=redis
   redis:
     image: redis:alpine
+    ports:
+      - "6379:6379"
+  selenium-firefox:
+    image: b4handjr/selenium-firefox
+    volumes:
+      - .:/send
+    working_dir: /send
+    expose:
+      - "4444"
+    ports:
+      - "5900"
+      - "4444:4444"
+    shm_size: 2g

package.json

@@ -28,6 +28,9 @@
     "test": "npm-run-all test:*",
     "test:backend": "nyc mocha --reporter=min test/backend",
     "test:frontend": "cross-env NODE_ENV=development node test/frontend/runner.js && nyc report --reporter=html",
+    "test-integration-local": "tox -c test/integration/tox.ini",
+    "test-integration-docker": "docker-compose exec -T --user root selenium-firefox tox -c test/integration/tox.ini",
+    "start:integration-docker": "docker-compose exec -T --user root selenium-firefox ./test/integration/scripts/start-docker.sh &",
     "start": "npm run clean && cross-env NODE_ENV=development webpack-dev-server",
     "prod": "node server/prod.js"
   },

test/integration/Pipfile

@@ -0,0 +1,17 @@
+[[source]]
+
+url = "https://pypi.python.org/simple"
+verify_ssl = true
+name = "pypi"
+
+
+[packages]
+
+selenium = "==3.11.0"
+flake8 = "==3.5.0"
+flake8-isort = "==2.5"
+PyPOM = "==1.3.0"
+pytest = "==3.5.0"
+pytest-html = "==1.16.1"
+pytest-selenium = "==1.12.0"
+pytest-xdist = "==1.22.2"

test/integration/README.md

@@ -0,0 +1,89 @@
+# Integration Tests for [Firefox Send](https://send.firefox.com/).
+## How to run the tests locally
+### Clone the repository
+
+If you have cloned this project already then you can skip this, otherwise you'll
+need to clone this repo using Git. If you do not know how to clone a GitHub
+repository, check out this [help page][git-clone] from GitHub.
+
+If you think you would like to contribute to the tests by writing or maintaining
+them in the future, it would be a good idea to create a fork of this repository
+first, and then clone that. GitHub also has great instructions for
+[forking a repository][git-fork].
+
+### App Setup
+
+Please view the README at the root directory of the project.
+
+### Run the tests
+
+Included in the docker-compose file is an image containing Firefox Nightly.
+[tox][Tox] is our test environment manager and [pytest][pytest] is the test runner.
+
+To run the tests, execute the command below:
+1. Make sure all of the images are running:
+```sh
+docker-compose ps
+```
+If not start them detached:
+```sh
+docker-compose up -d
+```
+2. Start the tests within the docker container
+```sh
+npm run test:integration-docker
+```
+
+If you have [geckodriver][geckodriver] installed you can use these steps:
+```sh
+npm start &
+npm run test:integration
+```
+This will use your local Firefox installation.
+
+### Adding a test
+
+The tests are written in Python using a POM, or Page Object Model. The plugin we use for this is called [pypom][pypom]. Please read the documentation there for good examples on how to use the Page Object Model when writing tests.
+
+The pytest plugin that we use for running tests has a number of advanced command line options available too. The full documentation for the plugin can be found [here][pytest-selenium].
+
+### Watching a test run (within the docker container)
+
+The tests are run on a live version of Firefox, but they are run headless. To access the container where the tests are run to view them follow these steps:
+
+1. Make sure all of the containers are running:
+```sh
+docker-compose ps
+```
+If not start them detached:
+```sh
+docker-compose up -d
+```
+
+2. Copy the port that is forwarded for the ```selenium-firefox``` image:
+```sh
+0.0.0.0:32771->5900/tcp
+```
+Note: Your port may not match what is seen here.
+
+You will want to copy what ever IP address and port is before the ```->5900/tcp```.
+
+3. Open your favorite VNC viewer and type in, or paste that address.
+4. The password is ```secret```.
+5. The viewer should open a window with a Ubuntu logo. If that happens you are connected to the ```selenium-firefox``` image and if you start the test, you should see a Firefox window open and the tests running.
+
+### Debugging a failure
+
+Whether a test passes or fails will result in a HTML report being created. This report will have detailed information of the test run and if a test does fail, it will provide geckodriver logs, terminal logs, as well as a screenshot of the browser when the test failed. We use a pytest plugin called [pytest-html][pytest-html] to create this report. The report can be found within the root directory of the project and is named ```send-test.html```. It should be viewed within a browser.
+
+[flake8]: http://flake8.pycqa.org/en/latest/
+[git-clone]: https://help.github.com/articles/cloning-a-repository/
+[git-fork]: https://help.github.com/articles/fork-a-repo/
+[geckodriver]: https://github.com/mozilla/geckodriver/releases/tag/v0.19.1
+[pypom]: http://pypom.readthedocs.io/en/latest/
+[pytest]: https://docs.pytest.org/en/latest/
+[pytest-html]: https://github.com/pytest-dev/pytest-html
+[pytest-selenium]: http://pytest-selenium.readthedocs.org/
+[Selenium]: http://selenium-python.readthedocs.io/index.html
+[selenium-api]: http://selenium-python.readthedocs.io/locating-elements.html
+[Tox]: http://tox.readthedocs.io/

test/integration/conftest.py

@@ -0,0 +1,76 @@
+# -*- coding: utf-8 -*-
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this file,
+# You can obtain one at http://mozilla.org/MPL/2.0/.
+"""Configuration files for pytest."""
+import pytest
+import requests
+from requests.adapters import HTTPAdapter
+from requests.packages.urllib3.util.retry import Retry
+
+from pages.desktop.download import Download
+from pages.desktop.home import Home
+
+
+@pytest.fixture
+def firefox_options(firefox_options, download_location_dir):
+    """Firefox options."""
+    firefox_options.set_preference("browser.download.panel.shown", False)
+    firefox_options.set_preference(
+        "browser.helperApps.neverAsk.openFile", "text/plain")
+    firefox_options.set_preference(
+        "browser.helperApps.neverAsk.saveToDisk", "text/plain")
+    firefox_options.set_preference("browser.download.folderList", 2)
+    firefox_options.set_preference(
+        "browser.download.dir", "{0}".format(download_location_dir))
+    firefox_options.add_argument('-foreground')
+    firefox_options.log.level = 'trace'
+    return firefox_options
+
+
+@pytest.fixture(scope='session', autouse=True)
+def _verify_url(request, base_url):
+    """Verifies the base URL"""
+    verify = request.config.option.verify_base_url
+    if base_url and verify:
+        session = requests.Session()
+        retries = Retry(backoff_factor=0.1,
+                        status_forcelist=[500, 502, 503, 504])
+        session.mount(base_url, HTTPAdapter(max_retries=retries))
+        session.get(base_url, verify=False)
+
+
+@pytest.fixture
+def download_location_dir(tmpdir):
+    """Directory for downloading sample file."""
+    return tmpdir.mkdir('test_download')
+
+
+@pytest.fixture
+def upload_location_dir(tmpdir):
+    """Directory for uploading sample file."""
+    return tmpdir.mkdir('test_upload')
+
+
+@pytest.fixture
+def test_file(upload_location_dir):
+    """Create test upload/download file."""
+    setattr(test_file, 'name', 'sample.txt')
+    setattr(test_file, 'location', upload_location_dir.join(test_file.name))
+    return test_file
+
+
+@pytest.fixture
+def download_file(upload_file):
+    """Uploads and downloads a file"""
+    download = Download(upload_file.selenium, upload_file.file_url).open()
+    download.download_btn.click()
+    return download
+
+
+@pytest.fixture
+def upload_file(selenium, base_url, download_location_dir, test_file):
+    """Upload file fixture."""
+    home = Home(selenium, base_url).open()
+    test_file.location.write('This is a test! This is a test!')
+    return home.upload_area("{0}".format(test_file.location.realpath()))