Skip to content

Commit

Permalink
Set up karma for browser testing
Browse files Browse the repository at this point in the history
  • Loading branch information
@zxqx
zxqx committed Oct 13, 2016
1 parent cb56503 commit a5abea1
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 13 deletions.
12 changes: 10 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"scripts": {
"build": "webpack --mode=build",
"dev": "webpack --progress --colors --watch --mode=dev",
"test": "mocha --compilers js:babel-core/register --colors ./test/*.js",
"test:watch": "mocha --compilers js:babel-core/register --colors -w ./test/*.js",
"test": "karma start test/karma.conf.js --single-run",
"test:watch": "karma start test/karma.conf.js",
"example": "node example/server.js",
"preversion": "npm run build",
"coverage": "istanbul cover ./node_modules/.bin/_mocha --report lcovonly -- --compilers js:babel-core/register -R spec ./test/*.js && cat ./coverage/lcov.info | coveralls",
Expand Down Expand Up @@ -55,6 +55,14 @@
"eslint-plugin-react": "^3.16.1",
"html-webpack-plugin": "^2.22.0",
"istanbul": "^1.1.0-alpha.1",
"json-loader": "^0.5.4",
"karma-babel-preprocessor": "^6.0.1",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"mocha": "^3.0.2",
"react": "^15.3.2",
"react-addons-test-utils": "^15.3.2",
Expand Down
52 changes: 41 additions & 11 deletions test/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { mount, shallow } from 'enzyme';
import chai, { expect } from 'chai';
import chaiEnzyme from 'chai-enzyme';
import sinon from 'sinon';
Expand All @@ -14,23 +14,32 @@ const state = {
describe('<PasswordMask />', () => {
it('renders password field', () => {
const component = shallow(
<PasswordMask value={state.password} />
<PasswordMask
value={state.password}
onChange={e => state.password = e.target.value}
/>
);

expect(component.find('input[type="password"]')).to.have.length(1);
});

it('renders text field', () => {
const component = shallow(
<PasswordMask value={state.password} />
<PasswordMask
value={state.password}
onChange={e => state.password = e.target.value}
/>
);

expect(component.find('input[type="text"]')).to.have.length(1);
});

it('renders show/hide button', () => {
const component = shallow(
<PasswordMask value={state.password} />
<PasswordMask
value={state.password}
onChange={e => state.password = e.target.value}
/>
);

expect(component.find('a')).to.have.length(1);
Expand All @@ -43,6 +52,7 @@ describe('<PasswordMask />', () => {
id="password"
name="password"
placeholder="Enter password"
onChange={e => state.password = e.target.value}
/>
);

Expand All @@ -55,23 +65,32 @@ describe('<PasswordMask />', () => {

it('shows password field by default', () => {
const component = shallow(
<PasswordMask value={state.password} />
<PasswordMask
value={state.password}
onChange={e => state.password = e.target.value}
/>
);

expect(component.find('input[type="password"]')).to.have.style('display', 'block');
});

it('hides text field by default', () => {
const component = shallow(
<PasswordMask value={state.password} />
<PasswordMask
value={state.password}
onChange={e => state.password = e.target.value}
/>
);

expect(component.find('input[type="text"]')).to.have.style('display', 'none');
});

it('updates internal showPassword state', () => {
const component = shallow(
<PasswordMask value={state.password} />
<PasswordMask
value={state.password}
onChange={e => state.password = e.target.value}
/>
);

const showHideButton = component.find('a');
Expand All @@ -82,7 +101,10 @@ describe('<PasswordMask />', () => {

it('updates internal hasBeenFocused state', () => {
const component = shallow(
<PasswordMask value={state.password} />
<PasswordMask
value={state.password}
onChange={e => state.password = e.target.value}
/>
);

const input = component.find('input[type="password"]');
Expand All @@ -96,6 +118,7 @@ describe('<PasswordMask />', () => {
<PasswordMask
value={state.password}
inputStyles={{ borderColor: 'aqua' }}
onChange={e => state.password = e.target.value}
/>
);

Expand All @@ -108,13 +131,14 @@ describe('<PasswordMask />', () => {
const component = shallow(
<PasswordMask
value={state.password}
buttonStyles={{ background: 'smoke' }}
buttonStyles={{ background: 'cornsilk' }}
onChange={e => state.password = e.target.value}
/>
);

const showHideButton = component.find('a');

expect(showHideButton).to.have.style('background', 'smoke');
expect(showHideButton).to.have.style('background', 'cornsilk');
});

it('calls onChange callback', () => {
Expand All @@ -138,6 +162,7 @@ describe('<PasswordMask />', () => {
<PasswordMask
value={state.password}
onShow={onShow}
onChange={e => state.password = e.target.value}
/>
);

Expand All @@ -154,6 +179,7 @@ describe('<PasswordMask />', () => {
<PasswordMask
value={state.password}
onHide={onHide}
onChange={e => state.password = e.target.value}
/>
);

Expand All @@ -171,6 +197,7 @@ describe('<PasswordMask />', () => {
<PasswordMask
value={state.password}
onToggle={onToggle}
onChange={e => state.password = e.target.value}
/>
);

Expand All @@ -185,7 +212,10 @@ describe('<PasswordMask />', () => {
const preventDefault = sinon.spy();

const component = shallow(
<PasswordMask value={state.password} />
<PasswordMask
value={state.password}
onChange={e => state.password = e.target.value}
/>
);

const showHideButton = component.find('a');
Expand Down
62 changes: 62 additions & 0 deletions test/karma.conf.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
var path = require('path');

module.exports = function(config) {
config.set({
basePath: '../',
frameworks: ['mocha'],
files: ['test/*.js'],

preprocessors: {
'src/*.js': ['webpack', 'sourcemap'],
'test/*.js': ['webpack', 'sourcemap']
},

webpack: {
devtool: 'inline-source-map',
module: {
noParse: [
/\/sinon\.js/,
],
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: path.resolve(__dirname, '../node_modules'),
},
{
test: /\.json$/,
loader: 'json',
},
]
},
resolve: {
alias: {
sinon: 'sinon/pkg/sinon.js',
}
},
externals: {
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
'react/addons': true
}
},

webpackServer: {
noInfo: true
},

babelPreprocessor: {
options: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['babel-plugin-add-module-exports']
}
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
})
};

0 comments on commit a5abea1

Please sign in to comment.