chore: add FormRow tests (#2106)

* chore: convert InputMasked to TypeScript

* chore: convert Input to TypeScript

* chore(Input): add FormRow and spacing test

* chore(InputMasked): add FormRow and spacing test

* chore(Radio): add FormRow and spacing test

* chore(Swich): add FormRow and spacing test

* chore(ToggleButton): add FormRow and spacing test

* chore(Checkbox): add FormRow and spacing test

* chore(DatePicker): add FormRow and spacing test

* chore(Slider): add FormRow test

* chore(Textarea): add FormRow and spacing test

* chore(FormStatus): add FormRow and spacing test

* fix: remove FormRow context support from components not using FormRow

FormRow is used for components that have a label.

This fix is related with PR #2031

packages/dnb-eufemia/src/components/button/Button.js

@@ -25,7 +25,6 @@ import {
   skeletonDOMAttributes,
   createSkeletonClass,
 } from '../skeleton/SkeletonHelper'
-import { includeValidProps } from '../form-row/FormRowHelpers'
 import IconPrimary from '../icon-primary/IconPrimary'
 import { launch, launch_medium } from '../../icons'
 import FormStatus from '../form-status/FormStatus'
@@ -92,7 +91,6 @@ export default class Button extends React.PureComponent {
       this.props,
       Button.defaultProps,
       { skeleton: this.context?.skeleton },
-      includeValidProps(this.context.FormRow),
       this.context.Button
     )
 

packages/dnb-eufemia/src/components/checkbox/__tests__/Checkbox.test.tsx

@@ -3,6 +3,7 @@
  *
  */
 
+import { render } from '@testing-library/react'
 import React from 'react'
 import {
   mount,
@@ -11,6 +12,7 @@ import {
   toJson,
   loadScss,
 } from '../../../core/jest/jestSetup'
+import FormRow from '../../form-row/FormRow'
 import Component from '../Checkbox'
 
 const props = fakeProps(require.resolve('../Checkbox'), {
@@ -136,6 +138,38 @@ describe('Checkbox component', () => {
     )
   })
 
+  it('should support spacing props', () => {
+    render(<Component top="2rem" />)
+
+    const element = document.querySelector('.dnb-checkbox')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-checkbox',
+      'dnb-form-component',
+      'dnb-space__top--large',
+    ])
+  })
+
+  it('should inherit FormRow vertical label', () => {
+    render(
+      <FormRow vertical>
+        <Component label="Label" />
+      </FormRow>
+    )
+
+    const element = document.querySelector('.dnb-checkbox')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['class'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-checkbox',
+      'dnb-form-component',
+      'dnb-checkbox--label-position-right',
+    ])
+  })
+
   it('should validate with ARIA rules', async () => {
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })

packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx

@@ -30,6 +30,7 @@ import {
   makeDayObject,
 } from '../DatePickerCalc'
 import { fireEvent, render } from '@testing-library/react'
+import FormRow from '../../form-row/FormRow'
 
 beforeEach(() => {
   document.body.innerHTML = ''
@@ -1323,6 +1324,42 @@ describe('DatePicker calc', () => {
       }
     })
   })
