Connection process on mobile

packages/mobile/e2e/starter.test.js

@@ -8,7 +8,6 @@ const { ios } = info
 
 /* eslint-disable no-undef */
 describe('User', () => {
-
   beforeAll(async () => {
     await device.launchApp({ newInstance: true, launchArgs: { detoxDebugVisibility: 'YES' } })
   })
@@ -57,12 +56,12 @@ describe('User', () => {
     await write(element(by.id('input')), 'rick')
 
     await press(element(by.text('Continue')), true)
+  })
 
-    await waitFor(element(by.text('You created a username')))
+  test('should see connection process screen', async () => {
+    await waitFor(element(by.id('connection-process-title')))
       .toBeVisible()
-      .withTimeout(10000)
-
-    await press(element(by.id('button')))
+      .withTimeout(20000)
   })
 
   test('sees channels list', async () => {

packages/mobile/src/components/Button/Button.component.tsx

@@ -10,7 +10,7 @@ export const Button: FC<ButtonProps> = ({ onPress, title, width, loading, negati
   return (
     <TouchableWithoutFeedback
       onPress={event => {
-        event.persist()
+        // event.persist()
         if (!disabled) onPress()
       }}
       testID={'button'}

packages/mobile/src/components/ConnectionProcess/ConnectionProcess.component.tsx

@@ -41,7 +41,12 @@ const ConnectionProcessComponent: FC<ConnectionProcessComponentProps> = ({ conne
           style={{ transform: [{ rotate: transformValues }], width: 120, height: 120 }}
           source={JoinCommunityImg}
         />
-        <Typography fontSize={18} fontWeight={'medium'} style={{ marginTop: 24, marginBottom: 16 }}>
+        <Typography
+          fontSize={18}
+          fontWeight={'medium'}
+          style={{ marginTop: 24, marginBottom: 16 }}
+          testID={'connection-process-title'}
+        >
           Joining now!
         </Typography>
 
@@ -50,7 +55,11 @@ const ConnectionProcessComponent: FC<ConnectionProcessComponentProps> = ({ conne
             style={{ backgroundColor: '#67BFD3', height: 4, width: connectionProcess.number * 3, borderRadius: 4 }}
           ></View>
         </View>
-        <Typography fontSize={14} style={{ lineHeight: 20, textAlign: 'center', marginTop: 8 }}>
+        <Typography
+          testID='connection-process-text'
+          fontSize={14}
+          style={{ lineHeight: 20, textAlign: 'center', marginTop: 8 }}
+        >
           {connectionProcess.text}
         </Typography>
 

packages/mobile/src/components/ConnectionProcess/ConnectionProcess.test.tsx

@@ -74,6 +74,7 @@ describe('ConnectionProcessComponent', () => {
                 },
               ]
             }
+            testID="connection-process-title"
             verticalTextAlign="center"
           >
             Joining now!

packages/mobile/src/tests/joining.process.test.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import '@testing-library/jest-native/extend-expect'
+import { screen, fireEvent, act } from '@testing-library/react-native'
+import MockedSocket from 'socket.io-mock'
+import { ioMock } from '../setupTests'
+import { prepareStore } from './utils/prepareStore'
+import { renderComponent } from './utils/renderComponent'
+import { FactoryGirl } from 'factory-girl'
+import { getFactory, communities, identity, connection } from '@quiet/state-manager'
+import ConnectionProcessScreen from '../screens/ConnectionProcess/ConnectionProcess.screen'
+import { UsernameRegistrationScreen } from '../screens/UsernameRegistration/UsernameRegistration.screen'
+import { ScreenNames } from '../const/ScreenNames.enum'
+import { ConnectionProcessInfo } from '@quiet/types'
+import { ChannelListScreen } from '../screens/ChannelList/ChannelList.screen'
+
+jest.mock('react-native-progress', () => () => ({
+  CircleSnail: <p>CircleSnail</p>,
+}))
+describe('Joining process', () => {
+  let socket: MockedSocket
+
+  let factory: FactoryGirl
+
+  beforeEach(async () => {
+    socket = new MockedSocket()
+    ioMock.mockImplementation(() => socket)
+  })
+
+  test('Check informations on connection process', async () => {
+    const { store, root } = await prepareStore({}, socket)
+    const userName = 'johnny'
+
+    factory = await getFactory(store)
+
+    const community = await factory.create<ReturnType<typeof communities.actions.addNewCommunity>['payload']>(
+      'Community'
+    )
+
+    renderComponent(
+      <>
+        <ConnectionProcessScreen />
+        <ChannelListScreen />
+      </>,
+      store
+    )
+
+    await factory.create<ReturnType<typeof identity.actions.addNewIdentity>['payload']>('Identity', {
+      id: community.id,
+      nickname: userName,
+    })
+    await act(async () => {})
+
+    const connectionProcessScreen = screen.getByTestId('connection-process-component')
+
+    expect(connectionProcessScreen).toBeVisible()
+
+    const processText = screen.getByTestId('connection-process-text')
+    expect(processText.props.children).toEqual('Connecting process started')
+
+    store.dispatch(connection.actions.setTorConnectionProcess(ConnectionProcessInfo.INITIALIZING_LIBP2P))
+    await act(async () => {})
+
+    const processText2 = screen.getByTestId('connection-process-text')
+    console.log(processText2.props)
+    expect(processText2.props.children).toEqual('Initializing libp2p')
+
+    store.dispatch(connection.actions.setTorConnectionProcess(ConnectionProcessInfo.LAUNCHED_COMMUNITY))
+    await act(async () => {})
+
+    const channelList = screen.getByTestId('channels_list')
+
+    expect(channelList).toBeVisible()
+
+    // Stop state-manager sagas
+    root?.cancel()
+  })
+
+  //   Problems with react-native-progress lib
+  test.skip('Check flow from registering username to connecting process screen', async () => {
+    const { store, root } = await prepareStore({}, socket)
+    const userName = 'johnny'
+
+    factory = await getFactory(store)
+
+    const community = await factory.create<ReturnType<typeof communities.actions.addNewCommunity>['payload']>(
+      'Community'
+    )
+
+    const route: { key: string; name: ScreenNames.UsernameRegistrationScreen; path?: string | undefined } = {
+      key: '',
+      name: ScreenNames.UsernameRegistrationScreen,
+    }
+    renderComponent(
+      <>
+        <UsernameRegistrationScreen route={route} />
+        <ConnectionProcessScreen />
+      </>,
+      store
+    )
+
+    const registrationScreen = screen.getByTestId('username-registration-component')
+
+    expect(registrationScreen).toBeVisible()
+
+    const input = screen.getByPlaceholderText('Enter a username')
+    expect(input).toBeVisible()
+
+    fireEvent.changeText(input, userName)
+    const button = screen.getByTestId('button')
+    expect(button).toBeVisible()
+
+    fireEvent.press(button)
+
+    await factory.create<ReturnType<typeof identity.actions.addNewIdentity>['payload']>('Identity', {
+      id: community.id,
+      nickname: userName,
+    })
+    await act(async () => {})
+
+    const connectionProcessScreen = screen.getByTestId('connection-process-component')
+
+    expect(connectionProcessScreen).toBeVisible()
+    // Stop state-manager sagas
+    root?.cancel()
+  })
+})