Some functional tests.

Author: sebadoom

Gruntfile.js

@@ -6,6 +6,8 @@ module.exports = grunt => {
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-mocha-test');
+  grunt.loadNpmTasks('grunt-contrib-connect');
+  grunt.loadNpmTasks('grunt-exec');
 
   grunt.initConfig({
     clean: {
@@ -100,7 +102,7 @@ module.exports = grunt => {
       websiteDev: require('./webpack.website-dev.js'),
       extensionProd: require('./webpack.extension-prod.js'),
       extensionDev: require('./webpack.extension-dev.js'),
-      test: require('./webpack.website-tests.js')
+      unitTests: require('./webpack.website-unit-tests.js')
     },
 
     watch: {
@@ -155,11 +157,27 @@ module.exports = grunt => {
     },
 
     mochaTest: {
-      all: {
+      unit: {
         options: {},
-        src: ['dist/test/*.js']
+        src: ['dist/test/unit-tests.js']
+      },
+      functional: {
+        options: {
+          // Higher default timeout to account for some animations
+          timeout: 10000
+        },
+        src: ['test/functional/**.js']        
+      }
+    },
+
+    connect: {
+      functionalTests: {
+        options: {
+          hostname: '127.0.0.1',
+          base: 'dist/website',
+        }
       }
-    }
+    },
   });
 
   grunt.registerTask('build-website-views', [
@@ -207,7 +225,15 @@ module.exports = grunt => {
     'build-extension-dev'
   ]);
 
-  grunt.registerTask('test', ['webpack:test', 'mochaTest']);
+  grunt.registerTask('unit-tests', ['webpack:unitTests', 'mochaTest:unit']);
+  
+  grunt.registerTask('functional-tests', [
+    'build-website-dev',
+    'connect:functionalTests',        
+    'mochaTest:functional'
+  ]);
+
+  grunt.registerTask('test', ['unit-tests', 'functional-tests']);
 
   grunt.registerTask('default', ['build-dev', 'watch']);
 };

package.json

@@ -13,16 +13,19 @@
     "babel-loader": "^8.0.0-beta.0",
     "bootstrap": "^3.3.7",
     "chai": "^4.1.2",
+    "chai-arrays": "^2.0.0",
     "chai-as-promised": "^7.1.1",
     "codemirror": "^5.33.0",
     "flipclock": "^0.7.8",
     "grunt": "^1.0.1",
     "grunt-cli": "^1.2.0",
     "grunt-contrib-clean": "^1.1.0",
+    "grunt-contrib-connect": "^1.0.2",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-pug": "^1.0.0",
     "grunt-contrib-stylus": "^1.2.0",
     "grunt-contrib-watch": "^1.0.0",
+    "grunt-exec": "^3.0.0",
     "grunt-mocha-test": "^0.13.3",
     "grunt-webpack": "^3.0.2",
     "highlight.js": "^9.12.0",
@@ -35,6 +38,7 @@
     "loglevel": "^1.6.1",
     "mocha": "^5.0.0",
     "pug": "^2.0.0-rc.4",
+    "puppeteer": "^1.0.0",
     "sinon": "^4.2.2",
     "sinon-chai": "^2.14.0",
     "source-map-support": "^0.5.3",

test/functional/editor.js

@@ -0,0 +1,69 @@
+const chai = require('chai');
+const chaiAsPromised = require('chai-as-promised');
+const chaiArrays = require('chai-arrays');
+
+const utils = require('./utils.js');
+
+const isVisible = utils.isVisible;
+
+chai.use(chaiAsPromised);
+chai.use(chaiArrays);
+const expect = chai.expect;
+
+describe('Libraries', function() {
+  before(utils.launchBrowser);
+
+  after(utils.closeBrowser);
+
+  it('Displays libraries when clicking on navbar', async function() {
+    await this.page.click('a[href="#libraries-io"]');
+    // Wait for scroll
+    await this.page.waitFor(3000);
+    expect(await this.page.$eval('#libraries-io', isVisible)).to.be.true;    
+  });
+
+  it('Displays a sorted library filter', async function() {
+    const libraries = await this.page.$eval('#libraries-select', select => {
+      const result = [];
+    
+      Array.prototype.forEach.call(select.children, element => {
+        result.push(element.value);
+      });
+      
+      return result;  
+    });
+
+    expect(libraries).to.be.sorted;
+  });
+
+  it('Hides and displays libraries using filters', async function() {    
+    await this.page.select('#libraries-select', '.php');
+    // Wait for animation
+    await this.page.waitFor(2000);
+
+    expect(await this.page.$eval('.php', isVisible)).to.be.true; 
+    expect(await this.page.$eval('.net', isVisible)).to.be.false; 
+    expect(await this.page.$eval('.python', isVisible)).to.be.false; 
+    
+    await this.page.waitForSelector('.net', {
+      hidden: true
+    });
+    await this.page.waitForSelector('.python', {
+      hidden: true
+    });
+
+    await this.page.select('#libraries-select', '*');
+    // Wait for animation
+    await this.page.waitFor(2000);
+
+    await this.page.waitForSelector('.net', {
+      visible: true
+    });
+    await this.page.waitForSelector('.php', {
+      visible: true
+    });
+    await this.page.waitForSelector('.python', {
+      visible: true
+    });
+  });
+});

test/functional/index.js

@@ -0,0 +1,42 @@
+const puppeteer = require('puppeteer');
+
+// https://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen
+function isVisible(elm) {
+  try {
+    const rect = elm.getBoundingClientRect();
+    const viewHeight = Math.max(document.documentElement.clientHeight, 
+                                window.innerHeight);
+    return !(rect.bottom < 0 || rect.top - viewHeight >= 0) && 
+           rect.width > 0 && 
+           rect.height > 0;
+  } catch(e) {
+    return false;
+  }
+}
+
+async function launchBrowser() {
+  // Initial navigation may take long due to outside requests.
+  this.timeout(30000);
+
+  this.browser = await puppeteer.launch({
+    //args: ['--no-sandbox'],
+    headless: false,
+    executablePath: '/usr/bin/chromium'
+  });
+  this.page = await this.browser.newPage();
+  await this.page.setViewport({
+    width: 1920,
+    height: 1080
+  });
+  await this.page.goto('http://localhost:8000');
+}
+
+async function closeBrowser() {
+  await this.browser.close();
+}
+
+module.exports = {
+  isVisible: isVisible,
+  launchBrowser: launchBrowser,
+  closeBrowser: closeBrowser
+};

test/functional/libraries.js

@@ -4,8 +4,7 @@ const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
   entry: {
-    'unit-tests': './test/unit/index.js',
-    'functional-tests': './test/functional/index.js'
+    'unit-tests': './test/unit/index.js'
   },
   output: {
     filename: '[name].js',