chore: add additional FormRow tests (#2108)

* chore(Autocomplete): add FormRow and spacing test * chore(FormLabel): add FormRow test * chore(RadioGroup): add FormRow and spacing test * chore(Checkbox): enhance FormRow test * chore(Switch): enhance FormRow test * chore(ToggleButtonGroup): enhance FormRow test
dnbexperience · May 31, 2023 · 7eaa643 · 7eaa643
1 parent 3b1d2b1
commit 7eaa643
Show file tree

Hide file tree

Showing 6 changed files with 262 additions and 17 deletions.
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js
@@ -14,14 +14,15 @@ import {
 } from '../../../core/jest/jestSetup'
 import * as helpers from '../../../shared/helpers'
 import Component from '../Autocomplete'
-import { SubmitButton } from '../../../components/input/Input'
-import { format } from '../../../components/number-format/NumberUtils'
+import { SubmitButton } from '../../input/Input'
+import { format } from '../../number-format/NumberUtils'
 import userEvent from '@testing-library/user-event'
 import {
   mockImplementationForDirectionObserver,
   testDirectionObserver,
 } from '../../../fragments/drawer-list/__tests__/DrawerListTestMocks'
 import { render } from '@testing-library/react'
+import FormRow from '../../form-row/FormRow'
 
 const snapshotProps = {
   ...fakeProps(require.resolve('../Autocomplete'), {
@@ -2038,6 +2039,37 @@ describe('Autocomplete component', () => {
         .classList.contains('dnb-button__status--info')
     ).toBe(true)
   })
+
+  it('should support spacing props', () => {
+    render(<Component top="2rem" />)
+
+    const element = document.querySelector('.dnb-autocomplete')
+
+    expect(element.classList).toContain('dnb-space__top--large')
+  })
+
+  it('should inherit FormRow vertical label', () => {
+    render(
+      <FormRow vertical>
+        <Component label="Label" />
+      </FormRow>
+    )
+
+    const element = document.querySelector('.dnb-autocomplete')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['class'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-autocomplete',
+      'dnb-form-component',
+      'dnb-autocomplete--auto',
+      'dnb-autocomplete--vertical',
+      'dnb-autocomplete--icon-position-left',
+      'dnb-autocomplete--default',
+    ])
+  })
 })
 
 describe('Autocomplete markup', () => {

diff --git a/packages/dnb-eufemia/src/components/checkbox/__tests__/Checkbox.test.tsx b/packages/dnb-eufemia/src/components/checkbox/__tests__/Checkbox.test.tsx
@@ -152,7 +152,7 @@ describe('Checkbox component', () => {
 
   it('should inherit FormRow vertical label', () => {
     render(
-      <FormRow vertical>
+      <FormRow vertical disabled>
         <Component label="Label" />
       </FormRow>
     )
@@ -161,13 +161,29 @@ describe('Checkbox component', () => {
     const attributes = Array.from(element.attributes).map(
       (attr) => attr.name
     )
+    const inputElement = document.querySelector('.dnb-checkbox input')
+    const inputAttributes = Array.from(inputElement.attributes).map(
+      (attr) => attr.name
+    )
 
     expect(attributes).toEqual(['class'])
+    expect(inputAttributes).toEqual([
+      'id',
+      'name',
+      'type',
+      'class',
+      'disabled',
+      'aria-disabled',
+      'value',
+    ])
     expect(Array.from(element.classList)).toEqual([
       'dnb-checkbox',
       'dnb-form-component',
       'dnb-checkbox--label-position-right',
     ])
+    expect(Array.from(inputElement.classList)).toEqual([
+      'dnb-checkbox__input',
+    ])
   })
 
   it('should validate with ARIA rules', async () => {

diff --git a/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx b/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx
@@ -14,6 +14,7 @@ import {
 import { render } from '@testing-library/react'
 import Component from '../FormLabel'
 import Input from '../../input/Input'
+import FormRow from '../../form-row/FormRow'
 
 const props = fakeProps(require.resolve('../FormLabel'), {
   optional: true,
@@ -61,6 +62,25 @@ describe('FormLabel component', () => {
     ])
   })
 
+  it('should inherit FormRow vertical label', () => {
+    render(
+      <FormRow vertical>
+        <Component label="Label" />
+      </FormRow>
+    )
+
+    const element = document.querySelector('.dnb-form-label')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['class', 'label'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-form-label',
+      'dnb-form-label--vertical',
+    ])
+  })
+
   it('should validate with ARIA rules', async () => {
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })

diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/Radio.test.tsx b/packages/dnb-eufemia/src/components/radio/__tests__/Radio.test.tsx
@@ -151,6 +151,50 @@ describe('Radio component', () => {
     )
   })
 
+  it('should support spacing props', () => {
+    render(<Component top="2rem" />)
+
+    const element = document.querySelector('.dnb-radio')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-radio',
+      'dnb-space__top--large',
+    ])
+  })
+
+  it('should inherit FormRow vertical label', () => {
+    render(
+      <FormRow vertical disabled>
+        <Component label="Label" aria-label="Aria Label" />
+      </FormRow>
+    )
+
+    const element = document.querySelector('.dnb-radio')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+    const inputElement = document.querySelector('.dnb-radio input')
+    const inputAttributes = Array.from(inputElement.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['class'])
+    expect(inputAttributes).toEqual([
+      'type',
+      'id',
+      'class',
+      'aria-checked',
+      'disabled',
+      'role',
+      'aria-label',
+      'value',
+    ])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-radio',
+      'dnb-radio--label-position-right',
+    ])
+  })
+
   it('should validate with ARIA rules', async () => {
     expect(
       await axeComponent(Comp, {
@@ -232,32 +276,64 @@ describe('Radio group component', () => {
   })
 
   it('should support spacing props', () => {
-    render(<Component top="2rem" />)
+    render(
+      <Component.Group top="2rem">
+        <Component id="radio-1" label="Radio 1" value="first" />
+        <Component id="radio-2" label="Radio 2" value="second" checked />
+      </Component.Group>
+    )
 
-    const element = document.querySelector('.dnb-radio')
+    const element = document.querySelector('.dnb-radio-group')
 
     expect(Array.from(element.classList)).toEqual([
-      'dnb-radio',
+      'dnb-radio-group',
+      'dnb-radio-group--row',
+      'dnb-form-component',
       'dnb-space__top--large',
     ])
   })
 
   it('should inherit FormRow vertical label', () => {
     render(
       <FormRow vertical>
-        <Component label="Label" />
+        <Component.Group label="Label" name="group" id="group">
+          <Component id="radio-1" label="Radio 1" value="first" />
+          <Component id="radio-2" label="Radio 2" value="second" checked />
+        </Component.Group>
       </FormRow>
     )
 
-    const element = document.querySelector('.dnb-radio')
+    const element = document.querySelector('.dnb-radio-group')
     const attributes = Array.from(element.attributes).map(
       (attr) => attr.name
     )
 
     expect(attributes).toEqual(['class'])
     expect(Array.from(element.classList)).toEqual([
-      'dnb-radio',
-      'dnb-radio--label-position-right',
+      'dnb-radio-group',
+      'dnb-radio-group--row',
+      'dnb-form-component',
+    ])
+    expect(
+      Array.from(
+        document.querySelector('.dnb-radio-group .dnb-form-row').classList
+      )
+    ).toEqual([
+      'dnb-section',
+      'dnb-section--transparent',
+      'dnb-form-row',
+      'dnb-form-row--vertical',
+      'dnb-form-row--vertical-label',
+      'dnb-form-row--nested',
+    ])
+    expect(
+      Array.from(document.querySelector('.dnb-form-row').classList)
+    ).toEqual([
+      'dnb-section',
+      'dnb-section--transparent',
+      'dnb-form-row',
+      'dnb-form-row--vertical',
+      'dnb-form-row--vertical-label',
     ])
   })
 

diff --git a/packages/dnb-eufemia/src/components/switch/__tests__/Switch.test.tsx b/packages/dnb-eufemia/src/components/switch/__tests__/Switch.test.tsx
@@ -161,13 +161,29 @@ describe('Switch component', () => {
     const attributes = Array.from(element.attributes).map(
       (attr) => attr.name
     )
+    const inputElement = document.querySelector('.dnb-switch input')
+    const inputAttributes = Array.from(inputElement.attributes).map(
+      (attr) => attr.name
+    )
 
     expect(attributes).toEqual(['class'])
+    expect(inputAttributes).toEqual([
+      'id',
+      'name',
+      'type',
+      'role',
+      'aria-checked',
+      'class',
+      'value',
+    ])
     expect(Array.from(element.classList)).toEqual([
       'dnb-switch',
       'dnb-switch--label-position-right',
       'dnb-form-component',
     ])
+    expect(Array.from(inputElement.classList)).toEqual([
+      'dnb-switch__input',
+    ])
   })
 
   it('should validate with ARIA rules', async () => {