@controleonline/ui-default 1.0.265 → 1.0.267

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

@@ -2,9 +2,9 @@ const React = require('react');
 const renderer = require('react-test-renderer');
 
 const {afterEach, beforeEach, describe, expect, it} = global;
-
-global.IS_REACT_ACT_ENVIRONMENT = true;
-
+
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
 let consoleErrorSpy = null;
 let mockStores = {};
 let mockWindowDimensions = {width: 480, height: 800};
@@ -27,12 +27,12 @@ const createLocalStorageMock = () => {
     },
   };
 };
-
+
 jest.mock('@store', () => ({
   getAllStores: jest.fn(() => ({})),
   useStore: jest.fn(name => mockStores[name] || {actions: {}, getters: {}}),
 }));
-
+
 jest.mock('@react-navigation/native', () => ({
   useIsFocused: jest.fn(() => false),
   useRoute: jest.fn(() => ({
@@ -40,52 +40,52 @@ jest.mock('@react-navigation/native', () => ({
     name: 'OrderHistoryPage',
   })),
 }));
-
-jest.mock('@controleonline/ui-common/src/react/components/MessageService', () => ({
-  useMessage: jest.fn(() => ({
-    showError: jest.fn(),
-  })),
-}));
-
-jest.mock('react-native-vector-icons/Feather', () => {
-  const React = require('react');
-  return props => React.createElement('icon', props, props.children);
-});
-
-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,
-      ),
-      items.length === 0 && props.ListEmptyComponent ? props.ListEmptyComponent : null,
-      props.ListFooterComponent || null,
-    );
-  };
-
-  return {
-    FlatList,
-    Modal: createComponent('Modal'),
-    Platform: {
-      select: value => value.web || value.default || null,
-    },
-    ScrollView: createComponent('ScrollView'),
-    StyleSheet: {create: value => value},
-    Text: createComponent('Text'),
-    TouchableOpacity: createComponent('TouchableOpacity'),
-    View: createComponent('View'),
-    useWindowDimensions: jest.fn(() => mockWindowDimensions),
-  };
-});
-
+
+jest.mock('@controleonline/ui-common/src/react/components/MessageService', () => ({
+  useMessage: jest.fn(() => ({
+    showError: jest.fn(),
+  })),
+}));
+
+jest.mock('react-native-vector-icons/Feather', () => {
+  const React = require('react');
+  return props => React.createElement('icon', props, props.children);
+});
+
+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,
+      ),
+      items.length === 0 && props.ListEmptyComponent ? props.ListEmptyComponent : null,
+      props.ListFooterComponent || null,
+    );
+  };
+
+  return {
+    FlatList,
+    Modal: createComponent('Modal'),
+    Platform: {
+      select: value => value.web || value.default || null,
+    },
+    ScrollView: createComponent('ScrollView'),
+    StyleSheet: {create: value => value},
+    Text: createComponent('Text'),
+    TouchableOpacity: createComponent('TouchableOpacity'),
+    View: createComponent('View'),
+    useWindowDimensions: jest.fn(() => mockWindowDimensions),
+  };
+});
+
 jest.mock('../../../../react/components/filters/DefaultColumnFilter', () => props => {
   const React = require('react');
   mockCapturedColumnFilterProps.push(props);
@@ -112,7 +112,7 @@ jest.mock('@controleonline/ui-common/src/react/components/StateStore', () => pro
   const React = require('react');
   return React.createElement('StateStore', props, props.children);
 });
-
+
 const {
   default: DefaultTable,
   mergeSortedDataWithLiveItems,
@@ -139,32 +139,32 @@ const flattenStyle = style => {
 
   return style && typeof style === 'object' ? style : {};
 };
-
+
 describe('resolveColumnListLoadParams', () => {
-  it('uses company for category stores and people for financial owner stores', () => {
-    expect(resolveColumnListLoadParams({
-      column: {list: 'categories/getItems'},
-      currentCompanyId: 21,
-    })).toEqual({company: 21});
-    expect(resolveColumnListLoadParams({
-      column: {list: 'wallet/getItems'},
-      currentCompanyId: 21,
-    })).toEqual({people: 21});
-    expect(resolveColumnListLoadParams({
-      column: {list: 'paymentType/getItems'},
-      currentCompanyId: 21,
-    })).toEqual({people: 21});
-  });
-
-  it('resolves contextual list params without losing the company scope', () => {
-    expect(resolveColumnListLoadParams({
-      column: {
-        list: 'categories/getItems',
-        listRequestParams: ({requestParams}) => ({context: requestParams.context}),
-      },
-      currentCompanyId: 21,
-      requestParams: {context: 'receive'},
-    })).toEqual({company: 21, context: 'receive'});
+  it('uses company for category stores and people for financial owner stores', () => {
+    expect(resolveColumnListLoadParams({
+      column: {list: 'categories/getItems'},
+      currentCompanyId: 21,
+    })).toEqual({company: 21});
+    expect(resolveColumnListLoadParams({
+      column: {list: 'wallet/getItems'},
+      currentCompanyId: 21,
+    })).toEqual({people: 21});
+    expect(resolveColumnListLoadParams({
+      column: {list: 'paymentType/getItems'},
+      currentCompanyId: 21,
+    })).toEqual({people: 21});
+  });
+
+  it('resolves contextual list params without losing the company scope', () => {
+    expect(resolveColumnListLoadParams({
+      column: {
+        list: 'categories/getItems',
+        listRequestParams: ({requestParams}) => ({context: requestParams.context}),
+      },
+      currentCompanyId: 21,
+      requestParams: {context: 'receive'},
+    })).toEqual({company: 21, context: 'receive'});
   });
 });
 
@@ -254,42 +254,42 @@ describe('DefaultTable', () => {
       people: {
         getters: {
           currentCompany: {
-            theme: {
-              colors: {},
-            },
-          },
-        },
-      },
-      theme: {
-        getters: {
-          colors: {},
-        },
-      },
-    };
-  });
-
+            theme: {
+              colors: {},
+            },
+          },
+        },
+      },
+      theme: {
+        getters: {
+          colors: {},
+        },
+      },
+    };
+  });
+
   afterEach(() => {
     delete global.t;
     if (consoleErrorSpy) {
-      consoleErrorSpy.mockRestore();
-      consoleErrorSpy = null;
-    }
-  });
-
+      consoleErrorSpy.mockRestore();
+      consoleErrorSpy = null;
+    }
+  });
+
   it('keeps the list/card toggle visible on compact layouts even when cards are forced', () => {
     let tree;
 
     renderer.act(() => {
       tree = renderer.create(
-        React.createElement(DefaultTable, {
-          columns: [{key: 'name', label: 'Nome'}],
-          data: [],
-          showColumnFiltersButton: false,
-        }),
-      );
-    });
-
-    const iconNames = tree.root.findAllByType('icon').map(node => node.props.name);
+        React.createElement(DefaultTable, {
+          columns: [{key: 'name', label: 'Nome'}],
+          data: [],
+          showColumnFiltersButton: false,
+        }),
+      );
+    });
+
+    const iconNames = tree.root.findAllByType('icon').map(node => node.props.name);
 
     expect(iconNames).toEqual(expect.arrayContaining(['grid', 'columns']));
   });
