Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "fix: use navigate instead of Link from react-dom"

Browse Source 
This reverts commit 06bdff1796.
This commit is contained in:
Raymond Zhou
2025-04-18 13:55:06 -04:00
committed by Muhammad Faraz Maqsood
parent 06bdff1796
commit ac127e2b15
2 changed files with 23 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages-and-resources/pages/PageSettingButton.jsx
View File

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Icon, IconButton } from '@openedx/paragon';
import { ArrowForward, Settings } from '@openedx/paragon/icons';
import { useNavigate } from 'react-router-dom';
import { useNavigate, Link } from 'react-router-dom';
import { getWaffleFlags } from '../../data/selectors';
import messages from '../messages';
@@ -44,13 +44,14 @@ const PageSettingButton = ({
if (determineLinkDestination) {
return (
<IconButton
src={ArrowForward}
iconAs={Icon}
size="inline"
alt={formatMessage(messages.settings)}
onClick={() => navigate(determineLinkDestination)}
/>
<Link to={determineLinkDestination}>
<IconButton
src={ArrowForward}
iconAs={Icon}
size="inline"
alt={formatMessage(messages.settings)}
/>
</Link>
);
}

40
src/pages-and-resources/pages/PageSettingButton.test.jsx
View File

@@ -1,6 +1,5 @@
import { screen, render } from '@testing-library/react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import PageSettingButton from './PageSettingButton';
@@ -44,62 +43,51 @@ const renderComponent = (props = {}) => render(
);
describe('PageSettingButton', () => {
const navigate = jest.fn();
beforeEach(() => {
useSelector.mockClear();
useNavigate.mockReturnValue(navigate);
});
it('navigates to the new textbooks page link when useNewTextbooksPage is true', () => {
it('renders the settings button with the new textbooks page link when useNewTextbooksPage is true', () => {
useSelector.mockReturnValue(mockWaffleFlags);
renderComponent({ legacyLink: 'http://legacylink.com/textbooks' });
const buttonElement = screen.getByRole('button', { name: /settings/i });
buttonElement.click();
expect(navigate).toHaveBeenCalledWith(`/course/${defaultProps.courseId}/page-id`);
const linkElement = screen.getByRole('link');
expect(linkElement).toHaveAttribute('href', `/course/${defaultProps.courseId}/page-id`);
});
it('does not render button when legacyLink prop value incorrect', () => {
it('does not render link when legacyLink prop value incorrect', () => {
useSelector.mockReturnValue(mockWaffleFlags);
renderComponent({ legacyLink: 'http://legacylink.com/some-value' });
expect(screen.queryByRole('IconButton', { name: /settings/i })).toBeNull();
expect(screen.queryByRole('link')).toBeNull();
});
it('navigates to the legacy link when useNewTextbooksPage is false', () => {
it('renders the settings button with the legacy link when useNewTextbooksPage is false', () => {
useSelector.mockReturnValue({ ...mockWaffleFlags, useNewTextbooksPage: false });
renderComponent({ legacyLink: 'http://legacylink.com/textbooks' });
const buttonElement = screen.getByRole('button', { name: /settings/i });
buttonElement.click();
expect(navigate).toHaveBeenCalledWith('http://legacylink.com/textbooks');
const linkElement = screen.getByRole('link');
expect(linkElement).toHaveAttribute('href', 'http://legacylink.com/textbooks');
});
it('navigates to the new custom pages link when useNewCustomPages is true', () => {
it('renders the settings button with the new custom pages link when useNewCustomPages is true', () => {
useSelector.mockReturnValue(mockWaffleFlags);
renderComponent();
const buttonElement = screen.getByRole('button', { name: /settings/i });
buttonElement.click();
expect(navigate).toHaveBeenCalledWith(`/course/${defaultProps.courseId}/page-id`);
const linkElement = screen.getByRole('link');
expect(linkElement).toHaveAttribute('href', `/course/${defaultProps.courseId}/page-id`);
});
it('navigates to the legacy link when useNewCustomPages is false', () => {
it('renders the settings button with the legacy link when useNewCustomPages is false', () => {
useSelector.mockReturnValue({ ...mockWaffleFlags, useNewCustomPages: false });
renderComponent();
const buttonElement = screen.getByRole('button', { name: /settings/i });
buttonElement.click();
expect(navigate).toHaveBeenCalledWith(defaultProps.legacyLink);
const linkElement = screen.getByRole('link');
expect(linkElement).toHaveAttribute('href', defaultProps.legacyLink);
});
});