Skip to content

Commit

Permalink
Set up jest infrastructure
Browse files Browse the repository at this point in the history
  • Loading branch information
@zxqx
zxqx committed Jan 30, 2017
1 parent 63dec97 commit 1f85a4b
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 197 deletions.
3 changes: 3 additions & 0 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
"max-len": 0,
"brace-style": [2, "stroustrup"]
},
"globals": {
"expect": true
},
"plugins": [
"react"
]
Expand Down
38 changes: 21 additions & 17 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,28 @@
"main": "lib/passwordMask.min.js",
"scripts": {
"build": "webpack",
"test": "karma start test/karma.conf.js",
"coverage": "cat ./coverage/lcov/lcov.info | coveralls",
"test": "jest",
"test:update": "jest -u",
"coverage": "cat ./coverage/lcov.info | coveralls",
"lint": "eslint src test",
"precommit": "npm run lint",
"preversion": "npm run build",
"example": "node example/server.js",
"example:build": "cross-env NODE_ENV=production webpack --config example/webpack.config.build.js",
"dropbox": "cp -r example/dist/* ~/Dropbox/Public/demos/react-password-mask/"
},
"jest": {
"testRegex": "test/index.js",
"moduleFileExtensions": [
"js",
"json"
],
"collectCoverage": "true",
"coverageDirectory": "coverage",
"coverageReporters": [
"lcov"
]
},
"repository": {
"type": "git",
"url": "git+https://github.com/zakangelle/react-password-mask.git"
Expand Down Expand Up @@ -42,14 +55,13 @@
"babel-cli": "^6.16.0",
"babel-core": "^6.14.0",
"babel-eslint": "^6.1.2",
"babel-jest": "^18.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-istanbul": "^2.0.1",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.5.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.5.0",
"chai": "^3.5.0",
"chai-enzyme": "^0.5.2",
"coveralls": "^2.11.14",
"cross-env": "^3.1.3",
"css-loader": "^0.25.0",
Expand All @@ -61,20 +73,12 @@
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"html-webpack-plugin": "^2.22.0",
"husky": "^0.11.9",
"istanbul": "^1.1.0-alpha.1",
"jest": "^18.1.0",
"json-loader": "^0.5.4",
"karma": "^1.3.0",
"karma-babel-preprocessor": "^6.0.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.2.0",
"karma-mocha-reporter": "^2.2.0",
"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",
"react-addons-test-utils": "^15.4.2",
"react-dom": "^15.3.2",
"react-test-renderer": "^15.4.2",
"sinon": "^1.17.6",
"style-loader": "^0.13.1",
"webpack": "^2.1.0-beta.25",
Expand Down
64 changes: 64 additions & 0 deletions test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
exports[`<PasswordMask /> renders password mask 1`] = `
<div
style={
Object {
"position": "relative",
}
}>
<input
className={undefined}
id="password"
name="password"
onChange={[Function]}
onFocus={[Function]}
placeholder="Enter password"
style={
Object {
"borderColor": "aqua",
"display": "block",
"width": "100%",
}
}
type="password"
value="" />
<input
className={undefined}
id=""
name=""
onChange={[Function]}
onFocus={[Function]}
placeholder="Enter password"
style={
Object {
"borderColor": "aqua",
"display": "none",
"width": "100%",
}
}
type="text"
value="" />
<a
href=""
onClick={[Function]}
onMouseDown={[Function]}
style={
Object {
"MozUserSelect": "none",
"WebkitUserSelect": "none",
"background": "cornsilk",
"borderRadius": "2px",
"color": "#000",
"marginTop": "-13px",
"padding": "4px 10px",
"position": "absolute",
"right": "6px",
"textAlign": "center",
"textDecoration": "none",
"top": "50%",
"userSelect": "none",
}
}>
Show
</a>
</div>
`;
116 changes: 16 additions & 100 deletions test/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,24 @@
import React from 'react';
import { mount, shallow } from 'enzyme';
import chai, { expect } from 'chai';
import chaiEnzyme from 'chai-enzyme';
import sinon from 'sinon';
import renderer from 'react-test-renderer';
import PasswordMask from '../src/index';

chai.use(chaiEnzyme());

describe('<PasswordMask />', () => {
it('renders password field', () => {
const component = shallow(
<PasswordMask
value={''}
onChange={() => ({})}
/>
);

expect(component.find('input[type="password"]')).to.be.present();
});

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

expect(component.find('input[type="text"]')).to.be.present();
});

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

expect(component.find('a')).to.be.present();
});

