@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/widgets/formula/components/item.test.tsx

@@ -0,0 +1,249 @@
+import { describe, test, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Item } from './item'
+
+describe('Item', () => {
+  test('renders string children', () => {
+    render(<Item>Test Content</Item>)
+    expect(screen.getByText('Test Content')).toBeTruthy()
+  })
+
+  test('renders numeric children', () => {
+    render(<Item>{123}</Item>)
+    expect(screen.getByText('123')).toBeTruthy()
+  })
+
+  test('renders ReactNode children', () => {
+    render(
+      <Item>
+        <span>Complex</span> <strong>Content</strong>
+      </Item>,
+    )
+    expect(screen.getByText('Complex')).toBeTruthy()
+    expect(screen.getByText('Content')).toBeTruthy()
+  })
+
+  test('renders as Typography with h5 variant', () => {
+    render(<Item>Content</Item>)
+    const element = screen.getByText('Content')
+    expect(element.tagName).toBe('H5')
+  })
+
+  test('applies medium font weight', () => {
+    render(<Item>Content</Item>)
+    const element = screen.getByText('Content')
+    expect(element.classList.contains('MuiTypography-root')).toBe(true)
+  })
+
+  test('applies default color', () => {
+    render(<Item>Content</Item>)
+    const element = screen.getByText('Content')
+    // Color is passed as a prop to Typography, not an HTML attribute
+    expect(element).toBeTruthy()
+  })
+
+  test('sets data-disabled attribute when disabled is true', () => {
+    render(<Item disabled={true}>Content</Item>)
+    const element = screen.getByText('Content')
+    expect(element.getAttribute('data-disabled')).toBe('true')
+  })
+
+  test('does not set data-disabled attribute when disabled is false', () => {
+    render(<Item disabled={false}>Content</Item>)
+    const element = screen.getByText('Content')
+    expect(element.getAttribute('data-disabled')).toBe('false')
+  })
+
+  test('does not set data-disabled attribute when disabled is undefined', () => {
+    render(<Item>Content</Item>)
+    const element = screen.getByText('Content')
+    // When undefined, data-disabled is not set or set to null/false
+    expect(element.getAttribute('data-disabled')).toBeFalsy()
+  })
+
+  test('accepts custom TypographyProps color', () => {
+    render(<Item TypographyProps={{ color: 'primary' }}>Content</Item>)
+    const element = screen.getByText('Content')
+    // Color is passed as a prop, not an HTML attribute
+    expect(element).toBeTruthy()
+  })
+
+  test('accepts custom TypographyProps variant', () => {
+    render(<Item TypographyProps={{ variant: 'h6' }}>Content</Item>)
+    const element = screen.getByText('Content')
+    // Custom variant should override default h5
+    expect(element.tagName).toBe('H6')
+  })
+
+  test('accepts custom TypographyProps className', () => {
+    render(<Item TypographyProps={{ className: 'custom-class' }}>Content</Item>)
+    const element = screen.getByText('Content')
+    expect(element.classList.contains('custom-class')).toBe(true)
+  })
+
+  test('accepts custom TypographyProps sx', () => {
+    render(<Item TypographyProps={{ sx: { fontSize: 20 } }}>Content</Item>)
+    const element = screen.getByText('Content')
+    expect(element).toBeTruthy()
+  })
+
+  test('accepts custom TypographyProps fontWeight', () => {
+    render(<Item TypographyProps={{ fontWeight: 'bold' }}>Content</Item>)
+    const element = screen.getByText('Content')
+    expect(element).toBeTruthy()
+  })
+
+  test('handles empty string children', () => {
+    const { container } = render(<Item>{''}</Item>)
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('handles zero as children', () => {
+    render(<Item>{0}</Item>)
+    expect(screen.getByText('0')).toBeTruthy()
+  })
+
+  test('handles negative numbers as children', () => {
+    render(<Item>{-100}</Item>)
+    expect(screen.getByText('-100')).toBeTruthy()
+  })
+
+  test('handles decimal numbers as children', () => {
+    render(<Item>{123.456}</Item>)
+    expect(screen.getByText('123.456')).toBeTruthy()
+  })
+
+  test('handles large numbers as children', () => {
+    render(<Item>{1000000}</Item>)
+    expect(screen.getByText('1000000')).toBeTruthy()
+  })
+
+  test('combines disabled and custom TypographyProps', () => {
+    render(
+      <Item disabled={true} TypographyProps={{ color: 'error' }}>
+        Content
+      </Item>,
+    )
+    const element = screen.getByText('Content')
+    expect(element.getAttribute('data-disabled')).toBe('true')
+    // Color is passed as a prop, not an HTML attribute
+    expect(element).toBeTruthy()
+  })
+
+  test('applies Typography classes', () => {
+    render(<Item>Content</Item>)
+    const element = screen.getByText('Content')
+    expect(element.classList.contains('MuiTypography-root')).toBe(true)
+    expect(element.classList.contains('MuiTypography-h5')).toBe(true)
+  })
+
+  test('handles null children', () => {
+    const { container } = render(<Item>{null}</Item>)
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('handles undefined children', () => {
+    const { container } = render(<Item>{undefined}</Item>)
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('handles multiple children elements', () => {
+    render(
+      <Item>
+        <span>First</span>
+        <span>Second</span>
+        <span>Third</span>
+      </Item>,
+    )
+    expect(screen.getByText('First')).toBeTruthy()
+    expect(screen.getByText('Second')).toBeTruthy()
+    expect(screen.getByText('Third')).toBeTruthy()
+  })
+
+  test('handles mixed children types', () => {
+    render(
+      <Item>
+        Text <span>Element</span> {123}
+      </Item>,
+    )
+    expect(screen.getByText(/Text/)).toBeTruthy()
+    expect(screen.getByText('Element')).toBeTruthy()
+    expect(screen.getByText(/123/)).toBeTruthy()
+  })
+
+  test('handles deeply nested children', () => {
+    render(
+      <Item>
+        <div>
+          <span>
+            <strong>Nested</strong>
+          </span>
+        </div>
+      </Item>,
+    )
+    expect(screen.getByText('Nested')).toBeTruthy()
+  })
+
+  test('handles special characters in children', () => {
+    render(<Item>Special: @#$%^&*()</Item>)
+    expect(screen.getByText(/Special: @#\$%\^&\*\(\)/)).toBeTruthy()
+  })
+
+  test('handles long text content', () => {
+    const longText = 'A'.repeat(1000)
+    render(<Item>{longText}</Item>)
+    expect(screen.getByText(longText)).toBeTruthy()
+  })
+
+  test('handles unicode characters', () => {
+    render(<Item>Unicode: 你好 🌍</Item>)
+    expect(screen.getByText(/Unicode: 你好 🌍/)).toBeTruthy()
+  })
+
+  test('merges custom TypographyProps with default props', () => {
+    render(
+      <Item
+        TypographyProps={{
+          color: 'secondary',
+          variant: 'body1',
+          className: 'custom',
+        }}
+      >
+        Content
+      </Item>,
+    )
+    const element = screen.getByText('Content')
+    // Color is passed as a prop, not an HTML attribute
+    expect(element.classList.contains('custom')).toBe(true)
+    // variant body1 uses p tag
+    expect(element.tagName).toBe('P')
+  })
+
+  test('TypographyProps can override fontWeight', () => {
+    render(<Item TypographyProps={{ fontWeight: 'light' }}>Content</Item>)
+    const element = screen.getByText('Content')
+    expect(element).toBeTruthy()
+  })
+
+  test('renders with all props combined', () => {
+    render(
+      <Item
+        disabled={true}
+        TypographyProps={{
+          color: 'primary',
+          variant: 'h6',
+          fontWeight: 'bold',
+          className: 'test-class',
+          sx: { fontSize: 24 },
+        }}
+      >
+        Full Test
+      </Item>,
+    )
+    const element = screen.getByText('Full Test')
+    expect(element.getAttribute('data-disabled')).toBe('true')
+    // Color is passed as a prop, not an HTML attribute
+    expect(element.tagName).toBe('H6')
+    expect(element.classList.contains('test-class')).toBe(true)
+  })
+})

package/src/widgets/formula/components/item.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@mui/material'
+import type { ItemProps } from '../types'
+import { styles } from '../style'
+
+export function Item(props: ItemProps) {
+  return (
+    <Typography
+      sx={styles.item}
+      variant='h5'
+      fontWeight='medium'
+      data-disabled={props.disabled}
+      color='default'
+      {...props.TypographyProps}
+    >
+      {props.children}
+    </Typography>
+  )
+}

package/src/widgets/formula/components/prefix.test.tsx

@@ -0,0 +1,341 @@
+import { describe, test, expect, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Prefix } from './prefix'
+import { useWidgetStore } from '../../stores/widget-store'
+import type { FormulaWidgetState } from '../types'
+
+describe('Prefix', () => {
+  beforeEach(() => {
+    useWidgetStore.getState().clearWidgets()
+  })
+
+  test('renders prefix from widget data at default index 0', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '$' }],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('$')).toBeTruthy()
+  })
+
+  test('renders prefix at specified index', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [
+        { value: 100, prefix: 'First' },
+        { value: 200, prefix: 'Second' },
+        { value: 300, prefix: 'Third' },
+      ],
+    })
+
+    render(<Prefix id='test-prefix' index={1} />)
+    expect(screen.getByText('Second')).toBeTruthy()
+  })
+
+  test('renders prefix at index 0 when index not specified', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [
+        { value: 100, prefix: 'First' },
+        { value: 200, prefix: 'Second' },
+      ],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('First')).toBeTruthy()
+  })
+
+  test('returns null when widget does not exist', () => {
+    const { container } = render(<Prefix id='non-existent' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null when widget data is undefined', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+    })
+
+    const { container } = render(<Prefix id='test-prefix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null when prefix is undefined', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(<Prefix id='test-prefix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null when index is out of bounds', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '$' }],
+    })
+
+    const { container } = render(<Prefix id='test-prefix' index={5} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null for empty data array', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [],
+    })
+
+    const { container } = render(<Prefix id='test-prefix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null for empty string prefix', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '' }],
+    })
+
+    const { container } = render(<Prefix id='test-prefix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('renders string prefix', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: 'Total:' }],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('Total:')).toBeTruthy()
+  })
+
+  test('renders single character prefix', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '$' }],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('$')).toBeTruthy()
+  })
+
+  test('renders multi-word prefix', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: 'Grand Total:' }],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('Grand Total:')).toBeTruthy()
+  })
+
+  test('renders as Typography h5', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '$' }],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    const element = screen.getByText('$')
+    expect(element.tagName).toBe('H5')
+  })
+
+  test('passes disabled prop to Item', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '$' }],
+    })
+
+    render(<Prefix id='test-prefix' disabled={true} />)
+    const element = screen.getByText('$')
+    expect(element.getAttribute('data-disabled')).toBe('true')
+  })
+
+  test('passes TypographyProps to Item', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '$' }],
+    })
+
+    render(
+      <Prefix id='test-prefix' TypographyProps={{ className: 'custom' }} />,
+    )
+    const element = screen.getByText('$')
+    expect(element.classList.contains('custom')).toBe(true)
+  })
+
+  test('handles all data properties together', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [
+        {
+          value: 100,
+          color: '#FF0000',
+          prefix: '$',
+          suffix: 'USD',
+        },
+      ],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('$')).toBeTruthy()
+  })
+
+  test('updates when widget data changes', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '$' }],
+    })
+
+    const { rerender } = render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('$')).toBeTruthy()
+
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      data: [{ value: 200, prefix: '€' }],
+    })
+
+    rerender(<Prefix id='test-prefix' />)
+    expect(screen.queryByText('$')).toBeNull()
+    expect(screen.getByText('€')).toBeTruthy()
+  })
+
+  test('updates when prefix is removed', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '$' }],
+    })
+
+    const { container, rerender } = render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('$')).toBeTruthy()
+
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      data: [{ value: 100 }],
+    })
+
+    rerender(<Prefix id='test-prefix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('updates when index changes', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [
+        { value: 100, prefix: '$' },
+        { value: 200, prefix: '€' },
+      ],
+    })
+
+    const { rerender } = render(<Prefix id='test-prefix' index={0} />)
+    expect(screen.getByText('$')).toBeTruthy()
+
+    rerender(<Prefix id='test-prefix' index={1} />)
+    expect(screen.queryByText('$')).toBeNull()
+    expect(screen.getByText('€')).toBeTruthy()
+  })
+
+  test('handles widget removal gracefully', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '$' }],
+    })
+
+    const { container, rerender } = render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('$')).toBeTruthy()
+
+    useWidgetStore.getState().removeWidget('test-prefix')
+
+    rerender(<Prefix id='test-prefix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('handles prefix with special characters', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '¥' }],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('¥')).toBeTruthy()
+  })
+
+  test('handles prefix with unicode characters', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '€ 💰' }],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText(/€ 💰/)).toBeTruthy()
+  })
+
+  test('handles prefix with numbers', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '#1:' }],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('#1:')).toBeTruthy()
+  })
+
+  test('handles long prefix text', () => {
+    const longPrefix = 'This is a very long prefix text: '
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: longPrefix }],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText(longPrefix.trim())).toBeTruthy()
+  })
+
+  test('renders different prefixes for different items', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [
+        { value: 100, prefix: '$' },
+        { value: 200, prefix: '€' },
+        { value: 300, prefix: '£' },
+      ],
+    })
+
+    const { unmount } = render(<Prefix id='test-prefix' index={0} />)
+    expect(screen.getByText('$')).toBeTruthy()
+    unmount()
+
+    render(<Prefix id='test-prefix' index={1} />)
+    expect(screen.getByText('€')).toBeTruthy()
+  })
+
+  test('handles negative index (invalid but should not crash)', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '$' }],
+    })
+
+    const { container } = render(<Prefix id='test-prefix' index={-1} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('handles prefix with only whitespace', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: '   ' }],
+    })
+
+    const { container } = render(<Prefix id='test-prefix' />)
+    // Whitespace is normalized by text content, just verify component renders
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('prefix is sanitized to string only in store', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-prefix', {
+      type: 'formula',
+      data: [{ value: 100, prefix: 'Valid String' }],
+    })
+
+    render(<Prefix id='test-prefix' />)
+    expect(screen.getByText('Valid String')).toBeTruthy()
+  })
+})

package/src/widgets/formula/components/prefix.tsx

@@ -0,0 +1,18 @@
+import { type FormulaWidgetState, type ValueProps } from '../types'
+import { useWidgetStore } from '../../stores/widget-store'
+import { Item } from './item'
+import { useShallow } from 'zustand/shallow'
+
+export function Prefix({ id, index = 0, ...props }: ValueProps) {
+  const prefix = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<FormulaWidgetState>(id)?.data?.[index]?.prefix,
+    ),
+  )
+
+  if (!prefix) {
+    return null
+  }
+
+  return <Item {...props}>{prefix}</Item>
+}