Add locally hosted test page

Travis now runs a local HTTP server[1] in a background process, and the functional test opens a locally hosted test page. I also moved all functional test files to a new directory: test/functional Finally, since test scripts are never going to be imported as ES6 modules, I made the test a .js file rather than a .jsm. Note: if I were to leave it as a .jsm, I would have wanted to change the 'require' statements to 'import' statements to keep consistent with the other .mjs files. These .mjs files get transpiled via Babel into CommonJS .js files (i.e. using 'require' statements) as a build step. [1]: I did quite a lot of deliberation about whether an HTTP server would be sufficient (compared to an HTTPS server) and determined it was. Ultimately, I adhered to one of the principles of extreme programming (thanks Daniel): don't add functionality until it's necessary. Here is my reasoning (I spoke with a Mozilla security engineer who works on certificates): * TravisCI's default environment runs each build on a [single machine](https://docs.travis-ci.com/user/reference/trusty/#using-trusty) * This means we are running the server on the loopback interface, and there shouldn't be much risk -- particularly since we don't have any secrets. * The only downside is there are some [DOM APIs that only work in secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts) -- none of which we are using currently. But Firefox is working on enabling these APIs in this case where everything is on the same machine.
biancadanforth · Aug 9, 2019 · 34c04b0 · 34c04b0
1 parent 8711868
commit 34c04b0
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,5 +6,6 @@
 **/*.js
 !/rollup.config.js
 !/trainees.js
+!/test/functional/*
 /cli/build
 /cli/dist
diff --git a/.travis.yml b/.travis.yml
@@ -13,7 +13,9 @@ jobs:
       script:
         - make all
         - export PATH=$PATH:$TRAVIS_BUILD_DIR/node_modules/geckodriver/bin
-        - yarn mocha --timeout 15000 test/functional_test.js
+        - node test/functional/setup_http_server &
+        - yarn mocha --timeout 60000 test/functional/functional_test.js
+        - kill %1
     # - stage: test
     #   name: "Javascript tests"
     #   language: node_js

diff --git a/test/functional/functional_test.html b/test/functional/functional_test.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="">
+    <title></title>
+  </head>
+  <body>
+    <h1 id="title">Functional Testing Page - isVisible</h1>
+    <img id="image" src="https://www.mozilla.org/media/protocol/img/logos/mozilla/white.612a25fa976b.svg">
+    <script>
+    </script>
+  </body>
+</html>
diff --git a/test/functional_test.mjs → test/functional/functional_test.js b/test/functional_test.mjs → test/functional/functional_test.js
@@ -1,7 +1,7 @@
 const { expect } = require('chai');
 const firefox = require('selenium-webdriver/firefox');
 const webdriver = require('selenium-webdriver');
-const { ancestors, isDomElement, isVisible, toDomElement } = require('../utilsForFrontend');
+const { ancestors, isDomElement, isVisible, toDomElement } = require('../../utilsForFrontend');
 
 describe('isVisible', () => {
     const options = new firefox.Options();
@@ -14,7 +14,7 @@ describe('isVisible', () => {
     describe('Unprivileged', () => {
         it('should return true when an element is visible', async () => {
             // TODO: put actual checks here
-            await driver.get('https://developer.mozilla.org/');
+            await driver.get('http://localhost:8000/functional_test.html');
             await driver.wait(async () => {
                 const readyState = await driver.executeScript('return document.readyState');
                 return readyState === 'complete';
@@ -24,7 +24,7 @@ describe('isVisible', () => {
                     ${ancestors}
                     ${isDomElement}
                     ${toDomElement}
-                    return (${isVisible}(document.getElementById("home-q")));
+                    return (${isVisible}(document.getElementById("image")));
                 `);
             });
             const expected = true;

diff --git a/test/functional/setup_http_server.js b/test/functional/setup_http_server.js
@@ -0,0 +1,22 @@
+const http = require('http');
+const fs = require('fs');
+const url = require('url');
+
+const PORT = 8000;
+
+const server = http.createServer((request, response) => {
+    const path = url.parse(request.url).pathname;
+    fs.readFile(__dirname + path, 'utf8', (error, data) => {
+        if (error) {
+            response.writeHead(404);
+            response.write(`There was an error: ${error.errno}, ${error.code}`);
+            response.end();
+        } else {
+            response.writeHead(200, {'Content-Type': 'text/html'});
+            response.write(data);
+            response.end();
+        }
+    });
+});
+server.listen(PORT);
+console.log(`Serving from ${__dirname} at http://localhost:${PORT}...`);