@carto/ps-react-ui 4.3.3 → 4.3.5

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

@@ -0,0 +1,364 @@
+import { describe, test, expect, beforeEach } from 'vitest'
+import { render } from '@testing-library/react'
+import { Row } from './row'
+import { useWidgetStore } from '../../stores/widget-store'
+import type { FormulaWidgetState } from '../types'
+
+describe('Row', () => {
+  beforeEach(() => {
+    useWidgetStore.getState().clearWidgets()
+  })
+
+  test('returns null when widget does not exist', () => {
+    const { container } = render(
+      <Row id='non-existent'>
+        <div>Content</div>
+      </Row>,
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('returns null when widget data is undefined', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        <div>Content</div>
+      </Row>,
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('renders nothing for empty data array', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        <div>Content</div>
+      </Row>,
+    )
+
+    // map returns empty array, which renders nothing
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('renders direct children for single data item', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        <div data-testid='child'>Content</div>
+      </Row>,
+    )
+
+    expect(container.querySelector('[data-testid="child"]')).toBeTruthy()
+  })
+
+  test('renders direct children for multiple data items', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }, { value: 200 }, { value: 300 }],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        <div className='child'>Content</div>
+      </Row>,
+    )
+
+    const children = container.querySelectorAll('.child')
+    expect(children.length).toBe(3)
+  })
+
+  test('calls render prop function with correct index for single item', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        {({ index }) => <div data-index={index}>Index: {index}</div>}
+      </Row>,
+    )
+
+    const element = container.querySelector('[data-index="0"]')
+    expect(element).toBeTruthy()
+    expect(element?.textContent).toBe('Index: 0')
+  })
+
+  test('calls render prop function with correct indices for multiple items', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }, { value: 200 }, { value: 300 }],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        {({ index }) => <div data-index={index}>Index: {index}</div>}
+      </Row>,
+    )
+
+    expect(container.querySelector('[data-index="0"]')).toBeTruthy()
+    expect(container.querySelector('[data-index="1"]')).toBeTruthy()
+    expect(container.querySelector('[data-index="2"]')).toBeTruthy()
+  })
+
+  test('applies row flexbox styles to each row', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        <div>Content</div>
+      </Row>,
+    )
+
+    // Check that Box elements are rendered (we can't directly test sx styles)
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  test('creates separate rows for each data item', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }, { value: 200 }],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>{({ index }) => <span>Row {index}</span>}</Row>,
+    )
+
+    const boxes = container.querySelectorAll('.MuiBox-root')
+    expect(boxes.length).toBe(2)
+  })
+
+  test('assigns correct key to each row', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }, { value: 200 }, { value: 300 }],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        <div>Content</div>
+      </Row>,
+    )
+
+    // Each data item should create a row
+    const boxes = container.querySelectorAll('.MuiBox-root')
+    expect(boxes.length).toBe(3)
+  })
+
+  test('handles render prop returning null', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(<Row id='test-row'>{() => null}</Row>)
+
+    // Row should still render Box, but with null children
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  test('handles render prop returning multiple elements', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        {({ index }) => (
+          <>
+            <span>A</span>
+            <span>B</span>
+            <span>{index}</span>
+          </>
+        )}
+      </Row>,
+    )
+
+    const spans = container.querySelectorAll('span')
+    expect(spans.length).toBe(3)
+    expect(spans[0]?.textContent).toBe('A')
+    expect(spans[1]?.textContent).toBe('B')
+    expect(spans[2]?.textContent).toBe('0')
+  })
+
+  test('updates when widget data changes', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container, rerender } = render(
+      <Row id='test-row'>
+        <div>Content</div>
+      </Row>,
+    )
+
+    let boxes = container.querySelectorAll('.MuiBox-root')
+    expect(boxes.length).toBe(1)
+
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      data: [{ value: 100 }, { value: 200 }],
+    })
+
+    rerender(
+      <Row id='test-row'>
+        <div>Content</div>
+      </Row>,
+    )
+
+    boxes = container.querySelectorAll('.MuiBox-root')
+    expect(boxes.length).toBe(2)
+  })
+
+  test('updates when widget is removed', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container, rerender } = render(
+      <Row id='test-row'>
+        <div>Content</div>
+      </Row>,
+    )
+
+    expect(container.firstChild).toBeTruthy()
+
+    useWidgetStore.getState().removeWidget('test-row')
+
+    rerender(
+      <Row id='test-row'>
+        <div>Content</div>
+      </Row>,
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('handles single data item', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>{({ index }) => <div>Item {index}</div>}</Row>,
+    )
+
+    expect(container.textContent).toContain('Item 0')
+  })
+
+  test('handles many data items', () => {
+    const data = Array.from({ length: 10 }, (_, i) => ({ value: i }))
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data,
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        {({ index }) => <div className='item'>Item {index}</div>}
+      </Row>,
+    )
+
+    const items = container.querySelectorAll('.item')
+    expect(items.length).toBe(10)
+  })
+
+  test('passes only index in render prop', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    render(
+      <Row id='test-row'>
+        {(props) => {
+          // Check that only index is passed
+          expect(Object.keys(props)).toEqual(['index'])
+          expect(typeof props.index).toBe('number')
+          return <div>Content</div>
+        }}
+      </Row>,
+    )
+  })
+
+  test('handles complex children elements', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        <div>
+          <span>Nested</span>
+          <strong>Content</strong>
+        </div>
+      </Row>,
+    )
+
+    expect(container.querySelector('span')).toBeTruthy()
+    expect(container.querySelector('strong')).toBeTruthy()
+  })
+
+  test('render prop can access external variables', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [{ value: 100 }, { value: 200 }],
+    })
+
+    const externalValue = 'External'
+
+    const { container } = render(
+      <Row id='test-row'>
+        {({ index }) => (
+          <div>
+            {externalValue} {index}
+          </div>
+        )}
+      </Row>,
+    )
+
+    expect(container.textContent).toContain('External 0')
+    expect(container.textContent).toContain('External 1')
+  })
+
+  test('handles data array with different value types', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-row', {
+      type: 'formula',
+      data: [
+        { value: 0 },
+        { value: -100 },
+        { value: 123.456 },
+        { value: 1000000 },
+      ],
+    })
+
+    const { container } = render(
+      <Row id='test-row'>
+        {({ index }) => <div className='item'>Item {index}</div>}
+      </Row>,
+    )
+
+    const items = container.querySelectorAll('.item')
+    expect(items.length).toBe(4)
+  })
+})

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

