@controleonline/ui-default 1.0.266 → 1.0.268

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

@@ -182,4 +182,76 @@ describe('DefaultSelect', () => {
       }),
     });
   });
+
+  it('keeps the status label visible when the row status has color but no icon', async () => {
+    global.t = {
+      t: jest.fn(() => 'Waiting payment'),
+    };
+    let tree;
+
+    await renderer.act(async () => {
+      tree = renderer.create(
+        React.createElement(DefaultSelect, {
+          column: {
+            name: 'status',
+            label: 'Status',
+            list: 'status/getItems',
+            translate: false,
+            format(value) {
+              return {
+                value: value.id,
+                label: global.t.t('orders', 'status', value.status),
+                color: value.color,
+              };
+            },
+            formatList(value) {
+              return {
+                value: value.id,
+                label: global.t.t('orders', 'status', value.status),
+                color: value.color,
+              };
+            },
+          },
+          row: {
+            status: {
+              id: 6,
+              status: 'waiting payment',
+              color: '#000000',
+            },
+          },
+          storeName: 'orders',
+        }),
+      );
+    });
+
+    const visibleStatus = tree.root
+      .findAllByType('Text')
+      .find(node => node.props.children === 'Waiting payment');
+
+    expect(visibleStatus).toBeTruthy();
+    expect(visibleStatus.props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          flex: 1,
+          fontSize: 13,
+          fontWeight: '600',
+        }),
+        {color: '#000000'},
+      ]),
+    );
+    expect(visibleStatus.props.style).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          backgroundColor: expect.any(String),
+        }),
+      ]),
+    );
+    expect(visibleStatus.props.style).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderColor: expect.any(String),
+        }),
+      ]),
+    );
+  });
 });

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

@@ -401,6 +401,61 @@ describe('DefaultTable', () => {
     );
   });
 
+  it('renders a custom row actions component with the configured actions width', () => {
+    mockWindowDimensions = {width: 1200, height: 800};
+    mockStores.orders = {
+      actions: {},
+      getters: {
+        columns: [
+          {key: 'id', label: 'ID', isIdentity: true},
+          {key: 'name', label: 'Nome'},
+        ],
+        items: [{id: 12, name: 'Pedido'}],
+        visibleColumns: {},
+      },
+    };
+    const rowActionsComponent = props =>
+      React.createElement('row-actions', props, props.row.name);
+    let tree;
+
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(DefaultTable, {
+          onEditRow: jest.fn(),
+          rowActionsComponent,
+          rowActionsWidth: 180,
+          storeName: 'orders',
+        }),
+      );
+    });
+
+    const rowActions = tree.root.findByType('row-actions');
+    expect(rowActions.props.row).toEqual({id: 12, name: 'Pedido'});
+    expect(rowActions.props.storeName).toBe('orders');
+    expect(typeof rowActions.props.openEdit).toBe('function');
+    expect(rowActions.props.helpers).toEqual(
+      expect.objectContaining({
+        openEdit: expect.any(Function),
+      }),
+    );
+
+    const renderedStyles = [
+      ...tree.root.findAllByType('View'),
+      ...tree.root.findAllByType('TouchableOpacity'),
+    ].map(node => flattenStyle(node.props.style));
+
+    expect(renderedStyles).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          flexBasis: 180,
+          maxWidth: 180,
+          minWidth: 180,
+          width: 180,
+        }),
+      ]),
+    );
+  });
+
   it('keeps only the identity column pinned when row actions are not pinned', () => {
     mockWindowDimensions = {width: 1200, height: 800};
     mockStores.orders = {

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

@@ -0,0 +1,37 @@
+const {describe, expect, it} = require('@jest/globals');
+
+jest.mock('@store', () => ({
+  getAllStores: () => ({}),
+}));
+
+jest.mock('react-native', () => ({
+  Platform: {
+    select: value => value.web || value.default,
+  },
+  StyleSheet: {
+    create: value => value,
+  },
+}));
+
+jest.mock('@controleonline/ui-common/src/utils/formatter.js', () => ({}));
+jest.mock('@controleonline/ui-common/src/react/utils/dateRangeFilter', () => ({
+  getDateRange: () => ({}),
+}));
+
+const {
+  getColumnMinWidth,
+  getColumnStyle,
+} = require('../../../../react/components/table/DefaultTable.utils');
+
+describe('DefaultTable utils', () => {
+  it('uses column width metadata from the store configuration', () => {
+    expect(getColumnMinWidth({name: 'status', minWidth: 180})).toBe(180);
+    expect(getColumnStyle({name: 'status', minWidth: 180})).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          minWidth: 180,
+        }),
+      ]),
+    );
+  });
+});

