fix: revert to mirage for tests

Author: spaenleh

cypress/e2e/analytics/main.cy.ts

@@ -28,7 +28,7 @@ describe('Analytics View', () => {
         itemId: APP_ITEM.id,
       },
     );
-    cy.visit(`/`);
+    cy.visit('/');
   });
 
   it('App', () => {
@@ -37,6 +37,7 @@ describe('Analytics View', () => {
 
   describe('getting general statistics cards', () => {
     it('check total user comments statistic card display the right value', () => {
+      cy.get(`#${ANALYTICS_GENERAL_TOTAL_COMMENTS_ID}`).scrollIntoView();
       cy.get(`#${ANALYTICS_GENERAL_TOTAL_COMMENTS_ID}`).should(
         'have.text',
         actions.length,

package.json

@@ -14,7 +14,7 @@
     "@codemirror/lang-javascript": "^6.2.2",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "@graasp/apps-query-client": "3.7.3",
+    "@graasp/apps-query-client": "github:graasp/graasp-apps-query-client#update-with-account",
     "@graasp/sdk": "^5.5.0",
     "@graasp/stylis-plugin-rtl": "^2.2.0",
     "@graasp/ui": "5.4.7",

src/main.tsx

@@ -32,7 +32,7 @@ if (MOCK_API) {
       appContext: window.Cypress ? window.appContext : defaultMockContext,
       database: window.Cypress ? window.database : buildDatabase(mockMembers),
     },
-    MockSolution.ServiceWorker,
+    window.Cypress ? MockSolution.MirageJS : MockSolution.ServiceWorker,
   );
 }
 

src/modules/main/AnalyticsView.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import CloudIcon from '@mui/icons-material/Cloud';
 import CommentIcon from '@mui/icons-material/Comment';
 import PeopleIcon from '@mui/icons-material/People';
-import { Alert, Box, Button, Grid, Typography } from '@mui/material';
+import { Alert, Box, Button, Grid2, Typography } from '@mui/material';
 
 import { AppAction } from '@graasp/sdk';
 import { Loader } from '@graasp/ui';
@@ -45,8 +45,13 @@ const AnalyticsView = (): JSX.Element => {
         <Box>
           {commentsByUserSide ? (
             <>
-              <Grid container spacing={2} marginTop={1} justifyContent="center">
-                <Grid xs={12} md={4} item>
+              <Grid2
+                container
+                spacing={2}
+                marginTop={1}
+                justifyContent="center"
+              >
+                <Grid2 size={{ xs: 12, md: 4 }}>
                   <StatisticCard
                     icon={<CommentIcon fontSize="large" color="primary" />}
                     title={t('STATISTIC_TOTAL_USER_COMMENTS_TITLE')}
@@ -59,8 +64,8 @@ const AnalyticsView = (): JSX.Element => {
                       {commentsByUserSide.length}
                     </Typography>
                   </StatisticCard>
-                </Grid>
-                <Grid xs={12} md={4} item>
+                </Grid2>
+                <Grid2 size={{ xs: 12, md: 4 }}>
                   <StatisticCard
                     icon={<PeopleIcon fontSize="large" color="primary" />}
                     title={t('STATISTIC_AVERAGE_USER_COMMENTS_TITLE')}
@@ -70,8 +75,8 @@ const AnalyticsView = (): JSX.Element => {
                         Object.keys(commentsByMembers).length}
                     </Typography>
                   </StatisticCard>
-                </Grid>
-                <Grid xs={12} md={4} item>
+                </Grid2>
+                <Grid2 size={{ xs: 12, md: 4 }}>
                   <StatisticCard
                     icon={<CloudIcon fontSize="large" color="primary" />}
                     title={t('WORDS_FREQUENCY')}
@@ -85,8 +90,8 @@ const AnalyticsView = (): JSX.Element => {
                       {t('SEE_WORDS_CLOUD')}
                     </Button>
                   </StatisticCard>
-                </Grid>
-              </Grid>
+                </Grid2>
+              </Grid2>
 
               <FrequentWords
                 commentsByUserSide={commentsByUserSide}

yarn.lock

@@ -2946,9 +2946,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/apps-query-client@npm:3.7.3":
+"@graasp/apps-query-client@github:graasp/graasp-apps-query-client#update-with-account":
   version: 3.7.3
-  resolution: "@graasp/apps-query-client@npm:3.7.3"
+  resolution: "@graasp/apps-query-client@https://github.com/graasp/graasp-apps-query-client.git#commit=fbfd31bb24256b255bfaa1afa86f004238502e32"
   dependencies:
     "@emotion/react": "npm:11.13.3"
     "@emotion/styled": "npm:11.13.0"
@@ -2970,7 +2970,7 @@ __metadata:
     date-fns: ^3.3.0 || ^4.0.0
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 10/a6ff4f2fa8635df76e1524d45dc749c8ce628867acaa0fba357851afba0d51296cb795ed5452761ce8a3a9116e6ccee6d579a252ec8abff6123fa8bf36a750a7
+  checksum: 10/3fb59af6221a5efe427a02118da70474fb2c5d2916669c36a36792c3e42062c608cab65d1437b8a8968ff80b8ccbdea0822bd7944c43df65d531a6488bd26b4f
   languageName: node
   linkType: hard
 
@@ -8608,7 +8608,7 @@ __metadata:
     "@eslint/compat": "npm:^1.2.4"
     "@eslint/eslintrc": "npm:^3.2.0"
     "@eslint/js": "npm:^9.17.0"
-    "@graasp/apps-query-client": "npm:3.7.3"
+    "@graasp/apps-query-client": "github:graasp/graasp-apps-query-client#update-with-account"
     "@graasp/sdk": "npm:^5.5.0"
     "@graasp/stylis-plugin-rtl": "npm:^2.2.0"
     "@graasp/ui": "npm:5.4.7"