@@ -0,0 +1,21 @@
+import { Box } from '@mui/material'
+import { styles } from '../style'
+import type { FormulaWidgetState, RowProps } from '../types'
+import { useWidgetStore } from '../../stores/widget-store'
+import { useShallow } from 'zustand/shallow'
+
+export function Row(props: RowProps) {
+  const data = useWidgetStore(
+    useShallow((state) => state.getWidget<FormulaWidgetState>(props.id)?.data),
+  )
+
+  return data?.map((_, index) => {
+    return (
+      <Box sx={styles.row} key={index}>
+        {typeof props.children === 'function'
+          ? props.children({ index })
+          : props.children}
+      </Box>
+    )
+  })
+}

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

@@ -0,0 +1,34 @@
+import { Avatar } from '@mui/material'
+import type { FormulaWidgetState, ValueProps } from '../types'
+import { useWidgetStore } from '../../stores/widget-store'
+import { useShallow } from 'zustand/shallow'
+
+export function Series({ id, index = 0 }: Pick<ValueProps, 'id' | 'index'>) {
+  const serie = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<FormulaWidgetState>(id)?.series?.[index],
+    ),
+  )
+  if (!serie) {
+    return null
+  }
+
+  const { name, color } = serie
+
+  return (
+    <Avatar
+      sx={{
+        bgcolor: color,
+        width: 32,
+        height: 32,
+        fontSize: '0.875rem',
+        fontWeight: 'medium',
+        ...(color && {
+          color: (theme) => theme.palette.getContrastText(color),
+        }),
+      }}
+    >
+      {name.charAt(0).toUpperCase()}
+    </Avatar>
+  )
+}