fix: deps and prettier (#295)

fix: use preview instead of dev server
fix: force instrumentation when running in test mode

.eslintrc

@@ -31,6 +31,7 @@
     "sourceType": "module"
   },
   "rules": {
+    "import/order": "off",
     "react/function-component-definition": [
       2,
       {
@@ -47,7 +48,12 @@
     ],
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": [
-      "error"
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
     ],
     "@typescript-eslint/explicit-module-boundary-types": [
       "error",
@@ -159,5 +165,8 @@
         ]
       }
     }
-  }
+  },
+  "ignorePatterns": [
+    "node_modules/*"
+  ]
 }

.github/workflows/cypress.yml

@@ -29,18 +29,31 @@ jobs:
       - name: Type-check code
         run: tsc --noEmit
 
+      - name: Build App
+        run: yarn build:test
+        shell: bash
+        env:
+          VITE_PORT: 3112
+          VITE_VERSION: cypress-tests
+          VITE_GRAASP_DOMAIN: localhost
+          VITE_GRAASP_API_HOST: http://localhost:3636
+          VITE_GRAASP_AUTH_HOST: http://localhost:3001
+          VITE_GRAASP_BUILDER_HOST: http://localhost:3111
+          VITE_SHOW_NOTIFICATIONS: false
+
       #  use the Cypress GitHub Action to run Cypress tests within the chrome browser
       - name: Cypress run
         uses: cypress-io/github-action@v5
         with:
           install: false
-          start: yarn dev
+          start: yarn preview:test
           browser: chrome
           quiet: true
           config-file: cypress.config.ts
           cache-key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
         env:
           VITE_PORT: 3112
+          VITE_VERSION: cypress-tests
           VITE_GRAASP_DOMAIN: localhost
           VITE_GRAASP_API_HOST: http://localhost:3636
           VITE_GRAASP_AUTH_HOST: http://localhost:3001

.prettierrc

@@ -3,6 +3,8 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
+  "bracketSpacing": true,
+  "arrowParens": "always",
   "importOrder": [
     "^react",
     "^@?mui",
@@ -12,5 +14,6 @@
     "^[./]"
   ],
   "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

README.md

@@ -21,16 +21,32 @@ VITE_SHOW_NOTIFICATIONS=true
 
 ## Testing
 
+The tests are run using Cypress. Cypress only compiles the code for the tests, your app needs to run at the specified `baseUrl` in the cypress config.
+
+### Running tests in interactive mode
+
 Set the following environnement variables in `.env.test`
 
 ```sh
 VITE_PORT=3112
 VITE_GRAASP_API_HOST=http://localhost:3000
 VITE_GRAASP_AUTH_HOST=http://localhost:3001
-VITE_SENTRY_ENV=test
+VITE_GRAASP_BUILDER_HOST=http://localhost:3111
+VITE_GRAASP_LIBRARY_HOST=http://localhost:3005
 VITE_H5P_INTEGRATION_URL=
 VITE_SHOW_NOTIFICATIONS=false
 ```
 
-Run `yarn cypress`. This should run every tests headlessly.
-You can run `yarn cypress:open` to access the framework and visually display the tests' processes.
+Run `yarn start:test` and `yarn cypress:open` in 2 terminal windows.
+
+:warning: It is possible that the websocket test become flacks (or just stop passing) if you use the dev server. In that case, you can resort to first building the app in test mode `yarn build:test` and then starting a preview of the app with `yarn preview:test`.
+
+### Running all tests in headless mode
+
+You will need to have the `.env.test` file from the other section.
+
+You can simply run: `yarn test`. This will:
+
+1. Build your app in test mode (using the `.env.test` file to pull env variables)
+2. Start your app in preview mode (simply serve the generated files with a static http server, but using the same `.env.test` file)
+3. Start the cypress tests to run your full test suite (this can take a while depending on the number of tests you have)

package.json

@@ -15,7 +15,9 @@
     "start": "yarn dev",
     "start:test": "vite --mode test",
     "build": "tsc && vite build",
+    "build:test": "vite build --mode test",
     "preview": "vite preview",
