Initial commit adding integration tests for the webextension.

.travis.yml

@@ -1,32 +1,44 @@
 language: node_js
-addons:
-  firefox: latest
-node_js:
-  - "8"
-before_install:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
-  - sleep 3
-  - npm i -g npm@6
-script:
-  - npm run test
-env:
-  global:
-    - FIREFOX_BINARY: firefox
+_aliases:
+  - &test
+    before_install:
+      - sh -e /etc/init.d/xvfb start
+      - sleep 10
+  - &unit-test
+    env: DISPLAY=:99.0 FIREFOX_BINARY=firefox
+    addons:
+      firefox: latest
+    <<: *test
+  - &integration-test
+    env: DISPLAY=:99.0 MOZ_HEADLESS=1 UI_TEST_LOGGING=info GECKODRIVER_VERSION=0.21.0
+    addons:
+      firefox: latest-nightly
+    before_script:
+      - wget -O /tmp/geckodriver.tar.gz https://github.com/mozilla/geckodriver/releases/download/v${GECKODRIVER_VERSION}/geckodriver-v${GECKODRIVER_VERSION}-linux64.tar.gz
+      - mkdir $HOME/geckodriver && tar xvf /tmp/geckodriver.tar.gz -C $HOME/geckodriver
+      - export PATH=$HOME/geckodriver:$PATH
+      - firefox --version
+      - geckodriver --version
+      - npm run build
+    <<: *test
 
-matrix:
+jobs:
   include:
-    - script: npm run test
-      env:
-        global:
-          - FIREFOX_BINARY: firefox
-      before_install:
-         - export DISPLAY=:99.0
-         - sh -e /etc/init.d/xvfb start
-         - sleep 3
-    - script: npm run build
+    - stage:
+      node_js: 8
+      <<: *unit-test
+      script: npm run test:karma
+    - stage:
+      node_js: 8
+      <<: *integration-test
+      script: npm run test:ui
+    - stage:
+      node_js: 8
+      script: npm run build
       env: BUILD_NOTES
-    - script: npm run lint
+    - stage:
+      node_js: 8
+      script: npm run lint
       env: LINT
       before_script: npm run build
       before_install:

package.json

@@ -46,9 +46,11 @@
     "uuid": "^3.2.1"
   },
   "devDependencies": {
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "chai": "^4.1.0",
@@ -69,20 +71,23 @@
     "karma-firefox-launcher": "1.0.1",
     "karma-mocha": "1.3.0",
     "karma-mocha-reporter": "2.2.4",
-    "mocha": "^3.2.0",
+    "logform": "^1.9.1",
+    "mocha": "^3.5.3",
     "node-sass": "^4.7.2",
     "npm-run-all": "^4.0.2",
     "pontoon-to-webext": "^1.0.2",
     "prettier": "^1.4.4",
     "rimraf": "^2.6.1",
     "sass-loader": "^6.0.6",
+    "selenium-webdriver": "^4.0.0-alpha.1",
     "sinon": "4.0.1",
     "sinon-chrome": "2.2.1",
     "stylelint": "^8.4.0",
     "stylelint-config-recommended": "^2.0.1",
     "web-ext": "^1.9.1",
     "webpack": "^3.10.0",
-    "webpack-sources": "1.0.1"
+    "webpack-sources": "1.0.1",
+    "winston": "^3.0.0"
   },
   "homepage": "https://github.com/mozilla/notes#readme",
   "license": "MPL-2.0",
@@ -106,6 +111,8 @@
     "start-deved": "npm run webpack && web-ext run -s build --firefox=firefoxdeveloperedition & npm run webpack:watch",
     "test": "npm-run-all test:*",
     "test:karma": "webpack --config webpack.test-unit.js && NODE_ENV=test karma start",
+    "test:ui": "test/integration/setup-webext.sh && npm run ui-tests-build && mocha ./test/dist/integration --retries 1 --no-deprecation --reporter=list --compilers js:babel-core/register --require babel-polyfill",
+    "ui-tests-build": "babel ./test/integration --quiet --no-babelrc --presets=env -d ./test/dist/integration",
     "webpack": "webpack --config webpack.config.js",
     "webpack:watch": "webpack --config webpack.config.js --watch"
   }

test/integration/page_objects/base_page.js

@@ -0,0 +1,96 @@
+const {By, until, Key} = require('selenium-webdriver');
+const { createLogger, transports } = require('winston');
+const { format } = require('logform');
+const logger = createLogger({
+  level: process.env.UI_TEST_LOGGING || 'silent',
+  format: format.combine(
+    format.colorize(),
+    format.align(),
+    format.printf(info => `${info.level}: ${info.message}`),
+  ),
+  transports: [
+    new transports.Console(),
+  ]
+});
+
+export default class BasePage {
+
+  constructor(driver, timeout, root) {
+    this.timeout = (timeout) ? timeout : 10000;
+    this.driver = driver;
+    this.by = By;
+    this.key = Key;
+    this.logger = logger;
+    this.root = root;
+    this.until = until;
+    this.wait = driver.wait;
+  }
+
+  /**
+  * @function waitForPageToLoad
+  * @param  {string} locator CSS Selector of Element.
+  * @returns {Object} An object representing the page.
+  * @throws ElementNotFound
+  */
+  async waitForPageToLoad(locator) {
+    let element = await this.findElement(locator);
+    await this.driver.wait(this
+      .until
+      .elementIsVisable(element), this.timeout);
+    return this;
+  }
+
+  /**
+  * @function findElement
+  * @param  {string} locator CSS Selector of Element.
+  * @returns {Object} A WebElement object for element matching selector.
+  * @throws ElementNotFound
+  */
+  async findElement(locator) {
+    this.logger.info(`Looking for element ${locator}`);
+    this.waitForElement(locator);
+    this.logger.info(`Found element ${locator}, returning it.`);
+    if (this.root) {
+      let root = this.driver.findElement(this.by.css(this.root));
+      let element = root.findElement(this.by.css(locator));
+      return element;
+    } else {
+      let element = await this.driver.findElement(this.by.css(locator));
+      return element;
+    }
+  }
+
+  /**
+  * @function findElements
+  * @param  {string} locator CSS Selector of Element.
+  * @returns {Object} A list of WebElements.
+  * @throws ElementNotFound
+  */
+  async findElements(locator) {
+    this.logger.info(`Looking for element ${locator}`);
+    this.waitForElement(locator);
+    this.logger.info(`Found element ${locator}, returning it.`);
+    if (this.root) {
+      let root = this.driver.findElement(this.by.css(this.root));
+      let elements = root.findElements(this.by.css(locator));
+      return elements;
+    }
+    return await this.driver.findElements(this.by.css(locator));
+  }
+
+  /**
+  * @function waitForElement
+  * @param  {string} locator CSS Selector of Element.
+  * @throws ElementNotFound
+  */
+  async waitForElement(locator) {
+    this.logger.info(`Waiting for locator ${locator} to appear`);
+    await this.driver.wait(this
+      .until
+      .elementLocated(this
+        .by
+        .css(locator)), this.timeout
+    );
+    this.logger.info(`Locator ${locator} appeared, returning it.`);
+  }
+}

