test: add UI Widgets

src/tests/ui/CategoryWidgetUI.test.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { CategoryWidgetUI } from 'src/ui';
+import { currencyFormatter } from './utils';
+
+const DATA = [...Array(5)].map((_, idx) => ({
+  category: `Category ${idx}`,
+  value: (idx + 1) * 1234
+}));
+
+describe('CategoryWidgetUI', () => {
+  test('empty', () => {
+    render(<CategoryWidgetUI data={[]} />);
+
+    const noDataValue = /No data available/i;
+    const noResultsValue = /There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust the Map View./i;
+
+    expect(screen.getByText(noDataValue)).toBeInTheDocument();
+    expect(screen.getByText(noResultsValue)).toBeInTheDocument();
+  });
+
+  test('simple', () => {
+    render(<CategoryWidgetUI data={DATA} />);
+
+    expect(screen.getByText(/Category 0/)).toBeInTheDocument();
+    expect(screen.getByText(/1234/)).toBeInTheDocument();
+  });
+
+  test('with currency formatter', () => {
+    render(<CategoryWidgetUI data={DATA} formatter={currencyFormatter} />);
+
+    expect(screen.getByText(/Category 1/)).toBeInTheDocument();
+    expect(screen.getByText(/\$1\.23K/)).toBeInTheDocument();
+  });
+
+  test('with one selected category', () => {
+    render(<CategoryWidgetUI data={DATA} selectedCategories={['Category 0']} />);
+
+    expect(screen.getByText(/1 selected/)).toBeInTheDocument();
+  });
+
+  describe('events', () => {
+    test('category change', () => {
+      const mockOnSelectedChange = jest.fn();
+      render(
+        <CategoryWidgetUI data={DATA} onSelectedCategoriesChange={mockOnSelectedChange} />
+      );
+
+      fireEvent.click(screen.getByText(1234));
+      expect(mockOnSelectedChange).toHaveBeenCalledTimes(1);
+    });
+
+    test('clear', () => {
+      const mockOnClear = jest.fn();
+      render(
+        <CategoryWidgetUI
+          data={DATA}
+          selectedCategories={['Category 0']}
+          onSelectedCategoriesChange={mockOnClear}
+        />
+      );
+
+      fireEvent.click(screen.getByText(/Clear/));
+      expect(mockOnClear).toHaveBeenCalledTimes(1);
+    });
+
+    test('lock', () => {
+      const mockOnLock = jest.fn();
+      render(
+        <CategoryWidgetUI
+          data={DATA}
+          selectedCategories={['Category 0']}
+          onSelectedCategoriesChange={mockOnLock}
+        />
+      );
+
+      fireEvent.click(screen.getByText(1234));
+      expect(screen.getByText(/Lock/)).toBeInTheDocument();
+      expect(mockOnLock).toHaveBeenCalledTimes(1);
+    });
+
+    test('unlock', () => {
+      const mockOnSelectedChange = jest.fn();
+      render(
+        <CategoryWidgetUI
+          data={DATA}
+          selectedCategories={['Category 0']}
+          onSelectedCategoriesChange={mockOnSelectedChange}
+        />
+      );
+
+      fireEvent.click(screen.getByText(1234));
+      fireEvent.click(screen.getByText(/Lock/));
+      fireEvent.click(screen.getByText(/Unlock/));
+      expect(mockOnSelectedChange).toHaveBeenCalledTimes(2);
+    });
+
+    test('search cycle', () => {
+      const mockOnSelectedChange = jest.fn();
+      render(
+        <CategoryWidgetUI
+          data={DATA}
+          maxItems={1}
+          onSelectedCategoriesChange={mockOnSelectedChange}
+        />
+      );
+
+      fireEvent.click(screen.getByText(/Search in 4 elements/));
+      fireEvent.click(screen.getByText(/Category 0/));
+      fireEvent.click(screen.getByText(/Apply/));
+      fireEvent.click(screen.getByText(/Unlock/));
+      expect(mockOnSelectedChange).toHaveBeenCalledTimes(2);
+    });
+
+    test('cancel search', () => {
+      render(<CategoryWidgetUI data={DATA} maxItems={1} />);
+
+      expect(screen.getByText(/Search in 4 elements/)).toBeInTheDocument();
+      fireEvent.click(screen.getByText(/Search in 4 elements/));
+      fireEvent.click(screen.getByText(/Cancel/));
+    });
+  });
+});

