fix tests

Author: severo

src/components/Json/Json.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render } from '@testing-library/react'
 import { describe, expect, it } from 'vitest'
 import Json from './Json.js'
+import { isPrimitive, shouldObjectCollapse } from './helpers.js'
 
 describe('Json Component', () => {
   it('renders primitive types correctly', () => {
@@ -26,32 +27,68 @@ describe('Json Component', () => {
   })
 
   it('renders nested objects', () => {
+    const { getByText } = render(<Json json={{ obj: { arr: [314, '42'] } }} />)
+    expect(getByText('obj:')).toBeDefined()
+    expect(getByText('arr:')).toBeDefined()
+    expect(getByText('314')).toBeDefined()
+    expect(getByText('"42"')).toBeDefined()
+  })
+
+  it('collapses non-primitive nested objects', () => {
     const { getByText } = render(<Json json={{ obj: { arr: [314, null] } }} />)
     expect(getByText('obj:')).toBeDefined()
     expect(getByText('arr:')).toBeDefined()
     expect(getByText('314')).toBeDefined()
-    expect(getByText('null')).toBeDefined()
+    expect(getByText('...')).toBeDefined()
   })
 
   it('toggles array collapse state', () => {
-    const { getByText, queryByText } = render(<Json json={['foo', 'bar']} />)
+    const { getByText, queryByText } = render(<Json json={['foo', null]} />)
     expect(getByText('"foo"')).toBeDefined()
-    expect(getByText('"bar"')).toBeDefined()
+    expect(queryByText('null')).toBeNull()
+    fireEvent.click(getByText('▶'))
+    expect(getByText('null')).toBeDefined()
     fireEvent.click(getByText('▼'))
-    expect(queryByText('0: 1')).toBeNull()
-    fireEvent.click(getByText('[...]'))
     expect(getByText('"foo"')).toBeDefined()
-    expect(getByText('"bar"')).toBeDefined()
+    expect(queryByText('null')).toBeNull()
   })
 
   it('toggles object collapse state', () => {
     const { getByText, queryByText } = render(<Json json={{ key: 'value' }} />)
     expect(getByText('key:')).toBeDefined()
     expect(getByText('"value"')).toBeDefined()
-    fireEvent.click(getByText('▼'))
+    fireEvent.click(getByText('▶'))
     expect(queryByText('key: "value"')).toBeNull()
-    fireEvent.click(getByText('{...}'))
+    fireEvent.click(getByText('▼'))
     expect(getByText('key:')).toBeDefined()
     expect(getByText('"value"')).toBeDefined()
   })
 })
+
+describe('isPrimitive', () => {
+  it('returns true only for primitive types', () => {
+    expect(isPrimitive('test')).toBe(true)
+    expect(isPrimitive(42)).toBe(true)
+    expect(isPrimitive(true)).toBe(true)
+    expect(isPrimitive(1n)).toBe(true)
+    expect(isPrimitive(null)).toBe(false)
+    expect(isPrimitive(undefined)).toBe(false)
+    expect(isPrimitive({})).toBe(false)
+    expect(isPrimitive([])).toBe(false)
+  })
+})
+
+describe('shouldObjectCollapse', () => {
+  it('returns true for objects with all primitive values', () => {
+    expect(shouldObjectCollapse({ a: 1, b: 'test' })).toBe(true)
+  })
+
+  it('returns false for objects with non-primitive values', () => {
+    expect(shouldObjectCollapse({ a: 1, b: {} })).toBe(false)
+  })
+
+  it('returns true for large objects', () => {
+    const largeObject = Object.fromEntries(Array.from({ length: 101 }, (_, i) => [`key${i}`, i]))
+    expect(shouldObjectCollapse(largeObject)).toBe(true)
+  })
+})

src/components/Json/Json.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useState } from 'react'
 import styles from './Json.module.css'
+import { isPrimitive, shouldObjectCollapse } from './helpers.js'
 
 interface JsonProps {
   json: unknown
@@ -36,15 +37,6 @@ function JsonContent({ json, label }: JsonProps): ReactNode {
   return div
 }
 
-function isPrimitive(value: unknown): boolean {
-  return (
-    value !== undefined &&
-    !Array.isArray(value) &&
-    typeof value !== 'object' &&
-    typeof value !== 'function'
-  )
-}
-
 function CollapsedArray({ array }: {array: unknown[]}): ReactNode {
   // the character count is approximate, but it should be enough
   // to avoid showing too many entries
@@ -148,21 +140,8 @@ function CollapsedObject({ obj }: {obj: object}): ReactNode {
   )
 }
 
-function shouldCollapse(obj: object): boolean {
-  const values = Object.values(obj)
-  if (
-    // if all the values are primitive
-    values.every(value => isPrimitive(value))
-    // if the object has too many entries
-    || values.length >= 100
-  ) {
-    return true
-  }
-  return false
-}
-
 function JsonObject({ obj, label }: { obj: object, label?: string }): ReactNode {
-  const [collapsed, setCollapsed] = useState(shouldCollapse(obj))
+  const [collapsed, setCollapsed] = useState(shouldObjectCollapse(obj))
   const key = label ? <span className={styles.key}>{label}: </span> : ''
   if (collapsed) {
     return <div className={styles.clickable} onClick={() => { setCollapsed(false) }}>

src/components/JsonView/JsonView.test.tsx

@@ -13,8 +13,9 @@ globalThis.fetch = vi.fn()
 describe('JsonView Component', () => {
   const encoder = new TextEncoder()
 
-  it('renders json content as nested lists', async () => {
-    const body = encoder.encode('{"key":"value"}').buffer as ArrayBuffer
+  it('renders json content as nested lists (if not collapsed)', async () => {
+    const text = '{"key":["value"]}'
+    const body = encoder.encode(text).buffer as ArrayBuffer
     const source: FileSource = {
       resolveUrl: 'testKey0',
       kind: 'file',
@@ -25,7 +26,7 @@ describe('JsonView Component', () => {
     vi.mocked(fetch).mockResolvedValueOnce({
       status: 200,
       headers: new Headers({ 'Content-Length': body.byteLength.toString() }),
-      text: () => Promise.resolve('{"key":"value"}'),
+      text: () => Promise.resolve(text),
     } as Response)
 
     const { findByRole, findByText } = render(