test: replace karma with jest

.babelrc

@@ -49,6 +49,18 @@
       "plugins": [
         "transform-es2015-modules-commonjs"
       ]
+    },
+    "test": {
+      "presets": [
+        [
+          "env",
+          {
+            "targets": {
+              "node": "current"
+            }
+          }
+        ]
+      ]
     }
   }
 }

.npmignore

@@ -4,7 +4,6 @@ scripts/
 
 src/
 docs/
-spec/
 example/
 karma.conf.js
 yarn.lock

karma.conf.js

@@ -1,73 +0,0 @@
-// Karma configuration
-// Generated on Fri Jan 27 2017 13:33:03 GMT-0700 (MST)
-var webpackConfig = require('./spec/webpack.config.js');
-
-module.exports = function(config) {
-  config.set({
-
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
-
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine'],
-
-
-    // list of files / patterns to load in the browser
-    files: [
-      'spec/*spec.js',
-    ],
-
-
-    // list of files to exclude
-    exclude: [
-    ],
-
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-      'spec/*spec.js': ['webpack'],
-    },
-
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['progress'],
-
-
-    // web server port
-    port: 9876,
-
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: true,
-
-
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Chrome'],
-
-
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
-    singleRun: true,
-
-    // Concurrency level
-    // how many browser should be started simultaneous
-    concurrency: Infinity,
-
-    webpack: webpackConfig,
-  })
-}

package.json

@@ -31,54 +31,51 @@
     "@storybook/addon-links": "^3.2.10",
     "@storybook/addon-options": "3.2.10",
     "@storybook/react": "^3.2.11",
-    "babel-cli": "^6.26.0",
+    "babel-cli": "^6.0.0",
-    "babel-core": "6.7.2",
+    "babel-core": "^6.0.0",
-    "babel-loader": "^7.1.2",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^7.0.0",
     "babel-plugin-module-resolver": "2.7.1",
     "babel-plugin-transform-define": "^1.3.0",
     "babel-plugin-transform-es2015-destructuring": "6.9.0",
     "babel-plugin-transform-object-rest-spread": "6.8.0",
     "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "6.6.0",
     "babel-preset-react": "6.5.0",
     "babel-runtime": "^6.26.0",
     "emoji-datasource": "4.0.4",
     "emojilib": "^2.2.1",
     "inflection": "1.10.0",
