Folder tests

README.md

@@ -3,6 +3,7 @@
 [![npm](https://img.shields.io/npm/v/hyperparam)](https://www.npmjs.com/package/hyperparam)
 [![workflow status](https://github.com/hyparam/hyperparam-cli/actions/workflows/ci.yml/badge.svg)](https://github.com/hyparam/hyperparam-cli/actions)
 [![mit license](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+![coverage](https://img.shields.io/badge/Coverage-28-darkred)
 
 This is the hyperparam cli tool.
 

package.json

@@ -16,7 +16,7 @@
   "scripts": {
     "build": "rollup -c",
     "coverage": "vitest run --coverage --coverage.include=src",
-    "lint": "eslint src",
+    "lint": "eslint src test",
     "serve": "node src/cli.js",
     "url": "node src/cli.js https://hyperparam.blob.core.windows.net/hyperparam/starcoderdata-js-00000-of-00065.parquet",
     "test": "vitest run"
@@ -33,7 +33,7 @@
     "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "11.1.6",
-    "@testing-library/react": "16.0.0",
+    "@testing-library/react": "16.0.1",
     "@types/node": "22.5.1",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.0",
@@ -46,7 +46,7 @@
     "jsdom": "25.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "4.21.1",
+    "rollup": "4.21.2",
     "rollup-plugin-postcss": "4.0.2",
     "tslib": "2.7.0",
     "typescript": "5.5.4",

test/components/Folder.test.tsx

@@ -0,0 +1,66 @@
+import { render, waitFor } from '@testing-library/react'
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import Folder from '../../src/components/Folder.js'
+import { FileMetadata, listFiles } from '../../src/files.js'
+
+vi.mock('../../src/files.js', () => ({
+  listFiles: vi.fn(),
+  getFileDate: vi.fn(f => f.lastModified),
+  getFileDateShort: vi.fn(f => f.lastModified),
+  getFileSize: vi.fn(f => f.fileSize),
+}))
+
+const mockFiles: FileMetadata[] = [
+  { key: 'folder1/', lastModified: '2023-01-01T00:00:00Z' },
+  { key: 'file1.txt', fileSize: 8196, lastModified: '2023-01-01T00:00:00Z' },
+]
+
+describe('Folder Component', () => {
+  it('fetches file data and displays files on mount', async () => {
+    vi.mocked(listFiles).mockResolvedValueOnce(mockFiles)
+    const { getByText } = render(<Folder prefix="" />)
+
+    await waitFor(() => expect(listFiles).toHaveBeenCalledWith(''))
+
+    expect(getByText('/')).toBeDefined()
+
+    const folderLink = getByText('folder1/')
+    expect(folderLink.closest('a')?.getAttribute('href')).toBe('/files?key=folder1/')
+
+    const fileLink = getByText('file1.txt')
+    expect(fileLink.closest('a')?.getAttribute('href')).toBe('/files?key=file1.txt')
+    expect(getByText('8196')).toBeDefined()
+    expect(getByText('2023-01-01T00:00:00Z')).toBeDefined()
+  })
+
+  it('displays the spinner while loading', () => {
+    vi.mocked(listFiles).mockReturnValue(new Promise(() => {}))
+    const { container } = render(<Folder prefix="test-prefix" />)
+    expect(container.querySelector('.spinner')).toBeDefined()
+  })
+
+  it('handles file listing errors', async () => {
+    const errorMessage = 'Failed to fetch'
+    vi.mocked(listFiles).mockRejectedValue(new Error(errorMessage))
+    const { getByText, queryByText } = render(<Folder prefix="test-prefix" />)
+
+    await waitFor(() => expect(listFiles).toHaveBeenCalled())
+
+    expect(queryByText('file1.txt')).toBeNull()
+    expect(queryByText('folder1/')).toBeNull()
+    expect(getByText('Error: ' + errorMessage)).toBeDefined()
+  })
+
+  it('renders breadcrumbs correctly', async () => {
+    vi.mocked(listFiles).mockResolvedValue(mockFiles)
+    const { getByText } = render(<Folder prefix="subdir1/subdir2" />)
+    await waitFor(() => expect(listFiles).toHaveBeenCalled())
+
+    const subdir1Link = getByText('subdir1/')
+    expect(subdir1Link.closest('a')?.getAttribute('href')).toBe('/files?key=subdir1/')
+
+    const subdir2Link = getByText('subdir2/')
+    expect(subdir2Link.closest('a')?.getAttribute('href')).toBe('/files?key=subdir1/subdir2/')
+  })
+})

test/components/Markdown.test.tsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 import { describe, expect, it } from 'vitest'
 import Markdown from '../../src/components/Markdown.js'
 
 describe('Markdown', () => {
   it('renders plain text as a paragraph', () => {
-    const text = 'Hello, world!'
     const { getByText } = render(<Markdown text="Hello, world!" />)
     expect(getByText('Hello, world!')).toBeDefined()
   })

test/components/viewers/ImageView.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import ImageView from '../../../src/components/viewers/ImageView.js'