cpk-ui 0.5.5 → 0.7.0

package/src/components/uis/Button/Button.test.tsx

@@ -1,694 +0,0 @@
-import '@testing-library/jest-native/extend-expect';
-
-import React, {type ReactElement} from 'react';
-import {Text} from 'react-native';
-import {css} from 'kstyled';
-import type {RenderAPI} from '@testing-library/react-native';
-import {fireEvent, render} from '@testing-library/react-native';
-
-import {createComponent} from '../../../../test/testUtils';
-import {Button} from './Button';
-import {LoadingIndicator} from '../LoadingIndicator/LoadingIndicator';
-import type {Props as ButtonProps} from './Button';
-import {ThemeType, ThemeProvider} from '../../../providers/ThemeProvider';
-import {dark, light} from '../../../utils/colors';
-
-let testingLib: RenderAPI;
-
-jest.mock('react-native-web-hooks', () => ({
-  useHover: () => true,
-}));
-
-const Component = ({
-  props,
-  themeType,
-}: {
-  props?: ButtonProps;
-  themeType?: ThemeType;
-}): ReactElement =>
-  createComponent(<Button onPress={jest.fn} {...props} />, themeType);
-
-describe('[Button]', () => {
-  it('should render without crashing', () => {
-    testingLib = render(Component({}));
-
-    const json = testingLib.toJSON();
-    expect(json).toBeTruthy();
-  });
-
-  describe('Index', () => {
-    it('should render loading status', () => {
-      testingLib = render(Component({props: {loading: true}}));
-
-      expect(LoadingIndicator).toBeDefined();
-      expect(testingLib.getByTestId('loading-view')).toBeTruthy();
-    });
-
-    it('should render default disabled style when disabled', () => {
-      testingLib = render(Component({props: {disabled: true}}));
-
-      const loadingView = testingLib.getByTestId('button-container');
-      expect(loadingView).toHaveStyle({borderTopColor: light.text.disabled});
-    });
-  });
-
-  describe('Disabled', () => {
-    it('should render disabled status', () => {
-      testingLib = render(Component({props: {disabled: true}}));
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-
-    it('should render disabled status with disabled style', () => {
-      testingLib = render(
-        Component({
-          props: {
-            disabled: true,
-            styles: {
-              disabled: css`
-                background-color: yellow;
-              `,
-            },
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: 'yellow'});
-    });
-
-    it('should render container', () => {
-      testingLib = render(
-        Component({
-          props: {
-            styles: {
-              container: css`
-                background-color: blue;
-              `,
-            },
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: 'blue'});
-    });
-  });
-
-  describe('TextButton', () => {
-    it('renders text button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            testID: 'text-button',
-            type: 'text',
-          },
-        }),
-      );
-
-      const json = testingLib.toJSON();
-      expect(json).toBeTruthy();
-    });
-  });
-
-  it('should render start and end elements', () => {
-    testingLib = render(
-      Component({props: {startElement: <Text />, endElement: <Text />}}),
-    );
-
-    const button = testingLib.getByTestId('button-container');
-
-    // @ts-ignore
-    expect(button.findAllByType(Text)).toHaveLength(3);
-  });
-
-  describe('[Button] Interaction', () => {
-    let cnt = 1;
-
-    it('should simulate onPress', () => {
-      testingLib = render(
-        Component({
-          props: {
-            onPress: () => cnt++,
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-
-      fireEvent.press(button);
-
-      expect(cnt).toBe(2);
-    });
-  });
-
-  describe('[Button] color', () => {
-    it('should renders primary color', () => {
-      testingLib = render(Component({props: {color: 'primary'}}));
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: light.button.primary.bg});
-    });
-
-    it('should renders secondary color', () => {
-      testingLib = render(Component({props: {color: 'secondary'}}));
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({
-        backgroundColor: light.button.secondary.bg,
-      });
-    });
-
-    it('should renders success color', () => {
-      testingLib = render(Component({props: {color: 'success'}}));
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: light.button.success.bg});
-    });
-
-    it('should renders warning color', () => {
-      testingLib = render(Component({props: {color: 'warning'}}));
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: light.button.warning.bg});
-    });
-
-    it('renders danger color', () => {
-      testingLib = render(Component({props: {color: 'danger'}}));
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: light.button.danger.bg});
-    });
-
-    it('should renders info color', () => {
-      testingLib = render(Component({props: {color: 'info'}}));
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: light.button.info.bg});
-    });
-
-    it('should renders light color', () => {
-      testingLib = render(Component({props: {color: 'light'}}));
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: light.button.light.bg});
-    });
-  });
-
-  describe('[Button] - dark mode', () => {
-    it('should render button', () => {
-      testingLib = render(Component({themeType: 'dark'}));
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: dark.button.primary.bg});
-    });
-
-    it('should renders danger color', () => {
-      testingLib = render(
-        Component({
-          props: {
-            text: 'my-button',
-            color: 'danger',
-          },
-          themeType: 'dark',
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: dark.button.danger.bg});
-    });
-  });
-
-  describe('[Button] outlined', () => {
-    it('should render [type=outlined] button', () => {
-      testingLib = render(
-        Component({
-          props: {type: 'outlined'},
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: light.bg.basic});
-    });
-
-    it('should render [type=outlined] button with [color=primary]', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'primary',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({
-        backgroundColor: light.bg.basic,
-        borderBottomColor: light.button.primary.bg,
-      });
-    });
-
-    it('should render [type=outlined] button with [color=secondary]', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'secondary',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({
-        backgroundColor: light.bg.basic,
-        borderBottomColor: light.button.secondary.bg,
-      });
-    });
-
-    it('should render [type=outlined] button with [color=success]', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'success',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-
-      expect(button).toHaveStyle({
-        backgroundColor: light.bg.basic,
-        borderBottomColor: light.button.success.bg,
-      });
-    });
-
-    it('should render [type=outlined] button with [color=warning]', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'warning',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-
-
-      expect(button).toHaveStyle({
-        backgroundColor: light.bg.basic,
-        borderBottomColor: light.button.warning.bg,
-      });
-    });
-
-    it('should render [type=outlined] button with [color=danger]', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'danger',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-
-      expect(button).toHaveStyle({
-        backgroundColor: light.bg.basic,
-        borderBottomColor: light.button.danger.bg,
-      });
-    });
-
-    it('should render [type=outlined] button with [color=info]', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'info',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-
-      expect(button).toHaveStyle({
-        backgroundColor: light.bg.basic,
-        borderBottomColor: light.button.info.bg,
-      });
-    });
-
-    it('should render [type=outlined] button with [color=light]', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'light',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-
-      expect(button).toHaveStyle({
-        backgroundColor: light.bg.basic,
-        borderBottomColor: light.button.light.bg,
-      });
-    });
-
-    it('should render [type=outlined] `disabled` button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            disabled: true,
-            text: 'my-button',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-
-      const text = testingLib.getByText('my-button');
-      expect(text).toHaveStyle({color: light.button.disabled.text});
-    });
-  });
-
-  describe('Outlined - dark mode', () => {
-    it('should render [type=outlined] [color=primary] button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'primary',
-          },
-          themeType: 'dark',
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({borderBottomColor: dark.button.primary.bg});
-    });
-
-    it('should render [type=outlined] [color=secondary] button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'secondary',
-          },
-          themeType: 'dark',
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({
-        borderBottomColor: dark.button.secondary.bg,
-      });
-    });
-
-    it('should render [type=outlined] [color=success] button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'success',
-          },
-          themeType: 'dark',
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({borderBottomColor: dark.button.success.bg});
-    });
-
-    it('should render [type=outlined] [color=warning] button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'warning',
-          },
-          themeType: 'dark',
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({borderBottomColor: dark.button.warning.bg});
-    });
-
-    it('should render [type=outlined] [color=danger] button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'danger',
-          },
-          themeType: 'dark',
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({borderBottomColor: dark.button.danger.bg});
-    });
-
-    it('should [type=outlined] [color=light] button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'light',
-          },
-          themeType: 'dark',
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({borderBottomColor: dark.button.light.bg});
-    });
-
-    it('should render [type=outlined] [color=info] button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            color: 'info',
-          },
-          themeType: 'dark',
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({borderBottomColor: dark.button.info.bg});
-    });
-
-    it('should render [type=outlined] `disabled` button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            type: 'outlined',
-            disabled: true,
-            text: 'my-button',
-          },
-          themeType: 'dark',
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-
-      const text = testingLib.getByText('my-button');
-      expect(text).toHaveStyle({color: dark.button.disabled.text});
-    });
-  });
-
-  describe('[Button] sizes', () => {
-    it('should render [large] button', () => {
-      testingLib = render(
-        Component({
-          props: {size: 'large'},
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-    });
-
-    it('should render [small] button', () => {
-      testingLib = render(
-        Component({
-          props: {
-            size: 'small',
-            color: 'danger',
-          },
-          themeType: 'dark',
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-    });
-  });
-
-  describe('[Button] borderRadius', () => {
-    it('should render with given borderRadius', () => {
-      const borderRadius = 10;
-
-      testingLib = render(
-        Component({
-          props: {
-            borderRadius: borderRadius,
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({borderRadius: borderRadius});
-    });
-  });
-
-  describe('[Button] accessibility', () => {
-    it('should have accessibilityRole="button"', () => {
-      testingLib = render(
-        Component({
-          props: {
-            testID: 'a11y-button',
-            text: 'Click me',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('a11y-button');
-      expect(button.props.accessibilityRole).toBe('button');
-    });
-
-    it('should use text as default accessibilityLabel', () => {
-      testingLib = render(
-        Component({
-          props: {
-            testID: 'a11y-button',
-            text: 'Submit',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('a11y-button');
-      expect(button.props.accessibilityLabel).toBe('Submit');
-    });
-
-    it('should use custom accessibilityLabel when provided', () => {
-      testingLib = render(
-        Component({
-          props: {
-            testID: 'a11y-button',
-            text: 'Submit',
-            accessibilityLabel: 'Submit form',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('a11y-button');
-      expect(button.props.accessibilityLabel).toBe('Submit form');
-    });
-
-    it('should have undefined accessibilityLabel when text is ReactElement', () => {
-      testingLib = render(
-        Component({
-          props: {
-            testID: 'a11y-button',
-            text: <Text>Custom</Text>,
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('a11y-button');
-      expect(button.props.accessibilityLabel).toBeUndefined();
-    });
-
-    it('should allow custom accessibilityLabel with ReactElement text', () => {
-      testingLib = render(
-        Component({
-          props: {
-            testID: 'a11y-button',
-            text: <Text>Custom</Text>,
-            accessibilityLabel: 'Custom button',
-          },
-        }),
-      );
-
-      const button = testingLib.getByTestId('a11y-button');
-      expect(button.props.accessibilityLabel).toBe('Custom button');
-    });
-  });
-
-  describe('[Button] custom theme', () => {
-    it('should render with custom primary color from theme', () => {
-      const customTheme = {
-        light: {
-          button: {
-            primary: {
-              bg: '#FF5733',
-              text: '#FFFFFF',
-            },
-          },
-        },
-      };
-
-      testingLib = render(
-        <ThemeProvider customTheme={customTheme}>
-          <Button color="primary" onPress={jest.fn} testID="custom-button" />
-        </ThemeProvider>,
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: '#FF5733'});
-    });
-
-    it('should render with custom primary color in dark mode', () => {
-      const customTheme = {
-        dark: {
-          button: {
-            primary: {
-              bg: '#00BFFF',
-              text: '#000000',
-            },
-          },
-        },
-      };
-
-      testingLib = render(
-        <ThemeProvider initialThemeType="dark" customTheme={customTheme}>
-          <Button color="primary" onPress={jest.fn} testID="custom-button" />
-        </ThemeProvider>,
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({backgroundColor: '#00BFFF'});
-    });
-
-    it('should render outlined button with custom primary color', () => {
-      const customTheme = {
-        light: {
-          button: {
-            primary: {
-              bg: '#9C27B0',
-              text: '#FFFFFF',
-            },
-          },
-        },
-      };
-
-      testingLib = render(
-        <ThemeProvider customTheme={customTheme}>
-          <Button
-            type="outlined"
-            color="primary"
-            onPress={jest.fn}
-            testID="custom-button"
-          />
-        </ThemeProvider>,
-      );
-
-      const button = testingLib.getByTestId('button-container');
-      expect(button).toHaveStyle({borderBottomColor: '#9C27B0'});
-    });
-  });
-});