Skip to content

Commit

Permalink
refactor: Remove capitalize in ProcessingNotification
Browse files Browse the repository at this point in the history
  • Loading branch information
ChrisChV committed Dec 4, 2024
1 parent d1cedaf commit d92ea86
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 38 deletions.
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import { capitalize } from 'lodash';
import userEvent from '@testing-library/user-event';
import { initializeMocks, render, screen } from '../../testUtils';
import { NOTIFICATION_MESSAGES } from '../../constants';
import ProcessingNotification from '.';

const mockUndo = jest.fn();

const props = {
title: NOTIFICATION_MESSAGES.saving,
title: 'ThIs IS a Test. OK?',
isShow: true,
action: {
label: 'Undo',
Expand All @@ -22,24 +20,16 @@ describe('<ProcessingNotification />', () => {

it('renders successfully', () => {
render(<ProcessingNotification {...props} close={() => {}} />);
expect(screen.getByText(capitalize(props.title))).toBeInTheDocument();
expect(screen.getByText(props.title)).toBeInTheDocument();
expect(screen.getByText('Undo')).toBeInTheDocument();
expect(screen.getByRole('alert').querySelector('.processing-notification-hide-close-button')).not.toBeInTheDocument();
userEvent.click(screen.getByText('Undo'));
expect(mockUndo).toHaveBeenCalled();
});

it('renders with `disableCapitalize`', () => {
const title = 'ThIs IS a Test. OK?';
render(<ProcessingNotification {...props} close={() => {}} title={title} disableCapitalize />);
expect(screen.getByText(title)).toBeInTheDocument();
expect(screen.getByText('Undo')).toBeInTheDocument();
expect(screen.getByRole('alert').querySelector('.processing-notification-hide-close-button')).not.toBeInTheDocument();
});

it('add hide-close-button class if no close action is passed', () => {
render(<ProcessingNotification {...props} />);
expect(screen.getByText(capitalize(props.title))).toBeInTheDocument();
expect(screen.getByText(props.title)).toBeInTheDocument();
expect(screen.getByRole('alert').querySelector('.processing-notification-hide-close-button')).toBeInTheDocument();
});
});
9 changes: 2 additions & 7 deletions src/generic/processing-notification/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@ import {
Icon, Toast,
} from '@openedx/paragon';
import { Settings as IconSettings } from '@openedx/paragon/icons';
import { capitalize } from 'lodash';
import classNames from 'classnames';

const ProcessingNotification = ({
isShow, title, action, close, disableCapitalize,
isShow, title, action, close,
}) => (
<Toast
className={classNames({ 'processing-notification-hide-close-button': !close })}
Expand All @@ -18,16 +17,13 @@ const ProcessingNotification = ({
>
<span className="d-flex align-items-center">
<Icon className="processing-notification-icon mb-0 mr-2" src={IconSettings} />
<span className="font-weight-bold h4 mb-0 text-white">
{!disableCapitalize ? capitalize(title) : title}
</span>
<span className="font-weight-bold h4 mb-0 text-white">{title}</span>
</span>
</Toast>
);

ProcessingNotification.defaultProps = {
close: null,
disableCapitalize: false,
};

ProcessingNotification.propTypes = {
Expand All @@ -38,7 +34,6 @@ ProcessingNotification.propTypes = {
onClick: PropTypes.func,
}),
close: PropTypes.func,
disableCapitalize: PropTypes.bool,
};

export default ProcessingNotification;
9 changes: 2 additions & 7 deletions src/generic/toast-context/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ export interface WraperProps {
}

// eslint-disable-next-line react/prop-types
const TestComponentToShow = ({ capitilize = false }) => {
const TestComponentToShow = () => {
const { showToast } = React.useContext(ToastContext);

React.useEffect(() => {
showToast('This is the Toast!', undefined, capitilize);
showToast('This is the Toast!');
}, [showToast]);

return <div>Content</div>;
Expand Down Expand Up @@ -63,11 +63,6 @@ describe('<ToastProvider />', () => {
expect(await screen.findByText('This is the Toast!')).toBeInTheDocument();
});

it('should capitilize toast', async () => {
render(<RootWrapper><TestComponentToShow capitilize /></RootWrapper>);
expect(await screen.findByText('This is the toast!')).toBeInTheDocument();
});

it('should close toast after 5000ms', async () => {
render(<RootWrapper><TestComponentToShow /></RootWrapper>);
expect(await screen.findByText('This is the Toast!')).toBeInTheDocument();
Expand Down
15 changes: 4 additions & 11 deletions src/generic/toast-context/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ export interface ToastActionData {
export interface ToastContextData {
toastMessage: string | null;
toastAction?: ToastActionData;
capitilize?: boolean;
showToast: (message: string, action?: ToastActionData, capitilize?: boolean) => void;
showToast: (message: string, action?: ToastActionData) => void;
closeToast: () => void;
}

Expand All @@ -26,7 +25,6 @@ export interface ToastProviderProps {
export const ToastContext = React.createContext<ToastContextData>({
toastMessage: null,
toastAction: undefined,
capitilize: false,
showToast: () => {},
closeToast: () => {},
});
Expand All @@ -40,33 +38,29 @@ export const ToastProvider = (props: ToastProviderProps) => {

const [toastMessage, setToastMessage] = React.useState<string | null>(null);
const [toastAction, setToastAction] = React.useState<ToastActionData | undefined>(undefined);
const [capitilize, setCapitilize] = React.useState<boolean>(false);

const resetState = React.useCallback(() => {
setToastMessage(null);
setToastAction(undefined);
setCapitilize(false);
}, []);

React.useEffect(() => () => {
// Cleanup function to avoid updating state on unmounted component
resetState();
}, []);

const showToast = React.useCallback((message, action?: ToastActionData, isCapitilize?: boolean) => {
const showToast = React.useCallback((message, action?: ToastActionData) => {
setToastMessage(message);
setToastAction(action);
setCapitilize(isCapitilize ?? false);
}, [setToastMessage, setToastAction]);
const closeToast = React.useCallback(() => resetState(), [setToastMessage, setToastAction, setCapitilize]);
const closeToast = React.useCallback(() => resetState(), [setToastMessage, setToastAction]);

const context = React.useMemo(() => ({
toastMessage,
toastAction,
capitilize,
showToast,
closeToast,
}), [toastMessage, toastAction, capitilize, showToast, closeToast]);
}), [toastMessage, toastAction, showToast, closeToast]);

return (
<ToastContext.Provider value={context}>
Expand All @@ -77,7 +71,6 @@ export const ToastProvider = (props: ToastProviderProps) => {
title={toastMessage}
action={toastAction}
close={closeToast}
disableCapitalize={!capitilize}
/>
)}
</ToastContext.Provider>
Expand Down

0 comments on commit d92ea86

Please sign in to comment.