Ba 2287 fe unify test and storybook providers

package.json

@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.11",
-    "@parcel/packager-ts": "latest",
-    "@parcel/transformer-typescript-types": "latest",
+    "@parcel/packager-ts": "^2.14.1",
+    "@parcel/transformer-typescript-types": "^2.14.1",
     "@types/node": "catalog:",
     "chalk": "^5.4.1",
     "chokidar": "^4.0.3",

packages/authentication/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @baseapp-frontend/authentication
 
+## 4.2.2
+
+### Patch Changes
+
+- Unify test and storybook providers
+- Updated dependencies
+  - @baseapp-frontend/utils@3.1.6
+
 ## 4.2.1
 
 ### Patch Changes

packages/authentication/__mocks__/expo-constants.ts

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

packages/authentication/__mocks__/expo-modules-core.ts

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

packages/authentication/__mocks__/expo-secure-store.ts

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

packages/authentication/__mocks__/fetch.ts

@@ -1,3 +1,3 @@
-module.exports = require('@baseapp-frontend/test/__mocks__/fetch.ts')
+const Fetch = require('@baseapp-frontend/test/__mocks__/fetch.ts')
 
-export {}
+export default Fetch

packages/authentication/__mocks__/file.ts

@@ -1,3 +1,3 @@
-module.exports = require('@baseapp-frontend/test/__mocks__/file.ts')
+const File = require('@baseapp-frontend/test/__mocks__/file.ts')
 
-export {}
+export default File

packages/authentication/__mocks__/react-native.ts

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

packages/authentication/__mocks__/style.ts

@@ -1,3 +1,3 @@
-module.exports = require('@baseapp-frontend/test/__mocks__/style.ts')
+const Style = require('@baseapp-frontend/test/__mocks__/style.ts')
 
-export {}
+export default Style

packages/authentication/index.ts

@@ -2,6 +2,7 @@ export * from './modules/access'
 export * from './modules/mfa'
 export * from './modules/profile'
 export * from './modules/user'
+export * from './modules/tests/utils'
 
 export { default as AuthApi } from './services/auth'
 export * from './services/auth'

packages/authentication/modules/profile/index.ts

@@ -1,4 +1,3 @@
 export { default as useCurrentProfile } from './useCurrentProfile'
-export { default as InitialProfileProviderForTesting } from './useCurrentProfile/InitialProfileProviderForTesting'
 export * from './useCurrentProfile/constants'
 export type { MinimalProfile } from '../../types/profile'

packages/authentication/modules/tests/utils/index.ts

@@ -0,0 +1,5 @@
+export { default as InitialProfileProviderForTesting } from './providers/InitialProfileProviderForTesting'
+export type { InitialProfileProviderForTestingProps } from './providers/InitialProfileProviderForTesting/types'
+
+export { default as withAuthenticationTestProviders } from './providers/withAuthenticationTestProviders'
+export type { WithAuthenticationTestProvidersProps } from './providers/withAuthenticationTestProviders/types'

packages/authentication/modules/profile/useCurrentProfile/InitialProfileProviderForTesting/index.tsx → packages/authentication/modules/tests/utils/providers/InitialProfileProviderForTesting/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 
 import { useHydrateAtoms } from 'jotai/utils'
 