it('defines HTML attributes passed from props', () => {
const component = shallow(
it('renders password mask', () => {
const tree = renderer.create(
<PasswordMask
value={''}
id="password"
name="password"
placeholder="Enter password"
inputStyles={{ borderColor: 'aqua' }}
buttonStyles={{ background: 'cornsilk' }}
onChange={() => ({})}
/>
);

const input = component.find('input[type="password"]');

expect(input).to.have.attr('id').equal('password');
expect(input).to.have.attr('name').equal('password');
expect(input).to.have.attr('placeholder').equal('Enter password');
});

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

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

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

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

it('updates internal passwordShown state', () => {
Expand All @@ -92,7 +32,7 @@ describe('<PasswordMask />', () => {
const showHideButton = component.find('a');
showHideButton.simulate('click', { preventDefault: () => ({}) });

expect(component.instance().state.passwordShown).to.equal(true);
expect(component.instance().state.passwordShown).toEqual(true);
});

it('updates internal hasBeenFocused state', () => {
Expand All @@ -106,31 +46,7 @@ describe('<PasswordMask />', () => {
const input = component.find('input[type="password"]');
input.simulate('focus');

expect(component.instance().state.hasBeenFocused).to.equal(true);
});

it('applies input styles passed from props', () => {
const component = shallow(
<PasswordMask
value={''}
inputStyles={{ borderColor: 'aqua' }}
onChange={() => ({})}
/>
);

expect(component.find('input[type="password"]')).to.have.style('border-color', 'aqua');
});

it('applies button styles passed from props', () => {
const component = shallow(
<PasswordMask
value={''}
buttonStyles={{ background: 'cornsilk' }}
onChange={() => ({})}
/>
);

expect(component.find('a')).to.have.style('background', 'cornsilk');
expect(component.instance().state.hasBeenFocused).toEqual(true);
});

it('calls onChange callback', () => {
Expand All @@ -146,7 +62,7 @@ describe('<PasswordMask />', () => {
const input = component.find('input[type="password"]');
input.simulate('change');

expect(onChange.calledOnce).to.equal(true);
expect(onChange.calledOnce).toEqual(true);
});

it('calls onShow callback with value argument', () => {
Expand All @@ -163,7 +79,7 @@ describe('<PasswordMask />', () => {
const showHideButton = component.find('a');
showHideButton.simulate('click', { preventDefault: () => ({}) });

expect(onShow.withArgs('').calledOnce).to.equal(true);
expect(onShow.withArgs('').calledOnce).toEqual(true);
});

it('calls onHide callback with value argument', () => {
Expand All @@ -181,7 +97,7 @@ describe('<PasswordMask />', () => {
showHideButton.simulate('click', { preventDefault: () => ({}) });
showHideButton.simulate('click', { preventDefault: () => ({}) });

expect(onHide.withArgs('').calledOnce).to.equal(true);
expect(onHide.withArgs('').calledOnce).toEqual(true);
});

it('calls onToggle callback with value argument', () => {
Expand All @@ -199,7 +115,7 @@ describe('<PasswordMask />', () => {
showHideButton.simulate('click', { preventDefault: () => ({}) });
showHideButton.simulate('click', { preventDefault: () => ({}) });

expect(onToggle.withArgs('').calledTwice).to.equal(true);
expect(onToggle.withArgs('').calledTwice).toEqual(true);
});

it('focuses visible text field on show', () => {
Expand All @@ -218,7 +134,7 @@ describe('<PasswordMask />', () => {
passwordInput.simulate('focus');
showHideButton.simulate('click');

expect(spy.calledOnce).to.equal(true);
expect(spy.calledOnce).toEqual(true);
});

it('focuses visible password field on hide', () => {
Expand All @@ -238,7 +154,7 @@ describe('<PasswordMask />', () => {
textInput.simulate('focus');
showHideButton.simulate('click');

expect(spy.calledOnce).to.equal(true);
expect(spy.calledOnce).toEqual(true);
});

it('cancels mouseDown event', () => {
Expand All @@ -254,6 +170,6 @@ describe('<PasswordMask />', () => {
const showHideButton = component.find('a');
showHideButton.simulate('mouseDown', { preventDefault });

expect(preventDefault.calledOnce).to.equal(true);
expect(preventDefault.calledOnce).toEqual(true);
});
});

0 comments on commit 1f85a4b

Please sign in to comment.