diff --git a/packages/ibm-products/src/components/Coachmark/Coachmark.test.js b/packages/ibm-products/src/components/Coachmark/Coachmark.test.js index 8c4f955a08..0251d773dc 100644 --- a/packages/ibm-products/src/components/Coachmark/Coachmark.test.js +++ b/packages/ibm-products/src/components/Coachmark/Coachmark.test.js @@ -6,7 +6,13 @@ */ import React from 'react'; -import { render, screen, act } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro +import { + render, + screen, + act, + waitFor, + fireEvent, +} from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro import userEvent from '@testing-library/user-event'; import { pkg } from '../../settings'; import uuidv4 from '../../global/js/utils/uuidv4'; @@ -18,6 +24,7 @@ import { CoachmarkOverlayElements, } from '..'; import { BEACON_KIND } from './utils/enums'; +import { CoachmarkDragbar } from './CoachmarkDragbar'; const blockClass = `${pkg.prefix}--coachmark`; const componentName = Coachmark.displayName; @@ -105,4 +112,95 @@ describe(componentName, () => { componentName ); }); + + it('renders the closeIconDescription text ', async () => { + const a11yKeyboardHandler = jest.fn(); + const onClose = jest.fn(); + const closeIconDescription = 'Close'; + render( + + ); + + const tooltip = screen.getByText(closeIconDescription); + + expect(tooltip).toBeInTheDocument(); + }); + + it('calls the onClose prop when close is clicked', async () => { + const a11yKeyboardHandler = jest.fn(); + const onClose = jest.fn(); + render( + + ); + + const closeButton = screen.getAllByRole('button')[1]; + + expect(closeButton).toBeInTheDocument(); + await waitFor(() => userEvent.click(closeButton)); + expect(onClose).toHaveBeenCalled(); + }); + + it('showCloseButton prop works as expected', async () => { + const a11yKeyboardHandler = jest.fn(); + + const { rerender } = render( + + ); + + expect(screen.queryAllByRole('button').length).toBe(2); + + rerender( + + ); + + expect(screen.queryAllByRole('button').length).toBe(1); + }); + + it('calls the onDrag prop', async () => { + const a11yKeyboardHandler = jest.fn(); + const onDrag = jest.fn(); + + render( + + ); + + const dragbar = screen.getByRole('button'); + + await waitFor(() => { + fireEvent.mouseDown(dragbar, { clientX: 0, clientY: 0 }); + fireEvent.mouseMove(dragbar, { clientX: 100, clientY: 100 }); + fireEvent.mouseUp(dragbar); + }); + + expect(onDrag).toHaveBeenCalled(); + }); + + it('renders the theme prop', async () => { + renderCoachmark({ + 'data-testid': dataTestId, + theme: 'dark', + }); + + await expect(screen.getByTestId(dataTestId)).toHaveClass( + `${pkg.prefix}--coachmark__dark` + ); + }); }); diff --git a/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.test.js b/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.test.js index 71eb53bef9..3ed52ee51b 100644 --- a/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.test.js +++ b/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.test.js @@ -72,7 +72,7 @@ describe(componentName, () => { renderCoachmarkWithBeacon({ label: testingLabel, }); - screen.getByLabelText(testingLabel); + screen.getAllByLabelText(testingLabel)[1]; }); it('forwards a ref to an appropriate node', () => {