@controleonline/ui-default 1.0.270 → 1.0.273

package/src/tests/react/components/inputs/DefaultSelect.test.js

@@ -1,5 +1,5 @@
-const React = require('react');
-const renderer = require('react-test-renderer');
+const React = require('react');
+const renderer = require('react-test-renderer');
 const {jest} = require('@jest/globals');
 
 const {beforeEach, describe, expect, it} = global;
@@ -14,37 +14,37 @@ jest.mock('@store', () => ({
 }));
 
 jest.mock('react-native', () => {
-  const React = require('react');
-  const createComponent = name => props =>
-    React.createElement(name, props, props.children);
-
-  return {
-    Modal: createComponent('Modal'),
-    ScrollView: createComponent('ScrollView'),
-    StyleSheet: {create: value => value},
-    Text: createComponent('Text'),
-    TextInput: createComponent('TextInput'),
-    TouchableOpacity: createComponent('TouchableOpacity'),
-    View: createComponent('View'),
-  };
-});
-
-jest.mock('react-native-vector-icons/Feather', () => {
-  const React = require('react');
-  return props => React.createElement('Icon', props, props.children);
-});
-
+  const React = require('react');
+  const createComponent = name => props =>
+    React.createElement(name, props, props.children);
+
+  return {
+    Modal: createComponent('Modal'),
+    ScrollView: createComponent('ScrollView'),
+    StyleSheet: {create: value => value},
+    Text: createComponent('Text'),
+    TextInput: createComponent('TextInput'),
+    TouchableOpacity: createComponent('TouchableOpacity'),
+    View: createComponent('View'),
+  };
+});
+
+jest.mock('react-native-vector-icons/Feather', () => {
+  const React = require('react');
+  return props => React.createElement('Icon', props, props.children);
+});
+
 const DefaultSelect = require('../../../../react/components/inputs/DefaultSelect').default;
-
-const createDeferred = () => {
-  let resolve;
-  const promise = new Promise(nextResolve => {
-    resolve = nextResolve;
-  });
-
-  return {promise, resolve};
-};
-
+
+const createDeferred = () => {
+  let resolve;
+  const promise = new Promise(nextResolve => {
+    resolve = nextResolve;
+  });
+
+  return {promise, resolve};
+};
+
 describe('DefaultSelect', () => {
   beforeEach(() => {
     mockStores = {
@@ -64,53 +64,53 @@ describe('DefaultSelect', () => {
   });
 
   it('waits for onBeforeOpen before showing the options modal', async () => {
-    const gate = createDeferred();
-    const onBeforeOpen = jest.fn(() => gate.promise);
-    const onStartEditing = jest.fn();
-    let tree;
-    let openPromise;
-
-    await renderer.act(async () => {
-      tree = renderer.create(
-        React.createElement(DefaultSelect, {
-          column: {
-            key: 'jobTitle',
-            label: 'Cargo',
-            list: 'categories/getItems',
-          },
-          editing: false,
-          getOptionsForColumn: () => [
-            {
-              key: '1',
-              label: 'Analista de RH',
-            },
-          ],
-          onBeforeOpen,
-          onStartEditing,
-          row: {},
-          storeName: 'employee_profiles',
-          value: '1',
-        }),
-      );
-    });
-
-    const readButton = tree.root.findAllByType('TouchableOpacity')[0];
-    const modal = tree.root.findByType('Modal');
-
-    expect(modal.props.visible).toBe(false);
-
-    renderer.act(() => {
-      openPromise = readButton.props.onPress();
-    });
-
-    expect(onStartEditing).toHaveBeenCalledTimes(1);
-    expect(onBeforeOpen).toHaveBeenCalledTimes(1);
-    expect(modal.props.visible).toBe(false);
-
-    await renderer.act(async () => {
-      gate.resolve();
-      await openPromise;
-    });
+    const gate = createDeferred();
+    const onBeforeOpen = jest.fn(() => gate.promise);
+    const onStartEditing = jest.fn();
+    let tree;
+    let openPromise;
+
+    await renderer.act(async () => {
+      tree = renderer.create(
+        React.createElement(DefaultSelect, {
+          column: {
+            key: 'jobTitle',
+            label: 'Cargo',
+            list: 'categories/getItems',
+          },
+          editing: false,
+          getOptionsForColumn: () => [
+            {
+              key: '1',
+              label: 'Analista de RH',
+            },
+          ],
+          onBeforeOpen,
+          onStartEditing,
+          row: {},
+          storeName: 'employee_profiles',
+          value: '1',
+        }),
+      );
+    });
+
+    const readButton = tree.root.findAllByType('TouchableOpacity')[0];
+    const modal = tree.root.findByType('Modal');
+
+    expect(modal.props.visible).toBe(false);
+
+    renderer.act(() => {
+      openPromise = readButton.props.onPress();
+    });
+
+    expect(onStartEditing).toHaveBeenCalledTimes(1);
+    expect(onBeforeOpen).toHaveBeenCalledTimes(1);
+    expect(modal.props.visible).toBe(false);
+
+    await renderer.act(async () => {
+      gate.resolve();
+      await openPromise;
+    });
 
     expect(modal.props.visible).toBe(true);
   });
@@ -254,4 +254,33 @@ describe('DefaultSelect', () => {
       ]),
     );
   });
+
+  it('uses the resolved form label as the modal search placeholder', async () => {
+    let tree;
+
+    await renderer.act(async () => {
+      tree = renderer.create(
+        React.createElement(DefaultSelect, {
+          column: {
+            key: 'paymentType',
+            label: 'Payment Type.payment Type',
+            list: 'walletPaymentType/getItems',
+            searchParam: 'paymentType.paymentType',
+          },
+          editing: true,
+          label: 'Tipo de pagamento',
+          row: {},
+          storeName: 'invoice',
+          variant: 'form',
+        }),
+      );
+    });
+
+    await renderer.act(async () => {
+      await tree.root.findAllByType('TouchableOpacity')[0].props.onPress();
+      await Promise.resolve();
+    });
+
+    expect(tree.root.findByType('TextInput').props.placeholder).toBe('Tipo de pagamento');
+  });
 });

