@controleonline/ui-default 1.0.270 → 1.0.272

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/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/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',
+  );
+});

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

@@ -0,0 +1,161 @@
+const React = require('react');
+const renderer = require('react-test-renderer');
+
+const {beforeEach, describe, expect, it} = global;
+
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
+const mockResolveStoredTableFiltersPreference = jest.fn(() => null);
+const mockSanitizeTableFiltersPreference = jest.fn((args) => {
+  if (args && args.filters) return args.filters;
+  return args || {};
+});
+
+jest.mock('../../../../react/utils/tableVisibleColumnsPreferences', () => ({
+  resolveStoredTableFiltersPreference: (...args) =>
+    mockResolveStoredTableFiltersPreference(...args),
+  resolveStoredVisibleColumnsPreference: jest.fn(() => null),
+  sanitizeTableFiltersPreference: (...args) =>
+    mockSanitizeTableFiltersPreference(...args),
+  sanitizeVisibleColumnsPreference: jest.fn(v => v?.visibleColumns || []),
+}));
+
+const {
+  areTableFiltersEqual,
+  useDefaultTableStoreSync,
+} = require('../../../../react/components/table/useDefaultTableStoreSync');
+
+function Harness({data, store, storeFilters, columnsForTable, tablePreferenceScope}) {
+  useDefaultTableStoreSync({
+    columns: [],
+    columnsForTable: columnsForTable || [],
+    data,
+    defaultTableConfigs: {},
+    defaultTableConfigsSignature: 'sig',
+    store,
+    storeColumnsLength: 0,
+    storeFilters: storeFilters || {},
+    storeName: 'device_config',
+    tablePreferenceScope: tablePreferenceScope || {
+      companyKey: 'c1',
+      storeKey: 'orders',
+      routeKey: 'order-history-page',
+    },
+  });
+  return null;
+}
+
+describe('useDefaultTableStoreSync', () => {
+  beforeEach(() => {
+    mockResolveStoredTableFiltersPreference.mockReset();
+    mockResolveStoredTableFiltersPreference.mockReturnValue(null);
+    mockSanitizeTableFiltersPreference.mockClear();
+  });
+
+  it('publishes controlled data once per array reference (avoids #185 loop)', () => {
+    const setItems = jest.fn();
+    const store = {
+      actions: {setItems},
+      getters: {},
+    };
+    const data = [{id: 1}];
+
+    let tree;
+    renderer.act(() => {
+      tree = renderer.create(React.createElement(Harness, {data, store}));
+    });
+
+    expect(setItems).toHaveBeenCalledTimes(1);
+    expect(setItems).toHaveBeenCalledWith(data);
+
+    // New store identity (zustand commit) with same data reference must NOT re-publish
+    const storeAfterCommit = {
+      actions: {setItems},
+      getters: {items: data},
+    };
+    renderer.act(() => {
+      tree.update(React.createElement(Harness, {data, store: storeAfterCommit}));
+    });
+    expect(setItems).toHaveBeenCalledTimes(1);
+
+    // New data reference must publish again
+    const data2 = [{id: 2}];
+    renderer.act(() => {
+      tree.update(
+        React.createElement(Harness, {data: data2, store: storeAfterCommit}),
+      );
+    });
+    expect(setItems).toHaveBeenCalledTimes(2);
+    expect(setItems).toHaveBeenLastCalledWith(data2);
+
+    tree.unmount();
+  });
+
+  it('hydrates stored filters once and does not re-setFilters when storeFilters churns (period toggle #185)', () => {
+    const setFilters = jest.fn();
+    const setItems = jest.fn();
+    const stored = {
+      alterDate: {shortcut: 'today', customRange: {from: '', to: ''}},
+    };
+    mockResolveStoredTableFiltersPreference.mockReturnValue(stored);
+    mockSanitizeTableFiltersPreference.mockImplementation(({filters}) => filters || {});
+
+    const columnsForTable = [{name: 'alterDate', externalFilter: true}];
+    const store = {actions: {setFilters, setItems}, getters: {}};
+
+    let tree;
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(Harness, {
+          data: [],
+          store,
+          storeFilters: {},
+          columnsForTable,
+        }),
+      );
+    });
+
+    expect(setFilters).toHaveBeenCalledTimes(1);
+    expect(setFilters).toHaveBeenCalledWith(stored);
+
+    // Simulate user toggle today → all → today: storeFilters identity changes each time
+    const afterAll = {};
+    const afterToday = {
+      alterDate: {shortcut: 'today', customRange: {from: '', to: ''}},
+    };
+
+    renderer.act(() => {
+      tree.update(
+        React.createElement(Harness, {
+          data: [],
+          store: {actions: {setFilters, setItems}, getters: {filters: afterAll}},
+          storeFilters: afterAll,
+          columnsForTable,
+        }),
+      );
+    });
+    renderer.act(() => {
+      tree.update(
+        React.createElement(Harness, {
+          data: [],
+          store: {actions: {setFilters, setItems}, getters: {filters: afterToday}},
+          storeFilters: afterToday,
+          columnsForTable,
+        }),
+      );
+    });
+
+    // Must remain a single hydrate — no chase of storeFilters
+    expect(setFilters).toHaveBeenCalledTimes(1);
+
+    tree.unmount();
+  });
+
+  it('areTableFiltersEqual treats equivalent period payloads as equal', () => {
+    const a = {alterDate: {shortcut: 'today', customRange: {from: '', to: ''}}};
+    const b = {alterDate: {shortcut: 'today', customRange: {from: '', to: ''}}};
+    expect(areTableFiltersEqual(a, b)).toBe(true);
+    expect(areTableFiltersEqual(a, {alterDate: {shortcut: 'all'}})).toBe(false);
+    expect(areTableFiltersEqual({}, {})).toBe(true);
+  });
+});