Support single child in InputGroup (#714)

`InputGroup` crashed when a single child was passed because it called
`children.reduce()` directly, assuming an array. Normalize `children`
with `React.Children.toArray()` before resolving the validation state.

Cover the `children` prop with visual tests for both a single node and
multiple nodes, and make `InputGroupForTest` accept custom `children`
while keeping the current composition as the default.

Author: bedrich-schindler

src/components/InputGroup/InputGroup.jsx

@@ -39,7 +39,7 @@ export const InputGroup = ({
     return null;
   }
 
-  const validationState = children.reduce(
+  const validationState = React.Children.toArray(children).reduce(
     (state, child) => {
       if (state === 'invalid' || (state === 'warning' && child.props.validationState === 'valid')) {
         return state;

src/components/InputGroup/__tests__/InputGroup.spec.tsx

@@ -9,6 +9,7 @@ import {
   InputGroupWithCustomInputPropsForTest,
   InputGroupWithoutChildrenForTest,
 } from './InputGroup.story';
+import { childrenPropTest } from './_propTests/childrenPropTest';
 import { validationTextsPropTest } from './_propTests/validationTextsPropTest';
 import { validationStatePropTest } from './_propTests/validationStatePropTest';
 
@@ -17,6 +18,7 @@ test.describe('InputGroup', () => {
     test.describe('visual', () => {
       [
         ...propTests.defaultComponentPropTest,
+        ...childrenPropTest,
         ...propTests.disabledPropTest,
         ...propTests.isLabelVisiblePropTest,
         ...propTests.layoutPropTest,

src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-multiple-1-chromium-linux.png

@@ -26,20 +26,30 @@ const options = [
   },
 ];
 
+const defaultChildren = [
+  <SelectField
+    key="selectField"
+    label="Select label"
+    options={options}
+    value={options[0].value}
+  />,
+  <TextField
+    key="textField"
+    label="Text label"
+    placeholder="Placeholder"
+  />,
+  <Button
+    key="button"
+    label="Submit"
+  />,
+];
+
 export const InputGroupForTest = ({
+  children,
   ...props
 }: InputGroupTestProps) => (
   <InputGroup label="Input group label" {...props}>
-    <SelectField
-      label="Select label"
-      options={options}
-      value={options[0].value}
-    />
-    <TextField
-      label="Text label"
-      placeholder="Placeholder"
-    />
-    <Button label="Submit" />
+    {children ?? defaultChildren}
   </InputGroup>
 );
 

src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-children-node-single-1-chromium-linux.png

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { PropTests } from '../../../../../tests/playwright/types';
+import { ButtonWithGlobalProps as Button } from '../../../Button/Button';
+import { SelectFieldWithGlobalProps as SelectField } from '../../../SelectField/SelectField';
+import { TextFieldWithGlobalProps as TextField } from '../../../TextField/TextField';
+
+const options = [
+  {
+    label: 'Option 1',
+    value: 'option1',
+  },
+  {
+    label: 'Option 2',
+    value: 'option2',
+  },
+  {
+    label: 'Option 3',
+    value: 'option3',
+  },
+];
+
+export const childrenPropTest: PropTests = [
+  {
+    name: 'children:node[single]',
+    props: {
+      children: (
+        <TextField
+          label="Text label"
+          placeholder="Placeholder"
+        />
+      ),
+    },
+  },
+  {
+    name: 'children:node[multiple]',
+    props: {
+      children: [
+        <SelectField
+          key="selectField"
+          label="Select label"
+          options={options}
+          value={options[0].value}
+        />,
+        <TextField
+          key="textField"
+          label="Text label"
+          placeholder="Placeholder"
+        />,
+        <Button
+          key="button"
+          label="Submit"
+        />,
+      ],
+    },
+  },
+];