@hero-design/rn 7.12.1 → 7.14.0

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

@@ -0,0 +1,109 @@
+import { FlatList, Text } from 'react-native';
+import React from 'react';
+
+import {
+  act,
+  fireEvent,
+  render,
+  RenderAPI,
+} from '@testing-library/react-native';
+import MentionList from '../MentionList';
+import { emitter as editorEventEmitter } from '../EditorEvent';
+import * as Events from '../utils/events';
+
+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 (
+    <FlatList
+      keyboardShouldPersistTaps="handled"
+      data={filteredData}
+      renderItem={({ item }) => (
+        <Text onPress={() => onSelect(item.id, item.name)}>{item.name}</Text>
+      )}
+    />
+  );
+};
+
+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(() => {
+      wrapper = render(
+        <MentionList
+          name="give-shout-out"
+          render={(
+            searchValue: string,
+            onSelect: (id: string, name: string) => void
+          ) => <SuggestionList searchValue={searchValue} onSelect={onSelect} />}
+        />
+      );
+      act(() => {
+        editorEventEmitter.emit('give-shout-out/mention-search', {
+          search: 'Hieu',
+          target: 'give-shout-out',
+        });
+      });
+    });
+
+    it('should render mention list showing filtered results', () => {
+      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: any) => {
+              result.push(data);
+            }
+          );
+        });
+        fireEvent(wrapper.getByText('Hieu Pham'), 'press');
+        expect(result).toMatchObject([
+          { id: '3', name: 'Hieu Pham', target: 'give-shout-out' },
+        ]);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,245 @@
+import React, {
+  ComponentType,
+  forwardRef,
+  ReactElement,
+  useEffect,
+} from 'react';
+
+import { act, RenderAPI } from '@testing-library/react-native';
+
+import { View } from 'react-native';
+import { ThemeProvider } from '@emotion/react';
+import * as Events from '../utils/events';
+import { emitter as EditorEventEmitter } from '../EditorEvent';
+import RichTextEditor from '../RichTextEditor';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { theme } from '../../../index';
+
+type OnMessageCallback = (event: {
+  nativeEvent: { data: string };
+}) => void | undefined;
+
+interface MockWebViewProps {
+  onMessage: OnMessageCallback;
+  children: ReactElement;
+}
+
+let onMessageOfLatestRendering: OnMessageCallback;
+
+jest.mock('react-native-webview', () => {
+  const MockWebView: ComponentType<{
+    onMessage: OnMessageCallback;
+    children: ReactElement;
+  }> = forwardRef<View, MockWebViewProps>(
+    ({ onMessage, ...restProps }, ref) => {
+      useEffect(() => {
+        onMessageOfLatestRendering = onMessage;
+      });
+      return <View ref={ref} testID="webview" {...restProps} />;
+    }
+  );
+
+  return {
+    WebView: MockWebView,
+    default: MockWebView,
+  };
+});
+
+const postMessageMock = jest.fn();
+jest.mock('../utils/rnWebView', () => ({
+  postMessage: (_element: ReactElement, message: string) => {
+    postMessageMock(message);
+  },
+}));
+
+describe('RichTextEditor', () => {
+  it('should render correctly', () => {
+    const wrapper = renderWithTheme(
+      <RichTextEditor
+        name="rich-text-editor"
+        label="Rich Text Editor"
+        onChange={jest.fn()}
+        onCursorChange={jest.fn()}
+        error="this is error"
+        style={{ backgroundColor: 'yellow' }}
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.queryAllByText('this is error')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('webview')).toHaveLength(1);
+    expect(wrapper.queryByTestId('webview')).toHaveStyle({
+      backgroundColor: 'yellow',
+    });
+  });
+
+  describe('onMessage', () => {
+    const onChangeMock = jest.fn();
+    const onCursorChangeMock = jest.fn();
+    let wrapper: RenderAPI;
+
+    beforeEach(() => {
+      wrapper = renderWithTheme(
+        <RichTextEditor
+          name="rich-text-editor"
+          label="Rich Text Editor"
+          onChange={onChangeMock}
+          onCursorChange={onCursorChangeMock}
+          error="this is error"
+          style={{ backgroundColor: 'yellow' }}
+        />
+      );
+    });
+
+    describe('recevied event editor-focus', () => {
+      it('should emit correct data', () => {
+        const emittedEvents: string[] = [];
+        Events.on(EditorEventEmitter, 'rich-text-editor/editor-focus', () => {
+          emittedEvents.push('called');
+        });
+        onMessageOfLatestRendering({
+          nativeEvent: {
+            data: '{"type": "@hero-editor/webview/editor-focus", "data" : {}}',
+          },
+        });
+        expect(emittedEvents).toMatchObject(['called']);
+      });
+    });
+
+    describe('recevied event editor-blur', () => {
+      it('should emit correct data', () => {
+        const emittedEvents: string[] = [];
+        Events.on(EditorEventEmitter, 'rich-text-editor/editor-blur', () => {
+          emittedEvents.push('called');
+        });
+        onMessageOfLatestRendering({
+          nativeEvent: {
+            data: '{"type": "@hero-editor/webview/editor-blur", "data" : {}}',
+          },
+        });
+        expect(emittedEvents).toMatchObject(['called']);
+      });
+    });
+
+    describe('recevied event mention-search', () => {
+      it('should emit correct data', () => {
+        const emittedEvents: string[] = [];
+        Events.on(EditorEventEmitter, 'rich-text-editor/mention-search', () => {
+          emittedEvents.push('called');
+        });
+        onMessageOfLatestRendering({
+          nativeEvent: {
+            data:
+              '{"type": "@hero-editor/webview/mention-search", "data" : {}}',
+          },
+        });
+        expect(emittedEvents).toMatchObject(['called']);
+      });
+    });
+
+    describe('recevied event editor-change', () => {
+      beforeEach(() => {
+        onChangeMock.mockReset();
+      });
+
+      it('should call onChange', () => {
+        onMessageOfLatestRendering({
+          nativeEvent: {
+            data:
+              '{"type": "@hero-editor/webview/editor-change", "data" : { "value": "text"}}',
+          },
+        });
+        expect(onChangeMock).lastCalledWith('text');
+      });
+    });
+
+    describe('recevied event cursor-change', () => {
+      beforeEach(() => {
+        onCursorChangeMock.mockReset();
+      });
+
+      it('should call onCursorChange', () => {
+        onMessageOfLatestRendering({
+          nativeEvent: {
+            data:
+              '{"type": "@hero-editor/webview/cursor-change", "data" : { "position": 32}}',
+          },
+        });
+        expect(onCursorChangeMock).lastCalledWith({ position: 32 });
+      });
+    });
+
+    describe('recevied event editor-layout', () => {
+      it('should update height', () => {
+        act(() => {
+          onMessageOfLatestRendering({
+            nativeEvent: {
+              data:
+                '{"type": "@hero-editor/webview/editor-layout", "data" : { "width": 320, "height": 480}}',
+            },
+          });
+        });
+
+        wrapper.update(
+          <ThemeProvider theme={theme}>
+            <RichTextEditor
+              onChange={jest.fn()}
+              label="Rich Text Editor"
+              name="rich-text-editor"
+              error="this is error"
+              style={{ backgroundColor: 'yellow' }}
+            />
+          </ThemeProvider>
+        );
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+        expect(wrapper.getByTestId('webview')).toHaveStyle({ height: 480 });
+      });
+    });
+  });
+
+  describe('postMessageToWebview', () => {
+    const onChangeMock = jest.fn();
+    const onCursorChangeMock = jest.fn();
+
+    beforeEach(() => {
+      postMessageMock.mockReset();
+      renderWithTheme(
+        <RichTextEditor
+          label="Rich Text Editor"
+          name="rich-text-editor"
+          onChange={onChangeMock}
+          onCursorChange={onCursorChangeMock}
+          error="this is error"
+          style={{ backgroundColor: 'yellow' }}
+        />
+      );
+    });
+
+    it.each`
+      emittedEventName                    | data           | expectedMessageType                     | expectedMessageData
+      ${'rich-text-editor/bold'}          | ${null}        | ${'@hero-editor/webview/bold'}          | ${null}
+      ${'rich-text-editor/italic'}        | ${null}        | ${'@hero-editor/webview/italic'}        | ${null}
+      ${'rich-text-editor/underline'}     | ${null}        | ${'@hero-editor/webview/underline'}     | ${null}
+      ${'rich-text-editor/bulleted-list'} | ${null}        | ${'@hero-editor/webview/bulleted-list'} | ${null}
+      ${'rich-text-editor/numbered-list'} | ${null}        | ${'@hero-editor/webview/numbered-list'} | ${null}
+      ${'rich-text-editor/heading-one'}   | ${null}        | ${'@hero-editor/webview/heading-one'}   | ${null}
+      ${'rich-text-editor/heading-two'}   | ${null}        | ${'@hero-editor/webview/heading-two'}   | ${null}
+      ${'rich-text-editor/mention-apply'} | ${'Minh Dinh'} | ${'@hero-editor/webview/mention-apply'} | ${'Minh Dinh'}
+    `(
+      'Events emit $emittedEventName should postMessage $expectedMessageType',
+      ({
+        emittedEventName,
+        data,
+        expectedMessageType,
+        expectedMessageData,
+      }) => {
+        EditorEventEmitter.emit(emittedEventName, data);
+        expect(postMessageMock).toHaveBeenCalledWith({
+          data: expectedMessageData,
+          type: expectedMessageType,
+        });
+      }
+    );
+  });
+});

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