test/integration/page_objects/list_page.js

@@ -0,0 +1,72 @@
+import BasePage from './base_page';
+import NotePage from './note_page';
+
+export default class ListPage extends BasePage {
+
+  constructor(driver) {
+    super(driver);
+    this.listLocator = '.listView';
+    this.newNoteBtnLocator = '.newNoteBtn';
+  }
+
+  async waitForPageToLoad() {
+    this.logger.info('Waiting for list page load.');
+    let element = await this.findElement(this.listLocator);
+    await this.driver.wait(this
+      .until
+      .elementIsVisible(element), this.timeout);
+    this.logger.info('List page loaded.');
+    return this;
+  }
+
+  /**
+  * @property notesList
+  * @returns {Object} A list of notes found on the home page
+  */
+  async notesList(){
+      let elements = [];
+
+      await this.findElement(this.listLocator);
+      await this.findElement('ul');
+      for(let item in await this.findElements('li')) {
+        elements.push(new ListNote(this.driver, item));
+        this.logger.info('Created ListNote class.');
+      }
+      return elements;
+  }
+
+  /**
+  * @function newNoteButton
+  * @returns {Object} A Note Page Object
+  * Clicks the 'new note' button
+  */
+  async newNoteButton() {
+    let button = await this.findElement(this.newNoteBtnLocator);
+    await button.click();
+    return await new NotePage(this.driver).waitForPageToLoad();
+  }
+}
+
+class ListNote extends ListPage {
+
+  constructor(driver) {
+    super(driver);
+    this.titleLocator = 'div > p';
+  }
+
+  /**
+  * @property clickBackButton
+  * @returns {Object} The title of an individual note
+  */
+  async getTitle() {
+      let element = await this.findElement(this.titleLocator);
+      return element.getText();
+  }
+
+  async click() {
+    let note = await this.driver.findElement(this.by.css(this.titleLocator));
+    await note.click();
+    return await new NotePage(this.driver).waitForPageToLoad()
+  }
+
+}

test/integration/page_objects/note_page.js

@@ -0,0 +1,66 @@
+import BasePage from './base_page';
+import ListPage from './list_page';
+
+export default class NotePage extends BasePage {
+
+  constructor(driver) {
+    super(driver);
+    this.backBtnLocator = '.iconBtn';
+    this.editorLocator = '.ck-editor__editable';
+    this.noteTitleLocator = 'div > header > p';
+  }
+
+  async waitForPageToLoad() {
+    this.logger.info('Waiting for note page load.');
+    let element = await this.findElement(this.backBtnLocator);
+    await this.driver.wait(this
+      .until
+      .elementIsVisible(element), this.timeout);
+    this.logger.info('Note page loaded.');
+    return this;
+  }
+
+  /**
+  * @property noteTitle
+  * @returns {Object} The title of the note
+  */
+  get noteTitle() { return (async () =>
+    {
+      let title = await this.findElement(this.noteTitleLocator);
+      return title.getText();
+    })();
+  }
+
+  /**
+  * @function clickBackButton
+  * @returns {Object} A List Page object
+  * Clicks the back button to return to the list page
+  */
+  async clickBackButton() {
+    let btn = await this.findElement(this.backBtnLocator);
+    await btn.click();
+    return await new ListPage(this.driver).waitForPageToLoad();
+  }
+
+  /**
+  * @function addNote
+  * @param  {string} title Title of the note you want top add
+  * @param  {string} paragraph Paragraph of the note you want to add
+  * @returns {Object} An object representing the page.
+  * @throws ElementNotFound
+  */
+  async addNote(title, paragraph) {
+    this.logger.info('Adding a new note');
+    let editor = await this.driver.findElement(this.by.css(this.editorLocator));
+    await editor.sendKeys(title, this.key.ENTER, paragraph);
+    // Find note title before we wait for it to change
+    let thisNoteTitle = await this
+      .driver
+      .findElement(this.by.css(this.noteTitleLocator));
+    await this.driver.wait(
+        this.until.elementTextIs(thisNoteTitle, paragraph),
+      this.timeout
+    );
+    this.logger.info('Note added');
+  }
+}

test/integration/setup-webext.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+cp ./web-ext-artifacts/*.zip ./firefox_notes.xpi
+echo "Webextension built and moved to root dir."