package/src/tests/react/components/table/DefaultTable.grouping.test.js

@@ -0,0 +1,49 @@
+import {
+  flattenGroupedTableItems,
+  getGroupingColumns,
+  groupTableRows,
+  toggleGroupSelection,
+  toggleSelectedId,
+} from '../../../../src/react/components/table/DefaultTable.grouping';
+
+const columns = [
+  { name: 'companyName', grouping: true },
+  { name: 'addressLabel', grouping: true },
+  { name: 'invoiceNumber' },
+];
+
+const rows = [
+  { id: 1, companyName: 'A', addressLabel: 'Rua 1', invoiceNumber: 10 },
+  { id: 2, companyName: 'A', addressLabel: 'Rua 1', invoiceNumber: 11 },
+  { id: 3, companyName: 'B', addressLabel: 'Rua 2', invoiceNumber: 12 },
+];
+
+describe('DefaultTable grouping', () => {
+  it('reads boolean grouping from store columns', () => {
+    expect(getGroupingColumns(columns).map(column => column.name)).toEqual([
+      'companyName',
+      'addressLabel',
+    ]);
+  });
+
+  it('groups rows by grouping columns', () => {
+    const groups = groupTableRows(rows, columns);
+    expect(groups).toHaveLength(2);
+    expect(groups[0].count).toBe(2);
+    expect(groups[1].count).toBe(1);
+  });
+
+  it('flattens group headers and rows', () => {
+    const items = flattenGroupedTableItems(rows, columns);
+    expect(items[0].type).toBe('group');
+    expect(items.filter(item => item.type === 'row')).toHaveLength(3);
+  });
+
+  it('toggles row and group selection', () => {
+    const one = toggleSelectedId([], rows[0]);
+    expect(one).toEqual(['1']);
+    const group = toggleGroupSelection(one, [rows[0], rows[1]]);
+    expect(group).toEqual(['1', '2']);
+    expect(toggleGroupSelection(group, [rows[0], rows[1]])).toEqual([]);
+  });
+});

package/src/tests/react/components/table/DefaultTable.test.js

@@ -9,6 +9,7 @@ let consoleErrorSpy = null;
 let mockStores = {};
 let mockWindowDimensions = {width: 480, height: 800};
 let mockCapturedColumnFilterProps = [];
+let mockCapturedDefaultFormProps = [];
 let mockCapturedDefaultInputProps = [];
 
 const createLocalStorageMock = () => {
@@ -28,6 +29,8 @@ const createLocalStorageMock = () => {
   };
 };
 
