@hero-design/rn-work-uikit 1.9.5 → 1.10.0

package/src/components/FormGroup/__tests__/index.spec.tsx

@@ -1,319 +0,0 @@
-import React from 'react';
-import { within } from '@testing-library/react-native';
-import theme from '../../../theme';
-import TextInput from '../../TextInput';
-import Select from '../../Select';
-import DatePicker from '../../DatePicker';
-import TimePicker from '../../TimePicker';
-import RichTextEditor from '../../RichTextEditor';
-import FormGroup from '..';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import { noop } from '../../../utils/functions';
-
-describe('FormGroup', () => {
-  it('should render', () => {
-    const { getByText, getByTestId, toJSON } = renderWithTheme(
-      <FormGroup>
-        <TextInput label="Text Input 1" value="Text Input 1" required />
-        <TextInput
-          label="Text Input 2"
-          value="Text Input 2"
-          error="This is an error"
-          testID="text-input-2"
-        />
-        <TextInput label="Text Input 3" value="Text Input 3" required />
-      </FormGroup>
-    );
-
-    expect(toJSON()).toMatchSnapshot('xxx');
-
-    expect(getByText('Text Input 1')).toBeVisible();
-    expect(getByText('Text Input 2', { exact: false })).toBeVisible();
-    expect(
-      within(getByTestId('text-input-2')).getByText('(Optional)', {
-        exact: false,
-      })
-    ).toBeVisible();
-    expect(getByText('This is an error')).toBeVisible();
-    expect(getByText('Text Input 3')).toBeVisible();
-  });
-
-  it('renders with correct border styling', () => {
-    const { getByTestId } = renderWithTheme(
-      <FormGroup>
-        <TextInput value="Text Input 1" testID="text-input-1" />
-        <TextInput value="Text Input 2" testID="text-input-2" />
-        <TextInput value="Text Input 3" testID="text-input-3" />
-      </FormGroup>
-    );
-
-    expect(
-      within(getByTestId('text-input-1'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-        }),
-      ])
-    );
-
-    expect(
-      within(getByTestId('text-input-2'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderRadius: 0,
-        }),
-      ])
-    );
-
-    expect(
-      within(getByTestId('text-input-3'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-        }),
-      ])
-    );
-  });
-
-  it('merges with the children styles in correct order', () => {
-    const { getByTestId } = renderWithTheme(
-      <FormGroup>
-        <TextInput
-          value="Text Input 1"
-          testID="text-input-1"
-          textStyle={{
-            borderColor: '#ffffff',
-            borderWidth: 1,
-          }}
-        />
-        <TextInput
-          value="Text Input 2"
-          testID="text-input-2"
-          style={{ width: 300 }}
-        />
-      </FormGroup>
-    );
-
-    // Merging text styles
-    expect(
-      within(getByTestId('text-input-1'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          // Passed style
-          borderWidth: 1,
-          borderColor: '#ffffff',
-          // Injected style
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-        }),
-      ])
-    );
-
-    // Merging container styles
-    expect(getByTestId('text-input-2').props.style.flat()).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          // Passed style
-          width: 300,
-          // Injected style
-          marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
-        }),
-      ])
-    );
-
-    expect(
-      within(getByTestId('text-input-2'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          // Injected style
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-        }),
-      ])
-    );
-  });
-
-  it('does not alter the children styles if there is only one child', () => {
-    const { getByTestId } = renderWithTheme(
-      <FormGroup>
-        <TextInput
-          value="Text Input 1"
-          testID="text-input-1"
-          style={{
-            marginTop: theme.space.medium,
-          }}
-        />
-      </FormGroup>
-    );
-
-    // Container style is not injected
-    expect(getByTestId('text-input-1').props.style.flat()).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          // Passed style instead of injected style
-          marginTop: theme.space.medium,
-        }),
-      ])
-    );
-
-    // Border style is not injected
-    const internalBorderStyle =
-      getByTestId('text-input-border').props.style.flat();
-    const borderKeys = Object.keys(internalBorderStyle).filter((key) =>
-      key.startsWith('border')
-    );
-    expect(borderKeys).toHaveLength(0);
-  });
-
-  it('renders all component types (TextInput, Select, Select.Multi, DatePicker, TimePicker, RichTextEditor) with correct styles', () => {
-    const { getByTestId } = renderWithTheme(
-      <FormGroup>
-        <TextInput
-          label="Text Input"
-          value="Text Input"
-          testID="mixed-text-input"
-        />
-        <DatePicker
-          label="Date Picker"
-          value={new Date('1995-12-17T00:00:00.000Z')}
-          testID="mixed-date-picker"
-          onChange={noop}
-          confirmLabel="Confirm"
-        />
-        <TimePicker
-          label="Time Picker"
-          value={new Date('December 17, 1995 03:24:00')}
-          testID="mixed-time-picker"
-          onChange={noop}
-          confirmLabel="Confirm"
-        />
-        <RichTextEditor
-          label="Rich Text Editor"
-          value={[{ type: 'paragraph', children: [{ text: 'Content' }] }]}
-          onChange={noop}
-          name="mixed-rich-text-editor"
-          testID="mixed-rich-text-editor"
-        />
-        <Select
-          label="Single Select"
-          value="option1"
-          testID="mixed-select"
-          onConfirm={noop}
-          options={[
-            { text: 'Option 1', value: 'option1' },
-            { text: 'Option 2', value: 'option2' },
-          ]}
-        />
-        <Select.Multi
-          label="Multi Select"
-          value={['option1', 'option2']}
-          testID="mixed-select-multi"
-          onConfirm={noop}
-          footerLabel="Confirm"
-          options={[
-            { text: 'Option 1', value: 'option1' },
-            { text: 'Option 2', value: 'option2' },
-            { text: 'Option 3', value: 'option3' },
-          ]}
-        />
-      </FormGroup>
-    );
-
-    // TextInput should have top border radius removed (first component)
-    expect(
-      within(getByTestId('mixed-text-input'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-        }),
-      ])
-    );
-
-    // DatePicker should have no border radius (middle component)
-    expect(
-      within(getByTestId('mixed-date-picker'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderRadius: 0,
-        }),
-      ])
-    );
-
-    // TimePicker should have no border radius (middle component)
-    expect(
-      within(getByTestId('mixed-time-picker'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderRadius: 0,
-        }),
-      ])
-    );
-
-    // RichTextEditor should have no border radius (middle component)
-    expect(
-      within(getByTestId('mixed-rich-text-editor'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderRadius: 0,
-        }),
-      ])
-    );
-
-    // Select should have no border radius (middle component)
-    expect(
-      within(getByTestId('mixed-select'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderRadius: 0,
-        }),
-      ])
-    );
-
-    // Select.Multi should have bottom border radius removed (last component)
-    expect(
-      within(getByTestId('mixed-select-multi'))
-        .getByTestId('text-input-border')
-        .props.style.flat()
-    ).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-        }),
-      ])
-    );
-  });
-});

