Fs: added new VirtualFs that is based on memfs (#334)

This allows to use caches in tests without mocking anything :)

Author: warpdesign

package-lock.json

@@ -96,6 +96,7 @@
         "jest-cli": "^29.3.1",
         "jest-environment-jsdom": "^29.3.1",
         "lint-staged": "^10.4.2",
+        "memfs": "^3.4.12",
         "mock-fs": "git+https://git@github.com/warpdesign/mock-fs.git",
         "pm2": "^5.2.2",
         "prettier": "^2.7.1",

package.json

@@ -70,7 +70,7 @@ describe('FileMenu', () => {
         })
     })
 
-    it.only('should disable individual menu items when disable condition is met', () => {
+    it('should disable individual menu items when disable condition is met', () => {
         const props = { ...PROPS, selectedItemsLength: 0 }
         const options = {
             providerProps: {

src/components/__tests__/FileMenu.test.tsx

@@ -2,65 +2,43 @@
  * @jest-environment jsdom
  */
 import React from 'react'
-import { screen, setup, render, t, waitFor } from 'rtl'
+import { screen, setup, render, t } from 'rtl'
 import { Statusbar } from '../Statusbar'
 import { filterFiles, filterDirs } from '$src/utils/fileUtils'
-import { File } from '$src/services/Fs'
 import { ViewState } from '$src/state/viewState'
-import { FileState } from '$src/state/fileState'
-import { action, makeObservable, observable, runInAction } from 'mobx'
+import { vol } from 'memfs'
 
 describe('Statusbar', () => {
-    const cache = makeObservable(
+    vol.fromJSON(
         {
-            status: 'ok',
-            files: observable<File>([]),
-            setShowHiddenFiles: jest.fn((show: boolean) => {
-                cache.showHiddenFiles = show
-            }),
-            showHiddenFiles: false,
-            path: '/tmp',
-        } as unknown as FileState,
-        {
-            path: observable,
-            showHiddenFiles: observable,
-            setShowHiddenFiles: action,
+            dir1: null,
+            foo1: '',
+            foo2: '',
+            '.hidden': '',
         },
+        '/virtual',
     )
 
     const options = {
         providerProps: {
-            viewState: {
-                getVisibleCache: () => cache,
-            } as unknown as ViewState,
+            viewState: new ViewState(0),
         },
     }
 
     const buildStatusBarText = () => {
+        const cache = options.providerProps.viewState.getVisibleCache()
         const files = filterFiles(cache.files, cache.showHiddenFiles).length
         const folders = filterDirs(cache.files, cache.showHiddenFiles).length
+
         return `${t('STATUS.FILES', { count: files })}, ${t('STATUS.FOLDERS', {
             count: folders,
         })}`
     }
 
-    beforeEach(() => {
-        cache.status = 'ok'
-        cache.showHiddenFiles = false
-        cache.files.replace([
-            {
-                fullname: 'dir1',
-                isDir: true,
-            } as unknown as File,
-            {
-                fullname: 'foo1',
-                isDir: false,
-            } as unknown as File,
-            {
-                fullname: '.foo2',
-                isDir: false,
-            } as unknown as File,
-        ])
+    beforeEach(async () => {
+        options.providerProps.viewState = new ViewState(0)
+        const cache = options.providerProps.viewState.addCache('/virtual', -1, true)
+        await cache.openDirectory({ dir: '/virtual', fullname: '' })
 
         jest.clearAllMocks()
     })
@@ -81,7 +59,7 @@ describe('Statusbar', () => {
     })
 
     it('toggle hidden files button should be hidden if file cache is not valid', () => {
-        cache.status = 'busy'
+        options.providerProps.viewState.getVisibleCache().setStatus('busy')
         render(<Statusbar />, options)
 
         expect(screen.queryByRole('button')).not.toBeInTheDocument()

src/components/__tests__/Statusbar.test.tsx

@@ -12,12 +12,11 @@ import child_process from 'child_process'
 
 import { ExplorerApp } from '$src/components/App'
 import { i18n } from '$src/locale/i18n'
-import { SettingsState } from '$src/state/settingsState'
 // register Fs that will be available in React-Explorer
 // I guess there is a better place to do that
-import { FsGeneric } from '$src/services/plugins/FsGeneric'
 import { FsWsl } from '$src/services/plugins/FsWsl'
 import { FsLocal } from '$src/services/plugins/FsLocal'
+import { FsGeneric } from '$src/services/plugins/FsGeneric'
 import { registerFs } from '$src/services/Fs'
 import { AppState } from '$src/state/appState'
 
@@ -29,9 +28,11 @@ configure({
     safeDescriptors: window.ENV.CY ? false : true,
 })
 
+// TODO: there should be an easy way to automatically register new FS
 function initFS() {
-    if ((process && process.env && process.env.NODE_ENV === 'test') || window.ENV.CY) {
+    if ((process && process.env && process.env.NODE_ENV === 'test') || window.ENV.CY || typeof jest !== 'undefined') {
         registerFs(FsGeneric)
+        // registerFs(FsVirtual)
     } else {
         registerFs(FsWsl)
         registerFs(FsLocal)
@@ -92,8 +93,5 @@ class App {
     }
 }
 
-;(async () => {
-    await new Promise((res) => setTimeout(res, 1000))
-    const app = new App()
-    app.init()
-})()
+const app = new App()
+app.init()

src/gui/index.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { Readable } from 'stream'
+import { FsVirtual } from '$src/services/plugins/FsVirtual'
 
 import { isWin } from '$src/utils/platform'
 
-const interfaces: Array<Fs> = []
+const interfaces: Array<Fs> = [FsVirtual]
 
 export interface Credentials {
     user?: string
@@ -25,7 +26,7 @@ export interface File {
     name: string
     fullname: string
     extension: string
-    target: string
+    target: string | Buffer
     cDate: Date
     mDate: Date
     bDate: Date
@@ -130,7 +131,6 @@ export interface FsApi {
         transferId?: number,
     ): Promise<void>
     getParentTree(dir: string): Array<{ dir: string; fullname: string }>
-
     resolve(path: string): string
     sanityze(path: string): string
     join(...paths: string[]): string
@@ -146,7 +146,6 @@ export interface FsApi {
 
 export function getFS(path: string): Fs {
     const newfs = interfaces.find((filesystem) => filesystem.canread(path))
-    console.log('got FS', newfs)
     // if (!newfs) {
     //     newfs = FsGeneric;
     // }