test: add file selector test

.github/workflows/tests.yml

@@ -58,7 +58,7 @@ jobs:
 
       - name: Run tests
         working-directory: ./ui
-        run: pnpm test:ui
+        run: pnpm test
 
       - name: Upload coverage
         if: ${{ !cancelled() }}

ui/common.ts

@@ -74,27 +74,3 @@ export function build(dir: string): BuildOptions {
     }
 }
 
-export function testConfig(): InlineConfig {
-    return {
-        coverage: {
-            provider: "istanbul",
-            enabled: true,
-            exclude: [
-                "node_modules",
-                "dist",
-                "coverage",
-                ".eslintrc.cjs",
-                "vite.config.ts",
-                "vite.config-explorer.ts",
-                "common.ts",
-                "src/tool/wasm_exec.js",
-                "src/schema/schema.ts",
-            ],
-        },
-        reporters: ["junit", "default", "github-actions"],
-        outputFile: {
-            "junit": "test-results.xml",
-        }
-    }
-}
-

ui/package.json

@@ -10,8 +10,7 @@
     "dev:explorer": "vite -c vite.config-explorer.ts",
     "generate": "typia generate --input src/schema --output src/generated --project tsconfig.json",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "test:ui": "vitest run -c vite.config.ts",
-    "test:explorer": "vitest run -c vite.config-explorer.ts"
+    "test": "vitest run"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -28,6 +27,7 @@
   "devDependencies": {
     "@codecov/vite-plugin": "0.0.1-beta.8",
     "@microsoft/eslint-formatter-sarif": "^3.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",

ui/src/explorer/file_selector.test.tsx

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+
+import {fireEvent, render} from '@testing-library/react';
+import {FileSelector} from './file_selector.tsx';
+import {assert, expect, test, vi} from 'vitest';
+
+test('FileSelector should render correctly', () => {
+    const mockHandler = vi.fn();
+    const {getByText} = render(<FileSelector handler={mockHandler}/>);
+    expect(getByText('Select file')).toBeInTheDocument();
+});
+
+test('FileSelector should call handler when file size is within limit', () => {
+    const mockHandler = vi.fn();
+    const {getByLabelText} = render(<FileSelector handler={mockHandler}/>);
+    const file = new File(['dummy content'], 'dummy.txt', {type: 'text/plain'});
+    fireEvent.change(getByLabelText('Select file'), {target: {files: [file]}});
+    expect(mockHandler).toHaveBeenCalledWith(file);
+});
+
+test('FileSelector should not call handler when file size exceeds limit', () => {
+    const mockHandler = vi.fn();
+    const {getByLabelText} = render(<FileSelector handler={mockHandler}/>);
+    const file = new File(["0".repeat(1024 * 1024 * 31)], 'dummy.txt', {type: 'text/plain'});
+    assert(file.size > 1024 * 1024 * 30);
+
+    fireEvent.change(getByLabelText('Select file'), {target: {files: [file]}});
+    expect(mockHandler).not.toHaveBeenCalled();
+});
+
+test('FileSelector should call handler when file size exceeds limit and user chooses to continue', () => {
+    const mockHandler = vi.fn();
+    const {getByLabelText, getByText} = render(<FileSelector handler={mockHandler}/>);
+    const file = new File(["0".repeat(1024 * 1024 * 31)], 'dummy.txt', {type: 'text/plain'});
+    assert(file.size > 1024 * 1024 * 30);
+
+    fireEvent.change(getByLabelText('Select file'), {target: {files: [file]}});
+    fireEvent.click(getByText('Continue'));
+    expect(mockHandler).toHaveBeenCalledWith(file);
+});

ui/src/explorer/file_selector.tsx

@@ -34,6 +34,13 @@ export const FileSelector = ({handler}: {
         setOpen(false)
     }, [])
 
+    const handleContinue = useCallback(() => {
+        if (pendingFile) {
+            handler(pendingFile)
+            setOpen(false)
+        }
+    }, [handler, pendingFile])
+
     return (
         <>
             <Dialog
@@ -50,10 +57,7 @@ export const FileSelector = ({handler}: {
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={handleClose}>Cancel</Button>
-                    <Button onClick={() => {
-                        handler(pendingFile!)
-                        setOpen(false)
-                    }}>Continue</Button>
+                    <Button onClick={handleContinue}>Continue</Button>
                 </DialogActions>
             </Dialog>
             <Box

ui/tsconfig.json

@@ -2,25 +2,36 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "types": [
+      "@testing-library/jest-dom"
+    ]
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

ui/tsconfig.node.json

@@ -10,6 +10,7 @@
   "include": [
     "vite.config.ts",
     "vite.config-explorer.ts",
+    "vitest.config.ts",
     "common.ts",
   ]
 }