treehouse
/
emoji-mart-lazyload
19
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #302 from nolanlawson/nolan/jest-tests 

test: replace karma with jest
release
Nolan Lawson 2019-03-14 08:34:03 -07:00 committed by GitHub
parent a8ea3506a5 302663f8bf
commit 9b6676a25d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 2442 additions and 892 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.babelrc
View File

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

1
.npmignore
View File

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

73
karma.conf.js
View File

@ -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,
})
}

29
package.json
View File

@ -31,30 +31,28 @@
"@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"
@ -63,22 +61,21 @@
"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": [

44
spec/emoji-index-spec.js
View File

@ -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',
])
})
})
})

47
spec/picker-spec.js
View File

@ -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)
})
})
})

61
spec/webpack.config.js
View File

@ -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

35
src/components/__tests__/__snapshots__/not-found.test.js.snap Normal file
View File

@ -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>
`;

32
src/components/__tests__/not-found.test.js Normal file
View File

@ -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()
})

6
src/components/category.js
View File

@ -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()

29
src/components/picker/__tests__/nimble-picker.test.js Normal file
View File

@ -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)
})

3
src/components/search.js
View File

@ -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)
}
}

40
src/utils/emoji-index/__tests__/emoji-index.test.js Normal file
View File

@ -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',
])
})

2922
yarn.lock
View File

File diff suppressed because it is too large Load Diff