react-utils-button - npm Package Compare versions

Comparing version 0.6.0 to 1.0.0

src/index.spec.js

+import chai, { expect } from 'chai';
+import sinonChai from 'sinon-chai';
+import chaiEnzyme from 'chai-enzyme';
+import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import Button from './index';
+
+chai.use(sinonChai);
+chai.use(chaiEnzyme());
+
+describe('Button Component', () => {
+    describe('when rendering the component', () => {
+        interceptConsoleErrors();
+        const sandbox = sinon.sandbox.create();
+        afterEach(() => sandbox.restore());
+
+        it('should throw warning for missing prop "value"', () => {
+            shallow(<Button />);
+            expectMissingProp('value', 'ReactUtilsButton');
+        });
+
+        it('should always have class "utils-button"', () => {
+            const wrapper = shallow(<Button value='click'/>);
+            expect(wrapper).to.have.className('utils-button');
+        });
+
+        it('should always have custom class if provided in props', () => {
+            const wrapper = shallow(<Button className='custom-class' value='click'/>);
+            expect(wrapper).to.have.className('custom-class');
+        });
+
+        it('should always have "utils-button--active" if active props is received', () => {
+            const wrapper = shallow(<Button active={true} value='click'/>);
+            expect(wrapper).to.have.className('utils-button--active');
+        });
+
+        it('should trigger the onClick callback when button is pressed', () => {
+            const callback = sandbox.stub();
+            const wrapper = shallow(<Button onClick={callback} value='click'/>);
+            wrapper.simulate('click');
+            expect(callback).to.have.been.calledOnce;
+        });
+
+        it('should not trigger onClick callback when it\'s disabled', () => {
+            const callback = sandbox.stub();
+            const wrapper = shallow(<Button onClick={callback} disabled={true} value='click'/>);
+            wrapper.simulate('click');
+            expect(callback).not.to.have.been.called;
+        });
+
+        it('should be disabled when prop is received', () => {
+            const wrapper = shallow(<Button disabled={true} value='click'/>);
+            expect(wrapper).to.have.attr('disabled', 'disabled');
+        });
+
+        it('should have the value received in props', () => {
+            const wrapper = shallow(<Button value='click'/>);
+            expect(wrapper.find('.utils-button-value')).to.have.text('click');
+        });
+    });
+});
+
+/** Intercept console errors (and warnings) in unit tests in order to check what errors ere printed */
+function interceptConsoleErrors() {
+    beforeEach(() => sinon.stub(console, 'error'));
+    afterEach(() => console.error.restore());
+}
+
+/**
+ * Assert for a missing property inside a component
+ * @param prop {String} Property name
+ * @param component {String} Component name
+ */
+function expectMissingProp(prop, component) {
+    sinon.assert.calledWithMatch(console.error, new RegExp(`Failed prop type: The prop \`${prop}\` is marked as required in \`${component}\``));
+}

webpack.spec.config.js

+'use strict';
+
+const path = require('path');
+
+const config = {
+    entry: path.join(__dirname, 'src', 'index.spec.js'),
+    output: {
+        path: path.join(__dirname, 'dist'),
+        filename: 'index.spec.js'
+    },
+
+    // Some libs need to be set as externals for enzyme
+    externals: {
+        'react/addons': 'react',
+        'react/lib/ExecutionEnvironment': 'react',
+        'react/lib/ReactContext': 'react'
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.jsx?$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader'
+            }
+        ]
+    },
+
+    resolve: {
+        modules: ['node_modules']
+    }
+};
+
+module.exports = config;

package.json

 {
   "name": "react-utils-button",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "description": "Lightweight React Button component, serving as an utility wrapper over the HTML button element.",
@@ -9,3 +9,4 @@ "author": "Raul Rene Lepsa <[e-mail]> (https://github.com/raulrene)",
   "scripts": {
-    "build": "webpack -d"
+    "build": "webpack -d",
+    "test": "webpack --config webpack.spec.config.js --hide-modules; node_modules/.bin/mocha --require jsdom-global/register dist/index.spec.js && rm dist/index.spec.js"
   },
@@ -34,6 +35,16 @@ "keywords": [
     "babel-preset-stage-2": "^6.24.1",
+    "chai": "^4.1.2",
+    "chai-enzyme": "^0.8.0",
     "clean-webpack-plugin": "^0.1.17",
+    "enzyme": "2.8.0",
+    "jsdom": "^11.3.0",
+    "jsdom-global": "^3.0.2",
+    "mocha": "^4.0.1",
     "react": "^15.6.1",
+    "react-addons-test-utils": "^15.4.0",
+    "react-dom": "^15.0.0",
+    "sinon": "^4.0.1",
+    "sinon-chai": "^2.14.0",
     "webpack": "^2.4.1"
   }
 }

src/index.js

@@ -14,3 +14,3 @@ import React from 'react';
 
-                <span className='input-button-value'>{value}</span>
+                <span className='utils-button-value'>{value}</span>
             </button>
@@ -17,0 +17,0 @@ );

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

436491

0.96%

Number of package files

10

25%

Lines of code

2093

4.6%

Number of low quality alerts

1

-50%

Worsened metrics

Dev dependency count

19

111.11%

No dependency changes