added mockInitialPayload mock feature

README.md

@@ -33,6 +33,7 @@ yarn add near-social-bridge
 - [Mock](#mock)
   - [Setup Mocks](#setup-mocks)
   - [Mock Authenticated User](#mock-authenticated-user)
+  - [Mock Initial Payload](#mock-initial-payload)
   - [Create Requests Mocks - revisit](#create-requests-mocks-revisit)
 - [Use Navigation](#use-navigation)
   - [Implementing routes](#implementing-routes)
@@ -212,12 +213,32 @@ Use `mockUser` to mock authenticated user. You can use `createMockUser()` method
 ```ts
 import { createMockUser, mockUser } from 'near-social-bridge'
 
-// You can optionally set default data. All the data is randomly generated using `@faker-js/faker` module.
+// You can optionally set default data. All the data is randomly generated.
 const fakeUser = createMockUser({ firstName: 'Wenderson' })
 mockUser(fakeUser)
 // Now your app has an "authenticated" user
 ```
 
+### Mock Initial Payload
+
+Use `mockInitialPayload` to mock the initial payload (sent by the Widget).
+
+```ts
+// Mock
+import { mockInitialPayload } from 'near-social-bridge'
+
+mockInitialPayload({
+  defaultRoom: 'dragon-ball-z',
+})
+
+// App
+import { useInitialPayload } from 'near-social-bridge/hooks'
+
+const MyComponent = () => {
+  const { defaultRoom } = useInitialPayload() // 'dragon-ball-z'
+}
+```
+
 ### Create Requests Mocks (revisit)
 
 You can revisit this session [here](#create-requests-mocks).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "near-social-bridge",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "This library allows you to create a common application using ReactJS and inject it in a controlled way into a Widget on Near Social. Therefore, the Widget talks to the React application and vice versa, making it possible to consume Discovery API resources within the React application.",
   "main": "./dist/cjs/index.js",
   "module": "./index.js",

src/constants.ts

@@ -6,3 +6,7 @@ export const REQUEST_KEYS = {
 
   AUTH_GET_USER_INFO: 'nsb:auth:get-user-info',
 }
+
+export const LOCAL_MOCK_KEYS = {
+  INITIAL_PAYLOAD: 'nsb:mock:initial-payload'
+}

src/hooks/useInitialPayload.ts

@@ -11,7 +11,7 @@ import {
  * @returns Initial payload sent by View
  */
 const useInitialPayload = <T>() => {
-  const [initialPayload, setInitialPayload] = useState<T>(getConnectionPayload() as T)
+  const [initialPayload, setInitialPayload] = useState<T>(getConnectionPayload().initialPayload as T)
 
   useEffect(() => {
     if (getConnectionStatus() === 'connected') {

src/request/mock.ts

@@ -1,4 +1,4 @@
-import { REQUEST_KEYS } from '../constants'
+import { LOCAL_MOCK_KEYS, REQUEST_KEYS } from '../constants'
 import { UserInfo } from '../services/bridge-service'
 import isDevelopment from '../utils/isDevelopment'
 import isLocalDev from '../utils/isLocalDev'
@@ -51,6 +51,14 @@ export const createMockUser = (defaultValues?: {
   }
 }
 
+/**
+ * Mock the `initialPayload` prop
+ * @param initialPayload 
+ */
+export const mockInitialPayload = (initialPayload: Record<any, any>) => {
+  globalMock[LOCAL_MOCK_KEYS.INITIAL_PAYLOAD] = () => initialPayload
+}
+
 /**
  * Get mocked response for a given request
  * @param requestType request type

src/services/bridge-service.ts

@@ -1,3 +1,6 @@
+import { LOCAL_MOCK_KEYS } from '../constants'
+import { globalMock } from '../request/mock'
+import isDevelopment from '../utils/isDevelopment'
 import isLocalDev from '../utils/isLocalDev'
 import Observable from '../utils/observable'
 
@@ -132,6 +135,12 @@ export const getConnectionStatus = () => status
  * @param viewMessageSource
  */
 export const initBridgeService = () => {
+  // Process mock
+  if (isDevelopment && isLocalDev && globalMock[LOCAL_MOCK_KEYS.INITIAL_PAYLOAD]) {
+    connectionPayload.initialPayload = { ...globalMock[LOCAL_MOCK_KEYS.INITIAL_PAYLOAD]() }
+  }
+
+  // Normal Flow
   if (status === 'pending') {
     status = 'waiting-for-viewer-signal'
     window.addEventListener('message', onGetMessage, false)