test: improve test cases and story

lme-axelor · May 27, 2024 · 172f4af · 172f4af
1 parent 44a097c
commit 172f4af
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 49 deletions.
diff --git a/packages/ui/__tests__/components/organisms/FloatingButton.test.js b/packages/ui/__tests__/components/organisms/FloatingButton.test.js
@@ -20,21 +20,22 @@ import React from 'react';
 import {View} from 'react-native';
 import {shallow} from 'enzyme';
 import {CircleButton, FloatingButton, Text} from '@axelor/aos-mobile-ui';
-import {getGlobalStyles} from '../../tools';
+import {getGlobalStyles, getDefaultThemeColors} from '../../tools';
 
 describe('FloatingButton Component', () => {
+  const Colors = getDefaultThemeColors();
   const props = {
     actions: [
       {
         key: 1,
         title: 'Title 1',
         iconName: 'car',
+        color: Colors.errorColor,
         disabled: false,
         onPress: jest.fn(),
       },
       {
         key: 2,
-        title: 'Title 2',
         iconName: 'motorcycle',
         disabled: true,
         onPress: jest.fn(),
@@ -73,13 +74,19 @@ describe('FloatingButton Component', () => {
 
   it('should give the right iconName and size props to the main button', () => {
     const iconName = 'check';
+    const closeIconName = 'x-lg';
     const size = 50;
     const wrapper = shallow(
       <FloatingButton {...props} iconName={iconName} size={size} />,
     );
 
     expect(wrapper.find(CircleButton).prop('iconName')).toBe(iconName);
     expect(wrapper.find(CircleButton).prop('size')).toBe(size);
+
+    wrapper.find(CircleButton).simulate('press');
+
+    expect(wrapper.find(CircleButton).prop('iconName')).toBe(closeIconName);
+    expect(wrapper.find(CircleButton).prop('size')).toBe(size);
   });
 
   it('should render the rights FloatingActionButton when click on the main button', () => {
@@ -97,24 +104,48 @@ describe('FloatingButton Component', () => {
           .at(i)
           .dive()
           .find(CircleButton)
-          .prop('iconName'),
-      ).toBe(props.actions[i].iconName);
+          .props(),
+      ).toMatchObject({
+        iconName: props.actions[i].iconName,
+        disabled: props.actions[i].disabled,
+        color: props.actions[i].color,
+        square: true,
+      });
+
+      if (props.actions[i].title != null) {
+        expect(
+          wrapper
+            .find('FloatingActionButton')
+            .at(i)
+            .dive()
+            .find(Text)
+            .prop('children'),
+        ).toBe(props.actions[i].title);
+      } else {
+        expect(
+          wrapper.find('FloatingActionButton').at(i).dive().find(Text).length,
+        ).toBe(0);
+      }
+    }
+  });
+
+  it('should render circle style when defined', () => {
+    const wrapper = shallow(
+      <FloatingButton {...props} useCircleStyle={true} />,
+    );
+
+    expect(wrapper.find(CircleButton).prop('square')).toBe(false);
+    wrapper.find(CircleButton).simulate('press');
+
+    for (let i = 0; i < props.actions.length; i++) {
       expect(
         wrapper
           .find('FloatingActionButton')
           .at(i)
           .dive()
           .find(CircleButton)
-          .prop('disabled'),
-      ).toBe(props.actions[i].disabled);
-      expect(
-        wrapper
-          .find('FloatingActionButton')
-          .at(i)
-          .dive()
-          .find(Text)
-          .prop('children'),
-      ).toBe(props.actions[i].title);
+          .prop('square'),
+      ).toBe(false);
     }
   });
 

diff --git a/packages/ui/src/components/organisms/FloatingButton/FloatingButton.tsx b/packages/ui/src/components/organisms/FloatingButton/FloatingButton.tsx
@@ -115,7 +115,7 @@ const FloatingButton = ({
       return [];
     }
 
-    return _actions.filter(action => action.hideIf !== true).reverse();
+    return _actions.filter(action => action.hideIf !== true);
   }, [_actions]);
 
   const showIndicator = useMemo(
@@ -142,7 +142,7 @@ const FloatingButton = ({
               onPress={() => setExpanded(current => !current)}
             />
           ) : null}
-          {!expanded && (
+          {!expanded && useCircleStyle && (
             <Indicator
               show={showIndicator}
               color={Colors.errorColor}

diff --git a/packages/ui/src/components/organisms/FloatingButton/Indicator.tsx b/packages/ui/src/components/organisms/FloatingButton/Indicator.tsx
@@ -65,7 +65,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     position: 'absolute',
     top: 4,
-    left: 4,
+    rifht: 4,
   },
 });
 

diff --git a/packages/ui/stories/organisms/FloatingButton.stories.tsx b/packages/ui/stories/organisms/FloatingButton.stories.tsx
@@ -20,36 +20,42 @@ import React from 'react';
 import {storiesOf} from '@storybook/react-native';
 import {action} from '@storybook/addon-actions';
 import {FloatingButton} from '../../src/components/organisms';
-
-const actions = [
-  {
-    key: 1,
-    title: 'Add',
-    iconName: 'plus',
-    disabled: false,
-    onPress: action('Add button pressed'),
-  },
-  {
-    key: 2,
-    title: 'Edit',
-    iconName: 'pencil',
-    disabled: false,
-    onPress: action('Edit button pressed'),
-  },
-  {
-    key: 3,
-    title: 'Delete',
-    iconName: 'trash-fill',
-    disabled: true,
-    onPress: action('Delete button pressed'),
-  },
-];
+import {lightTheme} from '../../src/theme';
 
 storiesOf('ui/organisms/FloatingButton', module).add(
   'Default',
   args => {
     return (
-      <FloatingButton actions={actions} translator={key => key} {...args} />
+      <FloatingButton
+        actions={[
+          {
+            key: 1,
+            title: args.showTitles ? 'Add' : null,
+            iconName: 'plus',
+            color: lightTheme.colors.infoColor,
+            hideIf: args.hideAdd,
+            onPress: action('Add button pressed'),
+          },
+          {
+            key: 2,
+            title: args.showTitles ? 'Edit' : null,
+            iconName: 'pencil',
+            color: lightTheme.colors.progressColor,
+            indicator: args.showIndicatorOnEdit,
+            onPress: action('Edit button pressed'),
+          },
+          {
+            key: 3,
+            title: args.showTitles ? 'Delete' : null,
+            iconName: 'trash-fill',
+            color: lightTheme.colors.errorColor,
+            disabled: args.disableDelete,
+            onPress: action('Delete button pressed'),
+          },
+        ]}
+        translator={key => key}
+        {...args}
+      />
     );
   },
   {
@@ -59,14 +65,34 @@ storiesOf('ui/organisms/FloatingButton', module).add(
         defaultValue: 'pen-fill',
         control: {type: 'text'},
       },
+      closeIconName: {
+        type: 'string',
+        defaultValue: 'x-lg',
+        control: {type: 'text'},
+      },
       size: {
-        control: {
-          type: 'range',
-          min: 15,
-          max: 75,
-          step: 5,
-        },
-        defaultValue: 50,
+        control: {type: 'range', min: 30, max: 100, step: 5},
+        defaultValue: 60,
+      },
+      useCircleStyle: {
+        type: 'boolean',
+        defaultValue: false,
+      },
+      showTitles: {
+        type: 'boolean',
+        defaultValue: true,
+      },
+      showIndicatorOnEdit: {
+        type: 'boolean',
+        defaultValue: false,
+      },
+      disableDelete: {
+        type: 'boolean',
+        defaultValue: false,
+      },
+      hideAdd: {
+        type: 'boolean',
+        defaultValue: false,
       },
     },
   },