-    "jasmine-core": "^2.5.2",
+    "jest": "^23.0.0",
-    "karma": "^1.4.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-cli": "^1.0.1",
-    "karma-jasmine": "^1.1.0",
-    "karma-webpack": "^2.0.4",
     "mkdirp": "0.5.1",
     "prettier": "1.11.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-test-renderer": "^16.8.4",
     "rimraf": "2.5.2",
     "size-limit": "^0.11.4",
     "webpack": "^3.6.0"
   },
   "scripts": {
-    "clean": "rm -rf dist/ dist-es/",
+    "clean": "rm -rf dist/ dist-es/ dist-modern/",
     "build:data": "node scripts/build-data",
     "build:dist": "npm run build:cjs && npm run build:es && npm run build:modern",
-    "build:cjs": "BABEL_ENV=legacy-cjs babel src --out-dir dist --copy-files",
+    "build:cjs": "BABEL_ENV=legacy-cjs babel src --out-dir dist --copy-files --ignore '**/*.test.js'",
-    "build:es": "BABEL_ENV=legacy-es babel src --out-dir dist-es --copy-files",
+    "build:es": "BABEL_ENV=legacy-es babel src --out-dir dist-es --copy-files --ignore '**/*.test.js'",
-    "build:modern": "babel src --out-dir dist-modern --copy-files",
+    "build:modern": "babel src --out-dir dist-modern --copy-files --ignore '**/*.test.js'",
     "build:docs": "cp css/emoji-mart.css docs && webpack --config ./docs/webpack.config.js",
     "build": "npm run clean && npm run build:dist",
-    "watch": "BABEL_ENV=cjs babel src --watch --out-dir dist --copy-files",
+    "watch": "BABEL_ENV=cjs babel src --watch --out-dir dist --copy-files --ignore '**/*.test.js'",
     "start": "npm run watch",
-    "stats": "webpack --config ./spec/webpack.config.js --json > spec/stats.json",
     "react:clean": "rimraf node_modules/{react,react-dom,react-addons-test-utils}",
     "react:14": "npm run react:clean && npm i react@^0.14 react-dom@^0.14 react-addons-test-utils@^0.14 --save-dev",
     "react:15": "npm run react:clean && npm i react@^15 react-dom@^15 react-addons-test-utils@^15 --save-dev",
-    "test": "NODE_ENV=test karma start && size-limit",
+    "test": "npm run clean && jest",
     "prepublishOnly": "npm run build",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "prettier": "prettier --write \"{src,scripts,spec}/**/*.js\"",
+    "prettier": "prettier --write \"{src,scripts}/**/*.js\"",
     "prepare": "npm run build:dist"
   },
   "size-limit": [

spec/emoji-index-spec.js

@@ -1,44 +0,0 @@
-import emojiIndex from '../src/utils/emoji-index/emoji-index'
-
-describe('#emojiIndex', () => {
-  describe('search', function() {
-    it('should work', () => {
-      expect(emojiIndex.search('pineapple')).toEqual([
-        {
-          id: 'pineapple',
-          name: 'Pineapple',
-          colons: ':pineapple:',
-          emoticons: [],
-          unified: '1f34d',
-          skin: null,
-          native: '🍍',
-        },
-      ])
-    })
-
-    it('should filter only emojis we care about, exclude pineapple', () => {
-      let emojisToShowFilter = (data) => {
-        data.unified !== '1F34D'
-      }
-      expect(
-        emojiIndex.search('apple', { emojisToShowFilter }).map((obj) => obj.id),
-      ).not.toContain('pineapple')
-    })
-
-    it('can include/exclude categories', () => {
-      expect(emojiIndex.search('flag', { include: ['people'] })).toEqual([])
-    })
-
-    it('can search for thinking_face', () => {
-      expect(emojiIndex.search('thinking_fac').map((x) => x.id)).toEqual([
-        'thinking_face',
-      ])
-    })
-
-    it('can search for woman-facepalming', () => {
-      expect(emojiIndex.search('woman-facep').map((x) => x.id)).toEqual([
-        'woman-facepalming',
-      ])
-    })
-  })
-})

spec/picker-spec.js

@@ -1,47 +0,0 @@
-import React from 'react'
-import TestUtils from 'react-dom/test-utils'
-
-import data from '../data/all.json'
-import { NimblePicker } from '../src/components'
-
-const { click } = TestUtils.Simulate
-
-const {
-  renderIntoDocument,
-  scryRenderedComponentsWithType,
-  findRenderedComponentWithType,
-} = TestUtils
-
-const render = (props = {}) => {
-  const defaultProps = { data }
-  return renderIntoDocument(<NimblePicker {...defaultProps} {...props} />)
-}
-
-describe('NimblePicker', () => {
-  let subject
-
-  it('works', () => {
-    subject = render()
-    expect(subject).toBeDefined()
-  })
-
-  describe('categories', () => {
-    it('shows 10 by default', () => {
-      subject = render()
-      expect(subject.categories.length).toEqual(10)
-    })
-
-    it('will not show some based upon our filter', () => {
-      subject = render({ emojisToShowFilter: (unified) => false })
-      expect(subject.categories.length).toEqual(2)
-    })
-
-    it('maintains category ids after it is filtered', () => {
-      subject = render({ emojisToShowFilter: (emoji) => true })
-      const categoriesWithIds = subject.categories.filter(
-        (category) => category.id,
-      )
-      expect(categoriesWithIds.length).toEqual(10)
-    })
-  })
-})

spec/webpack.config.js

@@ -1,61 +0,0 @@
-var path = require('path')
-var pack = require('../package.json')
-var webpack = require('webpack')
-var BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin
-
-var PROD = process.env.NODE_ENV === 'production'
-var TEST = process.env.NODE_ENV === 'test'
-
-var config = {
-  entry: path.resolve('src/index.js'),
-  output: {
-    path: path.resolve('spec'),
-    filename: 'bundle.js',
-    library: 'EmojiMart',
-    libraryTarget: 'umd',
-  },
-
-  externals: [],
-
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: 'babel-loader',
-        include: [path.resolve('src'), path.resolve('spec')],
-      },
-    ],
-  },
-
-  resolve: {
-    extensions: ['.js'],
-  },
-
-  plugins: [
-    new webpack.DefinePlugin({
-      EMOJI_DATASOURCE_VERSION: `'${pack.devDependencies['emoji-datasource']}'`,
-    }),
-  ],
-
-  bail: true,
-}
-
-if (!TEST) {
-  config.externals = config.externals.concat([
-    {
-      react: {
-        root: 'React',
-        commonjs2: 'react',
-        commonjs: 'react',
-        amd: 'react',
-      },
-    },
-  ])
-
-  config.plugins = config.plugins.concat([
-    new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }),
-  ])
-}
-
-module.exports = config