@@ -322,7 +322,7 @@ describe('DefaultTable', () => {
 
     const toggleViewButton = tree.root
       .findAllByType('TouchableOpacity')
-      .find(node => node.findAllByType('icon').some(icon => icon.props.name === 'grid'));
+      .find(node => node.findAllByType('icon').some(icon => icon.props.name === 'list'));
 
     renderer.act(() => {
       toggleViewButton.props.onPress();
@@ -338,7 +338,7 @@ describe('DefaultTable', () => {
     expect(
       tree.root.findAllByType('ScrollView').some(node => node.props.horizontal === true),
     ).toBe(true);
-    expect(tree.root.findAllByType('icon').map(node => node.props.name)).toContain('list');
+    expect(tree.root.findAllByType('icon').map(node => node.props.name)).toContain('grid');
   });
 
   it('pins identity and action columns on table view', () => {
@@ -401,6 +401,75 @@ describe('DefaultTable', () => {
     );
   });
 
+  it('keeps only the identity column pinned when row actions are not pinned', () => {
+    mockWindowDimensions = {width: 1200, height: 800};
+    mockStores.orders = {
+      actions: {},
+      getters: {
+        columns: [
+          {key: 'id', label: 'ID', isIdentity: true},
+          {key: 'name', label: 'Nome'},
+        ],
+        items: [{id: 1, name: 'Pedido'}],
+        visibleColumns: {},
+      },
+    };
+    const rowActionsComponent = () => React.createElement('row-actions');
+    let tree;
+
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(DefaultTable, {
+          pinRowActions: false,
+          rowActionsComponent,
+          storeName: 'orders',
+        }),
+      );
+    });
+
+    const renderedStyles = [
+      ...tree.root.findAllByType('View'),
+      ...tree.root.findAllByType('TouchableOpacity'),
+    ].map(node => flattenStyle(node.props.style));
+
+    expect(renderedStyles).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({position: 'sticky', left: 0}),
+      ]),
+    );
+    expect(renderedStyles).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({position: 'sticky', right: 0}),
+      ]),
+    );
+
+    const horizontalScroll = tree.root
+      .findAllByType('ScrollView')
+      .find(node => node.props.horizontal);
+
+    renderer.act(() => {
+      horizontalScroll.props.onLayout({nativeEvent: {layout: {width: 300}}});
+      horizontalScroll.props.onContentSizeChange(600, 200);
+      horizontalScroll.props.onScroll({nativeEvent: {contentOffset: {x: 120}}});
+    });
+
+    const scrolledStyles = [
+      ...tree.root.findAllByType('View'),
+      ...tree.root.findAllByType('TouchableOpacity'),
+    ].map(node => flattenStyle(node.props.style));
+
+    expect(scrolledStyles).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({transform: [{translateX: 120}]}),
+      ]),
+    );
+    expect(scrolledStyles).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({transform: [{translateX: -180}]}),
+      ]),
+    );
+  });
+
   it('keeps the complete search aligned in the toolbar when there is enough room', () => {
     mockWindowDimensions = {width: 430, height: 932};
     mockStores.orders = {
@@ -425,6 +494,70 @@ describe('DefaultTable', () => {
     expect(tree.root.findAllByType('icon').map(node => node.props.name)).not.toContain('search');
   });
 
+  it('hides the toolbar when the screen disables it', () => {
+    mockWindowDimensions = {width: 430, height: 932};
+    mockStores.orders = {
+      actions: {},
+      getters: {
+        columns: [{key: 'name', label: 'Nome', searchable: true}],
+      },
+    };
+    let tree;
+
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(DefaultTable, {
+          columns: [{key: 'name', label: 'Nome', searchable: true}],
+          data: [],
+          showToolbar: false,
+          storeName: 'orders',
+        }),
+      );
+    });
+
+    expect(tree.root.findAllByType('DefaultSearch')).toHaveLength(0);
+    expect(tree.root.findAllByType('icon').map(node => node.props.name)).not.toEqual(
+      expect.arrayContaining(['columns', 'grid', 'list', 'search']),
+    );
+  });
+
+  it('keeps add available as a floating button when the toolbar is hidden', () => {
+    const onAdd = jest.fn();
+    mockWindowDimensions = {width: 430, height: 932};
+    mockStores.orders = {
+      actions: {},
+      getters: {
+        add: true,
+        columns: [{key: 'name', label: 'Nome', searchable: true}],
+      },
+    };
+    let tree;
+
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(DefaultTable, {
+          columns: [{key: 'name', label: 'Nome', searchable: true}],
+          data: [],
+          onAdd,
+          showToolbar: false,
+          storeName: 'orders',
+        }),
+      );
+    });
+
+    const addButton = tree.root
+      .findAllByType('TouchableOpacity')
+      .find(node => node.findAllByType('icon').some(icon => icon.props.name === 'plus'));
+
+    expect(addButton).toBeTruthy();
+    expect(addButton.props.accessibilityRole).toBe('button');
+    expect(addButton.props.accessibilityLabel).toBe('Adicionar');
+
+    renderer.act(() => addButton.props.onPress());
+
+    expect(onAdd).toHaveBeenCalledTimes(1);
+  });
+
   it('collapses search into an icon on narrow toolbars and opens the search modal', () => {
     mockWindowDimensions = {width: 375, height: 667};
     mockStores.orders = {
@@ -513,7 +646,7 @@ describe('DefaultTable', () => {
     const iconNames = tree.root.findAllByType('icon').map(node => node.props.name);
 
     expect(tree.root.findAllByType('DefaultSearch')).toHaveLength(0);
-    expect(iconNames).toEqual(expect.arrayContaining(['search', 'filter', 'grid', 'columns']));
+    expect(iconNames).toEqual(expect.arrayContaining(['search', 'filter', 'list', 'columns']));
     expect(
       tree.root.findAllByType('Text').filter(node => node.props.children === '27 registros'),
     ).toHaveLength(1);
@@ -770,81 +903,83 @@ describe('DefaultTable', () => {
   });
 
   it('forces cards when entering compact mode and still toggles between cards and list', () => {
-    const props = {
-      columns: [{key: 'name', label: 'Nome'}],
-      data: [{id: 1, name: 'Pedido 1'}],
-      showColumnFiltersButton: false,
-    };
-    let tree;
-
-    mockWindowDimensions = {width: 1024, height: 800};
-
-    renderer.act(() => {
-      tree = renderer.create(
-        React.createElement(DefaultTable, props),
-      );
-    });
-
-    expect(tree.root.findAllByType('ScrollView')).toHaveLength(1);
-
-    mockWindowDimensions = {width: 480, height: 800};
-
-    renderer.act(() => {
-      tree.update(React.createElement(DefaultTable, props));
-    });
-
-    expect(tree.root.findAllByType('ScrollView')).toHaveLength(0);
-    expect(tree.root.findByProps({name: 'grid'})).toBeTruthy();
-
-    renderer.act(() => {
-      tree.root.findByProps({name: 'grid'}).parent.props.onPress();
-    });
-
-    expect(tree.root.findAllByType('ScrollView')).toHaveLength(1);
-    expect(tree.root.findByProps({name: 'list'})).toBeTruthy();
-
-    renderer.act(() => {
-      tree.root.findByProps({name: 'list'}).parent.props.onPress();
-    });
-
-    expect(tree.root.findAllByType('ScrollView')).toHaveLength(0);
-    expect(tree.root.findByProps({name: 'grid'})).toBeTruthy();
-  });
-
+    const props = {
+      columns: [{key: 'name', label: 'Nome'}],
+      data: [{id: 1, name: 'Pedido 1'}],
+      showColumnFiltersButton: false,
+    };
+    let tree;
+
+    mockWindowDimensions = {width: 1024, height: 800};
+
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(DefaultTable, props),
+      );
+    });
+
+    expect(tree.root.findAllByType('ScrollView')).toHaveLength(1);
+
+    mockWindowDimensions = {width: 480, height: 800};
+
+    renderer.act(() => {
+      tree.update(React.createElement(DefaultTable, props));
+    });
+
+    expect(tree.root.findAllByType('ScrollView')).toHaveLength(0);
+    expect(tree.root.findByProps({name: 'grid'})).toBeTruthy();
+
+    renderer.act(() => {
+      tree.root.findByProps({name: 'grid'}).parent.props.onPress();
+      tree.update(React.createElement(DefaultTable, props));
+    });
+
+    expect(tree.root.findAllByType('ScrollView')).toHaveLength(1);
+    expect(tree.root.findByProps({name: 'list'})).toBeTruthy();
+
+    renderer.act(() => {
+      tree.root.findByProps({name: 'list'}).parent.props.onPress();
+      tree.update(React.createElement(DefaultTable, props));
+    });
+
+    expect(tree.root.findAllByType('ScrollView')).toHaveLength(0);
+    expect(tree.root.findByProps({name: 'grid'})).toBeTruthy();
+  });
+
   it('applies a custom rowStyle to rendered table rows', () => {
-    let tree;
-    const rowStyle = jest.fn(() => ({
-      borderLeftColor: '#DC2626',
-      borderLeftWidth: 4,
-    }));
-
-    mockWindowDimensions = {width: 1024, height: 800};
-
-    renderer.act(() => {
-      tree = renderer.create(
-        React.createElement(DefaultTable, {
-          columns: [{key: 'name', label: 'Nome'}],
-          data: [{id: 1, name: 'Pedido 1'}],
-          onRowPress: () => {},
-          rowStyle,
-          showColumnFiltersButton: false,
-        }),
-      );
-    });
-
-    const row = tree.root
-      .findAllByType('TouchableOpacity')
-      .find(node => node.props?.activeOpacity === 0.84);
-
-    expect(rowStyle).toHaveBeenCalledWith(
-      expect.objectContaining({id: 1, name: 'Pedido 1'}),
-      0,
-    );
-    expect(Array.isArray(row.props.style)).toBe(true);
-    expect(
-      row.props.style.some(
-        style => style && style.borderLeftWidth === 4 && style.borderLeftColor === '#DC2626',
-      ),
+    let tree;
+    const rowStyle = jest.fn(() => ({
+      borderLeftColor: '#DC2626',
+      borderLeftWidth: 4,
+    }));
+
+    mockWindowDimensions = {width: 1024, height: 800};
+
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(DefaultTable, {
+          columns: [{key: 'name', label: 'Nome'}],
+          data: [{id: 1, name: 'Pedido 1'}],
+          onRowPress: () => {},
+          rowStyle,
+          showColumnFiltersButton: false,
+        }),
+      );
+    });
+
+    const row = tree.root
+      .findAllByType('TouchableOpacity')
+      .find(node => node.props?.activeOpacity === 0.84);
+
+    expect(rowStyle).toHaveBeenCalledWith(
+      expect.objectContaining({id: 1, name: 'Pedido 1'}),
+      0,
+    );
+    expect(Array.isArray(row.props.style)).toBe(true);
+    expect(
+      row.props.style.some(
+        style => style && style.borderLeftWidth === 4 && style.borderLeftColor === '#DC2626',
+      ),
     ).toBe(true);
   });
 
