Added tests

dnbexperience · Jan 17, 2024 · 442229c · 442229c
1 parent 83c956d
commit 442229c
Show file tree

Hide file tree

Showing 7 changed files with 384 additions and 4 deletions.
diff --git a/...s/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx b/...s/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx
@@ -3,6 +3,7 @@ import { render, fireEvent, screen } from '@testing-library/react'
 import ArraySelection from '../ArraySelection'
 import Option from '../../Option'
 import { FormError } from '../../../types'
+import { FieldBlock } from '../../..'
 
 describe('ArraySelection', () => {
   it('renders correctly', () => {
@@ -199,4 +200,108 @@ describe('ArraySelection', () => {
       expect(option2).toBeDisabled()
     })
   })
+
+  describe('checkbox', () => {
+    it('renders error', () => {
+      render(
+        <ArraySelection error={new FormError('Error message')}>
+          <Option value="A" title="Fooo!" />
+          <Option value="B" title="Baar!" />
+          <Option value="C" title="Bazz!" />
+          <Option value="D" title="Quxx!" />
+        </ArraySelection>
+      )
+
+      const element = document.querySelector('.dnb-form-status')
+      expect(element).toHaveTextContent('Error message')
+
+      const [optionA, optionB, optionC, optionD]: Array<HTMLElement> =
+        Array.from(document.querySelectorAll('.dnb-checkbox'))
+      expect(optionA).toHaveClass('dnb-checkbox__status--error')
+      expect(optionB).toHaveClass('dnb-checkbox__status--error')
+      expect(optionC).toHaveClass('dnb-checkbox__status--error')
+      expect(optionD).toHaveClass('dnb-checkbox__status--error')
+    })
+
+    it('shows error style in FieldBlock', () => {
+      render(
+        <FieldBlock>
+          <ArraySelection error={new FormError('Error message')}>
+            <Option value="A" title="Fooo!" />
+            <Option value="B" title="Baar!" />
+            <Option value="C" title="Bazz!" />
+            <Option value="D" title="Quxx!" />
+          </ArraySelection>
+        </FieldBlock>
+      )
+
+      const [optionA, optionB, optionC, optionD]: Array<HTMLElement> =
+        Array.from(document.querySelectorAll('.dnb-checkbox'))
+      expect(optionA).toHaveClass('dnb-checkbox__status--error')
+      expect(optionB).toHaveClass('dnb-checkbox__status--error')
+      expect(optionC).toHaveClass('dnb-checkbox__status--error')
+      expect(optionD).toHaveClass('dnb-checkbox__status--error')
+    })
+  })
+
+  describe('button', () => {
+    it('renders error', () => {
+      render(
+        <ArraySelection
+          variant="button"
+          error={new FormError('Error message')}
+        >
+          <Option value="A" title="Fooo!" />
+          <Option value="B" title="Baar!" />
+          <Option value="C" title="Bazz!" />
+          <Option value="D" title="Quxx!" />
+        </ArraySelection>
+      )
+
+      const element = document.querySelector('.dnb-form-status')
+      expect(element).toHaveTextContent('Error message')
+
+      const [
+        optionA,
+        optionB,
+        optionC,
+        optionD,
+      ]: Array<HTMLButtonElement> = Array.from(
+        document.querySelectorAll('.dnb-toggle-button')
+      )
+      expect(optionA).toHaveClass('dnb-toggle-button__status--error')
+      expect(optionB).toHaveClass('dnb-toggle-button__status--error')
+      expect(optionC).toHaveClass('dnb-toggle-button__status--error')
+      expect(optionD).toHaveClass('dnb-toggle-button__status--error')
+    })
+
+    it('shows error style in FieldBlock', () => {
+      render(
+        <FieldBlock>
+          <ArraySelection
+            variant="button"
+            error={new FormError('Error message')}
+          >
+            <Option value="A" title="Fooo!" />
+            <Option value="B" title="Baar!" />
+            <Option value="C" title="Bazz!" />
+            <Option value="D" title="Quxx!" />
+          </ArraySelection>
+        </FieldBlock>
+      )
+
+      const [
+        optionA,
+        optionB,
+        optionC,
+        optionD,
+      ]: Array<HTMLButtonElement> = Array.from(
+        document.querySelectorAll('.dnb-toggle-button')
+      )
+      expect(optionA).toHaveClass('dnb-toggle-button__status--error')
+      expect(optionB).toHaveClass('dnb-toggle-button__status--error')
+      expect(optionC).toHaveClass('dnb-toggle-button__status--error')
+      expect(optionD).toHaveClass('dnb-toggle-button__status--error')
+    })
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Date/__tests__/Date.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Date/__tests__/Date.test.tsx
@@ -3,6 +3,7 @@ import { render, waitFor, screen, fireEvent } from '@testing-library/react'
 import Date from '..'
 import userEvent from '@testing-library/user-event'
 import { axeComponent } from '../../../../../core/jest/jestSetup'
+import { FormError, FieldBlock } from '../../..'
 
 describe('Field.Date', () => {
   it('should render with props', () => {
@@ -89,4 +90,25 @@ describe('Field.Date', () => {
       expect(await axeComponent(result)).toHaveNoViolations()
     })
   })
+
+  it('renders error', () => {
+    render(<Date error={new FormError('Error message')} />)
+
+    const element = document.querySelector('.dnb-form-status')
+    expect(element).toHaveTextContent('Error message')
+
+    const input = document.querySelector('.dnb-date-picker')
+    expect(input).toHaveClass('dnb-date-picker__status--error')
+  })
+
+  it('shows error style in FieldBlock', () => {
+    render(
+      <FieldBlock>
+        <Date error={new FormError('Error message')} />
+      </FieldBlock>
+    )
+
+    const input = document.querySelector('.dnb-date-picker')
+    expect(input).toHaveClass('dnb-date-picker__status--error')
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/Expiry.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/Expiry.test.tsx
@@ -3,6 +3,7 @@ import { axeComponent } from '../../../../../core/jest/jestSetup'
 import { act, render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as Field from '../..'
+import { FormError, FieldBlock } from '../../..'
 
 describe('Field.Expiry', () => {
   beforeEach(() => {
@@ -311,4 +312,25 @@ describe('Field.Expiry', () => {
 
     expect(await axeComponent(result)).toHaveNoViolations()
   })
+
+  it('renders error', () => {
+    render(<Field.Expiry error={new FormError('Error message')} />)
+
+    const element = document.querySelector('.dnb-form-status')
+    expect(element).toHaveTextContent('Error message')
+
+    const input = document.querySelector('.dnb-input')
+    expect(input).toHaveClass('dnb-input__status--error')
+  })
+
+  it('shows error style in FieldBlock', () => {
+    render(
+      <FieldBlock>
+        <Field.Expiry error={new FormError('Error message')} />
+      </FieldBlock>
+    )
+
+    const input = document.querySelector('.dnb-input')
+    expect(input).toHaveClass('dnb-input__status--error')
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
@@ -3,6 +3,7 @@ import { axeComponent, wait } from '../../../../../core/jest/jestSetup'
 import { screen, render, fireEvent, act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as Field from '../../'
+import { FormError, FieldBlock } from '../../..'
 
 describe('Field.Number', () => {
   describe('props', () => {
@@ -111,6 +112,20 @@ describe('Field.Number', () => {
       expect(element.className).toContain('dnb-input__status--error')
     })
 
+    it('shows error style in FieldBlock', () => {
+      const errorMessage = new FormError('Error message')
+      render(
+        <FieldBlock>
+          <Field.Number error={errorMessage} />
+        </FieldBlock>
+      )
+
+      const input = document.querySelector(
+        '.dnb-forms-field-number__input'
+      )
+      expect(input).toHaveClass('dnb-input__status--error')
+    })
+
     it('formats with given thousandSeparator', () => {
       const { rerender } = render(
         <Field.Number value={12345} thousandSeparator=" " />

diff --git a/...ges/dnb-eufemia/src/extensions/forms/Field/SelectCountry/__tests__/SelectCountry.test.tsx b/...ges/dnb-eufemia/src/extensions/forms/Field/SelectCountry/__tests__/SelectCountry.test.tsx
@@ -3,7 +3,7 @@ import { axeComponent } from '../../../../../core/jest/jestSetup'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import SelectCountry, { Props } from '..'
 import { Provider } from '../../../../../shared'
-import { Form, FormError } from '../../..'
+import { Form, FormError, FieldBlock } from '../../..'
 
 describe('Field.SelectCountry', () => {
   it('should render with props', () => {
@@ -267,15 +267,27 @@ describe('Field.SelectCountry', () => {
     expect(selectedItemElement().textContent).toBe('Danmark')
   })
 
-  it('shold display read border on dropdown', () => {
+  it('renders error', () => {
     const errorMessage = new FormError('Error message')
     render(<SelectCountry error={errorMessage} />)
 
+    const element = document.querySelector('.dnb-form-status')
+    expect(element).toHaveTextContent('Error message')
+
     const input = document.querySelector('.dnb-autocomplete__input')
     expect(input).toHaveClass('dnb-input__status--error')
+  })
 
-    const element = document.querySelector('.dnb-form-status')
-    expect(element).toHaveTextContent('Error message')
+  it('shows error style in FieldBlock', () => {
+    const errorMessage = new FormError('Error message')
+    render(
+      <FieldBlock>
+        <SelectCountry error={errorMessage} />
+      </FieldBlock>
+    )
+
+    const input = document.querySelector('.dnb-autocomplete__input')
+    expect(input).toHaveClass('dnb-input__status--error')
   })
 
   it('should validate with ARIA rules', async () => {

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/String.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/String.test.tsx
@@ -10,6 +10,7 @@ import {
 import userEvent from '@testing-library/user-event'
 import * as DataContext from '../../../DataContext'
 import * as Field from '../..'
+import { FieldBlock } from '../../..'
 
 export async function expectNever(callable: () => unknown): Promise<void> {
   await expect(() => waitFor(callable)).rejects.toEqual(expect.anything())
@@ -221,6 +222,16 @@ describe('Field.String', () => {
         expect(element.className).toContain('dnb-input__status--error')
       })
 
+      it('for basis input in FieldBlock', () => {
+        render(
+          <FieldBlock>
+            <Field.String error={new Error('This is what went wrong')} />
+          </FieldBlock>
+        )
+        const element = document.querySelector('.dnb-input')
+        expect(element.className).toContain('dnb-input__status--error')
+      })
+
       it('for masked input', () => {
         render(
           <Field.String
@@ -232,6 +243,19 @@ describe('Field.String', () => {
         expect(element.className).toContain('dnb-input__status--error')
       })
 
+      it('for masked input in FieldBlock', () => {
+        render(
+          <FieldBlock>
+            <Field.String
+              mask={[/\/d/]}
+              error={new Error('This is what went wrong')}
+            />
+          </FieldBlock>
+        )
+        const element = document.querySelector('.dnb-input-masked')
+        expect(element.className).toContain('dnb-input__status--error')
+      })
+
       it('for multiline input', () => {
         render(
           <Field.String
@@ -242,6 +266,19 @@ describe('Field.String', () => {
         const element = document.querySelector('.dnb-textarea')
         expect(element.className).toContain('dnb-textarea__status--error')
       })
+
+      it('for multiline in FieldBlock', () => {
+        render(
+          <FieldBlock>
+            <Field.String
+              multiline
+              error={new Error('This is what went wrong')}
+            />
+          </FieldBlock>
+        )
+        const element = document.querySelector('.dnb-textarea')
+        expect(element.className).toContain('dnb-textarea__status--error')
+      })
     })
   })