+    "preview:test": "vite preview --mode test",
     "lint": "eslint .",
     "type-check": "tsc --noEmit",
     "check": "yarn prettier:check && yarn lint && yarn type-check",
@@ -24,25 +26,26 @@
     "hooks:uninstall": "husky uninstall",
     "hooks:install": "husky install",
     "cypress:open": "env-cmd -f ./.env.test cypress open",
-    "test": "concurrently -k -s first \"yarn start:test\" \"yarn cypress:run\"",
+    "cypress": "yarn test",
+    "test": "yarn build:test && concurrently -k -s first \"yarn preview:test\" \"yarn cypress:run\"",
     "cypress:run": "env-cmd -f ./.env.test cypress run --browser chrome"
   },
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.0",
-    "@graasp/query-client": "1.1.4",
-    "@graasp/sdk": "1.1.1",
-    "@graasp/translations": "1.15.0",
-    "@graasp/ui": "3.2.1",
-    "@mui/icons-material": "5.14.1",
+    "@graasp/query-client": "1.3.2",
+    "@graasp/sdk": "1.2.0",
+    "@graasp/translations": "1.18.0",
+    "@graasp/ui": "3.2.7",
+    "@mui/icons-material": "5.14.3",
     "@mui/lab": "5.0.0-alpha.137",
-    "@mui/material": "5.14.1",
-    "@sentry/react": "7.61.0",
-    "@sentry/tracing": "7.61.0",
+    "@mui/material": "5.14.3",
+    "@sentry/react": "7.61.1",
+    "@sentry/tracing": "7.61.1",
     "clsx": "1.2.1",
     "i18next": "22.4.15",
-    "immutable": "4.3.0",
+    "immutable": "4.3.1",
     "lodash.truncate": "4.4.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -56,8 +59,8 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "17.6.7",
-    "@cypress/code-coverage": "3.10.9",
-    "@trivago/prettier-plugin-sort-imports": "4.1.1",
+    "@cypress/code-coverage": "3.11.0",
+    "@trivago/prettier-plugin-sort-imports": "4.2.0",
     "@types/lodash.truncate": "^4.4.7",
     "@types/node": "^18.13.0",
     "@types/qs": "6.9.7",
@@ -66,30 +69,30 @@
     "@types/uuid": "9.0.2",
     "@typescript-eslint/eslint-plugin": "6.2.1",
     "@typescript-eslint/parser": "6.2.1",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-react": "^4.0.4",
     "commitlint": "17.6.7",
     "concurrently": "8.2.0",
-    "cypress": "12.16.0",
+    "cypress": "12.17.3",
     "cypress-iframe": "1.0.1",
     "cypress-vite": "1.4.2",
     "env-cmd": "10.1.0",
-    "eslint": "^8.34.0",
+    "eslint": "^8.46.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.8.0",
+    "eslint-config-prettier": "8.10.0",
     "eslint-import-resolver-typescript": "3.5.5",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.28.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.33.0",
+    "eslint-plugin-react": "7.33.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "http-status-codes": "2.2.0",
     "husky": "8.0.3",
     "path": "0.12.7",
-    "prettier": "^2.8.4",
+    "prettier": "3.0.1",
     "qs": "6.11.2",
     "rollup-plugin-visualizer": "5.9.2",
-    "typescript": "^5.0.0",
-    "vite": "^4.1.0",
-    "vite-plugin-checker": "^0.6.0",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9",
+    "vite-plugin-checker": "^0.6.1",
     "vite-plugin-istanbul": "4.1.0"
   },
   "packageManager": "[email protected]"

src/env.d.ts

@@ -6,6 +6,8 @@ interface ImportMetaEnv {
   readonly VITE_SHOW_NOTIFICATIONS: string;
   readonly VITE_GRAASP_AUTH_HOST: string;
   readonly VITE_GRAASP_H5P_INTEGRATION_URL: string;
+  readonly VITE_SENTRY_ENV: string;
+  readonly VITE_SENTRY_DSN: string;
   readonly VITE_VERSION: string;
 }
 

src/modules/item/Item.tsx

