Add snapshot test for list of plugins

packages/plugins/users-permissions/admin/src/components/Policies/index.js

@@ -25,7 +25,7 @@ const Policies = () => {
         <Text as="p" textColor="neutral600">
           {formatMessage({
             id: 'users-permissions.Policies.header.hint',
-            description:
+            defaultMessage:
               "Select the application's actions or the plugin's actions and click on the cog icon to display the bound route",
           })}
         </Text>

packages/plugins/users-permissions/admin/src/hooks/usePlugins/index.js

@@ -26,7 +26,6 @@ const usePlugins = (shouldFetchData = true) => {
       const [{ permissions }, { routes }, { policies }] = await Promise.all(
         [`/${pluginId}/permissions`, `/${pluginId}/routes`, `/${pluginId}/policies`].map(
           async endpoint => {
-            console.log('fetching', endpoint);
             const res = await axiosInstance.get(endpoint);
 
             return res.data;

packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js

@@ -33,8 +33,6 @@ const EditPage = () => {
   const { role, onSubmitSucceeded, isLoading: isLoadingRole } = useFetchRole(id);
   const permissionsRef = useRef();
 
-  console.log({ routes, isLoadingPlugins });
-
   const handleCreateRoleSubmit = async data => {
     // Set loading state
     lockApp();

packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js

@@ -5,26 +5,21 @@ import { ThemeProvider, lightTheme } from '@strapi/parts';
 import { Router, Switch, Route } from 'react-router-dom';
 import { IntlProvider } from 'react-intl';
 import { createMemoryHistory } from 'history';
-
 import pluginId from '../../../../pluginId';
 import RolesEditPage from '..';
 import server from './server';
 
-jest.mock('@strapi/helper-plugin', () => ({
-  ...jest.requireActual('@strapi/helper-plugin'),
-  useNotification: jest.fn(() => jest.fn()),
-  useOverlayBlocker: jest.fn(() => ({ lockApp: jest.fn(), unlockApp: jest.fn() })),
-}));
-
-jest.mock('../../../../hooks', () => {
-  const originalModule = jest.requireActual('../../../../hooks');
+jest.mock('@strapi/helper-plugin', () => {
+  // Make sure the references of the mock functions stay the same, otherwise we get an endless loop
+  const mockToggleNotification = jest.fn();
+  const mockUseNotification = jest.fn(() => {
+    return mockToggleNotification;
+  });
 
   return {
-    ...originalModule,
-    usePlugins: () => ({
-      ...originalModule.usePlugins,
-      isLoading: false,
-    }),
+    ...jest.requireActual('@strapi/helper-plugin'),
+    useNotification: mockUseNotification,
+    useOverlayBlocker: jest.fn(() => ({ lockApp: jest.fn(), unlockApp: jest.fn() })),
   };
 });
 
@@ -57,8 +52,9 @@ describe('Admin | containers | RoleEditPage', () => {
   afterAll(() => server.close());
 
   it('renders users-permissions edit role and matches snapshot', async () => {
-    const { container, getByTestId } = makeAndRenderApp();
+    const { container, getByTestId, getByRole } = makeAndRenderApp();
     await waitForElementToBeRemoved(() => getByTestId('loader'));
+    await waitFor(() => expect(getByRole('heading', { name: /permissions/i })).toBeInTheDocument());
 
     expect(container.firstChild).toMatchInlineSnapshot(`
       .c34 {
@@ -935,12 +931,12 @@ describe('Admin | containers | RoleEditPage', () => {
                       <h3
                         class="c33 c34"
                       >
-                        users-permissions.Policies.header.title
+                        Advanced settings
                       </h3>
                       <p
                         class="c9 c35"
                       >
-                        users-permissions.Policies.header.hint
+                        Select the application's actions or the plugin's actions and click on the cog icon to display the bound route
                       </p>
                     </div>
                   </div>

packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/server.js

@@ -4,10 +4,8 @@ import { rest } from 'msw';
 const handlers = [
   // Mock get role route
   rest.get('*/users-permissions/roles/:roleId', (req, res, ctx) => {
-    console.log('MOCK ROLE ID');
-
     return res(
-      ctx.delay(500),
+      ctx.delay(100),
       ctx.status(200),
       ctx.json({
         role: {
@@ -41,8 +39,6 @@ const handlers = [
 
   // Mock get all routes route
   rest.get('*/users-permissions/routes', (req, res, ctx) => {
-    console.log('mock ROUTE');
-
     return res(
       ctx.status(200),
       ctx.json({
@@ -98,6 +94,49 @@ const handlers = [
       })
     );
   }),
+
+  // Mock permissions route
+  rest.get('*/users-permissions/permissions', (req, res, ctx) => {
+    return res(
+      ctx.delay(100),
+      ctx.status(200),
+      ctx.json({
+        data: [
+          {
+            id: 113,
+            action: 'plugin::content-manager.explorer.create',
+            subject: 'plugin::users-permissions.user',
+            properties: {
+              fields: [
+                'username',
+                'email',
+                'provider',
+                'password',
+                'resetPasswordToken',
+                'confirmationToken',
+                'confirmed',
+                'blocked',
+                'role',
+                'picture',
+              ],
+            },
+            conditions: [],
+          },
+        ],
+      })
+    );
+  }),
+
+  // Mock policies route
+  rest.get('*/users-permissions/policies', (req, res, ctx) => {
+    return res(
+      ctx.delay(100),
+      ctx.status(200),
+      ctx.json({
+        policies: ['isAuthenticated', 'rateLimit'],
+      })
+    );
+  }),
 ];
 
 const server = setupServer(...handlers);