package/src/tests/react/inputs/defaultInputUtils.test.js

@@ -1,19 +1,23 @@
-const {describe, expect, it, jest} = require('@jest/globals');
-
-jest.mock('@store', () => ({
-  getAllStores: () => ({}),
-}));
+const {describe, expect, it, jest} = require('@jest/globals');
+
+jest.mock('@store', () => ({
+  getAllStores: () => ({}),
+}));
 
 jest.mock('@controleonline/ui-common/src/utils/formatter.js', () => ({}));
 
-jest.mock('@controleonline/ui-common/src/react/utils/storeColumns', () => ({
-  formatStoreColumnValue: ({value}) => value,
-}));
-
-const {mapOptions} = require('../../../react/components/inputs/defaultInputUtils');
+jest.mock('@controleonline/ui-common/src/react/utils/storeColumns', () => ({
+  formatStoreColumnValue: ({value}) => value?.status || value?.category || value,
+}));
+
+const {
+  buildReadPresentationStyles,
+  mapOptions,
+  resolveCellPresentation,
+} = require('../../../react/components/inputs/defaultInputUtils');
 
-describe('defaultInputUtils', () => {
-  it('deduplicates list options by normalized key', () => {
+describe('defaultInputUtils', () => {
+  it('deduplicates list options by normalized key', () => {
     const column = {
       formatList(item) {
         return {
@@ -40,6 +44,105 @@ describe('defaultInputUtils', () => {
         label: 'Cielo',
         raw: {id: 4579, wallet: 'Cielo'},
       },
-    ]);
-  });
-});
+    ]);
+  });
+
+  it('preserves option color and icon metadata from formatList', () => {
+    const column = {
+      formatList(item) {
+        return {
+          color: item.color,
+          icon: item.icon,
+          value: item.id,
+          label: item.status,
+        };
+      },
+    };
+
+    const options = mapOptions(column, [
+      {id: 1, status: 'Em rota', color: '#2563EB', icon: 'truck'},
+    ]);
+
+    expect(options).toEqual([
+      {
+        color: '#2563EB',
+        icon: 'truck',
+        key: '1',
+        label: 'Em rota',
+        raw: {id: 1, status: 'Em rota', color: '#2563EB', icon: 'truck'},
+      },
+    ]);
+  });
+
+  it('resolves table cell presentation from row value and column style', () => {
+    const presentation = resolveCellPresentation({
+      column: {
+        name: 'status',
+        style: row => ({color: row.status.color}),
+      },
+      row: {
+        status: {
+          status: 'Aprovado',
+          color: '#16A34A',
+          icon: 'check-circle',
+        },
+      },
+      storeName: 'orders',
+    });
+
+    expect(presentation).toEqual({
+      backgroundColor: undefined,
+      borderColor: undefined,
+      color: '#16A34A',
+      icon: 'check-circle',
+      image: undefined,
+      label: 'Aprovado',
+    });
+  });
+
+  it('resolves table cell presentation from the column format object', () => {
+    const presentation = resolveCellPresentation({
+      column: {
+        name: 'status',
+        format(value) {
+          return {
+            label: value.status,
+            color: value.color,
+            icon: value.icon,
+          };
+        },
+      },
+      row: {
+        status: {
+          status: 'Preparando',
+          color: '#0EA5E9',
+          icon: 'clock',
+        },
+      },
+      storeName: 'orders',
+    });
+
+    expect(presentation).toEqual({
+      backgroundColor: undefined,
+      borderColor: undefined,
+      color: '#0EA5E9',
+      icon: 'clock',
+      image: undefined,
+      label: 'Preparando',
+    });
+  });
+
+  it('builds subtle badge colors from resource colors', () => {
+    expect(buildReadPresentationStyles({
+      color: '#16A34A',
+      label: 'Aprovado',
+    })).toEqual({
+      badgeStyle: {
+        backgroundColor: 'rgba(22, 163, 74, 0.1)',
+        borderColor: 'rgba(22, 163, 74, 0.32)',
+      },
+      color: '#16A34A',
+      hasDecoration: true,
+    });
+  });
+});