@@ -435,7 +435,7 @@ const Item = ({
             <Typography className={FOLDER_NAME_TITLE_CLASS} variant="h5">
               {item.name}
             </Typography>
-            <TextEditor value={item.description} />
+            <TextEditor value={item.description ?? undefined} />
 
             {childrenPaginated?.pages.map((page) => (
               <Fragment key={page.pageNumber}>

src/modules/userSwitch/UserSwitchWrapper.tsx

@@ -3,9 +3,8 @@ import { BUILDER } from '@graasp/translations';
 import { UserSwitchWrapper as GraaspUserSwitch } from '@graasp/ui';
 
 import { MEMBER_PROFILE_PATH, SIGN_IN_PATH } from '@/config/constants';
-import { DOMAIN } from '@/config/env';
 import { useBuilderTranslation } from '@/config/i18n';
-import { hooks, mutations } from '@/config/queryClient';
+import { mutations } from '@/config/queryClient';
 import {
   HEADER_MEMBER_MENU_BUTTON_ID,
   HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID,
@@ -24,11 +23,7 @@ type Props = {
 };
 
 const UserSwitchWrapper = ({ ButtonContent }: Props): JSX.Element => {
-  const {
-    data: member,
-    isLoading = true,
-    isSuccess: isSuccessUser = false,
-  } = useCurrentMemberContext();
+  const { data: member, isLoading = true } = useCurrentMemberContext();
   const { t: translateBuilder } = useBuilderTranslation();
   // const { mutateAsync: useSwitchMemberAsyncMutation } = useSwitchMember();
   const { mutate: useSignOutMutation } = useSignOut();
@@ -39,7 +34,6 @@ const UserSwitchWrapper = ({ ButtonContent }: Props): JSX.Element => {
       signOut={useSignOutMutation}
       currentMember={member}
       isCurrentMemberLoading={isLoading}
-      isCurrentMemberSuccess={isSuccessUser}
       // switchMember={useSwitchMemberAsyncMutation}
       seeProfileText={translateBuilder(BUILDER.USER_SWITCH_PROFILE_BUTTON)}
       signedOutTooltipText={translateBuilder(
@@ -48,9 +42,7 @@ const UserSwitchWrapper = ({ ButtonContent }: Props): JSX.Element => {
       signOutText={translateBuilder(BUILDER.USER_SWITCH_SIGN_OUT_BUTTON)}
       // switchMemberText={translateBuilder(BUILDER.USER_SWITCH_SWITCH_USER_TEXT)}
       profilePath={MEMBER_PROFILE_PATH}
-      domain={DOMAIN}
       redirectPath={SIGN_IN_PATH}
-      useMembers={hooks.useMembers}
       buttonId={HEADER_MEMBER_MENU_BUTTON_ID}
       signInMenuItemId={HEADER_MEMBER_MENU_SIGN_IN_BUTTON_ID}
       signOutMenuItemId={HEADER_MEMBER_MENU_SIGN_OUT_BUTTON_ID}

src/utils/item.ts

@@ -121,7 +121,7 @@ export const isUrlValid = (str: string): boolean => {
   return Boolean(str && pattern.test(str));
 };
 
-export const stripHtml = (str: string): string =>
+export const stripHtml = (str?: string | null): string | undefined =>
   str?.replace(/<[^>]*>?/gm, '');
 
 export const paginationContentFilter = (

vite.config.ts

@@ -19,6 +19,10 @@ export default ({ mode }: { mode: string }): UserConfigExport => {
         ignored: ['**/coverage/**'],
       },
     },
+    preview: {
+      port: parseInt(process.env.VITE_PORT, 10),
+      strictPort: true,
+    },
     build: {
       outDir: 'build',
     },
@@ -33,6 +37,7 @@ export default ({ mode }: { mode: string }): UserConfigExport => {
         exclude: ['node_modules', 'test/'],
         extension: ['.js', '.ts', '.tsx'],
         requireEnv: false,
+        forceBuildInstrument: mode === 'test',
         checkProd: true,
       }),
       ...(mode === 'dev'