+
+
`;
diff --git a/src/commons/__tests__/__snapshots__/Markdown.test.tsx.snap b/src/commons/__tests__/__snapshots__/Markdown.test.tsx.snap
index 924eff7c36..cff2144717 100644
--- a/src/commons/__tests__/__snapshots__/Markdown.test.tsx.snap
+++ b/src/commons/__tests__/__snapshots__/Markdown.test.tsx.snap
@@ -1,16 +1,75 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Markdown page renders correctly 1`] = `
-
Welcome to the Source Academy playground!
-
The book Structure and Interpretation of Computer Programs, JavaScript Edition Source Source §1
-
In the editor on the left, you can use the Ace keyboard shortcuts Source Academy keyboard shortcuts
",
- }
- }
-/>
+
+
+
+ Welcome to the Source Academy playground!
+
+
+
+
+ The book
+
+
+ Structure and Interpretation of Computer Programs, JavaScript Edition
+
+
+
+uses JavaScript sublanguages that we call
+
+
+ Source
+
+
+ . You have chosen the sublanguage
+
+
+ Source §1
+
+
+ .
+
+
+
+
+ In the editor on the left, you can use the
+
+
+ Ace keyboard shortcuts
+
+
+
+and also the
+
+
+ Source Academy keyboard shortcuts
+
+
+ .
+
+
`;
diff --git a/src/commons/achievement/control/AchievementEditor.tsx b/src/commons/achievement/control/AchievementEditor.tsx
index 9388ff6972..83bc712616 100644
--- a/src/commons/achievement/control/AchievementEditor.tsx
+++ b/src/commons/achievement/control/AchievementEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { type JSX, useContext, useState } from 'react';
import { AchievementContext } from 'src/features/achievement/AchievementConstants';
import AchievementAdder from './achievementEditor/AchievementAdder';
diff --git a/src/commons/achievement/control/GoalEditor.tsx b/src/commons/achievement/control/GoalEditor.tsx
index 9d0a40ef25..9ba8d3b73e 100644
--- a/src/commons/achievement/control/GoalEditor.tsx
+++ b/src/commons/achievement/control/GoalEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { type JSX, useContext, useState } from 'react';
import { AchievementContext } from 'src/features/achievement/AchievementConstants';
import EditableGoal from './goalEditor/EditableGoal';
diff --git a/src/commons/assessment/Assessment.tsx b/src/commons/assessment/Assessment.tsx
index 158ac7cacf..35f976e80e 100644
--- a/src/commons/assessment/Assessment.tsx
+++ b/src/commons/assessment/Assessment.tsx
@@ -13,7 +13,7 @@ import {
} from '@blueprintjs/core';
import { IconNames } from '@blueprintjs/icons';
import { sortBy } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { type JSX, useEffect, useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import { Navigate, useLoaderData, useParams } from 'react-router';
import { numberRegExp } from 'src/features/academy/AcademyTypes';
diff --git a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.test.tsx.snap b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.test.tsx.snap
index fdbedb13ae..fc7ba41f38 100644
--- a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.test.tsx.snap
+++ b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.test.tsx.snap
@@ -1,57 +1,54 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`AssessmentWorkspace > AssessmentWorkspace page "loading" content renders correctly 1`] = `
-
-
-
- Getting mission ready...
+
+
+ Getting mission ready...
+
-
+
`;
exports[`AssessmentWorkspace > AssessmentWorkspace page with ContestVoting question renders correctly 1`] = `
@@ -398,7 +395,6 @@ exports[`AssessmentWorkspace > AssessmentWorkspace page with ContestVoting quest
AssessmentWorkspace page with ContestVoting quest
AssessmentWorkspace page with ContestVoting quest
AssessmentWorkspace page with MCQ question render
AssessmentWorkspace page with MCQ question render
AssessmentWorkspace page with MCQ question render
AssessmentWorkspace page with overdue assessment
AssessmentWorkspace page with overdue assessment
AssessmentWorkspace page with overdue assessment
AssessmentWorkspace page with programming questio
AssessmentWorkspace page with programming questio
AssessmentWorkspace page with programming questio
AssessmentWorkspace renders Grading tab correctly
AssessmentWorkspace renders Grading tab correctly
AssessmentWorkspace renders Grading tab correctly
AssessmentWorkspace renders Grading tab correctly
;
diff --git a/src/commons/controlBar/ControlBarShareButton.tsx b/src/commons/controlBar/ControlBarShareButton.tsx
index 7c3464895a..15945e579f 100644
--- a/src/commons/controlBar/ControlBarShareButton.tsx
+++ b/src/commons/controlBar/ControlBarShareButton.tsx
@@ -35,7 +35,7 @@ type State = {
};
export class ControlBarShareButton extends React.PureComponent
{
- private shareInputElem: React.RefObject;
+ private shareInputElem: React.RefObject;
constructor(props: ControlBarShareButtonProps) {
super(props);
diff --git a/src/commons/delay/Delay.tsx b/src/commons/delay/Delay.tsx
index 5c190739cb..5304d29687 100644
--- a/src/commons/delay/Delay.tsx
+++ b/src/commons/delay/Delay.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
type Props = {
children: JSX.Element;
diff --git a/src/commons/dropdown/DropdownCourses.tsx b/src/commons/dropdown/DropdownCourses.tsx
index 6bc10e5f6c..e47042912c 100644
--- a/src/commons/dropdown/DropdownCourses.tsx
+++ b/src/commons/dropdown/DropdownCourses.tsx
@@ -13,7 +13,7 @@ type Props = {
courseId?: number;
};
-const DropdownCourses: React.FC = ({ isOpen, onClose, courses, courseId }) => {
+const DropdownCourses = (({ isOpen, onClose, courses, courseId }) => {
const navigate = useNavigate();
const options = courses.map(course => ({
@@ -47,6 +47,6 @@ const DropdownCourses: React.FC = ({ isOpen, onClose, courses, courseId }
);
-};
+}) satisfies React.FC;
export default DropdownCourses;
diff --git a/src/commons/dropdown/DropdownCreateCourse.tsx b/src/commons/dropdown/DropdownCreateCourse.tsx
index 2d37ce7eb9..54c2bfe3a2 100644
--- a/src/commons/dropdown/DropdownCreateCourse.tsx
+++ b/src/commons/dropdown/DropdownCreateCourse.tsx
@@ -29,7 +29,7 @@ type Props = {
onClose: () => void;
};
-const DropdownCreateCourse: React.FC = props => {
+const DropdownCreateCourse = (props => {
const dispatch = useDispatch();
const [courseConfig, setCourseConfig] = React.useState({
@@ -280,6 +280,6 @@ const DropdownCreateCourse: React.FC = props => {
);
-};
+}) satisfies React.FC;
export default DropdownCreateCourse;
diff --git a/src/commons/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/commons/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
index 1a6c827952..8f6034a8a5 100644
--- a/src/commons/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/commons/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -1,69 +1,61 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateCourses components when a user is logged in 1`] = `
-
-
+
-
-
-
-
-
-
+
+
+
+
+
+
`;
exports[`Dropdown does not mount Profile, DropdownCourses and DropdownCreateCourses components when a user is not logged in 1`] = `
-
-
+
-
-
-
-
-
-
+
+
+
+
+
+
`;
diff --git a/src/commons/editor/__tests__/Editor.test.tsx b/src/commons/editor/__tests__/Editor.test.tsx
index a3c04a84f0..d241aeff3a 100644
--- a/src/commons/editor/__tests__/Editor.test.tsx
+++ b/src/commons/editor/__tests__/Editor.test.tsx
@@ -1,9 +1,11 @@
-import { shallowRender } from 'src/commons/utils/TestUtils';
+import { Provider } from 'react-redux';
+import { renderTree } from 'src/commons/utils/TestUtils';
+import { createStore } from 'src/pages/createStore';
import Editor, { EditorProps } from '../Editor';
import { Position } from '../EditorTypes';
-test('Editor renders correctly', () => {
+test('Editor renders correctly', async () => {
const props: EditorProps = {
editorTabIndex: 0,
breakpoints: [],
@@ -20,7 +22,11 @@ test('Editor renders correctly', () => {
handleUpdateHasUnsavedChanges: hasUnsavedChanges => {},
handlePromptAutocomplete: (row: number, col: number, callback: any) => {}
};
- const Element: React.FC = () =>
+
+ );
+ const tree = await renderTree(
+
+
+
+
+
+
+
+
+
+
+
+ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+
+
+
+
+
+
+
`;
diff --git a/src/commons/fileSystemView/FileSystemViewContextMenu.tsx b/src/commons/fileSystemView/FileSystemViewContextMenu.tsx
index a107d6bf87..0f29876587 100644
--- a/src/commons/fileSystemView/FileSystemViewContextMenu.tsx
+++ b/src/commons/fileSystemView/FileSystemViewContextMenu.tsx
@@ -1,7 +1,7 @@
import { Classes } from '@blueprintjs/core';
import { ControlledMenu, MenuItem, useMenuState } from '@szhsin/react-menu';
import classNames from 'classnames';
-import React from 'react';
+import React, { type JSX } from 'react';
import classes from 'src/styles/ContextMenu.module.scss';
type Props = {
diff --git a/src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx b/src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx
index 08646a28c5..0dd3ad44cc 100644
--- a/src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx
+++ b/src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx
@@ -1,6 +1,6 @@
import { Classes, Icon, Tab, Tabs, Tooltip } from '@blueprintjs/core';
import classNames from 'classnames';
-import React from 'react';
+import React, { type JSX } from 'react';
import { SideContentProps } from 'src/commons/sideContent/SideContent';
import { generateIconId } from 'src/commons/sideContent/SideContentHelper';
import SideContentProvider from 'src/commons/sideContent/SideContentProvider';
diff --git a/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.test.tsx b/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.test.tsx
index 443cae23ad..b22b7ca19c 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.test.tsx
+++ b/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.test.tsx
@@ -20,9 +20,9 @@ const assessmentPaths = assessmentTypes.map(e => e.toLowerCase()).map(createCour
const staffPaths = staffRoutes.map(createCoursePath);
const adminPaths = adminRoutes.map(createCoursePath);
-const createMatchFn = (to: string) => (e: React.ReactElement) =>
+const createMatchFn = (to: string) => (e: React.ReactElement) =>
e.props.to === to && !e.props.disabled;
-const getChildren = (e: React.ReactElement) => e.props.children;
+const getChildren = (e: React.ReactElement) => e.props.children;
const validateAssessmentPaths = (tree: React.ReactElement, exist: boolean = true) =>
assessmentPaths.forEach(path => {
diff --git a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.test.tsx.snap b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.test.tsx.snap
index 892cff62df..5a6628923b 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.test.tsx.snap
+++ b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.test.tsx.snap
@@ -1,45 +1,40 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`NavigationBarLangSelectButton > should render correctly 1`] = `
-
-
+
-
- JavaScript
-
-
-
+ JavaScript
+
+
-
-
-
+
+
+
+
+
+
`;
diff --git a/src/commons/profile/Profile.tsx b/src/commons/profile/Profile.tsx
index da0368b21c..a443658d3b 100644
--- a/src/commons/profile/Profile.tsx
+++ b/src/commons/profile/Profile.tsx
@@ -1,6 +1,6 @@
import { Drawer, DrawerSize, NonIdealState, Spinner } from '@blueprintjs/core';
import { IconName, IconNames } from '@blueprintjs/icons';
-import React, { useEffect, useState } from 'react';
+import React, { type JSX, useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import SessionActions from '../application/actions/SessionActions';
@@ -16,7 +16,7 @@ type OwnProps = {
onClose: () => void;
};
-const Profile: React.FC = props => {
+const Profile = (props => {
// FIXME: `xp` is actually of type number | undefined here!
// Fix the session type, then remove the typecast below
const {
@@ -188,6 +188,6 @@ const Profile: React.FC = props => {
{content}
);
-};
+}) satisfies React.FC;
export default Profile;
diff --git a/src/commons/repl/Repl.tsx b/src/commons/repl/Repl.tsx
index 2a8416c6b5..600a2b24ef 100644
--- a/src/commons/repl/Repl.tsx
+++ b/src/commons/repl/Repl.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
import { parseError } from 'js-slang';
import { Chapter, Variant } from 'js-slang/dist/types';
import { stringify } from 'js-slang/dist/utils/stringify';
-import React from 'react';
+import React, { type JSX } from 'react';
import type { InterpreterOutput, ResultOutput } from '../application/ApplicationTypes';
import { ExternalLibraryName } from '../application/types/ExternalTypes';
diff --git a/src/commons/repl/ReplInput.tsx b/src/commons/repl/ReplInput.tsx
index dc2a4e4bbc..1ed7664a2c 100644
--- a/src/commons/repl/ReplInput.tsx
+++ b/src/commons/repl/ReplInput.tsx
@@ -2,7 +2,7 @@ import { Classes } from '@blueprintjs/core';
import { Ace } from 'ace-builds';
import classNames from 'classnames';
import { Chapter, Variant } from 'js-slang/dist/types';
-import React from 'react';
+import React, { type JSX } from 'react';
import AceEditor from 'react-ace';
import ReactAce from 'react-ace/lib/ace';
diff --git a/src/commons/repl/__tests__/Repl.test.tsx b/src/commons/repl/__tests__/Repl.test.tsx
index da77d4c895..298e79c38b 100644
--- a/src/commons/repl/__tests__/Repl.test.tsx
+++ b/src/commons/repl/__tests__/Repl.test.tsx
@@ -1,6 +1,5 @@
import { Chapter, Variant } from 'js-slang/dist/types';
import { ExternalLibraryName } from 'src/commons/application/types/ExternalTypes';
-import { shallowRender } from 'src/commons/utils/TestUtils';
import {
CodeOutput,
@@ -34,7 +33,7 @@ const mockErrorOutput: ErrorOutput = {
consoleLogs: []
};
-test('Repl renders correctly', () => {
+test('Repl renders correctly', async () => {
const props = {
handleBrowseHistoryDown: () => {},
handleBrowseHistoryUp: () => {},
@@ -49,56 +48,48 @@ test('Repl renders correctly', () => {
replButtons: []
};
const app =
-
- display('');
-
-
+
- ''
-
+
-
- Expected , got .
-
-
+
-
- a
-bb
-cccccccccccccccccccccccccccccccc
-d
-
-
- Expected , got .
-
-
-`;
-
-exports[`Repl renders correctly 1`] = `
-
-
-
-
-
-
-
- a
-bb
-cccccccccccccccccccccccccccccccc
-d
-
-
+
-
+
-
-
-
-
-
-
- Contest Voting
+
+
+
+ Contest Voting
+
-
-
+
+
+
-
-
-
-
-
+ class="tier"
+ data-testid="tier"
+ id="tier-d"
+ >
+
+ D
+
+
+
-
- The CSE machine generates control, stash and environment model diagrams following a notation introduced in
-
-
-
- Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
-
-
-
- .
-
-
- On this tab, the REPL will be hidden from view, so do check that your code has no errors before running the stepper. You may use this tool by running your program and then dragging the slider above to see the state of the control, stash and environment at different stages in the evaluation of your program. Clicking on the fast-forward button (double chevron) will take you to the next breakpoint in your program
-
-
+
+
- Some useful keyboard shortcuts:
-
-
- a: Move to the first step
-
- e: Move to the last step
-
- f: Move to the next step
-
- b: Move to the previous step
-
-
- Note that these shortcuts are only active when the browser focus is on this tab.
-
-
-
-
+ The CSE machine generates control, stash and environment model diagrams following a notation introduced in
+
-
+
+ Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
+
+
-
-
+
+ On this tab, the REPL will be hidden from view, so do check that your code has no errors before running the stepper. You may use this tool by running your program and then dragging the slider above to see the state of the control, stash and environment at different stages in the evaluation of your program. Clicking on the fast-forward button (double chevron) will take you to the next breakpoint in your program
+
+
+
+ Some useful keyboard shortcuts:
+
+
+ a: Move to the first step
+
+ e: Move to the last step
+
+ f: Move to the next step
+
+ b: Move to the previous step
+
+
+ Note that these shortcuts are only active when the browser focus is on this tab.
+