feat: #238 - Add test for anonymous funcs - Update hooks lint rules

.eslintrc.js

@@ -65,7 +65,7 @@ module.exports = {
     indent: 0,
     // Disabling as we are validating types with TypeScript not PropTypes
     'react/prop-types': 0,
-    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/rules-of-hooks": "warn",
     "react-hooks/exhaustive-deps": "warn",
   },
   settings: {

packages/marketplace/src/components/pages/__tests__/analytics.tsx

@@ -12,9 +12,12 @@ import {
   sortAppByDateInstalled,
   countAppHasInstallation,
   countAppNoInstallation,
+  handleFetchAppUsageStatsDataUseCallback,
+  handleFetchAppUsageStatsDataUseEffect,
+  mapStateToProps,
+  mapDispatchToProps,
 } from '../analytics'
 import { installationsStub } from '@/sagas/__stubs__/installations'
-import { mapStateToProps, mapDispatchToProps } from '@/components/pages/analytics'
 import { appsDataStub } from '@/sagas/__stubs__/apps'
 import { ReduxState } from '@/types/core'
 import { DeveloperState } from '@/reducers/developer'
@@ -97,6 +100,24 @@ describe('mapDispatchToProps', () => {
   })
 })
 
+describe('handleFetchAppUsageStatsDataUseCallback', () => {
+  it('should run correctly', () => {
+    const installationAppData = installationsStub.data || []
+    const fn = handleFetchAppUsageStatsDataUseCallback(installationAppData, loadStats)
+    fn()
+    expect(loadStats).toBeCalled()
+  })
+})
+
+describe('handleFetchAppUsageStatsDataUseEffect', () => {
+  it('should run correctly', () => {
+    const mockFunction = jest.fn()
+    const fn = handleFetchAppUsageStatsDataUseEffect(mockFunction)
+    fn()
+    expect(mockFunction).toBeCalled()
+  })
+})
+
 describe('InstallationTable', () => {
   const installedApps = handleMapAppNameToInstallation(
     installations.installationsAppData?.data || [],

packages/marketplace/src/components/pages/analytics.tsx

@@ -197,6 +197,27 @@ export const InstallationTable: React.FC<{
   )
 }
 
+export const handleFetchAppUsageStatsDataUseCallback = (
+  installationAppDataArray: InstallationModel[],
+  loadStats: (params: AppUsageStatsParams) => void,
+) => {
+  return () => {
+    const orderedInstallationsByDate: InstallationModel[] = orderBy(installationAppDataArray, ['created'], ['asc'])
+    const firstInstallationDate = orderedInstallationsByDate[0]
+    if (firstInstallationDate) {
+      loadStats({
+        dateFrom: firstInstallationDate.created,
+      })
+    }
+  }
+}
+
+export const handleFetchAppUsageStatsDataUseEffect = (fetchAppUsageStatsData: () => void) => {
+  return () => {
+    fetchAppUsageStatsData()
+  }
+}
+
 export const AnalyticsPage: React.FC<AnalyticsPageProps> = ({ installations, developer, appUsageStats, loadStats }) => {
   const installationAppDataArray = installations.installationsAppData?.data ?? []
   const developerDataArray = developer.developerData?.data?.data ?? []
@@ -206,19 +227,12 @@ export const AnalyticsPage: React.FC<AnalyticsPageProps> = ({ installations, dev
     [installationAppDataArray, developerDataArray],
   )
 
-  const fetchAppUsageStatsData = React.useCallback(() => {
-    const orderedInstallationsByDate: InstallationModel[] = orderBy(installationAppDataArray, ['created'], ['asc'])
-    const firstInstallationDate = orderedInstallationsByDate[0]
-    if (firstInstallationDate) {
-      loadStats({
-        dateFrom: firstInstallationDate.created,
-      })
-    }
-  }, [installationAppDataArray, loadStats])
+  const fetchAppUsageStatsData = React.useCallback(
+    handleFetchAppUsageStatsDataUseCallback(installationAppDataArray, loadStats),
+    [installationAppDataArray, loadStats],
+  )
 
-  React.useEffect(() => {
-    fetchAppUsageStatsData()
-  }, [fetchAppUsageStatsData])
+  React.useEffect(handleFetchAppUsageStatsDataUseEffect(fetchAppUsageStatsData), [fetchAppUsageStatsData])
 
   const appUsageStatsLoading = appUsageStats.loading
   const appUsageStatsData = appUsageStats.appUsageStatsData || {}