From 61962572e4490ddf944876e126b858b8d2c4d52b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Cavaleiro?= Date: Mon, 2 Oct 2023 10:14:30 +0100 Subject: [PATCH 1/4] feat(segmentedcontrol): [DSM-800] add tests --- .../SegmentedControl.test.tsx | 40 +++++++++++++++++-- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/malty/molecules/SegmentedControl/SegmentedControl.test.tsx b/malty/molecules/SegmentedControl/SegmentedControl.test.tsx index aa84974d2..4473504fa 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,48 @@ const segmentedControlOptions: SegmentedControlOptions[] = [ ]; describe('SegmentedControl', () => { - it('renders chips', () => { + 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', () => { + it('should call function onChange', () => { + const onChange = jest.fn(); + + render(); + + userEvent.click(screen.getByText(segmentedControlOptions[1].label)); + + expect(onChange).toHaveBeenCalledTimes(1); + }); + + it('should be disabled', () => { + const onChange = jest.fn(); + + render( + + ); + + expect(screen.getByTestId('segmentedcontrol-chip-0')).toHaveAttribute('disabled'); + }); + + it('should click on third option', () => { const onChange = jest.fn(); render(); - fireEvent.click(screen.getByText(segmentedControlOptions[1].label)); + + const option2 = screen.getByText(segmentedControlOptions[2].label); + + expect(option2).toBeInTheDocument(); + + userEvent.click(option2); + expect(onChange).toHaveBeenCalledTimes(1); }); }); From 1e79152955e6475441aa6c7c3a8ebe6dcc41bc35 Mon Sep 17 00:00:00 2001 From: Samuel Silva Date: Wed, 4 Oct 2023 09:40:56 +0100 Subject: [PATCH 2/4] test: remove event listener when component is disabled --- malty/atoms/Chip/Chip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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} From ae1a9ead6c90c597e78b5ac5071ec3cb958e69ca Mon Sep 17 00:00:00 2001 From: Samuel Silva Date: Wed, 4 Oct 2023 09:44:07 +0100 Subject: [PATCH 3/4] test: add assertion for onChange not being called --- .../molecules/SegmentedControl/SegmentedControl.test.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/malty/molecules/SegmentedControl/SegmentedControl.test.tsx b/malty/molecules/SegmentedControl/SegmentedControl.test.tsx index 4473504fa..74a6d7002 100644 --- a/malty/molecules/SegmentedControl/SegmentedControl.test.tsx +++ b/malty/molecules/SegmentedControl/SegmentedControl.test.tsx @@ -50,7 +50,13 @@ describe('SegmentedControl', () => { ); - expect(screen.getByTestId('segmentedcontrol-chip-0')).toHaveAttribute('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', () => { From d63c80570ea299469f40829d8f269cc6178fbe01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Cavaleiro?= Date: Wed, 4 Oct 2023 10:36:35 +0100 Subject: [PATCH 4/4] should click on third option test update and onChange refactor --- .../molecules/SegmentedControl/SegmentedControl.test.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/malty/molecules/SegmentedControl/SegmentedControl.test.tsx b/malty/molecules/SegmentedControl/SegmentedControl.test.tsx index 74a6d7002..dceadd9f5 100644 --- a/malty/molecules/SegmentedControl/SegmentedControl.test.tsx +++ b/malty/molecules/SegmentedControl/SegmentedControl.test.tsx @@ -21,6 +21,8 @@ const segmentedControlOptions: SegmentedControlOptions[] = [ ]; describe('SegmentedControl', () => { + const onChange = jest.fn(); + afterEach(() => { jest.clearAllMocks(); }); @@ -34,8 +36,6 @@ describe('SegmentedControl', () => { }); it('should call function onChange', () => { - const onChange = jest.fn(); - render(); userEvent.click(screen.getByText(segmentedControlOptions[1].label)); @@ -44,8 +44,6 @@ describe('SegmentedControl', () => { }); it('should be disabled', () => { - const onChange = jest.fn(); - render( ); @@ -60,7 +58,6 @@ describe('SegmentedControl', () => { }); it('should click on third option', () => { - const onChange = jest.fn(); render(); const option2 = screen.getByText(segmentedControlOptions[2].label); @@ -70,5 +67,6 @@ describe('SegmentedControl', () => { userEvent.click(option2); expect(onChange).toHaveBeenCalledTimes(1); + expect(onChange).toHaveBeenCalledWith(segmentedControlOptions[2].value); }); });