package/src/components/FormGroup/__tests__/utils.spec.ts

@@ -1,73 +0,0 @@
-import theme from '../../../theme';
-import { generateBorderStyle, generateMarginStyle } from '../utils';
-
-describe('utils', () => {
-  describe('generateBorderStyle', () => {
-    it('should generate the correct border style for the first child', () => {
-      const borderStyle = generateBorderStyle({ index: 0, length: 3 });
-      expect(borderStyle).toEqual({
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-      });
-    });
-
-    it('should generate the correct border style for the last child', () => {
-      const borderStyle = generateBorderStyle({ index: 2, length: 3 });
-      expect(borderStyle).toEqual({
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 0,
-      });
-    });
-
-    it('should generate the correct border style for the middle child', () => {
-      const borderStyle = generateBorderStyle({ index: 1, length: 3 });
-      expect(borderStyle).toEqual({
-        borderRadius: 0,
-      });
-    });
-  });
-
-  describe('generateMarginStyle', () => {
-    it('should generate the correct margin style for the first child', () => {
-      const marginStyle = generateMarginStyle({
-        index: 0,
-        length: 3,
-        theme,
-      });
-      expect(marginStyle).toEqual({
-        marginTop: 0,
-      });
-    });
-
-    it('should generate the correct margin style for the last child', () => {
-      const marginStyle = generateMarginStyle({
-        index: 2,
-        length: 3,
-        theme,
-      });
-      expect(marginStyle).toEqual({
-        marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
-      });
-    });
-
-    it('should generate the correct margin style for the middle child', () => {
-      const marginStyle = generateMarginStyle({
-        index: 1,
-        length: 3,
-        theme,
-      });
-      expect(marginStyle).toEqual({
-        marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
-      });
-    });
-
-    it('should generate the correct margin style for a single child', () => {
-      const marginStyle = generateMarginStyle({
-        index: 0,
-        length: 1,
-        theme,
-      });
-      expect(marginStyle).toEqual({});
-    });
-  });
-});

