created unit tests for components under renderer

added in babel plugin for css in jsx

added in more tests

.babelrc

@@ -0,0 +1,12 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react",
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-transform-runtime",
+        "styled-jsx/babel"
+    ]
+}

package.json

@@ -14,7 +14,7 @@
   "private": true,
   "main": "main/index.js",
   "scripts": {
-    "test": "xo",
+    "test": "xo && ava --verbose",
     "start": "yarn && electron .",
     "build": "next build renderer && next export renderer",
     "dist": "npm run build && electron-builder",
@@ -25,6 +25,8 @@
     "name": "Kap"
   },
   "dependencies": {
+    "@babel/preset-react": "^7.0.0",
+    "@babel/runtime": "^7.6.2",
     "@ffmpeg-installer/ffmpeg": "^1.0.20",
     "@sentry/browser": "^5.6.3",
     "@sentry/electron": "^0.17.3",
@@ -68,15 +70,25 @@
     "react-dom": "^16.9.0",
     "react-linkify": "^0.2.2",
     "semver": "^6.3.0",
+    "styled-jsx": "^3.2.2",
     "tempy": "^0.3.0",
     "tildify": "^2.0.0",
     "tmp": "^0.1.0",
     "unstated": "^1.2.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/register": "^7.6.2",
+    "ava": "^1.0.0-beta.8",
     "babel-eslint": "^10.0.3",
+    "browser-env": "^3.2.6",
     "electron": "6.0.9",
     "electron-builder": "^21.2.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "eslint-config-xo-react": "^0.20.0",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^2.0.1",
@@ -107,6 +119,22 @@
       "renderer/out"
     ]
   },
+  "ava": {
+    "files": [
+      "test/window-header.js",
+      "test/keyboard-number-input.js",
+      "test/open-files.js",
+      "test/encoding.js",
+      "!/test/editor"
+    ],
+    "require": [
+      "@babel/register",
+      "@babel/preset-react",
+      "./test/helpers/browser-env.js",
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-proposal-object-rest-spread"
+    ]
+  },
   "husky": {
     "hooks": {
       "pre-commit": "npm test",

test/encoding.js

@@ -0,0 +1,12 @@
+import test from 'ava';
+import ffmpeg from '@ffmpeg-installer/ffmpeg';
+import execa from 'execa';
+
+test('it should be able to find ffmpeg', t => {
+  t.deepEqual(ffmpeg, ffmpeg);
+});
+
+test('it should be able to find execa', t => {
+  t.deepEqual(execa, execa);
+});
+

test/helpers/browser-env.js

@@ -0,0 +1 @@
+require('browser-env')();

test/keyboard-number-input.js

@@ -0,0 +1,14 @@
+import test from 'ava';
+import React from 'react';
+import {mount, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import KeyboardNumberInput from '../renderer/components/keyboard-number-input';
+
+configure({adapter: new Adapter()});
+
+test('it should render input', t => {
+  const wrapper = mount(<KeyboardNumberInput/>);
+  wrapper.find('input[type="text"]').at(2);
+  const input = wrapper.simulate('change', {target: {value: 72}});
+  t.is((input.length), 1);
+});

test/open-files.js

@@ -0,0 +1,12 @@
+import test from 'ava';
+import supportedVideoExtensions from '../main/common/constants';
+
+test('it should support mp4 mov and m4v', t => {
+  t.deepEqual(supportedVideoExtensions, {supportedVideoExtensions: ['mp4', 'mov', 'm4v']});
+});
+
+test('file extensions should equal .mp4 .mov and .m4v', t => {
+  const supportedVideoExtensions = ['mp4', 'mov', 'm4v'];
+  const fileExtensions = supportedVideoExtensions.map(ext => `.${ext}`);
+  t.deepEqual(fileExtensions, ['.mp4', '.mov', '.m4v']);
+});

test/window-header.js

@@ -0,0 +1,12 @@
+import test from 'ava';
+import React from 'react';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import WindowHeader from '../renderer/components/window-header';
+
+configure({adapter: new Adapter()});
+
+test('can mount component window header', t => {
+  const wrapper = shallow(<WindowHeader/>);
+  t.true(wrapper.hasClass('window-header'));
+});