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); }); });