Allow <When /> to be used without a <PunditProvider />

readme.md

@@ -67,8 +67,6 @@ using the `When` component.
 </When>
 ```
 
-(Note: Using `<When>` without a `<PunditProvider>` is not implemented yet).
-
 In order to avoid passing user/policy/resource props to every usage of the
 `When` component you can use the `PunditProvider`.
 

src/index.ts

@@ -1,4 +1,6 @@
 import Policy from './policy';
+import When from './react/when';
 
 export { Policy };
-export { PunditProvider, When, usePundit } from './pundit-react';
+export { PunditProvider, usePundit } from './react/pundit-provider';
+export { When };

src/policy.ts

@@ -21,4 +21,12 @@ export default class Policy {
   add(actionName: string, actionFn: ActionFunction): void {
     this.actions.set(actionName, actionFn);
   }
+
+  copy(user: unknown, record: unknown): Policy {
+    const newPolicy = new Policy(user, record);
+    this.actions.forEach((actionFunction, actionName) => {
+      newPolicy.add(actionName, actionFunction);
+    });
+    return newPolicy;
+  }
 }

src/pundit-react.tsx → src/react/pundit-provider.tsx

@@ -1,5 +1,5 @@
 import React, { JSX, ReactElement, useMemo } from 'react';
-import Policy from './policy';
+import Policy from '../policy';
 
 const PunditContext = React.createContext({ policy: new Policy(null, null) });
 
@@ -8,11 +8,6 @@ interface PunditContextProps {
   policy: Policy;
 }
 
-interface WhenProps {
-  children: JSX.Element | null;
-  can: string;
-}
-
 export const usePundit = (): { policy: Policy } => {
   const value = React.useContext(PunditContext);
   return value;
@@ -27,9 +22,3 @@ export function PunditProvider({
     <PunditContext.Provider value={value}>{children}</PunditContext.Provider>
   );
 }
-
-export function When({ can, children }: WhenProps): JSX.Element | null {
-  const { policy } = usePundit();
-  const canPerformAction = policy?.can(can);
-  return canPerformAction ? children : null;
-}

src/react/when.tsx

@@ -0,0 +1,31 @@
+import Policy from '../policy';
+import { usePundit } from './pundit-provider';
+
+interface WhenProps {
+  children: JSX.Element | null;
+  can: string;
+  policy?: Policy;
+  user?: unknown;
+  record?: unknown;
+}
+
+export default function When({
+  children,
+  can,
+  policy,
+  user,
+  record,
+}: WhenProps): JSX.Element | null {
+  const { policy: hookPolicy } = usePundit();
+  const paramPolicy = policy?.copy(user, record);
+  const canPerformAction = paramPolicy
+    ? paramPolicy.can(can)
+    : hookPolicy.can(can);
+  return canPerformAction ? children : null;
+}
+
+When.defaultProps = {
+  policy: undefined,
+  user: undefined,
+  record: undefined,
+};

test/pundit-react.test.tsx → test/react/pundit-provider.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import Policy from '../src/policy';
-import { PunditProvider, When } from '../src/pundit-react';
+import Policy from '../../src/policy';
+import { PunditProvider } from '../../src/react/pundit-provider';
+import When from '../../src/react/when';
 
 describe('<PunditProvider />', () => {
   const user = {};

test/react/when.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Policy from '../../src/policy';
+import When from '../../src/react/when';
+
+describe('<When />', () => {
+  describe('policy parameter', () => {
+    const user = {};
+    const record = {};
+    const policy = new Policy(user, record);
+    policy.add('view', () => true);
+    policy.add('edit', () => false);
+
+    it('displays <When /> child when action is permitted using "policy" param', () => {
+      render(
+        <When can="view" policy={policy}>
+          <button type="button">View</button>
+        </When>
+      );
+      expect(screen.queryByText('View')).toBeInTheDocument();
+    });
+
+    it('does not display <When /> child when action is forbidden using "policy" param', () => {
+      render(
+        <When can="edit" policy={policy}>
+          <button type="button">Edit</button>
+        </When>
+      );
+      expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    });
+
+    it('does not display <When /> child when "policy" param is missing', () => {
+      render(
+        <When can="view">
+          <button type="button">View</button>
+        </When>
+      );
+      expect(screen.queryByText('View')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('user parameter', () => {
+    const user = {};
+    const record = {};
+    const policy = new Policy(null, record);
+    policy.add('view', () => true);
+    policy.add('edit', () => false);
+
+    it('displays <When /> child when action is permitted using "user" param', () => {
+      render(
+        <When can="view" policy={policy} user={user}>
+          <button type="button">View</button>
+        </When>
+      );
+      expect(screen.queryByText('View')).toBeInTheDocument();
+    });
+
+    it('does not display <When /> child when action is forbidden using "user" param', () => {
+      render(
+        <When can="edit" policy={policy} user={user}>
+          <button type="button">Edit</button>
+        </When>
+      );
+      expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    });
+
+    it('does not display <When /> child when the "policy" param has a null user and the "user" param is missing', () => {
+      render(
+        <When can="view" policy={new Policy(null, record)}>
+          <button type="button">View</button>
+        </When>
+      );
+      expect(screen.queryByText('View')).not.toBeInTheDocument();
+    });
+
+    it('does not display <When /> child when "user" param is specified but the "policy" param is missing', () => {
+      render(
+        <When can="view" user={user}>
+          <button type="button">View</button>
+        </When>
+      );
+      expect(screen.queryByText('View')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('record parameter', () => {
+    const user = {};
+    const record = {};
+    const policy = new Policy(user, null);
+    policy.add('view', () => true);
+    policy.add('edit', () => false);
+
+    it('displays <When /> child when action is permitted using "record" param', () => {
+      render(
+        <When can="view" policy={policy} record={record}>
+          <button type="button">View</button>
+        </When>
+      );
+      expect(screen.queryByText('View')).toBeInTheDocument();
+    });
+
+    it('does not display <When /> child when action is forbidden using "record" param', () => {
+      render(
+        <When can="edit" policy={policy} record={record}>
+          <button type="button">Edit</button>
+        </When>
+      );
+      expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    });
+
+    it('does not display <When /> child when the "policy" param has a null record and the "record" param is missing', () => {
+      render(
+        <When can="view" policy={new Policy(user, null)}>
+          <button type="button">View</button>
+        </When>
+      );
+      expect(screen.queryByText('View')).not.toBeInTheDocument();
+    });
+
+    it('does not display <When /> child when the "record" param is specified but the "policy" param is missing', () => {
+      render(
+        <When can="view" record={record}>
+          <button type="button">View</button>
+        </When>
+      );
+      expect(screen.queryByText('View')).not.toBeInTheDocument();
+    });
+  });
+});