package/src/components/RichTextEditor/__tests__/EditorToolbar.spec.tsx

@@ -1,154 +0,0 @@
-import React from 'react';
-import { act, fireEvent, waitFor } from '@testing-library/react-native';
-import type { RenderAPI } from '@testing-library/react-native';
-import EditorToolbar from '../EditorToolbar';
-import { emitter as editorEventEmitter } from '../EditorEvent';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import { theme } from '../../../index';
-import * as Events from '../utils/events';
-
-describe('EditorToolbar', () => {
-  it('should not render toolbar when the editor is not focused', () => {
-    const wrapper = renderWithTheme(
-      <EditorToolbar testID="editor-toolbar" name="toolbar" />
-    );
-    const toolbar = wrapper.queryByTestId('editor-toolbar');
-    expect(toolbar).toBeNull();
-  });
-
-  describe('when the editor is focused', () => {
-    let wrapper: RenderAPI;
-
-    beforeEach(async () => {
-      wrapper = renderWithTheme(
-        <EditorToolbar name="toolbar" testID="toolbar" />
-      );
-      act(() => {
-        editorEventEmitter.emit('toolbar/editor-focus');
-      });
-      await waitFor(() => wrapper.getByTestId('toolbar'));
-    });
-
-    it('should render toolbar', async () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
-
-      [
-        'format-bold',
-        'format-italic',
-        'format-underlined',
-        'format-list-bulleted',
-        'format-list-numbered',
-        'format-heading1',
-        'format-heading2',
-      ].forEach((testId) => {
-        expect(wrapper.queryAllByTestId(testId)).toHaveLength(1);
-      });
-    });
-
-    it('should hide toolbar when blur', async () => {
-      act(() => {
-        editorEventEmitter.emit('toolbar/editor-blur');
-      });
-      await waitFor(() => wrapper.queryAllByTestId('toolbar').length === 0);
-      expect(wrapper.queryAllByTestId('toolbar')).toHaveLength(0);
-    });
-
-    describe("should change button's background color when pressing", () => {
-      it('should send event and highlight buttons correctly', () => {
-        const emittedEvents: string[] = [];
-
-        const eventNameAndTestIDArray = [
-          {
-            eventName: 'toolbar/bold',
-            testID: 'format-bold',
-          },
-          {
-            eventName: 'toolbar/italic',
-            testID: 'format-italic',
-          },
-          {
-            eventName: 'toolbar/underline',
-            testID: 'format-underlined',
-          },
-          {
-            eventName: 'toolbar/bulleted-list',
-            testID: 'format-list-bulleted',
-          },
-          {
-            eventName: 'toolbar/numbered-list',
-            testID: 'format-list-numbered',
-          },
-          {
-            eventName: 'toolbar/heading-one',
-            testID: 'format-heading1',
-          },
-          {
-            eventName: 'toolbar/heading-two',
-            testID: 'format-heading2',
-          },
-        ];
-
-        eventNameAndTestIDArray.forEach(({ eventName, testID }) => {
-          Events.on(editorEventEmitter, eventName, () => {
-            emittedEvents.push(testID);
-          });
-
-          expect(wrapper.getByTestId(testID)).toHaveStyle({
-            backgroundColor: undefined,
-          });
-
-          fireEvent(wrapper.getByTestId(testID), 'press');
-        });
-
-        const standaloneButtonTestIDs = [
-          'format-list-bulleted',
-          'format-list-numbered',
-          'format-heading1',
-        ];
-        standaloneButtonTestIDs.forEach((testID) => {
-          expect(wrapper.getByTestId(testID)).toHaveStyle({
-            backgroundColor: undefined,
-          });
-        });
-
-        expect(emittedEvents).toMatchObject([
-          'format-bold',
-          'format-italic',
-          'format-underlined',
-          'format-list-bulleted',
-          'format-list-numbered',
-          'format-heading1',
-          'format-heading2',
-        ]);
-      });
-
-      it('should highlight buttons correctly', async () => {
-        act(() => {
-          editorEventEmitter.emit('toolbar/editor-change', {
-            toolbarState: {
-              bold: true,
-              italic: true,
-              underline: true,
-              'heading-one': true,
-            },
-          });
-        });
-
-        [
-          'format-bold',
-          'format-italic',
-          'format-underlined',
-          'format-heading1',
-        ].forEach(async (testID) => {
-          await waitFor(() => {
-            expect(wrapper.getByTestId(testID)).toHaveStyle({
-              backgroundColor:
-                theme.__hd__.richTextEditor.colors
-                  .toolbarButtonSelectedBackground,
-            });
-          });
-        });
-      });
-    });
-  });
-});

