From 3ac1b48d1012f55b805ceb6f487966ee42f22be1 Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Tue, 7 Jan 2025 11:11:53 +0000 Subject: [PATCH] Allow context providers to be overridden in ReactContextRoot (#22631) * Allow providers to be overridden in ReactContextRoot * Use ReactContextRoot in EditorProviders * Use ReactContextRoot in ScopeDecorator GitOrigin-RevId: bb6dab91f3fca843d7563ed812c4ea6f56fb28bb --- .../ide-react/context/react-context-root.tsx | 163 +++++++++++------- .../web/frontend/stories/decorators/scope.tsx | 109 ++---------- .../settings-auto-close-brackets.test.tsx | 12 +- .../settings/settings-auto-complete.test.tsx | 12 +- .../settings/settings-compiler.test.tsx | 12 +- .../settings/settings-dictionary.test.tsx | 12 +- .../settings/settings-document.test.tsx | 14 +- .../settings/settings-editor-theme.test.tsx | 12 +- .../settings/settings-font-family.test.tsx | 12 +- .../settings/settings-font-size.test.tsx | 12 +- .../settings/settings-image-name.test.tsx | 12 +- .../settings/settings-keybindings.test.tsx | 12 +- .../settings/settings-line-height.test.tsx | 12 +- .../settings/settings-math-preview.test.tsx | 12 +- .../settings/settings-overall-theme.test.tsx | 36 +++- .../settings/settings-pdf-viewer.test.tsx | 12 +- .../settings-spell-check-language.test.tsx | 12 +- .../settings-syntax-validation.test.tsx | 12 +- .../frontend/helpers/editor-providers.jsx | 112 ++---------- 19 files changed, 298 insertions(+), 304 deletions(-) diff --git a/services/web/frontend/js/features/ide-react/context/react-context-root.tsx b/services/web/frontend/js/features/ide-react/context/react-context-root.tsx index 0f6b339476..d6483a6b3f 100644 --- a/services/web/frontend/js/features/ide-react/context/react-context-root.tsx +++ b/services/web/frontend/js/features/ide-react/context/react-context-root.tsx @@ -1,79 +1,110 @@ import { FC } from 'react' +import { ChatProvider } from '@/features/chat/context/chat-context' import { ConnectionProvider } from './connection-context' +import { DetachCompileProvider } from '@/shared/context/detach-compile-context' +import { DetachProvider } from '@/shared/context/detach-context' +import { EditorManagerProvider } from '@/features/ide-react/context/editor-manager-context' +import { EditorProvider } from '@/shared/context/editor-context' +import { FileTreeDataProvider } from '@/shared/context/file-tree-data-context' +import { FileTreeOpenProvider } from '@/features/ide-react/context/file-tree-open-context' +import { FileTreePathProvider } from '@/features/file-tree/contexts/file-tree-path' import { IdeReactProvider } from '@/features/ide-react/context/ide-react-context' import { LayoutProvider } from '@/shared/context/layout-context' -import { DetachProvider } from '@/shared/context/detach-context' +import { LocalCompileProvider } from '@/shared/context/local-compile-context' +import { MetadataProvider } from '@/features/ide-react/context/metadata-context' +import { ModalsContextProvider } from '@/features/ide-react/context/modals-context' +import { OnlineUsersProvider } from '@/features/ide-react/context/online-users-context' +import { OutlineProvider } from '@/features/ide-react/context/outline-context' +import { PermissionsProvider } from '@/features/ide-react/context/permissions-context' import { ProjectProvider } from '@/shared/context/project-context' import { ProjectSettingsProvider } from '@/features/editor-left-menu/context/project-settings-context' -import { EditorProvider } from '@/shared/context/editor-context' -import { UserProvider } from '@/shared/context/user-context' -import { EditorManagerProvider } from '@/features/ide-react/context/editor-manager-context' -import { FileTreeDataProvider } from '@/shared/context/file-tree-data-context' -import { DetachCompileProvider } from '@/shared/context/detach-compile-context' -import { ChatProvider } from '@/features/chat/context/chat-context' -import { LocalCompileProvider } from '@/shared/context/local-compile-context' -import { OnlineUsersProvider } from '@/features/ide-react/context/online-users-context' -import { MetadataProvider } from '@/features/ide-react/context/metadata-context' import { ReferencesProvider } from '@/features/ide-react/context/references-context' -import { SplitTestProvider } from '@/shared/context/split-test-context' -import { ModalsContextProvider } from '@/features/ide-react/context/modals-context' -import { FileTreePathProvider } from '@/features/file-tree/contexts/file-tree-path' -import { UserSettingsProvider } from '@/shared/context/user-settings-context' -import { PermissionsProvider } from '@/features/ide-react/context/permissions-context' -import { FileTreeOpenProvider } from '@/features/ide-react/context/file-tree-open-context' -import { OutlineProvider } from '@/features/ide-react/context/outline-context' import { SnapshotProvider } from '@/features/ide-react/context/snapshot-context' +import { SplitTestProvider } from '@/shared/context/split-test-context' +import { UserProvider } from '@/shared/context/user-context' +import { UserSettingsProvider } from '@/shared/context/user-settings-context' + +export const ReactContextRoot: FC<{ providers?: Record }> = ({ + children, + providers = {}, +}) => { + const Providers = { + ChatProvider, + ConnectionProvider, + DetachCompileProvider, + DetachProvider, + EditorManagerProvider, + EditorProvider, + FileTreeDataProvider, + FileTreeOpenProvider, + FileTreePathProvider, + IdeReactProvider, + LayoutProvider, + LocalCompileProvider, + MetadataProvider, + ModalsContextProvider, + OnlineUsersProvider, + OutlineProvider, + PermissionsProvider, + ProjectProvider, + ProjectSettingsProvider, + ReferencesProvider, + SnapshotProvider, + SplitTestProvider, + UserProvider, + UserSettingsProvider, + ...providers, + } -export const ReactContextRoot: FC = ({ children }) => { return ( - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + {children} - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/services/web/frontend/stories/decorators/scope.tsx b/services/web/frontend/stories/decorators/scope.tsx index 5a45cc926b..535ed32e4e 100644 --- a/services/web/frontend/stories/decorators/scope.tsx +++ b/services/web/frontend/stories/decorators/scope.tsx @@ -9,20 +9,6 @@ import { } from '../fixtures/compile' import useFetchMock from '../hooks/use-fetch-mock' import { useMeta } from '../hooks/use-meta' -import { SplitTestProvider } from '@/shared/context/split-test-context' -import { UserProvider } from '@/shared/context/user-context' -import { ProjectProvider } from '@/shared/context/project-context' -import { FileTreeDataProvider } from '@/shared/context/file-tree-data-context' -import { EditorProvider } from '@/shared/context/editor-context' -import { DetachProvider } from '@/shared/context/detach-context' -import { LayoutProvider } from '@/shared/context/layout-context' -import { LocalCompileProvider } from '@/shared/context/local-compile-context' -import { DetachCompileProvider } from '@/shared/context/detach-compile-context' -import { ProjectSettingsProvider } from '@/features/editor-left-menu/context/project-settings-context' -import { FileTreePathProvider } from '@/features/file-tree/contexts/file-tree-path' -import { UserSettingsProvider } from '@/shared/context/user-settings-context' -import { OutlineProvider } from '@/features/ide-react/context/outline-context' -import { ChatProvider } from '@/features/chat/context/chat-context' import SocketIOShim, { SocketIOMock } from '@/ide/connection/SocketIoShim' import { IdeContext } from '@/shared/context/ide-context' import { @@ -31,18 +17,11 @@ import { } from '@/features/ide-react/context/ide-react-context' import { IdeEventEmitter } from '@/features/ide-react/create-ide-event-emitter' import { ReactScopeEventEmitter } from '@/features/ide-react/scope-event-emitter/react-scope-event-emitter' -import { ModalsContextProvider } from '@/features/ide-react/context/modals-context' import { ConnectionContext } from '@/features/ide-react/context/connection-context' import { EventLog } from '@/features/ide-react/editor/event-log' -import { ReferencesProvider } from '@/features/ide-react/context/references-context' -import { PermissionsProvider } from '@/features/ide-react/context/permissions-context' import { Socket } from '@/features/ide-react/connection/types/socket' import { ConnectionState } from '@/features/ide-react/connection/types/connection-state' -import { EditorManagerProvider } from '@/features/ide-react/context/editor-manager-context' -import { FileTreeOpenProvider } from '@/features/ide-react/context/file-tree-open-context' -import { MetadataProvider } from '@/features/ide-react/context/metadata-context' -import { OnlineUsersProvider } from '@/features/ide-react/context/online-users-context' -import { SnapshotProvider } from '@/features/ide-react/context/snapshot-context' +import { ReactContextRoot } from '@/features/ide-react/context/react-context-root' const scopeWatchers: [string, (value: any) => void][] = [] @@ -173,84 +152,16 @@ export const ScopeDecorator = ( // set values on window.metaAttributesCache (created in initialize, above) useMeta(meta) - const Providers = { - ChatProvider, - ConnectionProvider, - DetachCompileProvider, - DetachProvider, - EditorProvider, - EditorManagerProvider, - SnapshotProvider, - FileTreeDataProvider, - FileTreeOpenProvider, - FileTreePathProvider, - IdeReactProvider, - LayoutProvider, - LocalCompileProvider, - MetadataProvider, - ModalsContextProvider, - OnlineUsersProvider, - OutlineProvider, - PermissionsProvider, - ProjectProvider, - ProjectSettingsProvider, - ReferencesProvider, - SplitTestProvider, - UserProvider, - UserSettingsProvider, - ...opts.providers, - } - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + ) } diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-auto-close-brackets.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-auto-close-brackets.test.tsx index 53f5c7494f..f25266fd33 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-auto-close-brackets.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-auto-close-brackets.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsAutoCloseBrackets from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-auto-close-brackets' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' describe('', function () { afterEach(function () { @@ -10,7 +12,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Auto-close Brackets') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-auto-complete.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-auto-complete.test.tsx index 627e034f1b..eb8e6a6508 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-auto-complete.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-auto-complete.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsAutoComplete from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-auto-complete' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' describe('', function () { afterEach(function () { @@ -10,7 +12,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Auto-complete') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-compiler.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-compiler.test.tsx index 459297d8ed..306ea7d007 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-compiler.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-compiler.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsCompiler from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-compiler' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' describe('', function () { afterEach(function () { @@ -10,7 +12,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Compiler') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-dictionary.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-dictionary.test.tsx index 2106a58597..e5c9556460 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-dictionary.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-dictionary.test.tsx @@ -1,11 +1,19 @@ import { fireEvent, screen, within } from '@testing-library/dom' import { expect } from 'chai' import SettingsDictionary from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-dictionary' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' describe('', function () { it('open dictionary modal', function () { - renderWithEditorContext() + render( + + + + + + ) screen.getByText('Dictionary') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-document.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-document.test.tsx index 0638546600..6d3c147cc1 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-document.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-document.test.tsx @@ -4,8 +4,10 @@ import sinon from 'sinon' import fetchMock from 'fetch-mock' import SettingsDocument from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-document' import * as isValidTeXFileModule from '../../../../../../frontend/js/main/is-valid-tex-file' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' import { Folder } from '../../../../../../types/folder' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' describe('', function () { let isValidTeXFileStub: sinon.SinonStub @@ -35,9 +37,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext(, { - rootFolder: [rootFolder], - }) + render( + + + + + + ) const select = screen.getByLabelText('Main document') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx index 959b5d67d5..e7039afbae 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-editor-theme.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsEditorTheme from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-editor-theme' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' describe('', function () { const editorThemes = ['editortheme-1', 'editortheme-2', 'editortheme-3'] @@ -19,7 +21,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Editor theme') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-font-family.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-font-family.test.tsx index 02ba0919f2..7fcf8431fb 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-font-family.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-font-family.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsFontFamily from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-font-family' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' describe('', function () { afterEach(function () { @@ -10,7 +12,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Font Family') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-font-size.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-font-size.test.tsx index 713386a0d4..a0103e74a3 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-font-size.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-font-size.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsFontSize from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-font-size' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' describe('', function () { const sizes = ['10', '11', '12', '13', '14', '16', '18', '20', '22', '24'] @@ -12,7 +14,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Font Size') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-image-name.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-image-name.test.tsx index 990c39a545..3339767971 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-image-name.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-image-name.test.tsx @@ -3,7 +3,9 @@ import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsImageName from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-image-name' import type { AllowedImageName } from '../../../../../../types/project-settings' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' describe('', function () { const allowedImageNames: AllowedImageName[] = [ @@ -26,7 +28,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('TeX Live version') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-keybindings.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-keybindings.test.tsx index 5a891e01d0..c9b0f2a31d 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-keybindings.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-keybindings.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsKeybindings from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-keybindings' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' describe('', function () { afterEach(function () { @@ -10,7 +12,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Keybindings') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-line-height.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-line-height.test.tsx index a2f6542b4e..e79e034b9f 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-line-height.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-line-height.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsLineHeight from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-line-height' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' describe('', function () { afterEach(function () { @@ -10,7 +12,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Line Height') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-math-preview.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-math-preview.test.tsx index d7f3b957cf..414e149622 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-math-preview.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-math-preview.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsMathPreview from '@/features/editor-left-menu/components/settings/settings-math-preview' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' describe('', function () { afterEach(function () { @@ -10,7 +12,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Equation preview') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-overall-theme.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-overall-theme.test.tsx index a08c14709f..eb7c79a47c 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-overall-theme.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-overall-theme.test.tsx @@ -3,8 +3,10 @@ import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsOverallTheme from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-overall-theme' import type { OverallThemeMeta } from '../../../../../../types/project-settings' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' import getMeta from '@/utils/meta' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' const IEEE_BRAND_ID = 1234 const OTHER_BRAND_ID = 2234 @@ -35,7 +37,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Overall theme') @@ -49,7 +57,13 @@ describe('', function () { window.metaAttributesCache.set('ol-brandVariation', { brand_id: IEEE_BRAND_ID, }) - renderWithEditorContext() + render( + + + + + + ) const select = screen.queryByText('Overall theme') expect(select).to.not.exist }) @@ -58,14 +72,26 @@ describe('', function () { window.metaAttributesCache.set('ol-brandVariation', { brand_id: OTHER_BRAND_ID, }) - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Overall theme') expect(select).to.exist }) it('should show overall theme picker for non branded projects', function () { window.metaAttributesCache.set('ol-brandVariation', undefined) - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Overall theme') expect(select).to.exist }) diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-pdf-viewer.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-pdf-viewer.test.tsx index e1bb69e728..fb79d3d82c 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-pdf-viewer.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-pdf-viewer.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsPdfViewer from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-pdf-viewer' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' describe('', function () { afterEach(function () { @@ -10,7 +12,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('PDF Viewer') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-spell-check-language.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-spell-check-language.test.tsx index 1deb408db5..57a448d0ee 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-spell-check-language.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-spell-check-language.test.tsx @@ -3,7 +3,9 @@ import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsSpellCheckLanguage from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-spell-check-language' import type { SpellCheckLanguage } from '../../../../../../types/project-settings' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' describe('', function () { const languages: SpellCheckLanguage[] = [ @@ -28,7 +30,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Spell check') diff --git a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-syntax-validation.test.tsx b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-syntax-validation.test.tsx index e6b21695b5..d6d0e1d944 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/settings/settings-syntax-validation.test.tsx +++ b/services/web/test/frontend/features/editor-left-menu/components/settings/settings-syntax-validation.test.tsx @@ -2,7 +2,9 @@ import { screen, within } from '@testing-library/dom' import { expect } from 'chai' import fetchMock from 'fetch-mock' import SettingsSyntaxValidation from '../../../../../../frontend/js/features/editor-left-menu/components/settings/settings-syntax-validation' -import { renderWithEditorContext } from '../../../../helpers/render-with-context' +import { render } from '@testing-library/react' +import { EditorProviders } from '../../../../helpers/editor-providers' +import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' describe('', function () { afterEach(function () { @@ -10,7 +12,13 @@ describe('', function () { }) it('shows correct menu', async function () { - renderWithEditorContext() + render( + + + + + + ) const select = screen.getByLabelText('Code check') diff --git a/services/web/test/frontend/helpers/editor-providers.jsx b/services/web/test/frontend/helpers/editor-providers.jsx index 57f6fe5a62..c85150c167 100644 --- a/services/web/test/frontend/helpers/editor-providers.jsx +++ b/services/web/test/frontend/helpers/editor-providers.jsx @@ -2,19 +2,6 @@ /* eslint-disable react/prop-types */ import sinon from 'sinon' import { get, merge } from 'lodash' -import { SplitTestProvider } from '@/shared/context/split-test-context' -import { UserProvider } from '@/shared/context/user-context' -import { ProjectProvider } from '@/shared/context/project-context' -import { FileTreeDataProvider } from '@/shared/context/file-tree-data-context' -import { EditorProvider } from '@/shared/context/editor-context' -import { DetachProvider } from '@/shared/context/detach-context' -import { LayoutProvider } from '@/shared/context/layout-context' -import { LocalCompileProvider } from '@/shared/context/local-compile-context' -import { DetachCompileProvider } from '@/shared/context/detach-compile-context' -import { ProjectSettingsProvider } from '@/features/editor-left-menu/context/project-settings-context' -import { FileTreePathProvider } from '@/features/file-tree/contexts/file-tree-path' -import { UserSettingsProvider } from '@/shared/context/user-settings-context' -import { OutlineProvider } from '@/features/ide-react/context/outline-context' import { SocketIOMock } from '@/ide/connection/SocketIoShim' import { IdeContext } from '@/shared/context/ide-context' import React, { useEffect, useState } from 'react' @@ -26,16 +13,7 @@ import { IdeEventEmitter } from '@/features/ide-react/create-ide-event-emitter' import { ReactScopeEventEmitter } from '@/features/ide-react/scope-event-emitter/react-scope-event-emitter' import { ConnectionContext } from '@/features/ide-react/context/connection-context' import { EventLog } from '@/features/ide-react/editor/event-log' -import { ChatProvider } from '@/features/chat/context/chat-context' -import { EditorManagerProvider } from '@/features/ide-react/context/editor-manager-context' -import { FileTreeOpenProvider } from '@/features/ide-react/context/file-tree-open-context' -import { MetadataProvider } from '@/features/ide-react/context/metadata-context' -import { ModalsContextProvider } from '@/features/ide-react/context/modals-context' -import { OnlineUsersProvider } from '@/features/ide-react/context/online-users-context' -import { PermissionsProvider } from '@/features/ide-react/context/permissions-context' -import { ReferencesProvider } from '@/features/ide-react/context/references-context' -import { SnapshotProvider } from '@/features/ide-react/context/snapshot-context' -import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context' +import { ReactContextRoot } from '@/features/ide-react/context/react-context-root' // these constants can be imported in tests instead of // using magic strings @@ -154,87 +132,17 @@ export function EditorProviders({ // Add details for useUserContext window.metaAttributesCache.set('ol-user', { ...user, features }) window.metaAttributesCache.set('ol-project_id', projectId) - const Providers = { - ChatProvider, - ConnectionProvider, - DetachCompileProvider, - DetachProvider, - EditorProvider, - EditorLeftMenuProvider, - EditorManagerProvider, - SnapshotProvider, - FileTreeDataProvider, - FileTreeOpenProvider, - FileTreePathProvider, - IdeReactProvider, - LayoutProvider, - LocalCompileProvider, - MetadataProvider, - ModalsContextProvider, - OnlineUsersProvider, - OutlineProvider, - PermissionsProvider, - ProjectProvider, - ProjectSettingsProvider, - ReferencesProvider, - SplitTestProvider, - UserProvider, - UserSettingsProvider, - ...providers, - } return ( - - - - - - - - - - - - - - - - - - - - - - - - - - {children} - - - - - - - - - - - - - - - - - - - - - - - - - + + {children} + ) }