+global.localStorage = createLocalStorageMock();
+
 jest.mock('@store', () => ({
   getAllStores: jest.fn(() => ({})),
   useStore: jest.fn(name => mockStores[name] || {actions: {}, getters: {}}),
@@ -98,9 +101,15 @@ jest.mock('../../../../react/components/filters/DefaultSearch', () => props => {
   return React.createElement('DefaultSearch', props);
 });
 
-jest.mock('../../../../react/components/form/DefaultForm', () => () => {
+jest.mock('../../../../react/components/table/DefaultTableImportModal', () => props => {
   const React = require('react');
-  return React.createElement('DefaultForm');
+  return React.createElement('DefaultTableImportModal', props);
+});
+
+jest.mock('../../../../react/components/form/DefaultForm', () => props => {
+  const React = require('react');
+  mockCapturedDefaultFormProps.push(props);
+  return React.createElement('DefaultForm', props);
 });
 
 jest.mock('../../../../react/components/inputs/DefaultInput', () => props => {
@@ -230,6 +239,7 @@ describe('DefaultTable', () => {
     consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     mockWindowDimensions = {width: 480, height: 800};
     mockCapturedColumnFilterProps = [];
+    mockCapturedDefaultFormProps = [];
     mockCapturedDefaultInputProps = [];
     getAllStores.mockImplementation(() => ({}));
     global.localStorage = createLocalStorageMock();
@@ -614,6 +624,47 @@ describe('DefaultTable', () => {
     expect(onAdd).toHaveBeenCalledTimes(1);
   });
 
+  it('opens the default create form when add has no custom handler', () => {
+    mockWindowDimensions = {width: 430, height: 932};
+    const save = jest.fn(() => Promise.resolve({id: 10}));
+    mockStores.invoice = {
+      actions: {save},
+      getters: {
+        add: true,
+        columns: [{key: 'payer', label: 'Pagador', editable: true}],
+      },
+    };
+    let tree;
+
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(DefaultTable, {
+          requestParams: {receiver: 21},
+          showToolbar: false,
+          storeName: 'invoice',
+        }),
+      );
+    });
+
+    const addButton = tree.root
+      .findAllByType('TouchableOpacity')
+      .find(node => node.findAllByType('icon').some(icon => icon.props.name === 'plus'));
+
+    expect(tree.root.findAllByType('Modal').some(node => node.props.visible)).toBe(false);
+
+    renderer.act(() => addButton.props.onPress());
+
+    expect(tree.root.findAllByType('Modal').some(node => node.props.visible)).toBe(true);
+    expect(mockCapturedDefaultFormProps[mockCapturedDefaultFormProps.length - 1]).toEqual(
+      expect.objectContaining({
+        actions: expect.objectContaining({save}),
+        mode: 'create',
+        row: {receiver: 21},
+        storeName: 'invoice',
+      }),
+    );
+  });
+
   it('collapses search into an icon on narrow toolbars and opens the search modal', () => {
     mockWindowDimensions = {width: 375, height: 667};
     mockStores.orders = {

package/src/tests/react/components/table/DefaultTable.utils.test.js

@@ -21,6 +21,7 @@ jest.mock('@controleonline/ui-common/src/react/utils/dateRangeFilter', () => ({
 const {
   getColumnMinWidth,
   getColumnStyle,
+  parseSortNumber,
 } = require('../../../../react/components/table/DefaultTable.utils');
 
 describe('DefaultTable utils', () => {
@@ -34,4 +35,13 @@ describe('DefaultTable utils', () => {
       ]),
     );
   });
+
+  it('parses Brazilian thousand and decimal masks as numbers', () => {
+    expect(parseSortNumber('1.234,56')).toBeCloseTo(1234.56);
+    expect(parseSortNumber('10')).toBe(10);
+    expect(parseSortNumber('2')).toBe(2);
+    expect(parseSortNumber('1.234')).toBe(1234);
+    expect(parseSortNumber('12/03/2024')).toBeNaN();
+    expect(parseSortNumber('abc')).toBeNaN();
+  });
 });

package/src/tests/react/components/table/DefaultTableControls.filters.test.mjs

@@ -0,0 +1,21 @@
+// fluxo: outros | etapa: order-history-page-filtro | https://github.com/ControleOnline/app-community/wiki/Smoke-Test-Flows
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '../../../../../');
+const source = readFileSync(
+  join(root, 'src/react/components/table/DefaultTableControls.js'),
+  'utf8',
+);
+
+test('filter button opens DefaultFiltersModal in table and cards modes (#811)', () => {
+  assert.match(source, /DefaultFiltersModal/);
+  assert.match(source, /hasFilterableColumns \? \(/);
+  assert.match(source, /testID="default-table-filter-button"/);
+  // must not gate the modal only on cards / must not toggle orphan flag
+  assert.doesNotMatch(source, /tableFiltersVisible:\s*!tableFiltersVisible/);
+  assert.doesNotMatch(source, /effectiveViewMode === 'cards' \? \([\s\S]*DefaultFiltersModal/);
+});

package/src/tests/react/components/table/DefaultTableRowActions.test.js

@@ -0,0 +1,23 @@
+const React = require('react');
+const {describe, expect, it} = require('@jest/globals');
+
+const {
+  hasDefaultTableRowActionsComponent,
+  resolveDefaultTableRowActionsWidth,
+} = require('../../../../react/components/table/DefaultTableRowActions');
+
+describe('DefaultTableRowActions helpers', () => {
+  it('accepts function and element types as custom row actions', () => {
+    expect(hasDefaultTableRowActionsComponent(() => null)).toBe(true);
+    expect(hasDefaultTableRowActionsComponent(React.createElement('span'))).toBe(true);
+    expect(hasDefaultTableRowActionsComponent(null)).toBe(false);
+    expect(hasDefaultTableRowActionsComponent('pdf')).toBe(false);
+  });
+
+  it('uses configured width and falls back to 140', () => {
+    expect(resolveDefaultTableRowActionsWidth({rowActionsWidth: 168})).toBe(168);
+    expect(resolveDefaultTableRowActionsWidth({actionsColumnWidth: 96})).toBe(96);
+    expect(resolveDefaultTableRowActionsWidth({rowActionsWidth: 0})).toBe(140);
+    expect(resolveDefaultTableRowActionsWidth({})).toBe(140);
+  });
+});

package/src/tests/react/components/table/DefaultTableRows.rowActions.test.js

@@ -0,0 +1,152 @@
+const React = require('react');
+const renderer = require('react-test-renderer');
+const {describe, expect, it, beforeEach} = require('@jest/globals');
+
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
+let mockStores = {};
+
+jest.mock('@store', () => ({
+  useStore: jest.fn(name => mockStores[name] || {actions: {}, getters: {}}),
+}));
+
+jest.mock('@controleonline/ui-common/src/react/utils/storeColumns', () => ({
+  formatStoreColumnLabel: ({fallbackLabel, fieldName}) => fallbackLabel || fieldName,
+}));
+
+jest.mock('react-native-vector-icons/Feather', () => {
+  const React = require('react');
+  return props => React.createElement('icon', props);
+});
+
+jest.mock('react-native', () => {
+  const React = require('react');
+  const createComponent = name => props =>
+    React.createElement(name, props, props.children);
+  const FlatList = props => {
+    const items = Array.isArray(props.data) ? props.data : [];
+    return React.createElement(
+      'FlatList',
+      props,
+      items.map((item, index) =>
+        props.renderItem ? props.renderItem({item, index}) : null,
+      ),
+    );
+  };
+  return {
+    FlatList,
+    ScrollView: createComponent('ScrollView'),
+    Text: createComponent('Text'),
+    TouchableOpacity: createComponent('TouchableOpacity'),
+    View: createComponent('View'),
+    StyleSheet: {create: value => value},
+    Platform: {select: value => value.web || value.default},
+  };
+});
+
+jest.mock('../../../../react/components/filters/DefaultColumnFilter', () => () => null);
+jest.mock('../../../../react/components/table/DefaultTable.styles', () => ({
+  cell: {},
+  actionsCell: {},
+  pinnedActionsCell: {},
+  stickyActionsCell: {},
+  stickyHeaderCell: {},
+  stickyIdentityCell: {},
+  rowActionsGroup: {},
+  headerRow: {},
+  headerText: {},
+  sortableHeader: {},
+  row: {},
+  scroll: {},
+  content: {},
+  tableList: {},
+  tableListContent: {},
+  filterRow: {},
+  filterCell: {},
+  iconButton: {},
+  horizontalScrollContent: {},
+}));
+jest.mock('../../../../react/components/table/DefaultTableEmptyState', () => () => null);
+jest.mock('../../../../react/components/table/DefaultTableInput', () => {
+  const React = require('react');
+  return ({column, row}) =>
+    React.createElement('cell', {
+      field: column?.key || column?.name,
+      value: row?.[column?.key || column?.name],
+    });
+});
+jest.mock('../../../../react/components/table/useDefaultTableTheme', () => () => ({
+  palette: {background: '#fff', text: '#111', textSecondary: '#666'},
+  resolvedAccentColor: '#eee',
+  tableBorderColors: {rowBorderColor: '#ddd', headerBorderColor: '#ccc'},
+  themeTokens: {},
+}));
+
+const DefaultTableRows = require('../../../../react/components/table/DefaultTableRows').default;
+
+const collectTestIds = tree =>
+  [
+    ...tree.root.findAllByType('View'),
+    ...tree.root.findAllByType('TouchableOpacity'),
+    ...tree.root.findAllByType('Text'),
+  ]
+    .map(node => node.props.testID)
+    .filter(Boolean);
+
+describe('DefaultTableRows row actions column', () => {
+  beforeEach(() => {
+    mockStores = {};
+    global.t = {t: (_store, _kind, key) => ({actions: 'Ações', edit: 'Editar'}[key])};
+  });
+
+  it('renders header + cell when rowActionsComponent is set', () => {
+    mockStores.orders = {
+      getters: {
+        columns: [{key: 'name', label: 'Nome'}],
+        items: [{id: 7, name: 'CT-e'}],
+        visibleColumns: {},
+        configs: {
+          rowActionsComponent: () => React.createElement('row-actions'),
+          showRowActions: true,
+        },
+      },
+    };
+
+    let tree;
+    renderer.act(() => {
+      tree = renderer.create(React.createElement(DefaultTableRows, {storeName: 'orders'}));
+    });
+
+    expect(collectTestIds(tree)).toEqual(
+      expect.arrayContaining([
+        'default-table-row-actions-header',
+        'default-table-row-actions-7',
+      ]),
+    );
+    expect(tree.root.findAllByType('row-actions')).toHaveLength(1);
+  });
+
+  it('does not render an actions column when showRowActions is false', () => {
+    mockStores.orders = {
+      getters: {
+        columns: [{key: 'name', label: 'Nome'}],
+        items: [{id: 7, name: 'CT-e'}],
+        visibleColumns: {},
+        configs: {
+          rowActionsComponent: () => React.createElement('row-actions'),
+          showRowActions: false,
+        },
+      },
+    };
+
+    let tree;
+    renderer.act(() => {
+      tree = renderer.create(React.createElement(DefaultTableRows, {storeName: 'orders'}));
+    });
+
+    expect(collectTestIds(tree)).not.toEqual(
+      expect.arrayContaining(['default-table-row-actions-header']),
+    );
+    expect(tree.root.findAllByType('row-actions')).toHaveLength(0);
+  });
+});

package/src/tests/react/components/table/resolveRowBackgroundColor.test.mjs

@@ -0,0 +1,45 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '../../../../../');
+const sourcePath = join(root, 'src/react/components/table/DefaultTableRows.js');
+const source = readFileSync(sourcePath, 'utf8');
+
+test('resolveRowBackgroundColor ignores status.color in source', () => {
+  assert.doesNotMatch(source, /row\?\.status\?\.color/);
+  assert.doesNotMatch(source, /withAlpha\(statusColor/);
+  assert.match(source, /listItemEvenRow/);
+  assert.match(source, /listItemOddRow/);
+  assert.match(source, /export const resolveRowBackgroundColor/);
+});
+
+const resolveRowBackgroundColor = ({
+  selected,
+  index,
+  tableOddColor,
+  tableEvenColor,
+  selectedBackground = '#ECFEFF',
+}) => {
+  if (selected) return selectedBackground;
+  return index % 2 === 0 ? tableOddColor : tableEvenColor;
+};
+
+test('even/odd stripes use listItem tokens, not status', () => {
+  const even = '#111111';
+  const odd = '#222222';
+  assert.equal(
+    resolveRowBackgroundColor({ selected: false, index: 0, tableOddColor: odd, tableEvenColor: even }),
+    odd,
+  );
+  assert.equal(
+    resolveRowBackgroundColor({ selected: false, index: 1, tableOddColor: odd, tableEvenColor: even }),
+    even,
+  );
+  assert.equal(
+    resolveRowBackgroundColor({ selected: true, index: 0, tableOddColor: odd, tableEvenColor: even }),
+    '#ECFEFF',
+  );
+});