react-native-gifted-chat 2.8.1 → 2.8.2-alpha.1

package/src/__tests__/GiftedChat.test.tsx

@@ -1,6 +1,5 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { GiftedChat } from '../GiftedChat'
 import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
@@ -18,25 +17,42 @@ const messages = [
 ]
 
 it('should render <GiftedChat/> and compare with snapshot', () => {
-  let tree
-
-  renderer.act(() => {
-    (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
-      height: {
-        value: 0,
-      },
-    })
-
-    tree = renderer.create(
-      <GiftedChat
-        messages={messages}
-        onSend={() => {}}
-        user={{
-          _id: 1,
-        }}
-      />
-    )
+  (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
+    height: {
+      value: 0,
+    },
+  })
+
+  const { toJSON } = render(
+    <GiftedChat
+      messages={messages}
+      onSend={() => {}}
+      user={{
+        _id: 1,
+      }}
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
+})
+
+it('should render <GiftedChat/> with disableKeyboardController=true', () => {
+  (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
+    height: {
+      value: 0,
+    },
   })
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  const { toJSON } = render(
+    <GiftedChat
+      messages={messages}
+      onSend={() => {}}
+      user={{
+        _id: 1,
+      }}
+      disableKeyboardController={true}
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/InputToolbar.test.tsx

@@ -1,11 +1,10 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { InputToolbar } from '../GiftedChat'
 
 it('should render <InputToolbar /> and compare with snapshot', () => {
-  const tree = renderer.create(<InputToolbar />).toJSON()
+  const { toJSON } = render(<InputToolbar />)
 
-  expect(tree).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/LoadEarlier.test.tsx

@@ -1,11 +1,10 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { LoadEarlier } from '../GiftedChat'
 
 it('should render <LoadEarlier /> and compare with snapshot', () => {
-  const tree = renderer.create(<LoadEarlier />).toJSON()
+  const { toJSON } = render(<LoadEarlier />)
 
-  expect(tree).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/Message.test.tsx

@@ -1,80 +1,73 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Message } from '../GiftedChat'
 
 describe('Message component', () => {
   it('should render <Message /> and compare with snapshot', () => {
-    const tree = renderer
-      .create(
-        <Message
-          key='123'
-          user={{ _id: 1 }}
-          currentMessage={{
-            _id: 1,
-            text: 'test',
-            createdAt: 1554744013721,
-            user: { _id: 1 },
-          }}
-          position='left'
-        />
-      )
-      .toJSON()
+    const { toJSON } = render(
+      <Message
+        key='123'
+        user={{ _id: 1 }}
+        currentMessage={{
+          _id: 1,
+          text: 'test',
+          createdAt: 1554744013721,
+          user: { _id: 1 },
+        }}
+        position='left'
+      />
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should NOT render <Message />', () => {
-    const tree = renderer
-      .create(<Message key='123' user={{ _id: 1 }} currentMessage={null} position='left' />)
-      .toJSON()
+    const { toJSON } = render(
+      <Message key='123' user={{ _id: 1 }} currentMessage={null} position='left' />
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render <Message /> with Avatar', () => {
-    const tree = renderer
-      .create(
-        <Message
-          key='123'
-          user={{ _id: 1 }}
-          currentMessage={{
-            _id: 1,
-            text: 'test',
-            createdAt: 1554744013721,
-            user: { _id: 1 },
-          }}
-          position='left'
-          showUserAvatar
-        />
-      )
-      .toJSON()
+    const { toJSON } = render(
+      <Message
+        key='123'
+        user={{ _id: 1 }}
+        currentMessage={{
+          _id: 1,
+          text: 'test',
+          createdAt: 1554744013721,
+          user: { _id: 1 },
+        }}
+        position='left'
+        showUserAvatar
+      />
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render null if user has no Avatar', () => {
-    const tree = renderer
-      .create(
-        <Message
-          key='123'
-          user={{ _id: 1 }}
-          currentMessage={{
+    const { toJSON } = render(
+      <Message
+        key='123'
+        user={{ _id: 1 }}
+        currentMessage={{
+          _id: 1,
+          text: 'test',
+          createdAt: 1554744013721,
+          user: {
             _id: 1,
-            text: 'test',
-            createdAt: 1554744013721,
-            user: {
-              _id: 1,
-              avatar: null,
-            },
-          }}
-          position='left'
-          showUserAvatar
-        />
-      )
-      .toJSON()
+            avatar: null,
+          },
+        }}
+        position='left'
+        showUserAvatar
+      />
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/MessageContainer.test.tsx

@@ -1,11 +1,45 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { MessageContainer } from '../GiftedChat'
+import { DEFAULT_TEST_MESSAGE } from './data'
 
-it('should render <MessageContainer /> and compare with snapshot', () => {
-  const tree = renderer.create(<MessageContainer />).toJSON()
+it('should render <MessageContainer /> without crashing', () => {
+  render(
+    <MessageContainer
+      messages={[DEFAULT_TEST_MESSAGE]}
+      user={{ _id: 'test' }}
+    />
+  )
 
-  expect(tree).toMatchSnapshot()
+  // Just verify it renders without throwing
+  expect(() => render(
+    <MessageContainer
+      messages={[DEFAULT_TEST_MESSAGE]}
+      user={{ _id: 'test' }}
+    />
+  )).not.toThrow()
+})
+
+it('should render <MessageContainer /> with multiple messages', () => {
+  const messages = [
+    { ...DEFAULT_TEST_MESSAGE, _id: 'test1' },
+    { ...DEFAULT_TEST_MESSAGE, _id: 'test2' },
+  ]
+
+  expect(() => render(
+    <MessageContainer
+      messages={messages}
+      user={{ _id: 'test' }}
+    />
+  )).not.toThrow()
+})
+
+it('should render <MessageContainer /> with empty messages', () => {
+  expect(() => render(
+    <MessageContainer
+      messages={[]}
+      user={{ _id: 'test' }}
+    />
+  )).not.toThrow()
 })

package/src/__tests__/MessageImage.test.tsx

@@ -1,27 +1,24 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { MessageImage } from '../GiftedChat'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('MessageImage', () => {
   it('should not render <MessageImage /> and compare with snapshot', () => {
-    const tree = renderer.create(<MessageImage />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(<MessageImage />)
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should  render <MessageImage /> and compare with snapshot', () => {
-    const tree = renderer
-      .create(
-        <MessageImage
-          currentMessage={{
-            ...DEFAULT_TEST_MESSAGE,
-            image: 'url://to/image.png',
-          }}
-        />
-      )
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(
+      <MessageImage
+        currentMessage={{
+          ...DEFAULT_TEST_MESSAGE,
+          image: 'url://to/image.png',
+        }}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/MessageText.test.tsx

@@ -1,11 +1,14 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { MessageText } from '../GiftedChat'
 
 it('should render <MessageText /> and compare with snapshot', () => {
-  const tree = renderer.create(<MessageText />).toJSON()
+  const { toJSON } = render(
+    <MessageText
+      currentMessage={{ _id: 1, createdAt: new Date(), text: 'test message' }}
+    />
+  )
 
-  expect(tree).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/Send.test.tsx

@@ -1,22 +1,21 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Send } from '../GiftedChat'
 
 describe('Send', () => {
   it('should not render <Send /> and compare with snapshot', () => {
-    const tree = renderer.create(<Send />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(<Send />)
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should always render <Send /> and compare with snapshot', () => {
-    const tree = renderer.create(<Send alwaysShowSend />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(<Send alwaysShowSend />)
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render <Send /> where there is input and compare with snapshot', () => {
-    const tree = renderer.create(<Send text='test input' />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(<Send text='test input' />)
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/SystemMessage.test.tsx

@@ -1,27 +1,24 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { SystemMessage } from '../GiftedChat'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('SystemMessage', () => {
   it('should not render <SystemMessage /> and compare with snapshot', () => {
-    const tree = renderer.create(<SystemMessage />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(<SystemMessage />)
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render <SystemMessage /> and compare with snapshot', () => {
-    const tree = renderer
-      .create(
-        <SystemMessage
-          currentMessage={{
-            ...DEFAULT_TEST_MESSAGE,
-            system: true,
-          }}
-        />
-      )
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(
+      <SystemMessage
+        currentMessage={{
+          ...DEFAULT_TEST_MESSAGE,
+          system: true,
+        }}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/Time.test.tsx

@@ -1,20 +1,18 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Time } from '../GiftedChat'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('Time', () => {
   it('should not render <Time /> and compare with snapshot', () => {
-    const component = renderer.create(<Time />)
-    const tree = component.toJSON()
+    const { toJSON } = render(<Time />)
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render <Time /> and compare with snapshot', () => {
-    const component = renderer.create(
+    const { toJSON } = render(
       <Time
         currentMessage={{
           ...DEFAULT_TEST_MESSAGE,
@@ -22,8 +20,7 @@ describe('Time', () => {
         }}
       />
     )
-    const tree = component.toJSON()
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/__snapshots__/Bubble.test.tsx.snap

@@ -31,7 +31,6 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
     }
   >
     <View
-      accessibilityRole="text"
       accessibilityState={
         {
           "busy": undefined,
@@ -41,9 +40,20 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
           "selected": undefined,
         }
       }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
       accessible={true}
+      collapsable={false}
       focusable={true}
+      onBlur={[Function]}
       onClick={[Function]}
+      onFocus={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
       onResponderRelease={[Function]}
@@ -52,93 +62,81 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
       onStartShouldSetResponder={[Function]}
     >
       <View>
-        <View
-          style={
-            [
-              {},
-              undefined,
-            ]
-          }
-        >
-          <Text
+        <View>
+          <View
             style={
               [
                 {
-                  "color": "black",
-                  "fontSize": 16,
-                  "lineHeight": 20,
                   "marginBottom": 5,
                   "marginLeft": 10,
                   "marginRight": 10,
                   "marginTop": 5,
                 },
                 undefined,
-                undefined,
               ]
             }
           >
             <Text
+              link={true}
               style={
                 [
-                  [
-                    {
-                      "color": "black",
-                      "fontSize": 16,
-                      "lineHeight": 20,
-                      "marginBottom": 5,
-                      "marginLeft": 10,
-                      "marginRight": 10,
-                      "marginTop": 5,
-                    },
-                    undefined,
-                    undefined,
-                  ],
+                  {
+                    "color": "black",
+                  },
+                  undefined,
                   undefined,
                 ]
               }
+              user={
+                {
+                  "_id": 1,
+                }
+              }
             >
-              test
+              <Text>
+                test
+              </Text>
             </Text>
-          </Text>
+          </View>
         </View>
-      </View>
-      <View
-        style={
-          [
-            {
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-            },
-            undefined,
-          ]
-        }
-      >
         <View
           style={
             [
               {
-                "marginBottom": 5,
-                "marginLeft": 10,
-                "marginRight": 10,
+                "flexDirection": "row",
+                "justifyContent": "flex-start",
               },
               undefined,
             ]
           }
         >
-          <Text
+          <View
             style={
               [
                 {
-                  "color": "#aaa",
-                  "fontSize": 10,
-                  "textAlign": "right",
+                  "marginBottom": 5,
+                  "marginLeft": 10,
+                  "marginRight": 10,
                 },
                 undefined,
               ]
             }
           >
-            7:20 PM
-          </Text>
+            <Text
+              style={
+                [
+                  {
+                    "color": "#aaa",
+                    "fontSize": 10,
+                    "textAlign": "right",
+                  },
+                  undefined,
+                ]
+              }
+            >
+              7:20 PM
+            </Text>
+          </View>
         </View>
       </View>
     </View>

package/src/__tests__/__snapshots__/Composer.test.tsx.snap

@@ -4,8 +4,6 @@ exports[`should render <Composer /> and compare with snapshot 1`] = `
 <TextInput
   accessibilityLabel="Type a message..."
   accessible={true}
-  autoFocus={false}
-  editable={true}
   enablesReturnKeyAutomatically={true}
   keyboardAppearance="default"
   multiline={true}
@@ -25,6 +23,7 @@ exports[`should render <Composer /> and compare with snapshot 1`] = `
         "marginTop": 6,
       },
       undefined,
+      undefined,
       {
         "height": 33,
       },

package/src/__tests__/__snapshots__/Constant.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`should compare Constant with snapshot 1`] = `
 {
   "DATE_FORMAT": "D MMMM",
-  "DEFAULT_PLACEHOLDER": "Type a message...",
   "MAX_COMPOSER_HEIGHT": 200,
   "MIN_COMPOSER_HEIGHT": 33,
   "TEST_ID": {

package/src/__tests__/__snapshots__/DayAnimated.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DayAnimated should render DayAnimated with default Day component 1`] = `null`;
+
+exports[`DayAnimated should use custom renderDay when provided 1`] = `null`;

package/src/__tests__/__snapshots__/GiftedChat.test.tsx.snap

@@ -26,3 +26,28 @@ exports[`should render <GiftedChat/> and compare with snapshot 1`] = `
   </View>
 </KeyboardProvider>
 `;
+
+exports[`should render <GiftedChat/> with disableKeyboardController=true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "overflow": "hidden",
+        },
+      ]
+    }
+    testID="GC_WRAPPER"
+  />
+</View>
+`;