Merge pull request #16809 from strapi/chore/use-content-types-docs

Chore: Add docs and auto-mock for useContentTypes()

docs/docs/docs/01-core/content-manager/hooks/use-content-types.mdx

@@ -0,0 +1,25 @@
+---
+title: useContentTypes
+description: API reference for the useContentTypes hook in Strapi's Content Manager
+tags:
+  - content-manager
+  - hooks
+  - fetch
+  - content-types
+  - components
+---
+
+An abstraction around `react-query` to fetch content-types and components. It returns the raw API response
+for components. `collectionTypes` and `singleTypes` are filtered by `isDisplayed=true`.
+
+## Usage
+
+```jsx
+import { useContentTypes } from 'path/to/hooks';
+
+const MyComponent = () => {
+  const { isLoading, collectionTypes, singleTypes, components } = useContentTypes();
+
+  return (/* ... */);
+};
+```

jest-preset.front.js

@@ -30,6 +30,8 @@ const moduleNameMapper = {
 module.exports = {
   rootDir: __dirname,
   moduleNameMapper,
+  /* Tells jest to ignore duplicated manual mock files, such as index.js */
+  modulePathIgnorePatterns: ['.*__mocks__.*'],
   testPathIgnorePatterns: ['node_modules/', '__tests__'],
   globalSetup: '@strapi/admin-test-utils/global-setup',
   setupFiles: ['@strapi/admin-test-utils/environment'],

packages/core/admin/admin/src/hooks/useContentTypes/__mocks__/index.js

@@ -0,0 +1,6 @@
+export const useContentTypes = jest.fn().mockReturnValue({
+  isLoading: false,
+  components: [],
+  collectionTypes: [],
+  singleTypes: [],
+});

packages/core/admin/admin/src/hooks/useContentTypes/tests/index.test.js

@@ -5,7 +5,7 @@ import { renderHook } from '@testing-library/react-hooks';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
-import { useContentTypes } from '../useContentTypes';
+import { useContentTypes } from '..';
 
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),

packages/core/admin/admin/src/hooks/useContentTypes/useContentTypes.js

@@ -2,6 +2,8 @@ import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/hel
 import { useQueries } from 'react-query';
 
 export function useContentTypes() {
+  console.log('----> read');
+
   const { get } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
   const toggleNotification = useNotification();

packages/core/admin/admin/src/pages/HomePage/index.js

@@ -11,6 +11,7 @@ import { useHistory } from 'react-router-dom';
 import { LoadingIndicatorPage, useGuidedTour } from '@strapi/helper-plugin';
 import { Layout, Main, Box, Grid, GridItem } from '@strapi/design-system';
 import useLicenseLimitNotification from 'ee_else_ce/hooks/useLicenseLimitNotification';
+
 import cornerOrnamentPath from './assets/corner-ornament.svg';
 import { useContentTypes } from '../../hooks/useContentTypes';
 import isGuidedTourCompleted from '../../components/GuidedTour/utils/isGuidedTourCompleted';

packages/core/admin/admin/src/pages/HomePage/tests/index.test.js

@@ -50,12 +50,6 @@ const App = (
 );
 
 describe('Homepage', () => {
-  useContentTypes.mockReturnValue({
-    isLoading: false,
-    collectionTypes: [],
-    singleTypes: [],
-  });
-
   test('should render all homepage links', () => {
     const { getByRole } = render(App);
     expect(getByRole('link', { name: /we are hiring/i })).toBeInTheDocument();