Add feature flags to tests, fix collection-card

Author: dylanjeffers

packages/web/src/test/mocks/app-context.ts

@@ -0,0 +1,22 @@
+import { FeatureFlags } from '@audius/common/services'
+
+import { createMockLocalStorage } from './local-storage'
+import { createMockRemoteConfig } from './remote-config'
+
+export const createMockAppContext = (
+  featureFlags: Partial<Record<FeatureFlags, boolean>> = {}
+) => ({
+  analytics: {
+    track: async () => {},
+    make: () => ({ eventName: '', properties: {} })
+  },
+  imageUtils: {
+    generatePlaylistArtwork: async () => ({ url: '', file: new File([], '') })
+  },
+  getHostUrl: () => 'http://localhost:3000',
+  audiusBackend: {} as any,
+  trackDownload: {} as any,
+  audiusSdk: undefined,
+  remoteConfig: createMockRemoteConfig(featureFlags),
+  localStorage: createMockLocalStorage()
+})

packages/web/src/test/mocks/local-storage.ts

@@ -0,0 +1,81 @@
+export const createMockLocalStorage = () => {
+  const storage = new Map<string, string>()
+  const mockLocalStorage = {
+    getItem: (key: string) => storage.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      storage.set(key, value)
+    },
+    removeItem: (key: string) => {
+      storage.delete(key)
+    }
+  }
+
+  return {
+    localStorage: mockLocalStorage,
+    getItem: async (key: string) => storage.get(key) ?? null,
+    setItem: async (key: string, value: string) => {
+      storage.set(key, value)
+    },
+    removeItem: async (key: string) => {
+      storage.delete(key)
+    },
+    getValue: async (key: string) => storage.get(key) ?? null,
+    setValue: async (key: string, value: string) => {
+      storage.set(key, value)
+    },
+    getJSONValue: async (key: string) => {
+      const value = storage.get(key)
+      return value ? JSON.parse(value) : null
+    },
+    getExpiringJSONValue: async (key: string) => {
+      const value = storage.get(key)
+      return value ? JSON.parse(value) : null
+    },
+    setJSONValue: async (key: string, value: any) => {
+      storage.set(key, JSON.stringify(value))
+    },
+    setExpiringJSONValue: async (key: string, value: any) => {
+      storage.set(key, JSON.stringify(value))
+    },
+    clear: async () => {
+      storage.clear()
+    },
+    removeJSONValue: async (key: string) => {
+      storage.delete(key)
+    },
+    removeExpiringJSONValue: async (key: string) => {
+      storage.delete(key)
+    },
+    getKeysThatMatch: async (pattern: string) => {
+      return Array.from(storage.keys()).filter((key) => key.match(pattern))
+    },
+    getAll: async () => {
+      return Object.fromEntries(storage.entries())
+    },
+    getAllJSON: async () => {
+      const entries = Array.from(storage.entries())
+      return Object.fromEntries(
+        entries.map(([key, value]) => [key, JSON.parse(value)])
+      )
+    },
+    getAllExpiringJSON: async () => {
+      const entries = Array.from(storage.entries())
+      return Object.fromEntries(
+        entries.map(([key, value]) => [key, JSON.parse(value)])
+      )
+    },
+    getAudiusAccount: async () => null,
+    setAudiusAccount: async () => {},
+    clearAudiusAccount: async () => {},
+    getAudiusAccountUser: async () => null,
+    setAudiusAccountUser: async () => {},
+    clearAudiusAccountUser: async () => {},
+    clearAudiusUserWalletOverride: async () => {},
+    getAudiusUserWalletOverride: async () => null,
+    setAudiusUserWalletOverride: async () => {},
+    getAudiusUserWalletAddress: async () => null,
+    setAudiusUserWalletAddress: async () => {},
+    clearAudiusUserWalletAddress: async () => {},
+    clearPlaybackRate: async () => {}
+  }
+}

packages/web/src/test/mocks/remote-config.ts

@@ -0,0 +1,19 @@
+import { FeatureFlags } from '@audius/common/services'
+
+export const createMockRemoteConfig = (
+  featureFlags: Partial<Record<FeatureFlags, boolean>> = {}
+) => ({
+  getFeatureEnabled: (flag: FeatureFlags, fallbackFlag?: FeatureFlags) => {
+    return (
+      featureFlags[flag] ?? featureFlags[fallbackFlag as FeatureFlags] ?? false
+    )
+  },
+  getRemoteVar: () => null,
+  waitForRemoteConfig: async () => {},
+  waitForUserRemoteConfig: async () => {},
+  getEagerRemoteConfig: () => null,
+  setUserId: () => {},
+  listenForUserId: () => {},
+  unlistenForUserId: () => {},
+  init: async () => {}
+})

packages/web/src/test/test-utils.tsx

@@ -4,6 +4,8 @@ import {
   AudiusQueryContext,
   AudiusQueryContextType
 } from '@audius/common/audius-query'
+import { AppContext } from '@audius/common/context'
+import { FeatureFlags } from '@audius/common/services'
 import { ThemeProvider } from '@audius/harmony'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { render, RenderOptions } from '@testing-library/react'
@@ -24,8 +26,11 @@ import { queryClient } from 'services/query-client'
 import { configureStore } from 'store/configureStore'
 import { AppState } from 'store/types'
 
+import { createMockAppContext } from './mocks/app-context'
+
 type TestOptions = {
   reduxState?: PartialDeep<AppState>
+  featureFlags?: Partial<Record<FeatureFlags, boolean>>
 }
 
 type ReduxProviderProps = {
@@ -48,28 +53,31 @@ type TestProvidersProps = {
   children: ReactNode
 }
 
-const audiusQueryContext = {} as unknown as AudiusQueryContextType
-
 const TestProviders =
   (options?: TestOptions) => (props: TestProvidersProps) => {
     const { children } = props
-    const { reduxState } = options ?? {}
+    const { reduxState, featureFlags } = options ?? {}
+    const mockAppContext = createMockAppContext(featureFlags)
+    const audiusQueryContext = {} as unknown as AudiusQueryContextType
+
     return (
       <HistoryContextProvider>
         <QueryClientProvider client={queryClient}>
           <AudiusQueryContext.Provider value={audiusQueryContext}>
             <ThemeProvider theme='day'>
               <ReduxProvider initialStoreState={reduxState}>
                 <RouterContextProvider>
-                  <ToastContextProvider>
-                    <HistoryContext.Consumer>
-                      {({ history }) => (
-                        <Router history={history}>
-                          <CompatRouter>{children}</CompatRouter>
-                        </Router>
-                      )}
-                    </HistoryContext.Consumer>
-                  </ToastContextProvider>
+                  <AppContext.Provider value={mockAppContext}>
+                    <ToastContextProvider>
+                      <HistoryContext.Consumer>
+                        {({ history }) => (
+                          <Router history={history}>
+                            <CompatRouter>{children}</CompatRouter>
+                          </Router>
+                        )}
+                      </HistoryContext.Consumer>
+                    </ToastContextProvider>
+                  </AppContext.Provider>
                 </RouterContextProvider>
               </ReduxProvider>
             </ThemeProvider>