@carto/ps-react-ui 4.3.3 → 4.3.5

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

@@ -0,0 +1,383 @@
+import { describe, test, expect, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Suffix } from './suffix'
+import { useWidgetStore } from '../../stores/widget-store'
+import type { FormulaWidgetState } from '../types'
+
+describe('Suffix', () => {
+  beforeEach(() => {
+    useWidgetStore.getState().clearWidgets()
+  })
+
+  test('renders suffix from widget data at default index 0', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'USD' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('USD')).toBeTruthy()
+  })
+
+  test('renders suffix at specified index', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [
+        { value: 100, suffix: 'units' },
+        { value: 200, suffix: 'items' },
+        { value: 300, suffix: 'pieces' },
+      ],
+    })
+
+    render(<Suffix id='test-suffix' index={1} />)
+    expect(screen.getByText('items')).toBeTruthy()
+  })
+
+  test('renders suffix at index 0 when index not specified', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [
+        { value: 100, suffix: 'first' },
+        { value: 200, suffix: 'second' },
+      ],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('first')).toBeTruthy()
+  })
+
+  test('returns null when widget does not exist', () => {
+    const { container } = render(<Suffix id='non-existent' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null when widget data is undefined', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+    })
+
+    const { container } = render(<Suffix id='test-suffix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null when suffix is undefined', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(<Suffix id='test-suffix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null when index is out of bounds', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'USD' }],
+    })
+
+    const { container } = render(<Suffix id='test-suffix' index={5} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null for empty data array', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [],
+    })
+
+    const { container } = render(<Suffix id='test-suffix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null for empty string suffix', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: '' }],
+    })
+
+    const { container } = render(<Suffix id='test-suffix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('renders string suffix', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'meters' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('meters')).toBeTruthy()
+  })
+
+  test('renders single character suffix', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: '%' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('%')).toBeTruthy()
+  })
+
+  test('renders multi-word suffix', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'square meters' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('square meters')).toBeTruthy()
+  })
+
+  test('renders as Typography h5', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: '%' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    const element = screen.getByText('%')
+    expect(element.tagName).toBe('H5')
+  })
+
+  test('applies secondary text color', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'USD' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    const element = screen.getByText('USD')
+    // TypographyProps receives a function for color, so we check the element exists
+    expect(element).toBeTruthy()
+  })
+
+  test('passes disabled prop to Item', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: '%' }],
+    })
+
+    render(<Suffix id='test-suffix' disabled={true} />)
+    const element = screen.getByText('%')
+    expect(element.getAttribute('data-disabled')).toBe('true')
+  })
+
+  test('passes TypographyProps to Item', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: '%' }],
+    })
+
+    render(
+      <Suffix id='test-suffix' 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-suffix', {
+      type: 'formula',
+      data: [
+        {
+          value: 100,
+          color: '#FF0000',
+          prefix: '$',
+          suffix: 'USD',
+        },
+      ],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('USD')).toBeTruthy()
+  })
+
+  test('updates when widget data changes', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'USD' }],
+    })
+
+    const { rerender } = render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('USD')).toBeTruthy()
+
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      data: [{ value: 200, suffix: 'EUR' }],
+    })
+
+    rerender(<Suffix id='test-suffix' />)
+    expect(screen.queryByText('USD')).toBeNull()
+    expect(screen.getByText('EUR')).toBeTruthy()
+  })
+
+  test('updates when suffix is removed', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'USD' }],
+    })
+
+    const { container, rerender } = render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('USD')).toBeTruthy()
+
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      data: [{ value: 100 }],
+    })
+
+    rerender(<Suffix id='test-suffix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('updates when index changes', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [
+        { value: 100, suffix: 'USD' },
+        { value: 200, suffix: 'EUR' },
+      ],
+    })
+
+    const { rerender } = render(<Suffix id='test-suffix' index={0} />)
+    expect(screen.getByText('USD')).toBeTruthy()
+
+    rerender(<Suffix id='test-suffix' index={1} />)
+    expect(screen.queryByText('USD')).toBeNull()
+    expect(screen.getByText('EUR')).toBeTruthy()
+  })
+
+  test('handles widget removal gracefully', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'USD' }],
+    })
+
+    const { container, rerender } = render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('USD')).toBeTruthy()
+
+    useWidgetStore.getState().removeWidget('test-suffix')
+
+    rerender(<Suffix id='test-suffix' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('handles suffix with special characters', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'm²' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('m²')).toBeTruthy()
+  })
+
+  test('handles suffix with unicode characters', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: '€ coins' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText(/€ coins/)).toBeTruthy()
+  })
+
+  test('handles suffix with numbers', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'x10' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('x10')).toBeTruthy()
+  })
+
+  test('handles long suffix text', () => {
+    const longSuffix = ' units per square meter per second'
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: longSuffix }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText(longSuffix.trim())).toBeTruthy()
+  })
+
+  test('renders different suffixes for different items', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [
+        { value: 100, suffix: 'USD' },
+        { value: 200, suffix: 'EUR' },
+        { value: 300, suffix: 'GBP' },
+      ],
+    })
+
+    const { unmount } = render(<Suffix id='test-suffix' index={0} />)
+    expect(screen.getByText('USD')).toBeTruthy()
+    unmount()
+
+    render(<Suffix id='test-suffix' index={1} />)
+    expect(screen.getByText('EUR')).toBeTruthy()
+  })
+
+  test('handles negative index (invalid but should not crash)', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'USD' }],
+    })
+
+    const { container } = render(<Suffix id='test-suffix' index={-1} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('handles suffix with only whitespace', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: '   ' }],
+    })
+
+    const { container } = render(<Suffix id='test-suffix' />)
+    // Whitespace is normalized by text content, just verify component renders
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('suffix is sanitized to string only in store', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'Valid String' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    expect(screen.getByText('Valid String')).toBeTruthy()
+  })
+
+  test('secondary color is applied via TypographyProps', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'units' }],
+    })
+
+    render(<Suffix id='test-suffix' />)
+    const element = screen.getByText('units')
+    // The component passes a function for color, so we just verify it renders
+    expect(element).toBeTruthy()
+  })
+
+  test('combines disabled and TypographyProps', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-suffix', {
+      type: 'formula',
+      data: [{ value: 100, suffix: 'units' }],
+    })
+
+    render(
+      <Suffix
+        id='test-suffix'
+        disabled={true}
+        TypographyProps={{ className: 'custom' }}
+      />,
+    )
+    const element = screen.getByText('units')
+    expect(element.getAttribute('data-disabled')).toBe('true')
+    expect(element.classList.contains('custom')).toBe(true)
+  })
+})

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

@@ -0,0 +1,28 @@
+import { type FormulaWidgetState, type ValueProps } from '../types'
+import { useWidgetStore } from '../../stores/widget-store'
+import { Item } from './item'
+import type { Theme } from '@mui/material'
+import { useShallow } from 'zustand/shallow'
+
+export function Suffix({ id, index = 0, ...props }: ValueProps) {
+  const suffix = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<FormulaWidgetState>(id)?.data?.[index]?.suffix,
+    ),
+  )
+
+  if (!suffix) {
+    return null
+  }
+
+  return (
+    <Item
+      TypographyProps={{
+        color: (theme: Theme) => theme.palette.text.secondary,
+      }}
+      {...props}
+    >
+      {suffix}
+    </Item>
+  )
+}