diff --git a/malty/atoms/Chip/Chip.tsx b/malty/atoms/Chip/Chip.tsx
index e945164e7..9418971cb 100644
--- a/malty/atoms/Chip/Chip.tsx
+++ b/malty/atoms/Chip/Chip.tsx
@@ -56,7 +56,7 @@ export const Chip = ({
disabled={disabled}
readOnly={readOnly}
data-testid={dataTestId}
- onClick={handleClick}
+ onClick={!disabled ? handleClick : undefined}
selected={selected}
height={chipSize}
size={size}
diff --git a/malty/molecules/SegmentedControl/SegmentedControl.test.tsx b/malty/molecules/SegmentedControl/SegmentedControl.test.tsx
index aa84974d2..dceadd9f5 100644
--- a/malty/molecules/SegmentedControl/SegmentedControl.test.tsx
+++ b/malty/molecules/SegmentedControl/SegmentedControl.test.tsx
@@ -1,5 +1,6 @@
import { render } from '@carlsberggroup/malty.utils.test';
-import { fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import React from 'react';
import { SegmentedControl } from './SegmentedControl';
import { SegmentedControlOptions } from './SegmentedControl.types';
@@ -20,17 +21,52 @@ const segmentedControlOptions: SegmentedControlOptions[] = [
];
describe('SegmentedControl', () => {
- it('renders chips', () => {
+ const onChange = jest.fn();
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should render chips', () => {
render();
+
expect(screen.getByText(segmentedControlOptions[0].label)).toBeInTheDocument();
expect(screen.getByText(segmentedControlOptions[1].label)).toBeInTheDocument();
expect(screen.getByText(segmentedControlOptions[2].label)).toBeInTheDocument();
});
- it('calls function onChange', () => {
- const onChange = jest.fn();
+ it('should call function onChange', () => {
render();
- fireEvent.click(screen.getByText(segmentedControlOptions[1].label));
+
+ userEvent.click(screen.getByText(segmentedControlOptions[1].label));
+
+ expect(onChange).toHaveBeenCalledTimes(1);
+ });
+
+ it('should be disabled', () => {
+ render(
+
+ );
+
+ userEvent.click(screen.getByText(segmentedControlOptions[1].label), undefined, { skipPointerEventsCheck: true });
+
+ segmentedControlOptions.forEach((_, index) => {
+ expect(screen.getByTestId(`segmentedcontrol-chip-${index}`)).toHaveAttribute('disabled');
+ });
+
+ expect(onChange).not.toHaveBeenCalled();
+ });
+
+ it('should click on third option', () => {
+ render();
+
+ const option2 = screen.getByText(segmentedControlOptions[2].label);
+
+ expect(option2).toBeInTheDocument();
+
+ userEvent.click(option2);
+
expect(onChange).toHaveBeenCalledTimes(1);
+ expect(onChange).toHaveBeenCalledWith(segmentedControlOptions[2].value);
});
});