feat(segmented-control): [DSM-800] add tests

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}

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(<SegmentedControl options={segmentedControlOptions} />);
+
     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(<SegmentedControl options={segmentedControlOptions} onChange={onChange} />);
-    fireEvent.click(screen.getByText(segmentedControlOptions[1].label));
+
+    userEvent.click(screen.getByText(segmentedControlOptions[1].label));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('should be disabled', () => {
+    render(
+      <SegmentedControl options={segmentedControlOptions} onChange={onChange} dataQaId="segmentedcontrol" disabled />
+    );
+
+    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(<SegmentedControl options={segmentedControlOptions} onChange={onChange} />);
+
+    const option2 = screen.getByText(segmentedControlOptions[2].label);
+
+    expect(option2).toBeInTheDocument();
+
+    userEvent.click(option2);
+
     expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(segmentedControlOptions[2].value);
   });
 });