feat(forms): add activeWhen prop to Wizard.Step

Co-authored-by: Joakim Bjerknes <joakbjerk@gmail.com>

packages/dnb-eufemia/src/extensions/forms/Form/Visibility/Visibility.tsx

@@ -12,7 +12,7 @@ import type { UseFieldProps } from '../../types'
 import type { DataAttributes } from '../../hooks/useFieldProps'
 import { FilterData } from '../../DataContext'
 
-type VisibleWhen =
+export type VisibleWhen =
   | {
       path: string
       hasValue: unknown

packages/dnb-eufemia/src/extensions/forms/Form/Visibility/__tests__/useVisibility.test.tsx

@@ -0,0 +1,348 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react'
+import { Provider } from '../../../DataContext'
+import useVisibility from '../useVisibility'
+
+describe('useVisibility', () => {
+  describe('visibility', () => {
+    it('renders children when visible is true', () => {
+      const { result } = renderHook(() =>
+        useVisibility({
+          visible: true,
+        })
+      )
+      expect(result.current.check()).toBe(true)
+    })
+
+    it('does not render children when visible is false', () => {
+      const { result } = renderHook(() =>
+        useVisibility({
+          visible: false,
+        })
+      )
+      expect(result.current.check()).toBe(false)
+    })
+  })
+
+  describe('pathDefined', () => {
+    it('renders children when target path is defined', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathDefined: '/isDefined',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ isDefined: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(true)
+    })
+
+    it('does not render children when target path is not defined', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathDefined: '/notDefined',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ isDefined: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(false)
+    })
+  })
+
+  describe('pathUndefined', () => {
+    it('renders children when target path is defined', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathUndefined: '/isDefined',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ isDefined: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(false)
+    })
+
+    it('does not render children when target path is not defined', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathUndefined: '/notDefined',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ isDefined: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(true)
+    })
+  })
+
+  describe('pathTruthy', () => {
+    it('renders children when target path is truthy', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathTruthy: '/isTruthy',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ isTruthy: 'value' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(true)
+    })
+
+    it('does not render children when target path is not truthy', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathTruthy: '/isFalsy',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ isFalsy: null }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(false)
+    })
+
+    it('does not render children when target path is not defined', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathTruthy: '/isNotDefined',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ isFalse: false }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(false)
+    })
+  })
+
+  describe('pathFalsy', () => {
+    it('renders children when target path is falsy', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathFalsy: '/isFalsy',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ isFalsy: null }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(true)
+    })
+
+    it('renders children when target path is not defined', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathFalsy: '/isNotDefined',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ isFalse: false }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(true)
+    })
+
+    it('does not render children when target path is not falsy', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathFalsy: '/isTruthy',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ isTruthy: 'value' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(false)
+    })
+  })
+
+  describe('pathValue', () => {
+    it('renders children when target path and value matches', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathValue: '/myPath',
+            whenValue: 'checked',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ myPath: 'checked' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(true)
+    })
+
+    it('does not render children when target path does not match value', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            pathValue: '/myPath',
+            whenValue: 'not-checked',
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ myPath: 'checked' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(false)
+    })
+  })
+
+  describe('visibleWhen', () => {
+    it('should render children when hasValue matches', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            visibleWhen: {
+              path: '/myPath',
+              hasValue: 'foo',
+            },
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ myPath: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(true)
+    })
+
+    it('should not render children when hasValue does not match', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            visibleWhen: {
+              path: '/myPath',
+              hasValue: 'bar',
+            },
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ myPath: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(false)
+    })
+
+    it('should not render children when path does not match', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            visibleWhen: {
+              path: '/nonExistingPath',
+              hasValue: 'foo',
+            },
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ myPath: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(false)
+    })
+
+    it('should render children when withValue matches', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            visibleWhen: {
+              path: '/myPath',
+              withValue: (value) => value === 'foo',
+            },
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ myPath: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(true)
+    })
+
+    it('should not render children when withValue not matches', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            visibleWhen: {
+              path: '/myPath',
+              withValue: (value) => value === 'bar',
+            },
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ myPath: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(false)
+    })
+  })
+
+  describe('visibleWhenNot', () => {
+    it('should render children when hasValue matches', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            visibleWhenNot: {
+              path: '/myPath',
+              hasValue: 'foo',
+            },
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ myPath: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(false)
+    })
+
+    it('should not render children when hasValue does not match', () => {
+      const { result } = renderHook(
+        () =>
+          useVisibility({
+            visibleWhenNot: {
+              path: '/myPath',
+              hasValue: 'bar',
+            },
+          }),
+        {
+          wrapper: ({ children }) => (
+            <Provider data={{ myPath: 'foo' }}>{children}</Provider>
+          ),
+        }
+      )
+      expect(result.current.check()).toBe(true)
+    })
+  })
+})