Finished architecture, working on writing unit tests

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 lib/
+coverage/
 npm-debug.log

.travis.yml

@@ -1,15 +1,9 @@
 language: node_js
 node_js:
-  - '4'
-addons:
-  apt:
-    packages:
-      - xvfb
-before_script:
-  - export DISPLAY=:99.0
-  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
-  - npm test
-install:
-  - export DISPLAY=':99.0'
-  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
-  - npm install
+  - '6'
+script:
+  - npm lint
+  - npm run test:lcov
+after_success:
+  - if [[ $TRAVIS_BRANCH" == "master" ]] ; then cat ./coverage/lcov.info | node_modules/.bin/coveralls --verbose; fi
+  - rm -rf ./coverage

karma.conf.js

@@ -0,0 +1,77 @@
+const path = require('path');
+// Require webpack config rather than duplicating it
+const webpackConfig = require('./webpack.config');
+
+const args = process.argv.slice(2);
+const isCoverage = args.indexOf('-coverage') !== -1;
+const isLcov = args.indexOf('-lcov') !== -1;
+
+module.exports = function karmaConfig(config) {
+  config.set({
+    // ... normal karma configuration
+    browsers: ['PhantomJS'],
+    singleRun: true,
+    files: [
+      // 'node_modules/babel-polyfill/dist/polyfill.js',
+      'test/index.js'
+      // each file acts as entry point for the webpack configuration
+    ],
+    preprocessors: {
+      // add webpack as preprocessor
+      'test/index.js': ['webpack', 'sourcemap']
+    },
+    plugins: ['karma-webpack', 'karma-jasmine', 'karma-nyan-reporter', 'karma-coverage', 'karma-sourcemap-loader', 'karma-phantomjs-launcher', 'karma-phantomjs-shim'],
+    frameworks: ['phantomjs-shim', 'jasmine'],
+    reporters: [isLcov ? 'dots' : 'nyan'].concat(isCoverage ? ['coverage'] : []),
+    // reporter options
+    nyanReporter: {
+      suppressErrorHighlighting: true
+    },
+    coverageReporter: {
+      dir: 'coverage/',
+      reporters: [{
+        type: isLcov ? 'lcov' : 'html', // lcov or lcovonly are required for generating lcov.info files, html for local coverage report
+        subdir: '.'
+      }]
+    },
+    webpack: Object.assign(webpackConfig, {
+      entry: undefined,
+      output: undefined,
+      devtool: 'inline-source-map',
+      // *optional* isparta options: istanbul behind isparta will use it
+      isparta: {
+        embedSource: true,
+        noAutoWrap: true,
+        // these babel options will be passed only to isparta and not to babel-loader
+        babel: {
+          presets: ['es2015']
+        }
+      },
+      // Override `module` in `webpackConfig` only if coverage is produced
+      module: Object.assign(webpackConfig.module, isCoverage ? {
+        preLoaders: webpackConfig.module.preLoaders.concat([
+          { // `isparta` all the code We want to be in the coverage report
+            test: /\.js$/,
+            include: [
+              path.resolve('src/')
+            ],
+            loader: 'isparta'
+          }, {
+            // Addig js loader to preloader, with all the code we don't want in the coverage report which `isparta` doesn't coverage
+            // Using `include` property to add those directories
+            test: /\.js$/,
+            include: [
+              path.resolve('test/')
+            ],
+            loader: 'babel?presets[]=es2015'
+          }
+        ]),
+        // Exclude js loaders from `loaders` because they are set in preLoaders
+        loaders: webpackConfig.module.loaders.filter(loaderObj => (typeof loaderObj.test !== 'function' && loaderObj.test.toString().indexOf('.js') === -1))
+      } : {})
+    }),
+    webpackMiddleware: {
+      noInfo: true
+    }
+  });
+};

package.json

@@ -4,7 +4,12 @@
   "description": "Add panel picker for emojis with different types of sets on your website. http://TimeToKnow.github.io/emoji-panel/",
   "main": "lib/emoji-panel.js",
   "scripts": {
-    "test": "eslint .",
+    "lint": "eslint .",
+    "test": "karma start",
+    "test:dev": "npm test -- --single-run=false",
+    "test:coverage": "npm test -- -coverage",
+    "test:coverage:dev": "npm run test:dev -- -coverage",
+    "test:lcov": "npm run test:coverage -- -lcov",
     "lib": "webpack --progress --config ./webpack.lib.config.js && rimraf ./lib/emoji-panel-*.js",
     "build": "webpack --progress && rimraf ./dist/emoji-panel-*.js",
     "start": "webpack-dev-server --port 8080 --inline --progress --colors --config ./webpack.dev.config.js",
@@ -38,15 +43,30 @@
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "bower": "^1.7.9",
+    "coveralls": "^2.11.11",
     "css-loader": "^0.23.1",
     "eslint": "^2.7.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "html-minify-loader": "^1.1.0",
     "html-webpack-plugin": "^2.15.0",
+    "inject-loader": "^2.0.1",
+    "isparta-loader": "^2.0.0",
+    "istanbul-instrumenter-loader": "^0.2.0",
+    "jasmine": "^2.4.1",
+    "jasmine-core": "^2.4.1",
     "json-loader": "^0.5.4",
+    "karma": "^1.1.1",
+    "karma-coverage": "^1.1.0",
+    "karma-jasmine": "^1.0.2",
+    "karma-nyan-reporter": "^0.2.4",
+    "karma-phantomjs-launcher": "^1.0.1",
+    "karma-phantomjs-shim": "^1.4.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
     "node-sass": "^3.8.0",
     "path": "^0.12.7",
+    "phantomjs-prebuilt": "^2.1.7",
     "raw-loader": "^0.5.1",
     "replace-loader": "^0.1.0",
     "rimraf": "^2.5.2",

test/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "env": {
+    "node": false,
+    "jasmine": true
+  },
+  "ecmaFeatures": {
+    "modules": true
+  },
+  "rules": {
+    "strict": [2, "never"],
+    "no-console": 2
+  }
+}

test/index.js

@@ -0,0 +1,7 @@
+// load all specs into one bundle
+const testsContext = require.context('.', true, /-spec\.js$/);
+testsContext.keys().forEach(testsContext);
+
+// require all `src/**/*.js`
+const componentsContext = require.context('../src/', true, /\.js$/);
+componentsContext.keys().forEach(componentsContext);

test/spec/create-panel-spec.js

@@ -0,0 +1,4 @@
+import createPanelInjector from 'inject!src/create-panel';
+it('', () => {
+  expect(1).toBe(1);
+});

webpack.config.js

@@ -111,6 +111,7 @@ module.exports = {
     ]
   },
   resolve: {
+    root: path.resolve(__dirname),
     alias: {
       'emoji-panel': path.join(__dirname, 'src', 'emoji-panel.js')
     }