@@ -963,15 +1098,15 @@ describe('DefaultTable', () => {
     };
 
     const FooterComponent = props =>
-      React.createElement('CustomFooter', {
-        resolvedTotalItemsText: props.resolvedTotalItemsText,
-      });
-
-    mockWindowDimensions = {width: 1024, height: 800};
-
-    renderer.act(() => {
-      tree = renderer.create(
-        React.createElement(DefaultTable, {
+      React.createElement('CustomFooter', {
+        resolvedTotalItemsText: props.resolvedTotalItemsText,
+      });
+
+    mockWindowDimensions = {width: 1024, height: 800};
+
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(DefaultTable, {
           columns: [{key: 'name', label: 'Nome'}],
           data: [{id: 1, name: 'Pedido 1'}],
           footerComponent: FooterComponent,
@@ -979,9 +1114,9 @@ describe('DefaultTable', () => {
           storeName: 'orders',
         }),
       );
-    });
-
-    const footer = tree.root.findByType('CustomFooter');
+    });
+
+    const footer = tree.root.findByType('CustomFooter');
 
     expect(footer.props.resolvedTotalItemsText).toBe('7 registros');
   });
@@ -1116,57 +1251,57 @@ describe('DefaultTable', () => {
   });
 
   it('uses store actions when no explicit table actions are passed', async () => {
-    const save = jest.fn(() => Promise.resolve({
-      id: 1,
-      jobTitle: '/categories/2',
-    }));
-
-    mockStores.employee_profiles = {
-      actions: {
-        save,
-      },
-      getters: {
-        columns: [],
-      },
-    };
-
-    await renderer.act(async () => {
-      renderer.create(
-        React.createElement(DefaultTable, {
-          columns: [
-            {
-              key: 'jobTitle',
-              label: 'Cargo',
-              editable: true,
-              list: 'categories/getItems',
-              formatList: item => ({
-                value: item.id,
-                label: item.name,
-              }),
-              saveFormat: value => `/categories/${parseInt(value.value || value, 10)}`,
-            },
-          ],
-          data: [{
-            id: 1,
-            jobTitle: '/categories/1',
-          }],
-          showColumnFiltersButton: false,
-          showRowActions: false,
-          storeName: 'employee_profiles',
-        }),
-      );
-    });
-
+    const save = jest.fn(() => Promise.resolve({
+      id: 1,
+      jobTitle: '/categories/2',
+    }));
+
+    mockStores.employee_profiles = {
+      actions: {
+        save,
+      },
+      getters: {
+        columns: [],
+      },
+    };
+
+    await renderer.act(async () => {
+      renderer.create(
+        React.createElement(DefaultTable, {
+          columns: [
+            {
+              key: 'jobTitle',
+              label: 'Cargo',
+              editable: true,
+              list: 'categories/getItems',
+              formatList: item => ({
+                value: item.id,
+                label: item.name,
+              }),
+              saveFormat: value => `/categories/${parseInt(value.value || value, 10)}`,
+            },
+          ],
+          data: [{
+            id: 1,
+            jobTitle: '/categories/1',
+          }],
+          showColumnFiltersButton: false,
+          showRowActions: false,
+          storeName: 'employee_profiles',
+        }),
+      );
+    });
+
     expect(mockCapturedDefaultInputProps.length).toBeGreaterThan(0);
 
     await renderer.act(async () => {
       await mockCapturedDefaultInputProps[0].onSave({
-        value: '2',
-        label: 'Departamento',
-        object: {id: 2, name: 'Departamento'},
-      });
-    });
-
+        value: '2',
+        label: 'Departamento',
+        object: {id: 2, name: 'Departamento'},
+      });
+    });
+
     expect(save).toHaveBeenCalledWith({
       id: '1',
       jobTitle: '/categories/2',