Increase tests coverage

Signed-off-by: guido <[email protected]>

Author: widoz

sources/js/src/components/entities-toggle-control.tsx

@@ -5,7 +5,7 @@ import React, { JSX } from 'react';
 import { NoOptionsMessage } from './no-options-message';
 
 export function EntitiesToggleControl(
-	props: EntitiesSearch.EntitiesControl<number>
+	props: EntitiesSearch.EntitiesControl<string>
 ): JSX.Element {
 	const className = classnames(
 		props.className,
@@ -20,18 +20,12 @@ export function EntitiesToggleControl(
 	const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		const { target } = event;
 
-		if (!(target instanceof HTMLInputElement)) {
+		if (target.checked && !props.value?.has(target.value)) {
+			props.onChange(props.value?.add(target.value));
 			return;
 		}
 
-		const value = Number(target.value);
-
-		if (target.checked && !props.value?.has(value)) {
-			props.onChange(props.value?.add(value));
-			return;
-		}
-
-		props.onChange(props.value?.delete(value));
+		props.onChange(props.value?.delete(target.value));
 	};
 
 	return (

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

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EntitiesToggleControl renders correctly 1`] = `
+<div
+  class="test-class wz-toggle-control wz-toggle-control--entities"
+>
+  <div
+    class="wz-toggle-control-item"
+  >
+    <label
+      for="wz-toggle-control-item__input-1"
+    >
+      <input
+        id="wz-toggle-control-item__input-1"
+        type="checkbox"
+        value="1"
+      />
+      Option 1
+    </label>
+  </div>
+  <div
+    class="wz-toggle-control-item"
+  >
+    <label
+      for="wz-toggle-control-item__input-2"
+    >
+      <input
+        id="wz-toggle-control-item__input-2"
+        type="checkbox"
+        value="2"
+      />
+      Option 2
+    </label>
+  </div>
+  <div
+    class="wz-toggle-control-item"
+  >
+    <label
+      for="wz-toggle-control-item__input-3"
+    >
+      <input
+        id="wz-toggle-control-item__input-3"
+        type="checkbox"
+        value="3"
+      />
+      Option 3
+    </label>
+  </div>
+</div>
+`;
+
+exports[`EntitiesToggleControl renders the NoOptionsMessage when there are no options 1`] = `
+<p
+  class="wz-entities-search-no-option-message"
+>
+  No options
+</p>
+`;

tests/js/unit/components/entities-toggle-control.test.tsx

@@ -0,0 +1,74 @@
+import { OrderedSet } from 'immutable';
+import React from 'react';
+
+import { describe, expect, it, jest } from '@jest/globals';
+
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { EntitiesToggleControl } from '../../../../sources/js/src/components/entities-toggle-control';
+
+const options = OrderedSet([
+	{ label: 'Option 1', value: '1' },
+	{ label: 'Option 2', value: '2' },
+	{ label: 'Option 3', value: '3' },
+]);
+
+describe('EntitiesToggleControl', () => {
+	it('renders correctly', () => {
+		const { container } = render(
+			<EntitiesToggleControl
+				className="test-class"
+				options={options}
+				onChange={() => {}}
+			/>
+		);
+
+		expect(container.firstChild).toMatchSnapshot();
+	});
+
+	it('renders the NoOptionsMessage when there are no options', () => {
+		const { container } = render(
+			<EntitiesToggleControl
+				className="test-class"
+				options={OrderedSet([])}
+				onChange={() => {}}
+			/>
+		);
+
+		expect(container.firstChild).toMatchSnapshot();
+	});
+
+	it('updates the value when one or more option are selected', () => {
+		const onChange = jest.fn();
+
+		render(
+			<EntitiesToggleControl
+				className="test-class"
+				options={options}
+				value={OrderedSet()}
+				onChange={onChange}
+			/>
+		);
+
+		fireEvent.click(screen.getByLabelText('Option 1'));
+
+		expect(onChange).toHaveBeenCalledWith(OrderedSet(['1']));
+	});
+
+	it('updates the value when one or more option are unselected', () => {
+		const onChange = jest.fn();
+
+		render(
+			<EntitiesToggleControl
+				className="test-class"
+				options={options}
+				value={OrderedSet(['1', '2'])}
+				onChange={onChange}
+			/>
+		);
+
+		fireEvent.click(screen.getByLabelText('Option 1'));
+
+		expect(onChange).toHaveBeenCalledWith(OrderedSet(['2']));
+	});
+});