diff --git a/packages/components/src/BasicModal.test.tsx b/packages/components/src/BasicModal.test.tsx index eb8b62b74c..419dfd5730 100644 --- a/packages/components/src/BasicModal.test.tsx +++ b/packages/components/src/BasicModal.test.tsx @@ -1,26 +1,25 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; import { render } from '@testing-library/react'; -import BasicModal from './BasicModal'; +import BasicModal, { BasicModalProps } from './BasicModal'; const DEFAULT_BODY_TEXT = 'DEFAULT_TEXT'; const DEFAULT_TEST_ID = 'DEFAULT_TEST_ID'; -function makeWrapper( - isOpen = true, - bodyText = DEFAULT_BODY_TEXT, - dataTestId = DEFAULT_TEST_ID, - onConfirm = jest.fn() -) { - return render( - - ); +function makeWrapper(partialProps: Partial | undefined = {}) { + const props = { + 'data-testid': DEFAULT_TEST_ID, + bodyText: DEFAULT_BODY_TEXT, + headerText: '', + isConfirmDanger: false, + isOpen: true, + onCancel: jest.fn(), + onConfirm: jest.fn(), + ...partialProps, + }; + + // eslint-disable-next-line react/jsx-props-no-spreading + return render(); } it('mounts and unmounts without failing', () => { @@ -32,6 +31,16 @@ it('focuses default button on first render after opening', () => { expect(getByTestId(`${DEFAULT_TEST_ID}-btn-confirm`)).toHaveFocus(); }); +it.each([true, false])( + 'sets button style based on isConfirmDanger value: %s', + isConfirmDanger => { + const { getByTestId } = makeWrapper({ isConfirmDanger }); + expect(getByTestId(`${DEFAULT_TEST_ID}-btn-confirm`)).toHaveClass( + isConfirmDanger ? 'btn-danger' : 'btn-primary' + ); + } +); + it('does not re-focus default button on re-render', async () => { const user = userEvent.setup(); const { getByTestId, rerender } = makeWrapper(); diff --git a/packages/components/src/BasicModal.tsx b/packages/components/src/BasicModal.tsx index 71f1254a9d..58b6bca4c7 100644 --- a/packages/components/src/BasicModal.tsx +++ b/packages/components/src/BasicModal.tsx @@ -15,6 +15,7 @@ export interface BasicModalProps { cancelButtonText?: string; confirmButtonText?: string; discardButtonText?: string; + isConfirmDanger?: boolean; children?: React.ReactNode; 'data-testid'?: string; } @@ -44,6 +45,7 @@ function BasicModal(props: BasicModalProps) { cancelButtonText = 'Cancel', confirmButtonText = 'Okay', discardButtonText = 'Discard', + isConfirmDanger = false, children, 'data-testid': dataTestId, } = props; @@ -126,7 +128,7 @@ function BasicModal(props: BasicModalProps) { )}