@talixo-ds/options-input 1.0.0 → 1.0.2

package/src/__tests__/options-input.spec.tsx

@@ -0,0 +1,147 @@
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import { OptionsInput } from "../options-input";
+
+const props = {
+	options: [
+		{
+			id: "luggage",
+			icon: "luggage",
+			label: "luggage",
+			details: "This is your luggage",
+			min: 0,
+			max: 9
+		},
+		{
+			id: "dog",
+			icon: "this icon does not exist",
+			label: "dog",
+			min: 0,
+			max: 3
+		},
+		{
+			id: "sport-equipment",
+			icon: "football",
+			label: "sport equipment",
+			min: 0,
+			max: 1
+		}
+	],
+	id: "test-id",
+	defaultValue: { luggage: 2, "sport-equipment": 5 },
+	persistentOptions: ["sport-equipment"],
+	className: "test-class",
+	onChange: vi.fn(),
+	onFocus: vi.fn(),
+	onBlur: vi.fn()
+};
+
+describe("OptionsInput", () => {
+	describe("events", () => {
+		it("should open input dropdown properly", async () => {
+			const { getAllByTestId } = render(<OptionsInput {...props} />);
+			const optionsInputContainer = getAllByTestId("options-input-container")[0];
+
+			act(() => {
+				fireEvent.click(optionsInputContainer!);
+			});
+
+			await waitFor(() => {
+				expect(screen.queryByTestId("options-dropdown-list")).toBeInTheDocument();
+			});
+		});
+
+		it("should not open dropdown when input is disabled", async () => {
+			const { getAllByTestId } = render(<OptionsInput {...props} disabled />);
+
+			const optionsInputContainer = getAllByTestId("options-input-container")[0];
+
+			act(() => {
+				fireEvent.click(optionsInputContainer!);
+			});
+
+			await waitFor(() => {
+				expect(screen.queryByTestId("options-dropdown-list")).not.toBeInTheDocument();
+			});
+		});
+
+		it("should handle input focus properly", () => {
+			const { getAllByTestId } = render(<OptionsInput {...props} />);
+
+			const optionsInputContainer = getAllByTestId("options-input-container")[0];
+
+			act(() => {
+				fireEvent.focus(optionsInputContainer!);
+			});
+
+			expect(props.onFocus).toHaveBeenCalledWith({
+				dog: 0,
+				luggage: 2,
+				"sport-equipment": 1
+			});
+		});
+
+		it("should handle input blur properly", () => {
+			const { getAllByTestId } = render(<OptionsInput {...props} />);
+
+			const optionsInputContainer = getAllByTestId("options-input-container")[0];
+
+			act(() => {
+				fireEvent.blur(optionsInputContainer!);
+			});
+
+			expect(props.onBlur).toHaveBeenCalledWith({
+				dog: 0,
+				luggage: 2,
+				"sport-equipment": 1
+			});
+		});
+
+		it("should handle input option change properly", async () => {
+			const { getByTestId } = render(<OptionsInput {...props} />);
+
+			const optionsInputContainer = getByTestId("options-input-container");
+
+			fireEvent.click(optionsInputContainer);
+
+			await waitFor(() => screen.findAllByTestId("dropdown-item-input"));
+
+			const optionCountInput = screen.getAllByTestId("dropdown-item-input")[0];
+
+			act(() => {
+				fireEvent.change(optionCountInput!, { target: { value: 9 } });
+			});
+
+			expect(props.onChange).toHaveBeenCalledWith({
+				dog: 0,
+				luggage: 9,
+				"sport-equipment": 1
+			});
+
+			expect(screen.getAllByTestId("option-item")[0]).toHaveTextContent("9");
+		});
+
+		it("should handle input option blur properly", async () => {
+			const { getAllByTestId } = render(<OptionsInput {...props} />);
+
+			const optionsInputContainer = getAllByTestId("options-input-container")[0];
+
+			fireEvent.click(optionsInputContainer!);
+
+			await waitFor(() => {
+				const optionCountInput = screen.getAllByTestId("dropdown-item-input")[0];
+
+				act(() => {
+					fireEvent.change(optionCountInput!, { target: { value: 500 } });
+				});
+
+				expect(optionCountInput).toHaveAttribute("value", "500");
+
+				act(() => {
+					fireEvent.blur(optionCountInput!);
+				});
+
+				expect(optionCountInput).toHaveAttribute("value", "9");
+			});
+		});
+	});
+});

