Mock BrowserFS in nodejs test environment

Author: chownces

src/pages/playground/__tests__/Playground.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+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';
@@ -12,9 +12,12 @@ import {
 } from 'src/commons/application/ApplicationTypes';
 import { WorkspaceSettingsContext } from 'src/commons/WorkspaceSettingsContext';
 import { EditorBinding } from 'src/commons/WorkspaceSettingsContext';
+import ShareLinkStateEncoder from 'src/features/playground/shareLinks/encoder/Encoder';
+import { ShareLinkState } from 'src/features/playground/shareLinks/ShareLinkState';
 import { createStore } from 'src/pages/createStore';
 
-import Playground, { handleHash } from '../Playground';
+import * as EncoderHooks from '../../../features/playground/shareLinks/encoder/EncoderHooks';
+import Playground, { setStateFromPlaygroundConfiguration } from '../Playground';
 
 // Mock inspector
 (window as any).Inspector = jest.fn();
@@ -31,6 +34,11 @@ describe('Playground tests', () => {
   let routes: RouteObject[];
   let mockStore: Store<OverallState>;
 
+  // BrowserFS has to be mocked in nodejs environments
+  jest
+    .spyOn(EncoderHooks, 'usePlaygroundConfigurationEncoder')
+    .mockReturnValue(new ShareLinkStateEncoder({} as ShareLinkState));
+
   const getSourceChapterFromStore = (store: Store<OverallState>) =>
     store.getState().playground.languageConfig.chapter;
   const getEditorValueFromStore = (store: Store<OverallState>) =>
@@ -81,38 +89,40 @@ describe('Playground tests', () => {
 
     // Using @testing-library/react to render snapshot instead of react-test-renderer
     // as the useRefs require the notion of React DOM
-    const tree = render(<RouterProvider router={router} />).container;
+    const tree = await act(() => render(<RouterProvider router={router} />).container);
     expect(tree).toMatchSnapshot();
 
     expect(getSourceChapterFromStore(mockStore)).toBe(Chapter.SOURCE_2);
     expect(getEditorValueFromStore(mockStore)).toBe("display('hello!');");
   });
 
-  describe('handleHash', () => {
-    test('disables loading hash with fullJS chapter in URL params', () => {
-      const testHash = '#chap=-1&prgrm=CYSwzgDgNghgngCgOQAsCmUoHsCESCUA3EA';
+  describe('setStateFromPlaygroundConfiguration', () => {
+    test('disables loading playground with fullJS/ fullTS chapter in playground configuration', () => {
+      const chaptersThatDisableLoading: Chapter[] = [Chapter.FULL_JS, Chapter.FULL_TS];
 
       const mockHandleEditorValueChanged = jest.fn();
       const mockHandleChapterSelect = jest.fn();
       const mockHandleChangeExecTime = jest.fn();
 
-      handleHash(
-        testHash,
-        {
-          handleChapterSelect: mockHandleChapterSelect,
-          handleChangeExecTime: mockHandleChangeExecTime
-        },
-        'playground',
-        // We cannot make use of 'dispatch' & BrowserFS in test cases. However, the
-        // behaviour being tested here does not actually invoke either of these. As
-        // a workaround, we pass in 'undefined' instead & cast to the expected types.
-        undefined as unknown as Dispatch,
-        undefined as unknown as FSModule
-      );
-
-      expect(mockHandleEditorValueChanged).not.toHaveBeenCalled();
-      expect(mockHandleChapterSelect).not.toHaveBeenCalled();
-      expect(mockHandleChangeExecTime).not.toHaveBeenCalled();
+      for (const chap of chaptersThatDisableLoading) {
+        setStateFromPlaygroundConfiguration(
+          { chap } as ShareLinkState,
+          {
+            handleChapterSelect: mockHandleChapterSelect,
+            handleChangeExecTime: mockHandleChangeExecTime
+          },
+          'playground',
+          // We cannot make use of 'dispatch' & BrowserFS in test cases. However, the
+          // behaviour being tested here does not actually invoke either of these. As
+          // a workaround, we pass in 'undefined' instead & cast to the expected types.
+          undefined as unknown as Dispatch,
+          null as unknown as FSModule
+        );
+
+        expect(mockHandleEditorValueChanged).not.toHaveBeenCalled();
+        expect(mockHandleChapterSelect).not.toHaveBeenCalled();
+        expect(mockHandleChangeExecTime).not.toHaveBeenCalled();
+      }
     });
   });
 });

src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap

@@ -1922,9 +1922,21 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp5-icon bp5-icon-large bp5-icon-flow-review"
-                                data-icon="flow-review"
-                              />
+                                class="bp5-icon bp5-icon-flow-review"
+                              >
+                                <svg
+                                  data-icon="flow-review"
+                                  height="20"
+                                  role="img"
+                                  viewBox="0 0 20 20"
+                                  width="20"
+                                >
+                                  <path
+                                    d="M6.13 9.004A4.005 4.005 0 0110.012 6c1.87 0 3.44 1.278 3.881 3.005h2.768l-2.354-2.317a.97.97 0 01-.283-.691c0-.536.462-.995 1-.995.273 0 .517.107.693.283l4 4.041a.97.97 0 01.284.692.956.956 0 01-.293.682l-3.991 3.997a.944.944 0 01-.694.292c-.537 0-1-.46-1-.997a.97.97 0 01.284-.692l2.345-2.29h-2.765a4.005 4.005 0 01-3.875 2.981 4.005 4.005 0 01-3.874-2.981H3.349l2.376 2.308a.97.97 0 01.283.691 1 1 0 01-.994.983.989.989 0 01-.713-.291L.293 10.699A.956.956 0 010 10.017a.97.97 0 01.283-.692l4.03-4.037a.996.996 0 01.701-.283c.537 0 .994.464.994 1a.97.97 0 01-.283.691L3.34 9.004h2.79z"
+                                    fill-rule="evenodd"
+                                  />
+                                </svg>
+                              </span>
                             </div>
                           </span>
                         </div>