chore: add boolean field tests for schema (#3720)

dnbexperience · Jun 18, 2024 · 42ad4cc · 42ad4cc
1 parent d673928
commit 42ad4cc
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 1 deletion.
diff --git a/...sign-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/info.mdx b/...sign-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/info.mdx
@@ -13,6 +13,30 @@ import { Field } from '@dnb/eufemia/extensions/forms'
 render(<Field.Boolean path="/myState" />)
 ```
 
-### Indeterminate checkbox
+## Indeterminate checkbox
 
 Here is a indeterminate state (partially checked) [working example](/uilib/extensions/forms/base-fields/Indeterminate/).
+
+## Schema validation
+
+You can use a Ajv schema to validate the value with either `const` or `enum`.
+
+```tsx
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
+
+const schema = {
+  type: 'object',
+  properties: {
+    myField: {
+      type: 'boolean',
+      const: true, // or enum: [true]
+    },
+  },
+}
+
+render(
+  <Form.Handler schema={schema} data={{ myField: false }}>
+    <Field.Boolean path="/myField" />
+  </Form.Handler>,
+)
+```
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx
@@ -3,6 +3,9 @@ import { axeComponent } from '../../../../../core/jest/jestSetup'
 import { screen, render, waitFor, fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { DataContext, Field, Form } from '../../..'
+import nbNO from '../../../constants/locales/nb-NO'
+
+const nb = nbNO['nb-NO']
 
 describe('Field.Boolean', () => {
   describe('variant: checkbox', () => {
@@ -699,4 +702,102 @@ describe('Field.Boolean', () => {
       })
     })
   })
+
+  describe('schema', () => {
+    it('should validate with schema and const', () => {
+      const booleanSchema = {
+        type: 'boolean',
+        const: true,
+      }
+
+      render(
+        <Field.Boolean
+          value={false}
+          schema={booleanSchema}
+          validateInitially
+        />
+      )
+
+      const formStatus = document.querySelector('.dnb-form-status')
+      expect(formStatus).toBeInTheDocument()
+      expect(formStatus).toHaveTextContent('must be equal to constant')
+    })
+
+    it('should validate with schema and enum', () => {
+      const booleanSchema = {
+        type: 'boolean',
+        enum: [true],
+      }
+
+      render(
+        <Field.Boolean
+          value={false}
+          schema={booleanSchema}
+          validateInitially
+        />
+      )
+
+      const formStatus = document.querySelector('.dnb-form-status')
+      expect(formStatus).toBeInTheDocument()
+      expect(formStatus).toHaveTextContent(
+        'must be equal to one of the allowed values'
+      )
+    })
+
+    it('should validate with schema given in context', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          myField: {
+            type: 'boolean',
+            const: true,
+          },
+        },
+      }
+
+      render(
+        <Form.Handler schema={schema} data={{ myField: false }}>
+          <Field.Boolean path="/myField" validateInitially />
+        </Form.Handler>
+      )
+
+      const formStatus = document.querySelector('.dnb-form-status')
+      expect(formStatus).toBeInTheDocument()
+      expect(formStatus).toHaveTextContent('must be equal to constant')
+    })
+
+    it('should validate with schema interactively', async () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          myField: {
+            type: 'boolean',
+            const: true,
+          },
+        },
+      }
+
+      render(
+        <Form.Handler schema={schema} data={{ myField: undefined }}>
+          <Field.Boolean required path="/myField" />
+        </Form.Handler>
+      )
+
+      const form = document.querySelector('form')
+      const formStatus = () => document.querySelector('.dnb-form-status')
+
+      fireEvent.submit(form)
+      expect(formStatus()).toBeInTheDocument()
+      expect(formStatus()).toHaveTextContent(nb.Field.errorRequired)
+
+      await userEvent.click(document.querySelector('input'))
+      expect(formStatus()).not.toBeInTheDocument()
+
+      await userEvent.click(document.querySelector('input'))
+
+      fireEvent.submit(form)
+      expect(formStatus()).toBeInTheDocument()
+      expect(formStatus()).toHaveTextContent('must be equal to constant')
+    })
+  })
 })