package/src/__tests__/utils.spec.ts

@@ -0,0 +1,12 @@
+import { capitalize } from "../utils";
+
+test("capitalize util converts string properly", () => {
+	const example = "hello world";
+	const expected = "Hello world";
+
+	const result1 = capitalize(example);
+	expect(result1).toBe(expected);
+
+	const result2 = capitalize(expected);
+	expect(result2).toBe(expected);
+});

package/src/components/__tests__/min-max-value-label.spec.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import ShallowRenderer from 'react-test-renderer/shallow';
-import '@testing-library/jest-dom';
-import { MinMaxValueLabel } from '../min-max-value-label';
+import { render } from "@testing-library/react";
+import { MinMaxValueLabel } from "../min-max-value-label";
 
-const props = {
-  min: 0,
-  max: 100,
-  color: 'black',
-};
+describe("MinMaxValueLabel", () => {
+	it("should render with min value", () => {
+		const { queryByText } = render(<MinMaxValueLabel min={0} color="black" />);
 
-describe('MinMaxValueLabel', () => {
-  let component: JSX.Element;
-  const renderer = ShallowRenderer.createRenderer();
+		expect(queryByText("min: 0")).toBeInTheDocument();
+	});
 
-  beforeEach(() => {
-    renderer.render(<MinMaxValueLabel {...props} />);
-    component = renderer.getRenderOutput();
-  });
+	it("should render with max value", () => {
+		const { queryByText } = render(
+			<MinMaxValueLabel max={100} color={(theme) => theme.palette.primary.main} />
+		);
 
-  it('should match snapshot', () => {
-    expect(component).toMatchSnapshot();
-  });
+		expect(queryByText("max: 100")).toBeInTheDocument();
+	});
+
+	it("should render with min and max value", () => {
+		const { queryByText } = render(<MinMaxValueLabel max={100} min={0} />);
+
+		expect(queryByText("min: 0, max: 100")).toBeInTheDocument();
+	});
 });

package/src/components/__tests__/options-input-content-item.spec.tsx

@@ -1,63 +1,55 @@
-import React from 'react';
-import ShallowRenderer from 'react-test-renderer/shallow';
-import OptionsInputContentItem from '../options-input-content-item';
-import { vi } from 'vitest';
-
-
-vi.mock('@mui/icons-material', async (importOriginal) => {
-  return {
-    ...await importOriginal<typeof import('@mui/icons-material')>(),
-    luggage: 'div',
-  }
-})
-
-vi.mock('@talixo-ds/icons', async (importOriginal) => {
-  return {
-    ...await importOriginal<typeof import('@talixo-ds/icons')>(),
-    football: 'div',
-  }
-})
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import OptionsInputContentItem, {
+	type OptionsInputContentItemProps
+} from "../options-input-content-item";
 
 const props = {
-  item: {
-    id: 'luggage',
-    icon: 'luggage',
-    label: 'luggage',
-    details: 'This is your luggage',
-    min: -10,
-    max: 10,
-    quantity: 0,
-    inputQuantity: 0,
-  },
-  displayMinMax: true,
-};
-
-describe('OptionsInputDropdownItem', () => {
-  let component: JSX.Element;
-  const renderer = ShallowRenderer.createRenderer();
-
-  it('should match snapshot', () => {
-    renderer.render(<OptionsInputContentItem {...props} />);
-
-    component = renderer.getRenderOutput();
-    expect(component).toMatchSnapshot();
-  });
-
-  it('should render proper alternative styling', () => {
-    renderer.render(
-      <OptionsInputContentItem item={{ ...props.item, quantity: 1 }} />
-    );
-
-    component = renderer.getRenderOutput();
-    expect(component).toMatchSnapshot();
-  });
-
-  it('should not render tooltip when there is no label', () => {
-    renderer.render(
-      <OptionsInputContentItem item={{ ...props.item, label: undefined }} />
-    );
-
-    component = renderer.getRenderOutput();
-    expect(component).toMatchSnapshot();
-  });
+	item: {
+		id: "luggage",
+		icon: "luggage",
+		label: "luggage",
+		details: "This is your luggage",
+		min: -10,
+		max: 10,
+		quantity: 0,
+		inputQuantity: 0
+	},
+	displayMinMax: true
+} satisfies OptionsInputContentItemProps;
+
+describe("OptionsInputDropdownItem", () => {
+	it("should render properly and show tooltip with proper content on hover", async () => {
+		const { queryByTestId, queryByText, getByTestId } = render(
+			<OptionsInputContentItem {...props} />
+		);
+
+		expect(queryByTestId("LuggageIcon")).toBeInTheDocument();
+		expect(queryByText("0")).toBeInTheDocument();
+
+		const icon = getByTestId("LuggageIcon");
+
+		fireEvent.mouseOver(icon);
+
+		await waitFor(() => {
+			expect(queryByText("This is your luggage")).toBeInTheDocument();
+			expect(queryByText("luggage")).toBeInTheDocument();
+		});
+	});
+
+	it("should not render tooltip when there is no label", async () => {
+		const { queryByTestId, queryByText, getByTestId } = render(
+			<OptionsInputContentItem item={{ ...props.item, label: undefined, quantity: 1 }} />
+		);
+
+		expect(queryByTestId("LuggageIcon")).toBeInTheDocument();
+		expect(queryByText("1")).toBeInTheDocument();
+
+		const icon = getByTestId("LuggageIcon");
+
+		fireEvent.mouseOver(icon);
+
+		await waitFor(() => {
+			expect(queryByText("This is your luggage")).not.toBeInTheDocument();
+		});
+	});
 });

package/src/components/__tests__/options-input-dropdown-item.spec.tsx

@@ -1,91 +1,80 @@
-import React from 'react';
-import ShallowRenderer from 'react-test-renderer/shallow';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { vi } from 'vitest';
-import OptionsInputDropdownItem from '../options-input-dropdown-item';
-
-
-vi.mock('@mui/icons-material', async (importOriginal) => {
-  return {
-    ...await importOriginal<typeof import('@mui/icons-material')>(),
-    luggage: 'div',
-  }
-})
-
-vi.mock('@talixo-ds/icons', async (importOriginal) => {
-  return {
-    ...await importOriginal<typeof import('@talixo-ds/icons')>(),
-    football: 'div',
-  }
-})
+import { render, fireEvent } from "@testing-library/react";
+import OptionsInputDropdownItem, {
+	type OptionsInputDropdownItemProps
+} from "../options-input-dropdown-item";
 
 const onChangeMock = vi.fn();
 const onBlurMock = vi.fn();
 
 const props = {
-  item: {
-    id: 'luggage-id',
-    icon: 'luggage',
-    details:
-      'This is your luggage. Please, keep your attention not to lose it.',
-    min: -10,
-    max: 10,
-    quantity: 0,
-    inputQuantity: 0,
-  },
-  onBlur: onBlurMock,
-  onChange: onChangeMock,
-  index: 1,
-};
-
-describe('OptionsInputDropdownItem', () => {
-  let component: JSX.Element;
-  const renderer = ShallowRenderer.createRenderer();
-
-  it('should match snapshot', () => {
-    renderer.render(<OptionsInputDropdownItem {...props} />);
-    component = renderer.getRenderOutput();
-
-    expect(component).toMatchSnapshot();
-  });
-
-  describe('events', () => {
-    beforeEach(() => render(<OptionsInputDropdownItem {...props} />));
-
-    it('should call onChange on text field edit', async () => {
-      const input = screen.getByTestId('dropdown-item-input');
-
-      await fireEvent.change(input, { target: { value: '10' } });
-      expect(onChangeMock).toHaveBeenCalledWith('luggage-id', '10');
-    });
-
-    it('should call onChange on increment button click', () => {
-      const buttons = screen.getAllByRole('button');
-
-      fireEvent.click(buttons[0]);
-      expect(onChangeMock).toHaveBeenCalledWith('luggage-id', 1);
-    });
-
-    it('should call onChange on decrement button click', () => {
-      const buttons = screen.getAllByRole('button');
-
-      fireEvent.click(buttons[1]);
-      expect(onChangeMock).toHaveBeenCalledWith('luggage-id', -1);
-    });
-
-    it('should expand details content', () => {
-      expect(screen.getByTestId('option-details')).toHaveTextContent(
-        props.item.details.slice(0, 15)
-      );
-
-      const optionDetailsContainer = screen.getByTestId(
-        'option-details-container'
-      );
-
-      fireEvent.mouseEnter(optionDetailsContainer);
-      expect(screen.getByTestId('option-details')).toHaveTextContent(
-        props.item.details
-      );
-    });
-  });
+	item: {
+		id: "luggage-id",
+		icon: "luggage",
+		details: "This is your luggage. Please, keep your attention not to lose it.",
+		min: -10,
+		max: 10,
+		quantity: 0,
+		inputQuantity: 0
+	},
+	onBlur: onBlurMock,
+	onChange: onChangeMock,
+	index: 1
+} satisfies OptionsInputDropdownItemProps;
+
+describe("OptionsInputDropdownItem", () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	afterAll(() => {
+		vi.restoreAllMocks();
+	});
+
+	it("should call onChange on text field edit", () => {
+		const { getByTestId } = render(<OptionsInputDropdownItem {...props} />);
+
+		const input = getByTestId("dropdown-item-input");
+
+		fireEvent.change(input, { target: { value: "10" } });
+
+		expect(onChangeMock).toHaveBeenCalledTimes(1);
+		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", "10");
+
+		fireEvent.blur(input);
+		expect(onBlurMock).toHaveBeenCalledTimes(1);
+	});
+
+	it("should call onChange on increment button click", () => {
+		const { getAllByRole } = render(<OptionsInputDropdownItem {...props} />);
+
+		const buttons = getAllByRole("button");
+
+		fireEvent.click(buttons[0]!);
+
+		expect(onChangeMock).toHaveBeenCalledTimes(1);
+		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", 1);
+	});
+
+	it("should call onChange on decrement button click", () => {
+		const { getAllByRole } = render(<OptionsInputDropdownItem {...props} />);
+
+		const buttons = getAllByRole("button");
+
+		fireEvent.click(buttons[1]!);
+
+		expect(onChangeMock).toHaveBeenCalledTimes(1);
+		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", -1);
+	});
+
+	it("should expand details content", () => {
+		const { getByTestId } = render(<OptionsInputDropdownItem {...props} />);
+
+		expect(getByTestId("option-details")).toHaveTextContent(props.item.details.slice(0, 15));
+
+		const optionDetailsContainer = getByTestId("option-details-container");
+
+		fireEvent.mouseEnter(optionDetailsContainer);
+
+		expect(getByTestId("option-details")).toHaveTextContent(props.item.details);
+	});
 });

package/src/components/min-max-value-label.tsx

@@ -1,20 +1,15 @@
-import React from 'react';
-import Typography from '@mui/material/Typography';
+import Typography, { type TypographyProps } from "@mui/material/Typography";
 
 export type MinMaxValueLabelProps = {
-  min?: number;
-  max?: number;
-  color?: string;
+	min?: number;
+	max?: number;
+	color?: TypographyProps["color"];
 };
 
-export const MinMaxValueLabel = ({
-  min,
-  max,
-  color,
-}: MinMaxValueLabelProps) => (
-  <Typography variant="caption" color={color} sx={{ my: 0 }}>
-    {!Number.isNaN(Number(min)) && `min: ${min}`}
-    {!Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && ', '}
-    {!Number.isNaN(Number(max)) && `max: ${max}`}
-  </Typography>
+export const MinMaxValueLabel = ({ min, max, color }: MinMaxValueLabelProps) => (
+	<Typography variant="caption" color={color} sx={{ my: 0 }}>
+		{!Number.isNaN(Number(min)) && `min: ${min}`}
+		{!Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && ", "}
+		{!Number.isNaN(Number(max)) && `max: ${max}`}
+	</Typography>
 );

package/src/components/options-input-content-item.tsx

@@ -1,64 +1,57 @@
-import React from 'react';
-import Tooltip from '@mui/material/Tooltip';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import * as MuiIcons from '@mui/icons-material';
-import * as DesignSystemIcons from '@talixo-ds/icons';
-import { MinMaxValueLabel } from './min-max-value-label';
-import { OptionsInputOption } from '../types';
+import Tooltip from "@mui/material/Tooltip";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import * as DesignSystemIcons from "@talixo-ds/icons/src";
+import { MinMaxValueLabel } from "./min-max-value-label";
+import { capitalize } from "../utils";
+import type { OptionsInputOption } from "../types";
 
 export type OptionsInputContentItemProps = {
-  item: OptionsInputOption;
-  disabled?: boolean;
-  displayMinMax?: boolean;
+	item: OptionsInputOption;
+	disabled?: boolean;
+	displayMinMax?: boolean;
 };
 
 const OptionsInputContentItem = ({
-  item: { quantity, details, label, max, min, icon },
-  displayMinMax = false,
-  disabled = false,
+	item: { quantity, details, label, max, min, icon },
+	displayMinMax = false,
+	disabled = false
 }: OptionsInputContentItemProps) => {
-  const Icon = DesignSystemIcons[icon] || MuiIcons[icon];
-  const itemsColor = quantity === 0 || disabled ? '#a4a5b2' : '#000000';
+	const Icon = DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;
+	const itemsColor = quantity === 0 || disabled ? "#a4a5b2" : "#000000";
 
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      gap={0.5}
-      color={itemsColor}
-      data-testid="option-item"
-    >
-      {label ? (
-        <Tooltip
-          title={
-            <Box display="flex" flexDirection="column">
-              <Typography variant="caption" fontWeight={600} sx={{ my: 0 }}>
-                {label}
-              </Typography>
-              {details && (
-                <Typography variant="caption" sx={{ my: 0 }}>
-                  {details}
-                </Typography>
-              )}
-              {displayMinMax && <MinMaxValueLabel min={min} max={max} />}
-            </Box>
-          }
-          placement="top"
-          arrow
-        >
-          <span>
-            <Icon fontSize="medium" color={itemsColor} />
-          </span>
-        </Tooltip>
-      ) : (
-        <Icon fontSize="medium" color={itemsColor} />
-      )}
-      <Typography variant="h6" color={itemsColor}>
-        {quantity}
-      </Typography>
-    </Box>
-  );
+	return (
+		<Box display="flex" alignItems="center" gap={0.5} color={itemsColor} data-testid="option-item">
+			{label ? (
+				<Tooltip
+					title={
+						<Box display="flex" flexDirection="column">
+							<Typography variant="caption" fontWeight={600} sx={{ my: 0 }}>
+								{label}
+							</Typography>
+							{details && (
+								<Typography variant="caption" sx={{ my: 0 }}>
+									{details}
+								</Typography>
+							)}
+							{displayMinMax && <MinMaxValueLabel min={min} max={max} />}
+						</Box>
+					}
+					placement="top"
+					arrow
+				>
+					<span>
+						<Icon fontSize="medium" sx={{ color: itemsColor }} />
+					</span>
+				</Tooltip>
+			) : (
+				<Icon fontSize="medium" sx={{ color: itemsColor }} />
+			)}
+			<Typography variant="h6" color={itemsColor}>
+				{quantity}
+			</Typography>
+		</Box>
+	);
 };
 
 export default OptionsInputContentItem;