@@ -0,0 +1,324 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#fafbfb",
+        "borderTopColor": "#dadbde",
+        "borderTopWidth": 0.5,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      },
+      undefined,
+    ]
+  }
+  testID="toolbar"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "height": 48,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 48,
+      }
+    }
+    testID="format-bold"
+  >
+    <HeroIcon
+      name="format-bold"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "height": 48,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 48,
+      }
+    }
+    testID="format-italic"
+  >
+    <HeroIcon
+      name="format-italic"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "height": 48,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 48,
+      }
+    }
+    testID="format-underlined"
+  >
+    <HeroIcon
+      name="format-underlined"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#dadbde",
+          "flexDirection": "row",
+          "height": 16,
+          "marginHorizontal": 8,
+          "width": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "height": 48,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 48,
+      }
+    }
+    testID="format-list-bulleted"
+  >
+    <HeroIcon
+      name="format-list-bulleted"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "height": 48,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 48,
+      }
+    }
+    testID="format-list-numbered"
+  >
+    <HeroIcon
+      name="format-list-numbered"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#dadbde",
+          "flexDirection": "row",
+          "height": 16,
+          "marginHorizontal": 8,
+          "width": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "height": 48,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 48,
+      }
+    }
+    testID="format-heading1"
+  >
+    <HeroIcon
+      name="format-heading1"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "height": 48,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 48,
+      }
+    }
+    testID="format-heading2"
+  >
+    <HeroIcon
+      name="format-heading2"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+</View>
+`;