chore: add FormRow tests

packages/dnb-eufemia/src/components/accordion/AccordionProvider.js

@@ -18,7 +18,6 @@ import {
   accordionPropTypes,
   accordionDefaultProps,
 } from './AccordionPropTypes'
-import { includeValidProps } from '../form-row/FormRowHelpers'
 
 import Context from '../../shared/Context'
 import AccordionGroupContext from './AccordionProviderContext'
@@ -61,7 +60,6 @@ export default class AccordionGroup extends React.PureComponent {
     const props = extendPropsWithContextInClassComponent(
       this.props,
       AccordionGroup.defaultProps,
-      includeValidProps(this.context.FormRow),
       this.context.Accordion,
       this.context.getTranslation(this.props).Accordion
     )

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/help-button/HelpButtonInstance.tsx

@@ -10,7 +10,6 @@ import {
   extendPropsWithContext,
 } from '../../shared/component-helper'
 import Context from '../../shared/Context'
-import { includeValidProps } from '../form-row/FormRowHelpers'
 import { createSpacingClasses } from '../space/SpacingHelper'
 import Button, { ButtonProps } from '../button/Button'
 
@@ -26,7 +25,6 @@ export default function HelpButtonInstance(localProps: ButtonProps) {
   const props = extendPropsWithContext(
     localProps,
     defaultProps,
-    includeValidProps(context.FormRow),
     context.HelpButton
   )
 

packages/dnb-eufemia/src/components/icon-primary/IconPrimary.js

@@ -8,7 +8,6 @@ import React from 'react'
 import PropTypes from 'prop-types' // Is needed because of ts types
 import Context from '../../shared/Context'
 import { extendPropsWithContextInClassComponent } from '../../shared/component-helper'
-import { includeValidProps } from '../form-row/FormRowHelpers'
 import DefaultIcon, {
   iconPropTypes,
   DefaultIconSize,
@@ -45,7 +44,6 @@ export default class IconPrimary extends React.PureComponent {
       this.props,
       IconPrimary.defaultProps,
       { skeleton: this.context?.skeleton },
-      includeValidProps(this.context.FormRow),
       this.context.Icon,
       this.context.IconPrimary
     )

packages/dnb-eufemia/src/components/icon/Icon.js

@@ -20,7 +20,6 @@ import {
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import Context from '../../shared/Context'
 import { iconCase } from './IconHelpers'
-import { includeValidProps } from '../form-row/FormRowHelpers'
 
 export const DefaultIconSize = 16
 export const DefaultIconSizes = {
@@ -116,7 +115,6 @@ export default class Icon extends React.PureComponent {
       this.props,
       Icon.defaultProps,
       { skeleton: this.context?.skeleton },
-      includeValidProps(this.context.FormRow),
       this.context.Icon
     )
 

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)