@nuskin/foundation-ui-components 1.3.0 → 1.4.0

package/src/common/select/NsSelect.spec.tsx

@@ -1,274 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen, waitFor } from '@/test-utils/index';
-import NsSelect from './NsSelect';
-import NsSelectOption from './NsSelectOption';
-
-function createSelectOptions(options: { value: string; label: string }[]) {
-    return options.map((option) => <NsSelectOption key={option.value} value={option.value} label={option.label} />);
-}
-
-describe('NsSelectOption', () => {
-    it('1. renders NsSelectOption component without errors', () => {
-        const value = 'option1';
-        const label = 'Option 1';
-        const { getByTestId, getByText } = render(<NsSelectOption value={value} label={label} />);
-
-        // Check if the option container element exists
-        const optionContainer = getByTestId(`option-${value}`);
-        expect(optionContainer).toBeInTheDocument();
-
-        // Check if the option label is rendered correctly
-        const optionLabel = getByText(label);
-        expect(optionLabel).toBeInTheDocument();
-    });
-    it('2. clicking on NsSelectOption selects the option', () => {
-        const value = 'option1';
-        const label = 'Option 1';
-        const onSelect = jest.fn();
-        const { getByTestId } = render(<NsSelectOption value={value} label={label} onSelect={onSelect} />);
-        const optionElement = getByTestId(`option-${value}`);
-        fireEvent.click(optionElement);
-        expect(onSelect).toHaveBeenCalledWith(value);
-    });
-});
-
-describe('NsSelect', () => {
-    const onSelect = jest.fn();
-    const selectedValue = '';
-    const selectedLabel = '';
-
-    const options = [
-        { value: 'Option1', label: 'Option 1' },
-        { value: 'Option2', label: 'Option 2' },
-        { value: 'Option3', label: 'Option 3' },
-    ];
-
-    it('1. renders the placeholder text when no value is selected', () => {
-        render(
-            <NsSelect
-                placeholder="Select an option"
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-            >
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        expect(screen.getByText('Select an option')).toBeInTheDocument();
-    });
-
-    it('2. clicking outside the select container closes the dropdown', () => {
-        const onSelect = jest.fn();
-        const selectedLabel = 'Option 1';
-        const { getByTestId, queryByTestId } = render(
-            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect} />
-        );
-        const selectButton = getByTestId('select-head');
-        fireEvent.mouseDown(selectButton);
-        const outsideElement = document.createElement('div');
-        fireEvent.mouseDown(outsideElement);
-        // Add assertions to check if the dropdown is closed (isOpen state is false)
-        expect(queryByTestId('option-Option1')).toBeNull();
-    });
-
-    it('3. renders the selected value label', () => {
-        const selectedLabel = 'Option 1';
-        render(
-            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        expect(screen.getByText(selectedLabel)).toBeInTheDocument();
-    });
-
-    it('4. clicking on select button opens the dropdown', () => {
-        const { getByTestId, getByText } = render(
-            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-        const selectButton = getByTestId('select-head');
-        fireEvent.mouseDown(selectButton);
-
-        // Check if the dropdown is opened (isOpen state is true)
-        const dropdownList = getByTestId('select-list');
-        expect(dropdownList).toBeInTheDocument();
-
-        // Check if the options are rendered in the dropdown
-        const option1 = getByText('Option 1');
-        const option2 = getByText('Option 2');
-        expect(option1).toBeInTheDocument();
-        expect(option2).toBeInTheDocument();
-    });
-
-    it('5. disabling the select component prevents interaction', () => {
-        const onSelect = jest.fn();
-        const { getByTestId, queryByTestId } = render(
-            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect} disabled>
-                <NsSelectOption value="option1" label="Option 1" onSelect={onSelect} />
-                <NsSelectOption value="option2" label="Option 2" onSelect={onSelect} />
-            </NsSelect>
-        );
-        const selectButton = getByTestId('select-head');
-        fireEvent.mouseDown(selectButton);
-
-        // Check if the dropdown does not open (select list is not present)
-        const dropdownList = queryByTestId('select-list');
-        expect(dropdownList).toBeNull();
-
-        // Check if the onSelect callback is not called
-        expect(onSelect).not.toHaveBeenCalled();
-    });
-
-    it('6. select closes on mouse leave when closeOnMouseLeave is set to true', async () => {
-        render(
-            <NsSelect closeOnMouseLeave selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        const selectHead = screen.getByTestId('select-head');
-        fireEvent.click(selectHead);
-
-        // const selectList = screen.queryByTestId ('select-list');
-        const option1 = screen.queryByTestId('option-Option1');
-        const option2 = screen.queryByTestId('option-Option2');
-        const option3 = screen.queryByTestId('option-Option3');
-        fireEvent.click(selectHead);
-
-        await waitFor(() => {
-            expect(option1).not.toBeInTheDocument();
-            expect(option2).not.toBeInTheDocument();
-            expect(option3).not.toBeInTheDocument();
-        });
-    });
-    it('7. select does not open when disabled', () => {
-        render(
-            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        const selectHead = screen.getByTestId('select-head');
-        fireEvent.click(selectHead);
-
-        expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
-    });
-
-    it('8. opens the select on "ArrowDown" key press', () => {
-        render(
-            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        const selectHead = screen.getByTestId('select-head');
-        fireEvent.keyDown(selectHead, { key: 'arrowDown' });
-
-        expect(selectHead).toBeInTheDocument();
-    });
-
-    it('9. closes the select when closeSelect is called', () => {
-        const { getByTestId } = render(
-            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} closeOnMouseLeave>
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        const selectContainer = getByTestId('select-container');
-        fireEvent.mouseLeave(selectContainer);
-
-        expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
-    });
-
-    it('10. does not open the select when disabled', () => {
-        render(
-            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        const selectHead = screen.getByTestId('select-head');
-        fireEvent.mouseDown(selectHead);
-
-        expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
-    });
-
-    it('11. selects the next option on arrow right click', () => {
-        // Render the NsSelect component with options and onSelect function
-        const onSelect = jest.fn();
-        const { getByTestId } = render(
-            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} hasArrows>
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        // Simulate the arrow right click on the NsSelect component
-        const selectHead = getByTestId('select-head');
-        fireEvent.mouseDown(selectHead);
-
-        const rightArrow = document.getElementsByClassName('RightArrow')[0];
-        fireEvent.click(rightArrow);
-
-        // Verify that the next option is selected and the onSelect function is called
-        expect(onSelect).toHaveBeenCalledWith('Option1');
-    });
-
-    it('12. selects the previous option on arrow left click', () => {
-        const { getByTestId } = render(
-            <NsSelect
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-                hasArrows
-                reverseArrowControls
-            >
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        const selectHead = getByTestId('select-head');
-        fireEvent.mouseDown(selectHead);
-
-        const leftArrow = document.getElementsByClassName('LeftArrow')[0];
-        fireEvent.click(leftArrow);
-
-        expect(onSelect).toHaveBeenCalledWith('Option1');
-    });
-
-    it('13. renders an error message with red styles', () => {
-        const errorMessage = 'Invalid value';
-        const { getByText } = render(
-            <NsSelect
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-                errorMessage={errorMessage}
-            >
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        // Check if the error message is rendered correctly with red styles
-        const errorText = getByText(errorMessage);
-        expect(errorText).toBeInTheDocument();
-    });
-    it('14. selecting an option calls the onSelect callback', () => {
-        const onSelect = jest.fn();
-        const { getByTestId } = render(
-            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
-                {createSelectOptions(options)}
-            </NsSelect>
-        );
-
-        const selectHead = getByTestId('select-head');
-        fireEvent.mouseDown(selectHead);
-
-        const option1 = getByTestId('option-Option1');
-        fireEvent.click(option1);
-
-        expect(onSelect).toHaveBeenCalledWith('Option1');
-    });
-});