From 70d55c3b4b0f43567ad6a2a396e652fcbb393f6a Mon Sep 17 00:00:00 2001 From: En Rong <53928333+chownces@users.noreply.github.com> Date: Fri, 3 May 2024 15:42:40 +0800 Subject: [PATCH] Fix ace editor warnings in test suite by addressing webpack issue --- craco.config.js | 1 - .../__tests__/AssessmentWorkspace.tsx | 14 -------------- src/commons/editor/Editor.tsx | 14 ++++++++++++++ src/commons/editor/EditorContainer.tsx | 6 ------ src/pages/playground/__tests__/Playground.tsx | 12 ------------ .../sicp/subcomponents/__tests__/CodeSnippet.tsx | 4 ---- 6 files changed, 14 insertions(+), 37 deletions(-) diff --git a/craco.config.js b/craco.config.js index 9ced7dac49..e53d1f04a8 100644 --- a/craco.config.js +++ b/craco.config.js @@ -143,7 +143,6 @@ const cracoConfig = { ), '^.+\\.module\\.(css|sass|scss)$' ]; - jestConfig.moduleNameMapper['ace-builds'] = '/node_modules/ace-builds'; jestConfig.moduleNameMapper['unist-util-visit-parents/do-not-use-color'] = '/node_modules/unist-util-visit-parents/lib'; jestConfig.moduleNameMapper['vfile/do-not-use-conditional-minpath'] = diff --git a/src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.tsx b/src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.tsx index 9821670048..d7935069e9 100644 --- a/src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.tsx +++ b/src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.tsx @@ -1,5 +1,4 @@ import { act, render, screen } from '@testing-library/react'; -import { require as acequire } from 'ace-builds'; import { Provider } from 'react-redux'; import { createMemoryRouter, RouterProvider } from 'react-router'; import { mockInitialStore } from 'src/commons/mocks/StoreMocks'; @@ -10,12 +9,6 @@ import { EditorBinding, WorkspaceSettingsContext } from 'src/commons/WorkspaceSe import { mockAssessments } from '../../mocks/AssessmentMocks'; import AssessmentWorkspace, { AssessmentWorkspaceProps } from '../AssessmentWorkspace'; -jest.mock('ace-builds', () => ({ - ...jest.requireActual('ace-builds'), - require: jest.fn() -})); -const acequireMock = acequire as jest.Mock; - const defaultProps = assertType()({ assessmentId: 0, needsPassword: false, @@ -114,13 +107,6 @@ const getGradingResultTab = (tree: HTMLElement) => tree.querySelector('.GradingR const getContestVotingTab = (tree: HTMLElement) => tree.querySelector('.ContestEntryVoting'); describe('AssessmentWorkspace', () => { - beforeEach(() => { - acequireMock.mockReturnValue({ - Mode: jest.fn(), - setCompleters: jest.fn() - }); - }); - test('AssessmentWorkspace page "loading" content renders correctly', async () => { const app = createMemoryRouterWithRoutes(mockUndefinedAssessmentWorkspaceProps); const tree = await renderTreeJson(app); diff --git a/src/commons/editor/Editor.tsx b/src/commons/editor/Editor.tsx index 00e565bb8a..6c4e4cc7fa 100644 --- a/src/commons/editor/Editor.tsx +++ b/src/commons/editor/Editor.tsx @@ -1,9 +1,23 @@ /* eslint-disable simple-import-sort/imports */ + +// Next line necessary to prevent "ReferenceError: ace is not defined" error. +// See https://github.com/securingsincity/react-ace/issues/1233 (although there is no explanation). +import 'ace-builds/src-noconflict/ace'; import 'ace-builds/src-noconflict/ext-language_tools'; import 'ace-builds/src-noconflict/ext-searchbox'; import 'ace-builds/src-noconflict/ext-settings_menu'; import 'js-slang/dist/editors/ace/theme/source'; +/** + * ace-builds/webpack-resolver is causing some issues in the testing environment. + * Without it, we have to manually import the following keybindings to ensure they are packaged + * together with the editor during lazy loading. + * + * Supersedes changes from: https://github.com/source-academy/frontend/issues/2543 + */ +import 'ace-builds/src-noconflict/keybinding-vim'; +import 'ace-builds/src-noconflict/keybinding-emacs'; + import { Card } from '@blueprintjs/core'; import * as AceBuilds from 'ace-builds'; import { Ace, require as acequire, createEditSession } from 'ace-builds'; diff --git a/src/commons/editor/EditorContainer.tsx b/src/commons/editor/EditorContainer.tsx index 8fbe71799d..1f116885b7 100644 --- a/src/commons/editor/EditorContainer.tsx +++ b/src/commons/editor/EditorContainer.tsx @@ -1,9 +1,3 @@ -// Necessary to prevent "ReferenceError: ace is not defined" error. -// See https://github.com/securingsincity/react-ace/issues/1233 (although there is no explanation). -import 'ace-builds/src-noconflict/ace'; -// For webpack to resolve properly during lazy loading (see https://github.com/source-academy/frontend/issues/2543) -import 'ace-builds/webpack-resolver'; - import _ from 'lodash'; import React from 'react'; diff --git a/src/pages/playground/__tests__/Playground.tsx b/src/pages/playground/__tests__/Playground.tsx index 4e2bed644a..39ff45b3b4 100644 --- a/src/pages/playground/__tests__/Playground.tsx +++ b/src/pages/playground/__tests__/Playground.tsx @@ -1,6 +1,5 @@ import { Router } from '@remix-run/router'; import { act, render } from '@testing-library/react'; -import { require as acequire } from 'ace-builds'; import { FSModule } from 'browserfs/dist/node/core/FS'; import { Chapter } from 'js-slang/dist/types'; import { Provider } from 'react-redux'; @@ -21,13 +20,6 @@ import Playground, { handleHash } from '../Playground'; (window as any).Inspector = jest.fn(); (window as any).Inspector.highlightClean = jest.fn(); -jest.mock('ace-builds', () => ({ - ...jest.requireActual('ace-builds'), - require: jest.fn() -})); - -const acequireMock = acequire as jest.Mock; - // Using @testing-library/react to render snapshot instead of react-test-renderer // as the useRefs require the notion of React DOM const renderTree = async (router: Router) => { @@ -61,10 +53,6 @@ describe('Playground tests', () => { ) } ]; - acequireMock.mockReturnValue({ - Mode: jest.fn(), - setCompleters: jest.fn() - }); }); test('Playground renders correctly', async () => { diff --git a/src/pages/sicp/subcomponents/__tests__/CodeSnippet.tsx b/src/pages/sicp/subcomponents/__tests__/CodeSnippet.tsx index b0f85ca5a0..3999d90ac1 100644 --- a/src/pages/sicp/subcomponents/__tests__/CodeSnippet.tsx +++ b/src/pages/sicp/subcomponents/__tests__/CodeSnippet.tsx @@ -1,7 +1,3 @@ -import 'ace-builds'; -import 'ace-builds/webpack-resolver'; -import 'ace-builds/src-noconflict/ace'; - import lzString from 'lz-string'; import { shallowRender } from 'src/commons/utils/TestUtils';