+
+  it('should support spacing props', () => {
+    render(<Component top="2rem" show_input />)
+
+    const element = document.querySelector('.dnb-date-picker')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-date-picker',
+      'dnb-form-component',
+      'dnb-space__top--large',
+      'dnb-date-picker--hidden',
+      'dnb-date-picker--show-input',
+    ])
+  })
+
+  it('should inherit FormRow vertical label', () => {
+    render(
+      <FormRow vertical>
+        <Component label="Label" show_input />
+      </FormRow>
+    )
+
+    const element = document.querySelector('.dnb-date-picker')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['class', 'lang'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-date-picker',
+      'dnb-form-component',
+      'dnb-date-picker--vertical',
+      'dnb-date-picker--hidden',
+      'dnb-date-picker--show-input',
+    ])
+  })
 })
 
 describe('DatePicker scss', () => {

packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx

@@ -14,6 +14,8 @@ import {
 } from '../../../core/jest/jestSetup'
 import Component from '../FormStatus'
 import Input from '../../input/Input'
+import { render } from '@testing-library/react'
+import FormRow from '../../form-row/FormRow'
 
 const props = fakeProps(require.resolve('../FormStatus'), {
   optional: true,
@@ -156,6 +158,40 @@ describe('FormStatus component', () => {
     const Comp = mount(<Component {...props} />)
     expect(Comp.find('.dnb-form-status__text').text()).toBe(props.text)
   })
+
+  it('should support spacing props', () => {
+    render(<Component top="2rem" />)
+
+    const element = document.querySelector('.dnb-form-status')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-form-status',
+      'dnb-form-status--error',
+      'dnb-form-status__size--default',
+      'dnb-form-status--has-content',
+    ])
+  })
+
+  it('should inherit FormRow vertical label', () => {
+    render(
+      <FormRow vertical>
+        <Component label="Label" />
+      </FormRow>
+    )
+
+    const element = document.querySelector('.dnb-form-status')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['class', 'id', 'role', 'style'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-form-status',
+      'dnb-form-status--error',
+      'dnb-form-status__size--default',
+      'dnb-form-status--has-content',
+    ])
+  })
 })
 
 describe('FormStatus scss', () => {

packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.tsx

@@ -14,6 +14,7 @@ import { render, fireEvent } from '@testing-library/react'
 import Component from '../InputMasked'
 import Provider from '../../../shared/Provider'
 import * as helpers from '../../../shared/helpers'
+import FormRow from '../../form-row/FormRow'
 
 const snapshotProps = {
   ...fakeProps(require.resolve('../InputMasked'), {
@@ -1477,6 +1478,46 @@ describe('InputMasked component as_currency', () => {
 
     expect(Comp.find('input').instance().value).toBe('12 345,12 kr')
   })
+
+  it('should support spacing props', () => {
+    render(<Component top="2rem" />)
+
+    const element = document.querySelector('.dnb-input')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-input',
+      'dnb-form-component',
+      'dnb-space__top--large',
+      'dnb-input-masked',
+      'dnb-input--text',
+    ])
+  })
+
+  it('should inherit FormRow vertical label', () => {
+    render(
+      <FormRow vertical>
+        <Component label="Label" />
+      </FormRow>
+    )
+
+    const element = document.querySelector('.dnb-input')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual([
+      'class',
+      'data-input-state',
+      'data-has-content',
+    ])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-input',
+      'dnb-form-component',
+      'dnb-input-masked',
+      'dnb-input--text',
+      'dnb-input--vertical',
+    ])
+  })
 })
 
 describe('InputMasked scss', () => {

packages/dnb-eufemia/src/components/input/__tests__/Input.test.tsx

@@ -14,6 +14,7 @@ import {
 import { render } from '@testing-library/react'
 import Component from '../Input'
 import { format } from '../../number-format/NumberUtils'
+import FormRow from '../../form-row/FormRow'
 
 const props = {
   ...fakeProps(require.resolve('../Input'), {
@@ -507,6 +508,44 @@ describe('Input with clear button', () => {
     ).toBe('focus')
   })
 
+  it('should support spacing props', () => {
+    render(<Component top="2rem" />)
+
+    const element = document.querySelector('.dnb-input')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-input',
+      'dnb-form-component',
+      'dnb-space__top--large',
+      'dnb-input--text',
+    ])
+  })
+
+  it('should inherit FormRow vertical label', () => {
+    render(
+      <FormRow vertical>
+        <Component label="Label" />
+      </FormRow>
+    )
+
+    const element = document.querySelector('.dnb-input')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual([
+      'class',
+      'data-input-state',
+      'data-has-content',
+    ])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-input',
+      'dnb-form-component',
+      'dnb-input--text',
+      'dnb-input--vertical',
+    ])
+  })
+
   it('should support icon', () => {
     const Comp = mount(<Component clear={true} icon="bell" />)
     expect(Comp.find('.dnb-input__icon').exists('svg')).toBe(true)

packages/dnb-eufemia/src/components/input/__tests__/InputPassword.test.tsx

@@ -10,7 +10,9 @@ import {
   toJson,
   axeComponent,
 } from '../../../core/jest/jestSetup'
+import { render } from '@testing-library/react'
 import Component from '../InputPassword'
+import FormRow from '../../form-row/FormRow'
 
 import nbNO from '../../../shared/locales/nb-NO'
 import enGB from '../../../shared/locales/en-GB'
@@ -140,6 +142,46 @@ describe('InputPassword component', () => {
     expect(on_hide_password).toBeCalledTimes(1)
   })
 
+  it('should support spacing props', () => {
+    render(<Component top="2rem" />)
+
+    const element = document.querySelector('.dnb-input')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-input',
+      'dnb-form-component',
+      'dnb-space__top--large',
+      'dnb-input--password',
+      'dnb-input--has-submit-element',
+    ])
+  })
+
+  it('should inherit FormRow vertical label', () => {
+    render(
+      <FormRow vertical>
+        <Component label="Label" />
+      </FormRow>
+    )
+
+    const element = document.querySelector('.dnb-input')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual([
+      'class',
+      'data-input-state',
+      'data-has-content',
+    ])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-input',
+      'dnb-form-component',
+      'dnb-input--password',
+      'dnb-input--has-submit-element',
+      'dnb-input--vertical',
+    ])
+  })
+
   it('should validate with ARIA rules as a input with a label', async () => {
     const InputPasswordComp = mount(
       <Component id="input" label="label" value="some value" />

packages/dnb-eufemia/src/components/radio/__tests__/Radio.test.tsx

@@ -3,6 +3,7 @@
  *
  */
 
+import { render } from '@testing-library/react'
 import React from 'react'
 import {
   mount,
@@ -11,6 +12,7 @@ import {
   toJson,
   loadScss,
 } from '../../../core/jest/jestSetup'
+import FormRow from '../../form-row/FormRow'
 import Component from '../Radio'
 
 const props = fakeProps(require.resolve('../Radio'), {
@@ -229,6 +231,36 @@ describe('Radio group component', () => {
     ).toBe(true)
   })
 
+  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>
+        <Component label="Label" />
+      </FormRow>
+    )
+
+    const element = document.querySelector('.dnb-radio')
+    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',
+    ])
+  })
+
   // mount compare the snapshot
   it('have to match group snapshot', () => {
     expect(toJson(Comp)).toMatchSnapshot()