src/tests/ui/FormulaWidgetUI.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { FormulaWidgetUI } from 'src/ui';
+import { currencyFormatter } from './utils';
+
+describe('FormulaWidgetUI', () => {
+  test('empty', () => {
+    render(<FormulaWidgetUI />);
+    expect(screen.getByText(/\-/)).toBeInTheDocument();
+  });
+
+  test('simple - data as string', () => {
+    const data = '1234';
+    render(<FormulaWidgetUI data={data} />);
+    expect(screen.getByText(data)).toBeInTheDocument();
+  });
+
+  test('simple - data as number', async () => {
+    const data = 1234;
+    render(<FormulaWidgetUI data={data} />);
+    expect(await screen.findByText(data)).toBeInTheDocument();
+  });
+
+  test('simple - data as object', async () => {
+    const data = { value: 1234 };
+    render(<FormulaWidgetUI data={data} />);
+    expect(await screen.findByText(data.value)).toBeInTheDocument();
+  });
+
+  test('with currency formatter', () => {
+    const data = '1234';
+    render(<FormulaWidgetUI data={data} formatter={currencyFormatter} />);
+    expect(screen.getByText(/\$/)).toBeInTheDocument();
+    expect(screen.getByText(/1\.23K/)).toBeInTheDocument();
+  });
+});

src/tests/ui/HistogramWidgetUI.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { HistogramWidgetUI } from 'src/ui';
+import { getMaterialUIContext } from './utils';
+
+describe('HistogramWidgetUI', () => {
+  const Widget = (props) => getMaterialUIContext(<HistogramWidgetUI {...props} />);
+
+  test('simple', () => {
+    const data = [1, 2, 3, 4];
+    render(<Widget data={data} onSelectedBarsChange={() => {}} />);
+    expect(screen.getByText(/All selected/)).toBeInTheDocument();
+  });
+});

src/tests/ui/WrapperWidgetUI.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { WrapperWidgetUI, FormulaWidgetUI } from 'src/ui';
+
+describe('WrapperWidgetUI', () => {
+  test('should has a title', () => {
+    render(<WrapperWidgetUI title='test' />);
+    expect(screen.getByText(/test/)).toBeInTheDocument();
+  });
+
+  describe('events', () => {
+    const TITLE = 'test';
+    const WrappedWithFormulaWidget = () => (
+      <WrapperWidgetUI title={TITLE}>
+        <FormulaWidgetUI data='1234' />
+      </WrapperWidgetUI>
+    );
+
+    test('should be open by default', async () => {
+      render(<WrappedWithFormulaWidget />);
+      expect(await screen.findByText('1234')).toBeInTheDocument();
+    });
+
+    test('should close', async () => {
+      render(<WrappedWithFormulaWidget />);
+      fireEvent.click(screen.getByText(TITLE));
+      expect(await screen.findByText('1234')).not.toBeVisible();
+    });
+  });
+});

src/tests/ui/utils.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { createMuiTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core';
+
+import { cartoThemeOptions } from 'src/ui';
+
+export function currencyFormatter(value) {
+  return {
+    prefix: '$',
+    value: Intl.NumberFormat('en-US', {
+      maximumFractionDigits: 2,
+      minimumFractionDigits: 2,
+      notation: 'compact',
+      compactDisplay: 'short'
+    }).format(isNaN(value) ? 0 : value)
+  };
+}
+
+export function getMaterialUIContext(children) {
+  return <ThemeProvider theme={getTheme()}>{children}</ThemeProvider>;
+}
+
+function getTheme() {
+  let theme = createMuiTheme(cartoThemeOptions);
+  theme = responsiveFontSizes(theme, {
+    breakpoints: cartoThemeOptions.breakpoints.keys,
+    disableAlign: false,
+    factor: 2,
+    variants: [
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'subtitle1',
+      'subtitle2',
+      'body1',
+      'body2',
+      'button',
+      'caption',
+      'overline'
+    ]
+  });
+  return theme;
+}