@brainhubeu/react-permissible - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

package.json

 {
   "name": "@brainhubeu/react-permissible",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Permission management component for React",
@@ -5,0 +5,0 @@ "engines": {

src/components/permissible.js

@@ -15,3 +15,3 @@ import React, { Component } from 'react';
     ? intersection(userPermissions, requiredPermissions).length
-    : (!requiredPermissions.length || difference(requiredPermissions, userPermissions).length === 0);
+    : difference(requiredPermissions, userPermissions).length === 0;
 
@@ -18,0 +18,0 @@ class PermissibleHOC extends Component {

src/components/permissibleRender.js

@@ -21,11 +21,15 @@ import { Component } from 'react';
     }
-    return !requiredPermissions.length
-      || difference(requiredPermissions, userPermissions).length === 0;
+
+    return difference(requiredPermissions, userPermissions).length === 0;
   }
 
   render() {
-    const { renderOtherwise } = this.props;
+    const { children, userPermissions, requiredPermissions, renderOtherwise } = this.props;
 
+    if (!children || !userPermissions || !requiredPermissions) {
+      return null;
+    }
+
     if (this.checkPermissions()) {
-      return this.props.children;
+      return children;
     } else if (renderOtherwise) {
@@ -32,0 +36,0 @@ return renderOtherwise;

test/permissible.test.js

@@ -37,2 +37,40 @@ import React from 'react';
 
+  it('doesn\'t run a callback function if `requiredPermissions` and `userPermissions` are both empty', done => {
+    let err = null;
+
+    const AccessibleRoute = Permissible(
+      () => <AccessedComponent />,
+      [],
+      [],
+      () => {
+        err = new Error('Callback function called.');
+      }
+    );
+
+    shallow(
+      <AccessibleRoute />
+    );
+
+    done(err);
+  });
+
+  it('doesn\'t run a callback function if only `requiredPermissions` are empty', done => {
+    let err = null;
+
+    const AccessibleRoute = Permissible(
+      () => <AccessedComponent />,
+      ['SOME_PERMISSION'],
+      [],
+      () => {
+        err = new Error('Callback function called.');
+      }
+    );
+
+    shallow(
+      <AccessibleRoute />
+    );
+
+    done(err);
+  });
+
   it('runs a callback function if the permissions don\'t match', done => {
@@ -39,0 +77,0 @@ const AccessibleRoute = Permissible(

test/permissibleRender.test.js

@@ -9,2 +9,4 @@ import React from 'react';
 
+const should = chai.should();
+
 const { document } = (new JSDOM('')).window;
@@ -18,7 +20,5 @@ global.document = document;
 describe('PermissibleRender', () => {
-  let props;
-
   const ChildComponent = () => (
     <div>
-      {'Child component'}
+      Child component
     </div>
@@ -29,15 +29,11 @@ );
     <div>
-      {'Not allowed component'}
+      Not allowed component
     </div>
   );
 
-  // clear props before each test
-  beforeEach(() => {
-    props = {
-      userPermissions: [],
-      requiredPermimissions: [],
+  it('doesn\'t render a <ChildComponent /> if `userPermissions` prop is not set', () => {
+    const props = {
+      requiredPermissions: [],
     };
-  });
 
-  it('doesn\'t render a <div /> if there are no props', () => {
     const mountedComponent = mount(
@@ -49,10 +45,9 @@ <PermissibleRender {...props}>
 
-    const searchedElement = mountedComponent.find('div');
+    const searchedElement = mountedComponent.find('ChildComponent');
     searchedElement.length.should.be.equal(0);
   });
 
-  it('doesn\'t render a <div /> if there is a permission mismatch', () => {
-    props = {
-      userPermissions: ['REQUIRED_PERMISSION'],
-      requiredPermissions: ['ANOTHER_PERMISSION'],
+  it('doesn\'t render a <ChildComponent /> if `requiredPermissions` prop is not set', () => {
+    const props = {
+      userPermissions: [],
     };
@@ -66,10 +61,9 @@
 
-    const searchedElement = mountedComponent.find('div');
+    const searchedElement = mountedComponent.find('ChildComponent');
     searchedElement.length.should.be.equal(0);
   });
 
-  it('always renders a <div /> if the user has required permission', () => {
-    props = {
-      userPermissions: ['REQUIRED_PERMISSION'],
-      requiredPermissions: ['REQUIRED_PERMISSION'],
+  it('renders nothing if `children` prop is not set', () => {
+    const props = {
+      userPermissions: [],
     };
@@ -79,2 +73,17 @@
       <PermissibleRender {...props}>
+
+      </PermissibleRender>
+    );
+
+    should.not.exist(mountedComponent.find('PermissibleRender').html());
+  });
+
+  it('renders a <ChildComponent /> if user permissions and required permissions are both empty', () => {
+    const props = {
+      userPermissions: [],
+      requiredPermissions: [],
+    };
+
+    const mountedComponent = mount(
+      <PermissibleRender {...props}>
         <ChildComponent />
@@ -84,7 +93,12 @@ </PermissibleRender>
 
-    const searchedElement = mountedComponent.find('div');
-    searchedElement.length.should.be.greaterThan(0);
+    const searchedElement = mountedComponent.find('ChildComponent');
+    searchedElement.length.should.be.equal(1);
   });
 
-  it('doesn\'t render a ChildComponent if there are no props', () => {
+  it('renders a <ChildComponent /> if only required permissions are empty', () => {
+    const props = {
+      userPermissions: ['SOME_PERMISSION'],
+      requiredPermissions: [],
+    };
+
     const mountedComponent = mount(
@@ -97,10 +111,11 @@ <PermissibleRender {...props}>
     const searchedElement = mountedComponent.find('ChildComponent');
-    searchedElement.length.should.be.equal(0);
+    searchedElement.length.should.be.equal(1);
   });
 
-  it('doesn\'t render a ChildComponent if there is a permission mismatch', () => {
-    props = {
+  it('doesn\'t render a <ChildComponent /> if there is a permission mismatch', () => {
+    const props = {
       userPermissions: ['REQUIRED_PERMISSION'],
       requiredPermissions: ['ANOTHER_PERMISSION'],
     };
+
     const mountedComponent = mount(
@@ -116,7 +131,8 @@ <PermissibleRender {...props}>
 
-  it('always renders a ChildComponent if the user has required permission', () => {
-    props = {
+  it('renders a <ChildComponent /> if the user has required permission', () => {
+    const props = {
       userPermissions: ['REQUIRED_PERMISSION'],
       requiredPermissions: ['REQUIRED_PERMISSION'],
     };
+
     const mountedComponent = mount(
@@ -132,4 +148,4 @@ <PermissibleRender {...props}>
 
-  it('renders a NotAllowedCOmponent if the user doesn\'t have required permissions and renderOtherwise is given', () => {
-    props = {
+  it('renders a <NotAllowedComponent /> if the user doesn\'t have required permissions and renderOtherwise is given', () => {
+    const props = {
       userPermissions: ['REQUIRED_PERMISSION'],
@@ -139,2 +155,3 @@ requiredPermissions: ['NOT_REQUIRED_PERMISSION'],
     };
+
     const mountedComponent = mount(
@@ -150,4 +167,4 @@ <PermissibleRender {...props}>
 
-  it('renders a component if the user has one of necessary conditions when `oneperm` prop is defined', () => {
-    props = {
+  it('renders a <ChildComponent /> if the user has one of necessary conditions when `oneperm` prop is defined', () => {
+    const props = {
       userPermissions: ['ANOTHER_PERMISSION'],
@@ -157,2 +174,3 @@ requiredPermissions: ['REQUIRED_PERMISSION', 'ANOTHER_PERMISSION'],
     };
+
     const mountedComponent = mount(
@@ -168,4 +186,4 @@ <PermissibleRender {...props}>
 
-  it('doesn\'t render a component if the user hasn\'t all of necessary permissions when `oneperm` prop isn\'t defined', () => {
-    props = {
+  it('doesn\'t render a <ChildComponent /> if the user doesn\'t have all of necessary permissions when `oneperm` prop is explicitly set to false', () => {
+    const props = {
       userPermissions: ['REQUIRED_PERMISSION'],
@@ -175,2 +193,3 @@ requiredPermissions: ['REQUIRED_PERMISSION', 'ANOTHER_PERMISSION'],
     };
+
     const mountedComponent = mount(
@@ -177,0 +196,0 @@ <PermissibleRender {...props}>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83416

increased by1.51%

Lines of code

1437

increased by2.94%

No dependency changes