tests and aria-busy attempt

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

@@ -74,6 +74,8 @@ const ProfilePage = () => {
     refetchActive: true,
   });
 
+  const { isLoading: isSubmittingForm } = submitMutation;
+
   const handleSubmit = async body => {
     lockApp();
 
@@ -91,16 +93,16 @@ const ProfilePage = () => {
 
   if (isLoading) {
     return (
-      <Main labelledBy="title">
+      <Main>
         <Helmet title="User profile" />
-        <HeaderLayout id="title" title="Profile page" />
+        <HeaderLayout title="Profile page" />
         <CustomContentLayout isLoading />
       </Main>
     );
   }
 
   return (
-    <Main labelledBy="user-profile">
+    <Main aria-busy={isSubmittingForm}>
       <Helmet title="User profile" />
       <Formik
         onSubmit={handleSubmit}
@@ -113,7 +115,6 @@ const ProfilePage = () => {
           return (
             <Form>
               <HeaderLayout
-                id="user-profile"
                 title={data.username || `${data.firstname} ${data.lastname}`}
                 primaryAction={
                   <Button startIcon={<CheckIcon />} loading={isSubmitting} type="submit">

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

@@ -2,9 +2,10 @@ import React from 'react';
 import { render, waitFor, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
+// import { rest } from 'msw';
 import { ThemeProvider, lightTheme } from '@strapi/parts';
 import ProfilePage from '../index';
-import { serverUsername, serverNoUsername } from './utils/server';
+import server from './utils/server';
 
 jest.mock('../../../components/LocalesProvider/useLocalesProvider', () => () => ({
   changeLocale: () => {},
@@ -39,25 +40,22 @@ const App = (
 );
 
 describe('ADMIN | Pages | Profile page', () => {
-  // beforeAll(() => server.listen());
+  beforeAll(() => server.listen());
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   afterEach(() => {
-    serverUsername.resetHandlers();
+    server.resetHandlers();
-    serverNoUsername.resetHandlers();
   });
 
   afterAll(() => {
     jest.resetAllMocks();
-    serverUsername.close();
+    server.close();
-    serverNoUsername.close();
   });
 
   it('renders and matches the snapshot', async () => {
-    serverUsername.listen();
     const { container } = render(App);
     await waitFor(() => {
       expect(screen.getByText('Interface language')).toBeInTheDocument();
@@ -565,7 +563,7 @@ describe('ADMIN | Pages | Profile page', () => {
       }
 
       <main
-        aria-labelledby="user-profile"
+        aria-busy="false"
         class="c0"
         id="main-content"
         tabindex="-1"
@@ -590,7 +588,6 @@ describe('ADMIN | Pages | Profile page', () => {
                 >
                   <h1
                     class="c4"
-                    id="user-profile"
                   >
                     yolo
                   </h1>
@@ -1029,7 +1026,6 @@ describe('ADMIN | Pages | Profile page', () => {
   });
 
   it('should display username if it exists', async () => {
-    serverUsername.listen();
     render(App);
     await waitFor(() => {
       expect(screen.getByText('yolo')).toBeInTheDocument();
@@ -1037,10 +1033,30 @@ describe('ADMIN | Pages | Profile page', () => {
   });
 
   it("should display firstname/lastname if username doesn't exist", async () => {
-    // serverNoUsername.listen();
+    // TODO
+    // server.use(
+    //   rest.get('*/me', (req, res, ctx) => {
+    //     return res(
+    //       ctx.delay(100),
+    //       ctx.status(200),
+    //       ctx.json({
+    //         data: {
+    //           email: 'HOLA@michka.fr',
+    //           firstname: 'michoko',
+    //           lastname: 'ronronscelestes',
+    //           username: 'HOLA',
+    //           preferedLanguage: 'en',
+    //         },
+    //       })
+    //     )
+    //   }),
+    // )
     // const { queryByText } = render(App);
+    // // await waitFor(() => {
+    // //   expect(queryByText('michka@michka.fr')).not.toBeInTheDocument();
+    // // });
     // await waitFor(() => {
-    //   expect(queryByText('michoko@michka.fr')).toBeInTheDocument();
+    //   expect(screen.getByText('HOLA@michka.fr')).toBeInTheDocument();
     // });
   });
 });

packages/core/admin/admin/src/pages/ProfilePage/tests/utils/server.js

@@ -19,23 +19,6 @@ const handlers = [
   }),
 ];
 
-export const serverUsername = setupServer(...handlers);
+const server = setupServer(...handlers);
 
-const handlersNoUsername = [
+export default server;
-  rest.get('*/me', (req, res, ctx) => {
-    return res(
-      ctx.delay(100),
-      ctx.status(200),
-      ctx.json({
-        data: {
-          email: 'michoko@michka.fr',
-          firstname: 'michoko',
-          lastname: 'ronronscelestes',
-          preferedLanguage: 'en',
-        },
-      })
-    );
-  }),
-];
-
-export const serverNoUsername = setupServer(...handlersNoUsername);