BA-2020: mobile beta testing (#172)

packages/authentication/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @baseapp-frontend/authentication
 
+## 4.1.0
+
+### Minor Changes
+
+- Adapt `useLogin` to use `isMobilePlatform` to omit current profile logic from mobile platforms.
+- Replace `process.env.EXPO_PUBLIC_API_BASE_URL` usage with `getExpoConstant`.
+- Adapt `getUser` and `getUserAsync` tests to mock `getToken` and `getTokenAsync`.
+- Add `expo` and `react-native` mock files.
+- Updated dependencies
+  - @baseapp-frontend/utils@3.0.6
+
 ## 4.0.7
 
 ### Patch Changes

packages/authentication/__mocks__/expo.ts

@@ -0,0 +1,3 @@
+module.exports = require('@baseapp-frontend/test/__mocks__/expo.ts')
+
+export {}

packages/authentication/__mocks__/react-native.ts

@@ -0,0 +1,3 @@
+module.exports = require('@baseapp-frontend/test/__mocks__/react-native.ts')
+
+export {}

packages/authentication/modules/access/preAuthenticateJWT/index.ts

@@ -1,3 +1,4 @@
+import { getExpoConstant } from '@baseapp-frontend/utils'
 import type { JWTResponse } from '@baseapp-frontend/utils/types/jwt'
 
 const preAuthenticateJWT = async (token?: string) => {
@@ -6,8 +7,9 @@ const preAuthenticateJWT = async (token?: string) => {
       throw new Error('No token provided.')
     }
 
+    const EXPO_PUBLIC_API_BASE_URL = getExpoConstant('EXPO_PUBLIC_API_BASE_URL')
     const response = await fetch(
-      `${process.env.NEXT_PUBLIC_API_BASE_URL ?? process.env.EXPO_PUBLIC_API_BASE_URL}/auth/pre-auth/jwt`,
+      `${process.env.NEXT_PUBLIC_API_BASE_URL ?? EXPO_PUBLIC_API_BASE_URL}/auth/pre-auth/jwt`,
       {
         method: 'POST',
         body: JSON.stringify({ token }),

packages/authentication/modules/access/useLogin/index.ts

@@ -9,6 +9,7 @@ import {
   setFormApiErrors,
   setTokenAsync,
 } from '@baseapp-frontend/utils'
+import { isMobilePlatform } from '@baseapp-frontend/utils/functions/os'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useMutation } from '@tanstack/react-query'
@@ -53,16 +54,21 @@ const useLogin = ({
     if (isLoginChangeExpiredPasswordRedirectResponse(response)) {
       return
     }
-    const user = decodeJWT<User>(response.access)
-    if (user) {
-      // TODO: handle the absolute image path on the backend
-      const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL?.replace('/v1', '')
-      const absoluteImagePath = user?.profile?.image ? `${baseUrl}${user.profile.image}` : null
-      setCurrentProfile({
-        ...user.profile,
-        image: absoluteImagePath,
-      })
+
+    // TODO: adapt this flow to work with mobile
+    if (!isMobilePlatform()) {
+      const user = decodeJWT<User>(response.access)
+      if (user) {
+        // TODO: handle the absolute image path on the backend
+        const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL?.replace('/v1', '')
+        const absoluteImagePath = user?.profile?.image ? `${baseUrl}${user.profile.image}` : null
+        setCurrentProfile({
+          ...user.profile,
+          image: absoluteImagePath,
+        })
+      }
     }
+
     await setTokenAsync(accessKeyName, response.access, {
       secure: process.env.NODE_ENV === 'production',
     })
@@ -91,8 +97,9 @@ const useLogin = ({
       if (isLoginMfaResponse(response)) {
         setMfaEphemeralToken(response.ephemeralToken)
       } else {
-        handleLoginSuccess(response)
+        await handleLoginSuccess(response)
       }
+      // onSuccess should only run after we successfully await the handleLoginSuccess (that sets the auth tokens asynchonously)
       loginOptions?.onSuccess?.(response, variables, context)
     },
   })

packages/authentication/modules/user/getUser/__tests__/getUser.test.ts

@@ -1,24 +1,24 @@
-import type { CookiesGetByNameFn } from '@baseapp-frontend/test'
-
-import Cookies from 'js-cookie'
+import { getToken } from '@baseapp-frontend/utils/functions/token/getToken'
 
 import getUser from '../index'
 import jwt from './fixtures/jwt.json'
 
+jest.mock('@baseapp-frontend/utils/functions/token/getToken', () => ({
+  getToken: jest.fn(),
+}))
+
 describe('getUser', () => {
-  it('should return the user from the JWT cookie', async () => {
-    ;(Cookies.get as CookiesGetByNameFn) = jest.fn(() => jwt.token)
+  it('should return the user from the JWT token', () => {
+    ;(getToken as jest.Mock).mockReturnValue(jwt.token)
     const user = getUser()
-
     expect(user?.email).toBe('[email protected]')
     expect(user?.firstName).toBe('John')
     expect(user?.lastName).toBe('Doe')
   })
 
-  it('should return null if the JWT cookie is not set', async () => {
-    ;(Cookies.get as CookiesGetByNameFn) = jest.fn(() => undefined)
+  it('should return null if no token is set', () => {
+    ;(getToken as jest.Mock).mockReturnValue(undefined)
     const user = getUser()
-
     expect(user).toBeNull()
   })
 })

packages/authentication/modules/user/getUser/index.ts

@@ -1,5 +1,6 @@
 import { ACCESS_KEY_NAME } from '@baseapp-frontend/utils/constants/jwt'
-import { decodeJWT, getToken } from '@baseapp-frontend/utils/functions/token'
+import { decodeJWT } from '@baseapp-frontend/utils/functions/token/decodeJWT'
+import { getToken } from '@baseapp-frontend/utils/functions/token/getToken'
 import type { JWTContent } from '@baseapp-frontend/utils/types/jwt'
 
 import type { User } from '../../../types/user'

packages/authentication/modules/user/getUserAsync/__tests__/getUserAsync.test.ts

@@ -1,22 +1,26 @@
-import type { CookiesGetByNameFn } from '@baseapp-frontend/test'
-
-import Cookies from 'js-cookie'
+import { getTokenAsync } from '@baseapp-frontend/utils/functions/token/getTokenAsync'
 
 import getUserAsync from '../index'
 import jwt from './fixtures/jwt.json'
 
+jest.mock('@baseapp-frontend/utils/functions/token/getTokenAsync', () => ({
+  getTokenAsync: jest.fn(),
+}))
+
 describe('getUserAsync', () => {
-  it('should return the user from the JWT cookie', async () => {
-    ;(Cookies.get as CookiesGetByNameFn) = jest.fn(() => jwt.token)
+  it('should return the user from the JWT token', async () => {
+    ;(getTokenAsync as jest.Mock).mockReturnValue(jwt.token)
+
     const user = await getUserAsync()
 
     expect(user?.email).toBe('[email protected]')
     expect(user?.firstName).toBe('John')
     expect(user?.lastName).toBe('Doe')
   })
 
-  it('should return null if the JWT cookie is not set', async () => {
-    ;(Cookies.get as CookiesGetByNameFn) = jest.fn(() => undefined)
+  it('should return null if no token is set', async () => {
+    ;(getTokenAsync as jest.Mock).mockReturnValue(undefined)
+
     const user = await getUserAsync()
 
     expect(user).toBeNull()

packages/authentication/modules/user/getUserAsync/index.ts

@@ -1,5 +1,6 @@
 import { ACCESS_KEY_NAME } from '@baseapp-frontend/utils/constants/jwt'
-import { decodeJWT, getTokenAsync } from '@baseapp-frontend/utils/functions/token'
+import { decodeJWT } from '@baseapp-frontend/utils/functions/token/decodeJWT'
+import { getTokenAsync } from '@baseapp-frontend/utils/functions/token/getTokenAsync'
 import type { JWTContent } from '@baseapp-frontend/utils/types/jwt'
 
 import type { User } from '../../../types/user'

packages/authentication/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/authentication",
   "description": "Authentication modules.",
-  "version": "4.0.7",
+  "version": "4.1.0",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/components/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @baseapp-frontend/components
 
+## 0.0.44
+
+### Patch Changes
+
+- Add `expo` and `react-native` mock files.
+- Updated dependencies
+  - @baseapp-frontend/authentication@4.0.7
+  - @baseapp-frontend/graphql@1.2.0
+  - @baseapp-frontend/utils@3.1.0
+  - @baseapp-frontend/design-system@0.0.28
+
 ## 0.0.43
 
 ### Patch Changes

packages/components/__mocks__/expo.ts

@@ -0,0 +1,3 @@
+module.exports = require('@baseapp-frontend/test/__mocks__/expo.ts')
+
+export {}

packages/components/__mocks__/react-native.ts

@@ -0,0 +1,3 @@
+module.exports = require('@baseapp-frontend/test/__mocks__/react-native.ts')
+
+export {}

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/design-system/CHANGELOG.md

@@ -1,8 +1,15 @@
 # @baseapp-frontend/design-system
 
+## 0.0.29
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@3.1.0
+
 ## 0.0.28
 
-### Major Changes
+### Patch Changes
 
 - MDX documentation files added for several components
 

packages/graphql/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @baseapp-frontend/graphql
 
+## 1.2.0
+
+### Minor Changes
+
+- Replace `process.env.EXPO_PUBLIC_API_BASE_URL` and `EXPO_PUBLIC_WS_RELAY_ENDPOINT` usage with `getExpoConstant`.
+- Updated dependencies
+  - @baseapp-frontend/utils@3.1.0
+
 ## 1.1.15
 
 ### Patch Changes

packages/graphql/config/environment.ts

@@ -1,3 +1,4 @@
+import { getExpoConstant } from '@baseapp-frontend/utils'
 import { baseAppFetch } from '@baseapp-frontend/utils/functions/fetch/baseAppFetch'
 import { getToken } from '@baseapp-frontend/utils/functions/token/getToken'
 
@@ -64,9 +65,10 @@ export async function httpFetch(
   uploadables?: UploadableMap | null,
 ): Promise<GraphQLResponse> {
   const fetchOptions = getFetchOptions({ request, variables, uploadables })
+  const EXPO_PUBLIC_RELAY_ENDPOINT = getExpoConstant('EXPO_PUBLIC_RELAY_ENDPOINT')
+
   const response = await baseAppFetch('', {
-    baseUrl: (process.env.NEXT_PUBLIC_RELAY_ENDPOINT ||
-      process.env.EXPO_PUBLIC_RELAY_ENDPOINT) as string,
+    baseUrl: (process.env.NEXT_PUBLIC_RELAY_ENDPOINT ?? EXPO_PUBLIC_RELAY_ENDPOINT) as string,
     decamelizeRequestBodyKeys: false,
     decamelizeRequestParamsKeys: false,
     camelizeResponseDataKeys: false,
@@ -89,9 +91,9 @@ export async function httpFetch(
   return response
 }
 
+const EXPO_PUBLIC_WS_RELAY_ENDPOINT = getExpoConstant('EXPO_PUBLIC_WS_RELAY_ENDPOINT')
 const wsClient = createClient({
-  url: (process.env.NEXT_PUBLIC_WS_RELAY_ENDPOINT ||
-    process.env.EXPO_PUBLIC_WS_RELAY_ENDPOINT) as string,
+  url: (process.env.NEXT_PUBLIC_WS_RELAY_ENDPOINT ?? EXPO_PUBLIC_WS_RELAY_ENDPOINT) as string,
   connectionParams: () => {
     const Authorization = getToken()
     if (!Authorization) return {}

packages/graphql/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/graphql",
   "description": "GraphQL configurations and utilities",
-  "version": "1.1.15",
+  "version": "1.2.0",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/graphql/utils/createTestEnvironment/index.ts

@@ -38,12 +38,8 @@ const createTestEnvironment = () => {
     queryName,
   }: QueueOperationResolverParams) => {
     try {
-      console.log('queueOperationResolver', mockResolvers, data, queryName)
       environment.mock.queueOperationResolver((operationToResolve) => {
-        console.log('AOPS', operationToResolve)
         if (mockResolvers) {
-          console.log('mockResolvers', mockResolvers)
-
           return MockPayloadGenerator.generate(operationToResolve, mockResolvers)
         }
 
@@ -56,6 +52,7 @@ const createTestEnvironment = () => {
         }
 
         console.warn('The operation was not mocked.')
+
         return null
       })
     } catch (e) {

packages/provider/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/provider
 
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@3.1.0
+
 ## 2.0.6
 
 ### Patch Changes

packages/provider/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/provider",
   "description": "Providers for React Query and Emotion.",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/test/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/test
 
+## 2.0.6
+
+### Patch Changes
+
+- Add `expo` and `react-native` mock files.
+
 ## 2.0.5
 
 ### Patch Changes

packages/test/__mocks__/expo.ts

@@ -0,0 +1,26 @@
+const ExpoSecureStore = {
+  getItemAsync: jest.fn(async (key: string) => {
+    return key === 'ACCESS_KEY_NAME' ? 'mocked_value' : null
+  }),
+  setItemAsync: jest.fn(async (key: string, value: string) => {
+    return true
+  }),
+  deleteItemAsync: jest.fn(async (key: string) => {
+    return true
+  }),
+}
+
+const Constants = {
+  expoConfig: {
+    extra: {
+      EXPO_PUBLIC_API_BASE_URL: undefined,
+      EXPO_PUBLIC_RELAY_ENDPOINT: undefined,
+      EXPO_PUBLIC_WS_RELAY_ENDPOINT: undefined,
+    },
+  },
+}
+
+module.exports = {
+  ...ExpoSecureStore,
+  ...Constants,
+}

packages/test/__mocks__/react-native.ts

@@ -0,0 +1,4 @@
+// ignoring react-native imports in tests, we may change this in the future
+module.exports = {
+  Platform: { OS: 'web' },
+}