src/components/__tests__/__snapshots__/not-found.test.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders <NotFound> component 1`] = `
+<div
+  className="emoji-mart-no-results"
+>
+  <button
+    aria-label="🕵️, sleuth_or_spy"
+    className="emoji-mart-emoji emoji-mart-emoji-native"
+    onClick={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    title={null}
+  >
+    <span
+      style={
+        Object {
+          "display": "inline-block",
+          "fontSize": 38,
+          "height": 38,
+          "width": 38,
+          "wordBreak": "keep-all",
+        }
+      }
+    >
+      🕵️
+    </span>
+  </button>
+  <div
+    className="emoji-mart-no-results-label"
+  >
+    No Emoji Found
+  </div>
+</div>
+`;

src/components/__tests__/not-found.test.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import NotFound from '../not-found'
+import renderer from 'react-test-renderer'
+
+import data from '../../../data/apple'
+
+const i18n = {
+  notfound: 'No Emoji Found',
+}
+
+test('Renders <NotFound> component', () => {
+  const emojiProps = {
+    native: true,
+    skin: 1,
+    size: 24,
+    set: 'apple',
+    sheetSize: 64,
+    forceSize: true,
+    tooltip: false,
+  }
+  const component = renderer.create(
+    <NotFound
+      data={data}
+      notFound={() => {}}
+      notFoundEmoji={'sleuth_or_spy'}
+      emojiProps={emojiProps}
+      i18n={i18n}
+    />,
+  )
+  let tree = component.toJSON()
+  expect(tree).toMatchSnapshot()
+})

src/components/category.js

@@ -64,6 +64,12 @@ export default class Category extends React.Component {
   }
 
   memoizeSize() {
+    if (!this.container) {
+      // probably this is a test environment, e.g. jest
+      this.top = 0
+      this.maxMargin = 0
+      return
+    }
     var parent = this.container.parentElement
     var { top, height } = this.container.getBoundingClientRect()
     var { top: parentTop } = parent.getBoundingClientRect()

src/components/picker/__tests__/nimble-picker.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import NimblePicker from '../nimble-picker'
+import renderer from 'react-test-renderer'
+
+import data from '../../../../data/apple'
+
+function render(props = {}) {
+  const defaultProps = { data }
+  const component = renderer.create(
+    <NimblePicker {...props} {...defaultProps} />,
+  )
+  return component.getInstance()
+}
+
+test('shows 10 categories by default', () => {
+  const subject = render()
+  expect(subject.categories.length).toEqual(10)
+})
+
+test('will not show some categories based upon our filter', () => {
+  const subject = render({ emojisToShowFilter: () => false })
+  expect(subject.categories.length).toEqual(2)
+})
+
+test('maintains category ids after it is filtered', () => {
+  const subject = render({ emojisToShowFilter: () => true })
+  const categoriesWithIds = subject.categories.filter((category) => category.id)
+  expect(categoriesWithIds.length).toEqual(10)
+})

src/components/search.js

@@ -28,7 +28,8 @@ export default class Search extends React.PureComponent {
 
   componentDidMount() {
     // in some cases (e.g. preact) the input may already be pre-populated
-    if (this.input.value) {
+    // this.input is undefined in Jest tests
+    if (this.input && this.input.value) {
       this.search(this.input.value)
     }
   }

src/utils/emoji-index/__tests__/emoji-index.test.js

@@ -0,0 +1,40 @@
+import emojiIndex from '../emoji-index.js'
+
+test('should work', () => {
+  expect(emojiIndex.search('pineapple')).toEqual([
+    {
+      id: 'pineapple',
+      name: 'Pineapple',
+      colons: ':pineapple:',
+      emoticons: [],
+      unified: '1f34d',
+      skin: null,
+      native: '🍍',
+    },
+  ])
+})
+
+test('should filter only emojis we care about, exclude pineapple', () => {
+  let emojisToShowFilter = (data) => {
+    data.unified !== '1F34D'
+  }
+  expect(
+    emojiIndex.search('apple', { emojisToShowFilter }).map((obj) => obj.id),
+  ).not.toContain('pineapple')
+})
+
+test('can include/exclude categories', () => {
+  expect(emojiIndex.search('flag', { include: ['people'] })).toEqual([])
+})
+
+test('can search for thinking_face', () => {
+  expect(emojiIndex.search('thinking_fac').map((x) => x.id)).toEqual([
+    'thinking_face',
+  ])
+})
+
+test('can search for woman-facepalming', () => {
+  expect(emojiIndex.search('woman-facep').map((x) => x.id)).toEqual([
+    'woman-facepalming',
+  ])
+})