package/src/components/RichTextEditor/__tests__/MentionList.spec.tsx

@@ -1,105 +0,0 @@
-import type { RenderAPI } from '@testing-library/react-native';
-import { act, fireEvent, render } from '@testing-library/react-native';
-import React from 'react';
-import { Text, View } from 'react-native';
-import { emitter as editorEventEmitter } from '../EditorEvent';
-import MentionList from '../MentionList';
-import * as Events from '../utils/events';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-
-const SuggestionListData: Array<{ id: string; name: string }> = [
-  { id: '1', name: 'Kien Tran' },
-  { id: '2', name: 'Minh Dinh' },
-  { id: '3', name: 'Hieu Pham' },
-  { id: '4', name: 'Hau' },
-  { id: '5', name: 'Tung Ten' },
-  { id: '6', name: 'Thong Quach' },
-];
-
-const SuggestionList = ({
-  searchValue,
-  onSelect,
-}: {
-  searchValue: string;
-  onSelect: (id: string, name: string) => void;
-}) => {
-  const filteredData = SuggestionListData.filter((item) =>
-    item.name.includes(searchValue)
-  );
-
-  return (
-    <View>
-      {filteredData.map((item) => (
-        <Text key={item.id} onPress={() => onSelect(item.id, item.name)}>
-          {item.name}
-        </Text>
-      ))}
-    </View>
-  );
-};
-
-describe('MentionList', () => {
-  describe('when search string is empty', () => {
-    it('should not render mention list', () => {
-      const wrapper = render(
-        <MentionList
-          name="give-shout-out"
-          render={() => <Text>Mention List</Text>}
-        />
-      );
-
-      expect(wrapper.toJSON()).toBeNull();
-    });
-  });
-
-  describe('when search string is not empty', () => {
-    let wrapper: RenderAPI;
-
-    beforeEach(async () => {
-      wrapper = renderWithTheme(
-        <MentionList
-          name="give-shout-out"
-          render={(
-            searchValue: string,
-            onSelect: (id: string, name: string) => void
-          ) => <SuggestionList searchValue={searchValue} onSelect={onSelect} />}
-        />
-      );
-      await act(() => {
-        editorEventEmitter.emit('give-shout-out/mention-search', {
-          search: 'Hieu',
-          target: 'give-shout-out',
-        });
-      });
-    });
-
-    it('should render mention list showing filtered results', async () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
-      expect(wrapper.queryAllByText('Hieu Pham')).toHaveLength(1);
-      expect(wrapper.queryAllByText('Kien Tran')).toHaveLength(0);
-      expect(wrapper.queryAllByText('Minh Dinh')).toHaveLength(0);
-      expect(wrapper.queryAllByText('Hau')).toHaveLength(0);
-      expect(wrapper.queryAllByText('Tung Teng')).toHaveLength(0);
-      expect(wrapper.queryAllByText('Thong Quach')).toHaveLength(0);
-    });
-
-    describe('onPress suggesstion item', () => {
-      it('should emit action metion-only', () => {
-        const result: { id: string; name: string; target: string }[] = [];
-        act(() => {
-          Events.on(
-            editorEventEmitter,
-            'give-shout-out/mention-apply',
-            (data: { id: string; name: string; target: string }) => {
-              result.push(data);
-            }
-          );
-        });
-        fireEvent(wrapper.getByText('Hieu Pham'), 'press');
-        expect(result).toMatchObject([
-          { id: '3', name: 'Hieu Pham', target: 'give-shout-out' },
-        ]);
-      });
-    });
-  });
-});