test: replace karma with jest
parent
af29bd19b0
commit
302663f8bf
12
.babelrc
12
.babelrc
|
@ -49,6 +49,18 @@
|
|||
"plugins": [
|
||||
"transform-es2015-modules-commonjs"
|
||||
]
|
||||
},
|
||||
"test": {
|
||||
"presets": [
|
||||
[
|
||||
"env",
|
||||
{
|
||||
"targets": {
|
||||
"node": "current"
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,7 +4,6 @@ scripts/
|
|||
|
||||
src/
|
||||
docs/
|
||||
spec/
|
||||
example/
|
||||
karma.conf.js
|
||||
yarn.lock
|
||||
|
|
|
@ -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,
|
||||
})
|
||||
}
|
31
package.json
31
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-core": "6.7.2",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-cli": "^6.0.0",
|
||||
"babel-core": "^6.0.0",
|
||||
"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",
|
||||
"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",
|
||||
"jest": "^23.0.0",
|
||||
"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:es": "BABEL_ENV=legacy-es babel src --out-dir dist-es --copy-files",
|
||||
"build:modern": "babel src --out-dir dist-modern --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 --ignore '**/*.test.js'",
|
||||
"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": [
|
||||
|
|
|
@ -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',
|
||||
])
|
||||
})
|
||||
})
|
||||
})
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
})
|
|
@ -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
|
|
@ -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>
|
||||
`;
|
|
@ -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()
|
||||
})
|
|
@ -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()
|
||||
|
|
|
@ -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)
|
||||
})
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
])
|
||||
})
|
Loading…
Reference in New Issue