@pie-lib/charting 6.1.1-next.0 → 6.2.0-next.0

package/src/__tests__/tool-menu.test.jsx

@@ -0,0 +1,522 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { MiniButton, ToolMenu } from '../tool-menu';
+
+jest.mock('@pie-lib/translator', () => ({
+  __esModule: true,
+  default: {
+    translator: {
+      t: jest.fn((key, options) => {
+        const translations = {
+          'charting.addCategory': 'Add Category',
+        };
+        return translations[key] || key;
+      }),
+    },
+  },
+}));
+
+jest.mock('@pie-lib/render-ui', () => ({
+  color: {
+    text: () => '#000000',
+    secondary: () => '#cccccc',
+    background: () => '#ffffff',
+    primary: () => '#0000ff',
+    primaryDark: () => '#000080',
+    disabled: () => '#f0f0f0',
+  },
+}));
+
+let theme;
+
+beforeAll(() => {
+  theme = createTheme();
+});
+
+describe('MiniButton', () => {
+  const onClick = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = (extras = {}) => {
+    const defaults = {
+      value: 'Test Button',
+      onClick,
+      disabled: false,
+      selected: false,
+    };
+    const props = { ...defaults, ...extras };
+    return render(
+      <ThemeProvider theme={theme}>
+        <MiniButton {...props} />
+      </ThemeProvider>,
+    );
+  };
+
+  describe('rendering', () => {
+    it('should render with value text', () => {
+      const { getByText } = renderComponent({ value: 'Click Me' });
+      expect(getByText('Click Me')).toBeInTheDocument();
+    });
+
+    it('should render as a button element', () => {
+      const { getByRole } = renderComponent();
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should have correct button attributes', () => {
+      const { getByRole } = renderComponent({ value: 'Test' });
+      const button = getByRole('button');
+      expect(button).toHaveAttribute('value', 'Test');
+    });
+
+    it('should render with variant outlined', () => {
+      const { getByRole } = renderComponent();
+      const button = getByRole('button');
+      expect(button).toHaveClass('MuiButton-outlined');
+    });
+
+    it('should render with size small', () => {
+      const { getByRole } = renderComponent();
+      const button = getByRole('button');
+      expect(button).toHaveClass('MuiButton-sizeSmall');
+    });
+  });
+
+  describe('disabled state', () => {
+    it('should render as disabled when disabled prop is true', () => {
+      const { getByRole } = renderComponent({ disabled: true });
+      expect(getByRole('button')).toBeDisabled();
+    });
+
+    it('should not render as disabled when disabled prop is false', () => {
+      const { getByRole } = renderComponent({ disabled: false });
+      expect(getByRole('button')).not.toBeDisabled();
+    });
+
+    it('should not trigger onClick when disabled', () => {
+      const { getByRole } = renderComponent({ disabled: true });
+      fireEvent.click(getByRole('button'));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('selected state', () => {
+    it('should apply selected styling when selected is true', () => {
+      const { getByRole } = renderComponent({ selected: true });
+      const button = getByRole('button');
+      expect(button.className).toContain('MuiButton-colorSecondary');
+    });
+
+    it('should apply default color when selected is false', () => {
+      const { getByRole } = renderComponent({ selected: false });
+      const button = getByRole('button');
+      expect(button.className).toContain('MuiButton-colorDefault');
+    });
+
+    it('should render correctly with both selected and disabled', () => {
+      const { getByRole } = renderComponent({ selected: true, disabled: true });
+      const button = getByRole('button');
+      expect(button).toBeDisabled();
+      expect(button.className).toContain('MuiButton-colorSecondary');
+    });
+  });
+
+  describe('interactions', () => {
+    it('should call onClick when clicked', () => {
+      const { getByRole } = renderComponent();
+      fireEvent.click(getByRole('button'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onClick with correct event when clicked', () => {
+      const { getByRole } = renderComponent();
+      const button = getByRole('button');
+      fireEvent.click(button);
+      expect(onClick).toHaveBeenCalled();
+      expect(onClick.mock.calls[0][0]).toBeTruthy();
+    });
+
+    it('should handle multiple clicks', () => {
+      const { getByRole } = renderComponent();
+      const button = getByRole('button');
+      fireEvent.click(button);
+      fireEvent.click(button);
+      fireEvent.click(button);
+      expect(onClick).toHaveBeenCalledTimes(3);
+    });
+
+    it('should handle rapid clicks', () => {
+      const { getByRole } = renderComponent();
+      const button = getByRole('button');
+      for (let i = 0; i < 10; i++) {
+        fireEvent.click(button);
+      }
+      expect(onClick).toHaveBeenCalledTimes(10);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should render with empty string value', () => {
+      const { getByRole } = renderComponent({ value: '' });
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should render with undefined onClick', () => {
+      const { getByRole } = render(
+        <ThemeProvider theme={theme}>
+          <MiniButton value="Test" onClick={undefined} />
+        </ThemeProvider>,
+      );
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should render with null onClick', () => {
+      const { getByRole } = render(
+        <ThemeProvider theme={theme}>
+          <MiniButton value="Test" onClick={null} />
+        </ThemeProvider>,
+      );
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should render with very long value text', () => {
+      const longText = 'This is a very long button text that might cause layout issues';
+      const { getByText } = renderComponent({ value: longText });
+      expect(getByText(longText)).toBeInTheDocument();
+    });
+
+    it('should render with special characters in value', () => {
+      const specialText = 'Test <>&"\'';
+      const { getByText } = renderComponent({ value: specialText });
+      expect(getByText(specialText)).toBeInTheDocument();
+    });
+
+    it('should render with unicode characters in value', () => {
+      const unicodeText = 'Test 你好 🎉';
+      const { getByText } = renderComponent({ value: unicodeText });
+      expect(getByText(unicodeText)).toBeInTheDocument();
+    });
+  });
+
+  describe('className prop', () => {
+    it('should accept className prop without error', () => {
+      const { getByRole } = render(
+        <ThemeProvider theme={theme}>
+          <MiniButton value="Test" onClick={onClick} className="custom-class" />
+        </ThemeProvider>,
+      );
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+  });
+});
+
+describe('ToolMenu', () => {
+  const addCategory = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = (extras = {}) => {
+    const defaults = {
+      addCategory,
+      disabled: false,
+      language: 'en',
+    };
+    const props = { ...defaults, ...extras };
+    return render(
+      <ThemeProvider theme={theme}>
+        <ToolMenu {...props} />
+      </ThemeProvider>,
+    );
+  };
+
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = renderComponent();
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should render a div container', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInstanceOf(HTMLDivElement);
+    });
+
+    it('should render MiniButton when not disabled', () => {
+      const { getByRole } = renderComponent({ disabled: false });
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should not render MiniButton when disabled', () => {
+      const { queryByRole } = renderComponent({ disabled: true });
+      expect(queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('should render translated button text', () => {
+      const { getByText } = renderComponent();
+      expect(getByText('Add Category')).toBeInTheDocument();
+    });
+
+    it('should use language prop for translation', () => {
+      const Translator = require('@pie-lib/translator').default;
+      const { getByRole } = renderComponent({ language: 'es' });
+      expect(getByRole('button')).toBeInTheDocument();
+      expect(Translator.translator.t).toHaveBeenCalledWith('charting.addCategory', { lng: 'es' });
+    });
+  });
+
+  describe('className prop', () => {
+    it('should apply custom className to container', () => {
+      const { container } = renderComponent({ className: 'custom-tool-menu' });
+      expect(container.firstChild).toHaveClass('custom-tool-menu');
+    });
+
+    it('should render without className', () => {
+      const { container } = renderComponent({ className: undefined });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('should handle empty string className', () => {
+      const { container } = renderComponent({ className: '' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('disabled state', () => {
+    it('should hide button when disabled is true', () => {
+      const { queryByRole } = renderComponent({ disabled: true });
+      expect(queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('should show button when disabled is false', () => {
+      const { getByRole } = renderComponent({ disabled: false });
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should show button when disabled is undefined', () => {
+      const { getByRole } = renderComponent({ disabled: undefined });
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should hide button when disabled is explicitly true', () => {
+      const { queryByRole } = renderComponent({ disabled: true });
+      expect(queryByRole('button')).toBeNull();
+    });
+  });
+
+  describe('addCategory functionality', () => {
+    it('should call addCategory when button is clicked', () => {
+      const { getByRole } = renderComponent();
+      fireEvent.click(getByRole('button'));
+      expect(addCategory).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call addCategory when disabled', () => {
+      const { queryByRole } = renderComponent({ disabled: true });
+      expect(queryByRole('button')).not.toBeInTheDocument();
+      expect(addCategory).not.toHaveBeenCalled();
+    });
+
+    it('should handle multiple clicks on add category button', () => {
+      const { getByRole } = renderComponent();
+      const button = getByRole('button');
+      fireEvent.click(button);
+      fireEvent.click(button);
+      fireEvent.click(button);
+      expect(addCategory).toHaveBeenCalledTimes(3);
+    });
+
+    it('should render with undefined addCategory without crashing', () => {
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <ToolMenu addCategory={undefined} language="en" />
+        </ThemeProvider>,
+      );
+      expect(container).toBeInTheDocument();
+    });
+  });
+
+  describe('language prop', () => {
+    it('should pass language to translator', () => {
+      const Translator = require('@pie-lib/translator').default;
+      renderComponent({ language: 'fr' });
+      expect(Translator.translator.t).toHaveBeenCalledWith('charting.addCategory', { lng: 'fr' });
+    });
+
+    it('should handle default english language', () => {
+      const Translator = require('@pie-lib/translator').default;
+      renderComponent({ language: 'en' });
+      expect(Translator.translator.t).toHaveBeenCalledWith('charting.addCategory', { lng: 'en' });
+    });
+
+    it('should handle undefined language', () => {
+      const Translator = require('@pie-lib/translator').default;
+      renderComponent({ language: undefined });
+      expect(Translator.translator.t).toHaveBeenCalledWith('charting.addCategory', { lng: undefined });
+    });
+
+    it('should handle empty string language', () => {
+      const Translator = require('@pie-lib/translator').default;
+      renderComponent({ language: '' });
+      expect(Translator.translator.t).toHaveBeenCalledWith('charting.addCategory', { lng: '' });
+    });
+
+    it('should handle non-standard language codes', () => {
+      const Translator = require('@pie-lib/translator').default;
+      renderComponent({ language: 'zh-CN' });
+      expect(Translator.translator.t).toHaveBeenCalledWith('charting.addCategory', { lng: 'zh-CN' });
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should render with all props undefined', () => {
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <ToolMenu />
+        </ThemeProvider>,
+      );
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should render with null props', () => {
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <ToolMenu addCategory={null} disabled={null} language={null} />
+        </ThemeProvider>,
+      );
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should handle component unmounting', () => {
+      const { unmount } = renderComponent();
+      expect(() => unmount()).not.toThrow();
+    });
+
+    it('should handle re-rendering with different props', () => {
+      const { rerender, getByRole, queryByRole } = renderComponent({ disabled: false });
+      expect(getByRole('button')).toBeInTheDocument();
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <ToolMenu addCategory={addCategory} disabled={true} language="en" />
+        </ThemeProvider>,
+      );
+      expect(queryByRole('button')).not.toBeInTheDocument();
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <ToolMenu addCategory={addCategory} disabled={false} language="es" />
+        </ThemeProvider>,
+      );
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should handle rapid prop changes', () => {
+      const { rerender, getByRole } = renderComponent({ disabled: false });
+
+      expect(getByRole('button')).toBeInTheDocument();
+
+      for (let i = 0; i < 10; i++) {
+        rerender(
+          <ThemeProvider theme={theme}>
+            <ToolMenu addCategory={addCategory} disabled={i % 2 === 0} language="en" />
+          </ThemeProvider>,
+        );
+      }
+
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+  });
+
+  describe('component lifecycle', () => {
+    it('should render as class component', () => {
+      const { container } = renderComponent();
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should handle updates correctly', () => {
+      const { rerender, getByRole } = renderComponent({ language: 'en' });
+      expect(getByRole('button')).toBeInTheDocument();
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <ToolMenu addCategory={addCategory} disabled={false} language="fr" />
+        </ThemeProvider>,
+      );
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should cleanup properly on unmount', () => {
+      const { unmount } = renderComponent();
+      expect(() => unmount()).not.toThrow();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('should have accessible button element', () => {
+      const { getByRole } = renderComponent();
+      const button = getByRole('button');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('should have button with text content', () => {
+      const { getByRole } = renderComponent();
+      const button = getByRole('button');
+      expect(button).toHaveTextContent('Add Category');
+    });
+
+    it('should maintain button accessibility when enabled', () => {
+      const { getByRole } = renderComponent({ disabled: false });
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+      expect(button).toHaveTextContent('Add Category');
+    });
+  });
+
+  describe('integration', () => {
+    it('should work correctly with all props provided', () => {
+      const customAddCategory = jest.fn();
+      const { getByRole } = renderComponent({
+        addCategory: customAddCategory,
+        disabled: false,
+        language: 'de',
+        className: 'test-class',
+      });
+
+      const button = getByRole('button');
+      expect(button).toBeInTheDocument();
+
+      fireEvent.click(button);
+      expect(customAddCategory).toHaveBeenCalledTimes(1);
+    });
+
+    it('should toggle between enabled and disabled states', () => {
+      const { rerender, getByRole, queryByRole } = renderComponent({ disabled: false });
+      expect(getByRole('button')).toBeInTheDocument();
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <ToolMenu addCategory={addCategory} disabled={true} language="en" />
+        </ThemeProvider>,
+      );
+      expect(queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('should handle language switching', () => {
+      const Translator = require('@pie-lib/translator').default;
+      const { rerender } = renderComponent({ language: 'en' });
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <ToolMenu addCategory={addCategory} disabled={false} language="es" />
+        </ThemeProvider>,
+      );
+
+      expect(Translator.translator.t).toHaveBeenCalledWith('charting.addCategory', { lng: 'es' });
+    });
+  });
+});

package/src/__tests__/utils.js

@@ -1,4 +1,4 @@
-import { scaleLinear, scaleBand } from 'd3-scale';
+import { scaleBand, scaleLinear } from 'd3-scale';
 
 export const scaleMock = () => {
   const fn = jest.fn((n) => n);

package/src/axes.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { AxisLeft, AxisBottom } from '@visx/axis';
+import { AxisBottom, AxisLeft } from '@visx/axis';
 import Checkbox from '@mui/material/Checkbox';
 
 import { types } from '@pie-lib/plot';
@@ -10,7 +10,7 @@ import { AlertDialog } from '@pie-lib/config-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 
 import { TickCorrectnessIndicator } from './common/correctness-indicators';
-import { bandKey, getTickValues, getRotateAngle } from './utils';
+import { bandKey, getRotateAngle, getTickValues } from './utils';
 import MarkLabel from './mark-label';
 
 const StyledErrorText = styled('text')(({ theme }) => ({
@@ -194,12 +194,15 @@ export class TickComponent extends React.Component {
     const category = categories[index];
     const { editable, interactive, label, correctness } = category || {};
     const barX = xBand(bandKey({ label }, index));
-    const longestCategory = (categories || []).reduce((a, b) => {
-      const lengthA = a && a.label ? a.label.length : 0;
-      const lengthB = b && b.label ? b.label.length : 0;
+    const longestCategory = (categories || []).reduce(
+      (a, b) => {
+        const lengthA = a && a.label ? a.label.length : 0;
+        const lengthB = b && b.label ? b.label.length : 0;
 
-      return lengthA > lengthB ? a : b;
-    }, { label: '' });
+        return lengthA > lengthB ? a : b;
+      },
+      { label: '' },
+    );
     const distinctMessages = error ? [...new Set(Object.values(error))].join(' ') : '';
 
     return (

package/src/bars/common/bars.jsx

@@ -132,18 +132,8 @@ export class RawBar extends React.Component {
   };
 
   render() {
-    const {
-      graphProps,
-      value,
-      label,
-      xBand,
-      index,
-      interactive,
-      correctness,
-      barColor,
-      defineChart,
-      correctData,
-    } = this.props;
+    const { graphProps, value, label, xBand, index, interactive, correctness, barColor, defineChart, correctData } =
+      this.props;
     const { scale, range } = graphProps;
     const { dragValue, isHovered } = this.state;
 
@@ -168,43 +158,34 @@ export class RawBar extends React.Component {
         onTouchStart={this.handleMouseEnter}
         onTouchEnd={this.handleMouseLeave}
       >
-        <StyledVisxBar
-          x={barX}
-          y={scale.y(yy)}
-          width={barWidth}
-          height={barHeight}
-          style={{ fill: fillColor }}
-        />
-        {correctness && correctness.value === 'incorrect' && (() => {
-          const correctVal = parseFloat(correctValue && correctValue.value);
-          if (isNaN(correctVal)) return null;
-          const correctPxHeight = scale.y(range.max - correctVal);
-          const actualPxHeight = barHeight;
-          const diffPx = Math.abs(correctPxHeight - actualPxHeight);
-          const yDiff = scale.y(correctVal);
-          const indicatorBarColor = correctPxHeight > actualPxHeight ? color.borderGray() : color.defaults.WHITE;
-          const yToRender = correctPxHeight > actualPxHeight ? yDiff : yDiff - diffPx;
-
-          return (
-            <>
-              <StyledVisxBar
-                x={barX + 2}
-                y={yToRender}
-                width={barWidth - 4}
-                height={diffPx}
-                style={{ stroke: indicatorBarColor, strokeWidth: 2, strokeDasharray: '5,2', fill: 'none' }}
-              />
-              <foreignObject
-                x={barX + barWidth - (isHistogram ? 24 : 14)}
-                y={yDiff - 12}
-                width={24}
-                height={24}
-              >
-                <CorrectCheckIcon dashColor={indicatorBarColor} />
-              </foreignObject>
-            </>
-          );
-        })()}
+        <StyledVisxBar x={barX} y={scale.y(yy)} width={barWidth} height={barHeight} style={{ fill: fillColor }} />
+        {correctness &&
+          correctness.value === 'incorrect' &&
+          (() => {
+            const correctVal = parseFloat(correctValue && correctValue.value);
+            if (isNaN(correctVal)) return null;
+            const correctPxHeight = scale.y(range.max - correctVal);
+            const actualPxHeight = barHeight;
+            const diffPx = Math.abs(correctPxHeight - actualPxHeight);
+            const yDiff = scale.y(correctVal);
+            const indicatorBarColor = correctPxHeight > actualPxHeight ? color.borderGray() : color.defaults.WHITE;
+            const yToRender = correctPxHeight > actualPxHeight ? yDiff : yDiff - diffPx;
+
+            return (
+              <>
+                <StyledVisxBar
+                  x={barX + 2}
+                  y={yToRender}
+                  width={barWidth - 4}
+                  height={diffPx}
+                  style={{ stroke: indicatorBarColor, strokeWidth: 2, strokeDasharray: '5,2', fill: 'none' }}
+                />
+                <foreignObject x={barX + barWidth - (isHistogram ? 24 : 14)} y={yDiff - 12} width={24} height={24}>
+                  <CorrectCheckIcon dashColor={indicatorBarColor} />
+                </foreignObject>
+              </>
+            );
+          })()}
         <Component
           x={barX}
           y={v}
@@ -255,7 +236,8 @@ export class Bars extends React.Component {
             correctness={d.correctness}
             correctData={correctData}
             barColor={
-              histogram && (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])
+              histogram &&
+              (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])
             }
           />
         ))}