Move breadcrumb styles to CSS module + move tests their own file

Author: severo

src/components/Breadcrumb.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react'
 import { useConfig } from '../hooks/useConfig.js'
 import type { Source } from '../lib/sources/types.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/Breadcrumb.module.css'
 
 interface BreadcrumbProps {
   source: Source,
@@ -11,10 +13,10 @@ interface BreadcrumbProps {
  * Breadcrumb navigation
  */
 export default function Breadcrumb({ source, children }: BreadcrumbProps) {
-  const { routes } = useConfig()
+  const { routes, customClass } = useConfig()
 
-  return <nav className='top-header top-header-divided'>
-    <div className='path'>
+  return <nav className={cn(styles.breadcrumb, customClass?.breadcrumb)}>
+    <div className={cn(styles.path, customClass?.path)}>
       {source.sourceParts.map((part, depth) =>
         <a href={routes?.getSourceRouteUrl?.({ sourceId: part.sourceId }) ?? ''} key={depth}>{part.text}</a>
       )}

src/hooks/useConfig.ts

@@ -10,11 +10,13 @@ import { createContext, useContext } from 'react'
 export interface Config {
   customClass?: {
     brand?: string
+    breadcrumb?: string
     contentWrapper?: string
     errorBar?: string
     highTable?: string
     imageView?: string
     markdownView?: string
+    path?: string
     progressBar?: string
     sideBar?: string
     slideCloseButton?: string

src/styles/Breadcrumb.module.css

@@ -0,0 +1,48 @@
+.breadcrumb {
+  /* top navbar */
+  align-items: center;
+  display: flex;
+  font-size: 18px;
+  height: 32px;
+  justify-content: space-between;
+  min-height: 32px;
+  padding-left: 20px;
+  padding-right: 10px;
+  border-bottom: 1px solid #ddd;
+  background: #eee;
+  /* TODO(SL): forbid overflow? */
+
+  h1 {
+    font-size: 18px;
+    margin: 4px 0 0 0; /* top */
+    user-select: none;
+  }
+}
+
+/* file path */
+.path {
+  margin: 0 2px;
+  margin-right: 4px;
+  min-width: 0;
+  overflow: auto;
+  /* TODO(SL): forbid wrap + use an ellipsis instead? */
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  a {
+    color: #222622;
+    font-family: "Courier New", Courier, monospace;
+    font-weight: 600;
+    font-size: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-decoration-thickness: 1px;
+  }
+  /* hide all but the last path link on small screens */
+  @media (max-width: 360px) {
+    & a:not(:last-child) {
+      display: none;
+    }
+  }
+}

src/styles/app.css

@@ -98,28 +98,6 @@ main {
   overflow: hidden;
 }
 
-/* top navbar */
-.top-header {
-  align-items: center;
-  display: flex;
-  font-size: 18px;
-  height: 32px;
-  justify-content: space-between;
-  min-height: 32px;
-  padding-left: 20px;
-  padding-right: 10px;
-}
-.top-header h1 {
-  font-size: 18px;
-  margin: 4px 0 0 0; /* top */
-  user-select: none;
-}
-
-.top-header-divided {
-  border-bottom: 1px solid #ddd;
-  background: #eee;
-}
-
 .top-actions {
   left: auto;
 }
@@ -146,32 +124,6 @@ input.search:focus {
   width: 180px;
 }
 
-/* file path */
-.path {
-  margin: 0 2px;
-  margin-right: 4px;
-  min-width: 0;
-  overflow: auto;
-}
-.path::-webkit-scrollbar {
-  display: none;
-}
-.path a {
-  color: #222622;
-  font-family: 'Courier New', Courier, monospace;
-  font-weight: 600;
-  font-size: 18px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-decoration-thickness: 1px;
-}
-/* hide all but the last path link on small screens */
-@media (max-width: 360px) {
-  .path a:not(:last-child) {
-    display: none;
-  }
-}
-
 /* file list */
 .file-list {
   flex: 1;

test/components/Breadcrumb.test.tsx

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react'
+import { strict as assert } from 'assert'
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { Config, ConfigProvider } from '../../src/hooks/useConfig.js'
+import { Breadcrumb, getHyperparamSource } from '../../src/index.js'
+
+const endpoint = 'http://localhost:3000'
+
+describe('Breadcrumb Component', () => {
+  it('renders breadcrumbs correctly', () => {
+    const source = getHyperparamSource('subdir1/subdir2/', { endpoint })
+    assert(source !== undefined)
+
+    const config: Config = {
+      routes: {
+        getSourceRouteUrl: ({ sourceId }) => `/files?key=${sourceId}`,
+      },
+    }
+    const { getByText } = render(<ConfigProvider value={config}>
+      <Breadcrumb source={source} />
+    </ConfigProvider>)
+
+    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/Folder.test.tsx

@@ -82,27 +82,6 @@ describe('Folder Component', () => {
     expect(queryByText('folder1/')).toBeNull()
   })
 
-  it('renders breadcrumbs correctly', async () => {
-    vi.mocked(fetch).mockResolvedValueOnce({
-      json: () => Promise.resolve(mockFiles),
-      ok: true,
-    } as Response)
-
-    const source = getHyperparamSource('subdir1/subdir2/', { endpoint })
-    assert(source?.kind === 'directory')
-
-    const { findByText, getByText } = render(<ConfigProvider value={config}>
-      <Folder source={source} />
-    </ConfigProvider>)
-    await waitFor(() => { expect(fetch).toHaveBeenCalled() })
-
-    const subdir1Link = await findByText('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/')
-  })
-
   it('filters files based on search query', async () => {
     const mockFiles: FileMetadata[] = [
       { sourceId: 'folder1', name: 'folder1/', kind: 'directory', lastModified: '2023-01-01T00:00:00Z' },