-import { profileAtom } from '..'
+import { profileAtom } from '../../../../profile/useCurrentProfile'
 import { InitialProfileProviderForTestingProps } from './types'
 
 /**

packages/authentication/modules/profile/useCurrentProfile/InitialProfileProviderForTesting/types.ts → packages/authentication/modules/tests/utils/providers/InitialProfileProviderForTesting/types.ts

@@ -1,7 +1,8 @@
 import { type PropsWithChildren } from 'react'
 
-import { type MinimalProfile } from '../../../../types/profile'
+import { type MinimalProfile } from '../../../../../types/profile'
 
 export interface InitialProfileProviderForTestingProps extends PropsWithChildren {
   initialProfile: MinimalProfile | null
+  disabled?: boolean
 }

packages/authentication/modules/tests/utils/providers/withAuthenticationTestProviders/index.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react'
+
+import { Provider as JotaiProvider } from 'jotai'
+
+import InitialProfileProviderForTesting from '../InitialProfileProviderForTesting'
+import { WithAuthenticationTestProvidersProps } from './types'
+
+const withAuthenticationTestProviders =
+  <Props extends object>(Component: FC<Props>) =>
+  ({
+    context,
+    InitialProfileProviderForTestingProps,
+    ...props
+  }: Props & WithAuthenticationTestProvidersProps) => {
+    const currentProfile =
+      context?.parameters?.initialProfile || InitialProfileProviderForTestingProps?.initialProfile
+
+    return (
+      <JotaiProvider>
+        <InitialProfileProviderForTesting initialProfile={currentProfile || null}>
+          <Component {...(props as Props)} {...context} />
+        </InitialProfileProviderForTesting>
+      </JotaiProvider>
+    )
+  }
+
+export default withAuthenticationTestProviders

packages/authentication/modules/tests/utils/providers/withAuthenticationTestProviders/types.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react'
+
+import { StoryContext } from '@storybook/react'
+
+import { InitialProfileProviderForTestingProps } from '../InitialProfileProviderForTesting/types'
+
+export interface WithAuthenticationTestProvidersProps extends PropsWithChildren {
+  InitialProfileProviderForTestingProps?: InitialProfileProviderForTestingProps
+  context?: StoryContext
+}

packages/authentication/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/authentication",
   "description": "Authentication modules.",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -19,7 +19,8 @@
     "jotai": "catalog:",
     "js-cookie": "catalog:",
     "react-hook-form": "catalog:",
-    "zod": "catalog:"
+    "zod": "catalog:",
+    "@storybook/react": "catalog:storybook"
   },
   "peerDependencies": {
     "@baseapp-frontend/utils": "workspace:*",

packages/authentication/services/auth.ts

@@ -1,4 +1,4 @@
-import { baseAppFetch } from '@baseapp-frontend/utils'
+import { baseAppFetch } from '@baseapp-frontend/utils/functions/fetch/baseAppFetch'
 
 import type {
   ChangeExpiredPasswordRequest,

packages/authentication/services/user.ts

@@ -1,4 +1,4 @@
-import { baseAppFetch } from '@baseapp-frontend/utils'
+import { baseAppFetch } from '@baseapp-frontend/utils/functions/fetch/baseAppFetch'
 
 import type { User, UserUpdateParams } from '../types/user'
 

packages/components/.storybook/decorators/index.ts

@@ -1,3 +1,2 @@
 export { default as withTokenSetup } from './withTokenSetup'
-export { default as withProviders } from './withProviders'
 export { default as withMutationResolver } from './withMutationResolver'

packages/components/.storybook/preview.ts

@@ -1,8 +1,10 @@
+import { withStorybookProvidersWrapper } from '@baseapp-frontend/test/providers'
+
 import type { Preview } from '@storybook/react'
 
+import { withComponentCompleteTestProviders } from '../modules/tests/web'
 import '../styles/tailwind/globals.css'
 import { handlers } from './__mocks__/handlers'
-import { withProviders } from './decorators'
 import './overrides.css'
 
 const { initialize, mswLoader } = require('msw-storybook-addon')
@@ -20,7 +22,7 @@ initialize({
 })
 
 const preview: Preview = {
-  decorators: [withProviders],
+  decorators: [withStorybookProvidersWrapper(withComponentCompleteTestProviders)],
   loaders: [mswLoader],
   parameters: {
     controls: {

packages/components/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @baseapp-frontend/components
 
+## 1.0.31
+
+### Patch Changes
+
+- Unify test and storybook providers
+- Updated dependencies
+  - @baseapp-frontend/authentication@4.2.2
+  - @baseapp-frontend/design-system@1.0.14
+  - @baseapp-frontend/graphql@1.2.7
+  - @baseapp-frontend/utils@3.1.6
+
 ## 1.0.30
 
 ### Patch Changes

packages/components/__mocks__/expo-constants.ts

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

packages/components/__mocks__/expo-modules-core.ts

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

packages/components/__mocks__/expo-secure-store.ts

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

packages/components/__mocks__/fetch.ts

@@ -1,3 +1,3 @@
-module.exports = require('@baseapp-frontend/test/__mocks__/fetch.ts')
+const Fetch = require('@baseapp-frontend/test/__mocks__/fetch.ts')
 
-export {}
+export default Fetch

packages/components/__mocks__/file.ts

@@ -1,3 +1,3 @@
-module.exports = require('@baseapp-frontend/test/__mocks__/file.ts')
+const File = require('@baseapp-frontend/test/__mocks__/file.ts')
 
-export {}
+export default File

packages/components/__mocks__/react-native.ts

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

packages/components/__mocks__/style.ts

@@ -1,3 +1,3 @@
-module.exports = require('@baseapp-frontend/test/__mocks__/style.ts')
+const Style = require('@baseapp-frontend/test/__mocks__/style.ts')
 
-export {}
+export default Style

packages/components/baseapp-frontend-imports.d.ts

@@ -46,6 +46,7 @@ import '@baseapp-frontend/design-system/providers/web'
 import '@baseapp-frontend/design-system/styles/common'
 import '@baseapp-frontend/design-system/styles/native'
 import '@baseapp-frontend/design-system/styles/web'
+import '@baseapp-frontend/design-system/tests/web'
 import '@baseapp-frontend/design-system/utils/common'
 import '@baseapp-frontend/design-system/utils/native'
 import '@baseapp-frontend/design-system/utils/web'

packages/components/modules/comments/web/Comments/__tests__/__utils__/CommentsForTesting/index.tsx

@@ -2,7 +2,7 @@ import { graphql, useLazyLoadQuery } from 'react-relay'
 
 import { CommentsForTestingQuery } from '../../../../../../../__generated__/CommentsForTestingQuery.graphql'
 import { CommentsFragment$key } from '../../../../../../../__generated__/CommentsFragment.graphql'
-import withProviders from '../../../../../../../__test_utils__/withProviders'
+import { withComponentCompleteTestProviders } from '../../../../../../tests/web'
 import Comments from '../../../index'
 import { CommentsProps } from '../../../types'
 
@@ -27,4 +27,4 @@ const CommentsForTesting = (props?: Partial<CommentsProps>) => {
   )
 }
 
-export default withProviders(CommentsForTesting)
+export default withComponentCompleteTestProviders(CommentsForTesting)

packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/__storybook__/stories.tsx

@@ -1,10 +1,8 @@
 import { User, UserApi } from '@baseapp-frontend/authentication'
-import { createTestEnvironment } from '@baseapp-frontend/graphql'
 
 import { Meta, StoryObj } from '@storybook/react'
 
 import AccountPopover from '..'
-import { withTokenSetup } from '../../../../../../../.storybook/decorators'
 import { AccountPopoverProps } from '../types'
 import { mockResolvers } from './mockResolvers'
 
@@ -27,18 +25,6 @@ const meta: Meta = {
       ],
     },
   },
-  decorators: [
-    withTokenSetup,
-    (Story, context) => {
-      const { queueOperationResolver } = context.parameters.relayMockEnvironment as ReturnType<
-        typeof createTestEnvironment
-      >
-
-      queueOperationResolver({ mockResolvers })
-
-      return <Story />
-    },
-  ],
 }
 
 export default meta