From 5f5719620198c5b5e2a064f673160bed437cd403 Mon Sep 17 00:00:00 2001 From: Shivam Gupta Date: Tue, 24 Dec 2024 19:10:41 +0530 Subject: [PATCH] Fix: Navigate to design page on settings save --- .../stories/settings/SettingsForm.stories.tsx | 9 +++ packages/ui/src/assets/settingsSchema.json | 2 +- .../components/Settings/SettingsForm.test.tsx | 58 ++++++------------- .../src/components/Settings/SettingsForm.tsx | 4 ++ 4 files changed, 33 insertions(+), 40 deletions(-) diff --git a/packages/ui-tests/stories/settings/SettingsForm.stories.tsx b/packages/ui-tests/stories/settings/SettingsForm.stories.tsx index 465c87db2..020b40921 100644 --- a/packages/ui-tests/stories/settings/SettingsForm.stories.tsx +++ b/packages/ui-tests/stories/settings/SettingsForm.stories.tsx @@ -1,9 +1,18 @@ import { SettingsForm } from '@kaoto/kaoto'; import { SettingsProvider, ReloadContext, DefaultSettingsAdapter } from '@kaoto/kaoto/testing'; import { Meta, StoryFn } from '@storybook/react'; +import { reactRouterOutlet, reactRouterParameters, withRouter } from 'storybook-addon-remix-react-router'; export default { title: 'Settings/SettingsForm', + decorators: [withRouter], + parameters: { + reactRouter: reactRouterParameters({ + routing: reactRouterOutlet({ + path: '*', + }), + }), + }, component: SettingsForm, } as Meta; diff --git a/packages/ui/src/assets/settingsSchema.json b/packages/ui/src/assets/settingsSchema.json index d7d9a84ef..1cc48b127 100644 --- a/packages/ui/src/assets/settingsSchema.json +++ b/packages/ui/src/assets/settingsSchema.json @@ -1,5 +1,5 @@ { - "$schema": "http://json-schema.org/draft-04/schema#", + "$schema": "http://json-schema.org/draft-07/schema#", "type": "object", "additionalProperties": false, "description": "JSON Schema for Kaoto configuration", diff --git a/packages/ui/src/components/Settings/SettingsForm.test.tsx b/packages/ui/src/components/Settings/SettingsForm.test.tsx index 3efc63e6a..06fb12204 100644 --- a/packages/ui/src/components/Settings/SettingsForm.test.tsx +++ b/packages/ui/src/components/Settings/SettingsForm.test.tsx @@ -1,62 +1,50 @@ -import { act, fireEvent, render } from '@testing-library/react'; +import { act, fireEvent, render, screen } from '@testing-library/react'; import { AbstractSettingsAdapter, DefaultSettingsAdapter } from '../../models/settings'; import { ReloadContext, SettingsProvider } from '../../providers'; import { SettingsForm } from './SettingsForm'; +import { MemoryRouter } from 'react-router-dom'; describe('SettingsForm', () => { let reloadPage: jest.Mock; let settingsAdapter: AbstractSettingsAdapter; + const wrapper = ({ children }: { children: React.ReactNode }) => { + return ( + + + {children} + + + ); + }; + beforeEach(() => { reloadPage = jest.fn(); settingsAdapter = new DefaultSettingsAdapter(); + render(, { wrapper }); }); it('should render', () => { - const wrapper = render( - - - - - , - ); - - expect(wrapper.getByTestId('settings-form')).toMatchSnapshot(); + expect(screen.getByTestId('settings-form')).toMatchSnapshot(); }); it('should update settings upon clicking save', () => { - const wrapper = render( - - - - - , - ); - act(() => { - const input = wrapper.getByLabelText('Camel Catalog URL'); + const input = screen.getByLabelText('Camel Catalog URL'); fireEvent.change(input, { target: { value: 'http://localhost:8080' } }); }); act(() => { - const button = wrapper.getByTestId('settings-form-save-btn'); + const button = screen.getByTestId('settings-form-save-btn'); fireEvent.click(button); }); expect(settingsAdapter.getSettings().catalogUrl).toBe('http://localhost:8080'); }); - it('should not update settings if the save button was clicked', () => { - const wrapper = render( - - - - - , - ); - + it('should not update settings if the save button was not clicked', () => { act(() => { - const input = wrapper.getByLabelText('Camel Catalog URL'); + const input = screen.getByLabelText('Camel Catalog URL'); fireEvent.change(input, { target: { value: 'http://localhost:8080' } }); }); @@ -64,16 +52,8 @@ describe('SettingsForm', () => { }); it('should reload the page upon clicking save', () => { - const wrapper = render( - - - - - , - ); - act(() => { - const button = wrapper.getByTestId('settings-form-save-btn'); + const button = screen.getByTestId('settings-form-save-btn'); fireEvent.click(button); }); diff --git a/packages/ui/src/components/Settings/SettingsForm.tsx b/packages/ui/src/components/Settings/SettingsForm.tsx index f41fbda21..a0defb12b 100644 --- a/packages/ui/src/components/Settings/SettingsForm.tsx +++ b/packages/ui/src/components/Settings/SettingsForm.tsx @@ -7,9 +7,12 @@ import { SettingsModel } from '../../models/settings'; import { SchemaBridgeProvider } from '../../providers/schema-bridge.provider'; import { SettingsContext } from '../../providers/settings.provider'; import { CustomAutoForm } from '../Form/CustomAutoForm'; +import { useNavigate } from 'react-router-dom'; +import { Links } from '../../router/links.models'; export const SettingsForm: FunctionComponent = () => { const settingsAdapter = useContext(SettingsContext); + const navigate = useNavigate(); const { lastRender, reloadPage } = useReloadContext(); const [settings, setSettings] = useState(settingsAdapter.getSettings()); @@ -20,6 +23,7 @@ export const SettingsForm: FunctionComponent = () => { const onSave = useCallback(() => { settingsAdapter.saveSettings(settings); reloadPage(); + navigate(Links.Home); }, [reloadPage, settings, settingsAdapter]); return (