Fix QA

sources/client/src/components/radio-control.tsx

@@ -4,13 +4,17 @@ import React, { JSX } from 'react';
 
 import { useId } from '../hooks/use-id';
 
+interface Option<V> extends EntitiesSearch.ControlOption<V> {
+	readonly selectedValue: EntitiesSearch.SingularControl<V>['value'];
+	readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
 export function RadioControl(
 	props: EntitiesSearch.SingularControl<EntitiesSearch.Value> & {
 		className?: string;
 		id?: string;
 	}
 ): JSX.Element {
-	const id = useId(props.id);
 	const className = classnames(props.className, 'wes-radio-control');
 
 	const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -29,22 +33,36 @@ export function RadioControl(
 	return (
 		<div className={className}>
 			{props.options.map((option) => (
-				<div
+				<Option
 					key={option.value}
-					className={`wes-radio-control-item wes-radio-control-item--${option.value}`}
-				>
-					<label htmlFor={id}>
-						<input
-							type="radio"
-							id={id}
-							checked={props.value === option.value}
-							value={option.value}
-							onChange={onChange}
-						/>
-						{option.label}
-					</label>
-				</div>
+					label={option.label}
+					value={option.value}
+					selectedValue={props.value}
+					onChange={onChange}
+				/>
 			))}
 		</div>
 	);
 }
+
+function Option<V>(props: Option<V>): JSX.Element {
+	const id = useId();
+	const value = String(props.value);
+
+	return (
+		<div
+			className={`wes-radio-control-item wes-radio-control-item--${value}`}
+		>
+			<label htmlFor={id}>
+				<input
+					type="radio"
+					id={id}
+					checked={props.selectedValue === props.value}
+					value={value}
+					onChange={props.onChange}
+				/>
+				{props.label}
+			</label>
+		</div>
+	);
+}

sources/client/src/components/toggle-control.tsx

@@ -66,7 +66,7 @@ function Option<V>(props: Option<V>): JSX.Element {
 				<input
 					type="checkbox"
 					id={id}
-					className={`wes-toggle-control-item__input-${props.value}`}
+					className={`wes-toggle-control-item__input-${value}`}
 					checked={props.selectedValues?.has(props.value)}
 					value={value}
 					onChange={props.onChange}

sources/client/src/hooks/use-search.ts

@@ -13,11 +13,10 @@ type SearchFunc = (phrase: SearchPhrase) => void;
  * Build a function to search the entities by a phrase
  *
  * @public
- * @param setSearchPhrase A function to set the search phrase
- * @param searchEntities  The function that will search the entities
- * @param kind            The kind of entities to search
- * @param entities        The entities to exclude from the search
- * @param dispatch        The dispatch function to update the state
+ * @param searchEntities The function that will search the entities
+ * @param kind           The kind of entities to search
+ * @param entities       The entities to exclude from the search
+ * @param dispatch       The dispatch function to update the state
  */
 export function useSearch<E, K>(
 	searchEntities: EntitiesSearch.SearchEntitiesFunction<E, K>,

sources/client/src/index.ts

@@ -15,7 +15,6 @@ export * from './hooks/use-query-viewable-taxonomies';
 export * from './utils/convert-entities-to-control-options';
 export * from './utils/is-control-option';
 export * from './utils/order-selected-options-at-the-top';
-export * from './utils/slugify-option-label';
 export * from './utils/unique-control-options';
 
 export * from './vo/control-option';

tests/client/unit/components/__snapshots__/radio-control.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`KindRadioControl renders the NoOptionsMessage when there are no options
 exports[`KindRadioControl renders the component 1`] = `
 <input
   checked=""
-  id="wes-radio-control-item__input-option-one"
+  id=":r0:"
   type="radio"
   value="option-one"
 />

tests/client/unit/components/__snapshots__/search-control.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`SearchControl renders the input outside the label if the id prop is not passed 1`] = `
 <input
   class="wes-search-control__input"
+  id=":r1:"
   type="search"
   value=""
 />

tests/client/unit/components/__snapshots__/toggle-control.test.tsx.snap

@@ -8,12 +8,12 @@ exports[`EntitiesToggleControl renders correctly 1`] = `
     class="wes-toggle-control-item wes-toggle-control-item--1"
   >
     <label
-      for="wes-toggle-control-item__input-option-1-1"
+      for=":r0:"
     >
       <input
         checked=""
         class="wes-toggle-control-item__input-1"
-        id="wes-toggle-control-item__input-option-1-1"
+        id=":r0:"
         type="checkbox"
         value="1"
       />
@@ -24,11 +24,11 @@ exports[`EntitiesToggleControl renders correctly 1`] = `
     class="wes-toggle-control-item wes-toggle-control-item--2"
   >
     <label
-      for="wes-toggle-control-item__input-option-2-2"
+      for=":r1:"
     >
       <input
         class="wes-toggle-control-item__input-2"
-        id="wes-toggle-control-item__input-option-2-2"
+        id=":r1:"
         type="checkbox"
         value="2"
       />
@@ -39,11 +39,11 @@ exports[`EntitiesToggleControl renders correctly 1`] = `
     class="wes-toggle-control-item wes-toggle-control-item--3"
   >
     <label
-      for="wes-toggle-control-item__input-option-3-3"
+      for=":r2:"
     >
       <input
         class="wes-toggle-control-item__input-3"
-        id="wes-toggle-control-item__input-option-3-3"
+        id=":r2:"
         type="checkbox"
         value="3"
       />

tests/client/unit/components/radio-control.test.tsx

@@ -38,10 +38,9 @@ describe('KindRadioControl', () => {
 		expect(container.firstChild).toMatchSnapshot();
 	});
 
-	it('check the input based on the value given', () => {
-		const props = {
-			className: 'test-class',
-			options: new Set([
+	it.each([
+		[
+			new Set([
 				{
 					label: 'Option 1',
 					value: 'option-one',
@@ -51,17 +50,36 @@ describe('KindRadioControl', () => {
 					value: 'option-2',
 				},
 			]),
-			value: 'option-one',
+			'option-one',
+		],
+		[
+			new Set([
+				{
+					label: 'Option 1',
+					value: 1,
+				},
+				{
+					label: 'Option 2',
+					value: 2,
+				},
+			]),
+			1,
+		],
+	])('check the input based on the value given', (options, value) => {
+		const props = {
+			className: 'test-class',
+			options,
+			value,
 			onChange: jest.fn(),
 		};
 		render(<RadioControl {...props} />);
 
 		expect(screen.getByLabelText('Option 1')).toBeChecked();
 	});
 
-	it('changes the value when an option is selected', () => {
-		const props = {
-			options: new Set([
+	it.each([
+		[
+			new Set([
 				{
 					label: 'Option 1',
 					value: 'option-one',
@@ -71,15 +89,38 @@ describe('KindRadioControl', () => {
 					value: 'option-2',
 				},
 			]),
-			value: 'option-one',
-			onChange: jest.fn(),
-		};
-		render(<RadioControl {...props} />);
-
-		fireEvent.click(screen.getByLabelText('Option 2'));
-
-		expect(props.onChange).toHaveBeenCalledWith('option-2');
-	});
+			'option-one',
+			'option-2',
+		],
+		[
+			new Set([
+				{
+					label: 'Option 1',
+					value: 1,
+				},
+				{
+					label: 'Option 2',
+					value: 2,
+				},
+			]),
+			1,
+			2,
+		],
+	])(
+		'changes the value when an option is selected',
+		(options, value, expected) => {
+			const props = {
+				options,
+				value,
+				onChange: jest.fn(),
+			};
+			render(<RadioControl {...props} />);
+
+			fireEvent.click(screen.getByLabelText('Option 2'));
+
+			expect(props.onChange).toHaveBeenCalledWith(expected);
+		}
+	);
 
 	it('does not change the value when an option is selected that does not exist', () => {
 		const props = {