Merge branch 'improvement/ARTESCA-12723-input-tests' into q/1.0

src/lib/components/searchinput/SearchInput.component.tsx

@@ -10,7 +10,6 @@ export type Props = {
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   onReset?: () => void;
-  disableToggle: boolean;
   disabled?: boolean;
   id?: string;
   size?: InputSize;
@@ -57,7 +56,6 @@ const ClearButton = styled.div`
 const SearchInput = forwardRef(
   (
     {
-      disableToggle,
       placeholder,
       value,
       onChange,

src/lib/components/searchinput/SearchInput.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { SearchInput, Props } from './SearchInput.component';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import userEvent from '@testing-library/user-event';
+
+const queryClient = new QueryClient();
+
+const SearchInputRender = (props: Props) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SearchInput {...props} />
+    </QueryClientProvider>
+  );
+};
+
+describe('SearchInput', () => {
+  const selectors = {
+    searchInput: () => screen.getByRole('searchbox'),
+    clearButton: () => screen.queryByRole('button'),
+  };
+  it('should render the SearchInput component', () => {
+    render(<SearchInputRender value="" onChange={() => {}} />);
+
+    const searchInput = selectors.searchInput();
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('should render the SearchInput component with placeholder', () => {
+    render(
+      <SearchInputRender value="" onChange={() => {}} placeholder="Search" />,
+    );
+
+    const searchInput = screen.queryByPlaceholderText('Example: Search');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('should render the SearchInput component with disabled prop', () => {
+    render(<SearchInputRender value="" onChange={() => {}} disabled />);
+
+    const searchInput = selectors.searchInput();
+    expect(searchInput).toBeInTheDocument();
+    expect(searchInput).toBeDisabled();
+  });
+
+  it('should change value instantly but call the onChange function with a 300ms delay after the end of typing', async () => {
+    const onChange = jest.fn();
+    render(<SearchInputRender value="" onChange={onChange} />);
+    const searchInput = selectors.searchInput();
+    userEvent.type(searchInput, 'test');
+    expect(searchInput).toHaveValue('test');
+    expect(onChange).not.toHaveBeenCalled();
+    await waitFor(
+      () => {
+        expect(onChange).toHaveBeenCalled();
+      },
+      { timeout: 350 },
+    );
+  });
+
+  it('should have a clear button when the input is not empty', () => {
+    render(<SearchInputRender value="" onChange={() => {}} />);
+
+    // clear button should not be rendered as value is empty
+    let clearButton = selectors.clearButton();
+    expect(clearButton).not.toBeInTheDocument();
+
+    const searchInput = selectors.searchInput();
+    userEvent.type(searchInput, 'test');
+
+    // clear button should now be rendered
+    clearButton = selectors.clearButton();
+    expect(clearButton).toBeInTheDocument();
+  });
+
+  it('should call the onReset function when the clear button is clicked and clear the input value', async () => {
+    const onReset = jest.fn();
+    render(
+      <SearchInputRender value="test" onChange={() => {}} onReset={onReset} />,
+    );
+    const searchInput = selectors.searchInput();
+    const clearButton = selectors.clearButton();
+    expect(clearButton).toBeInTheDocument();
+    clearButton && userEvent.click(clearButton);
+    expect(onReset).toHaveBeenCalled();
+    expect(searchInput).toHaveValue('');
+  });
+});

src/lib/components/selectv2/Selectv2.component.tsx

@@ -135,7 +135,11 @@ const InternalOption = (width, isDefaultVariant) => (props) => {
                 ? 'sc-highlighted-matching-text'
                 : '';
             return (
-              <span key={i} className={highlightStyle}>
+              <span
+                role={highlightStyle ? 'mark' : undefined}
+                key={i}
+                className={highlightStyle}
+              >
                 {part}
               </span>
             );
@@ -238,7 +242,6 @@ const MenuList = (props) => {
     selectedIndex * optionHeight - (ITEMS_PER_SCROLL_WINDOW - 1) * optionHeight;
   useEffect(() => {
     if (listRef && listRef.current) {
-      // @ts-ignore
       listRef.current.scrollTo(
         getScrollOffset(
           listRef.current,
@@ -282,6 +285,7 @@ const ValueContainer = ({ children, ...props }) => {
   const icon = selectedOption ? selectedOption.icon : null;
   const ariaProps = {
     innerProps: {
+      disabled: true,
       role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
       'aria-expanded': props.selectProps.menuIsOpen,
       'aria-autocomplete': 'list',
@@ -302,14 +306,14 @@ export type SelectProps = {
   placeholder?: string;
   disabled?: boolean;
   children?: React.ReactNode;
-  defaultValue?: string;
   value?: string;
   onFocus?: (event: FocusEvent) => void;
   onBlur?: (event: FocusEvent) => void;
   onChange: (newValue: string) => void;
   variant?: 'default' | 'rounded';
   size?: '1' | '2/3' | '1/2' | '1/3';
   className?: string;
+  /** use menuPositon='fixed' inside modal to avoid display issue */
   menuPosition?: 'fixed' | 'absolute';
 };
 type SelectOptionProps = {
@@ -357,7 +361,6 @@ function SelectWithOptionContext(props: SelectProps) {
 function SelectBox({
   placeholder = 'Select...',
   disabled = false,
-  defaultValue,
   value,
   onChange,
   variant = 'default',
@@ -366,11 +369,6 @@ function SelectBox({
   id,
   ...rest
 }: SelectProps) {
-  if (defaultValue && value) {
-    console.error(
-      'The `defaultValue` will be overridden by the `value` if they are set at the same time.',
-    );
-  }
   const [keyboardFocusEnabled, setKeyboardFocusEnabled] = useState(false);
   const [searchSelection, setSearchSelection] = useState('');
   const [searchValue, setSearchValue] = useState('');
@@ -414,7 +412,6 @@ function SelectBox({
   // Force to reset the value
   useEffect(() => {
     if (
-      !defaultValue &&
       !isEmptyStringInOptions &&
       value === '' &&
       selectRef.current &&
@@ -436,7 +433,6 @@ function SelectBox({
             value={
               searchSelection || options.find((opt) => opt.value === value)
             }
-            defaultValue={defaultValue}
             inputValue={options.length > NOPT_SEARCH ? searchValue : undefined}
             selectedOption={options.find((opt) => opt.value === value)}
             keyboardFocusEnabled={keyboardFocusEnabled}