feat: add msw alternative for mocking

.eslintrc

@@ -1,29 +1,132 @@
 {
-  "parser": "@typescript-eslint/parser",
   "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "plugin:import/typescript", // this is needed because airbnb uses eslint-plugin-import
+    "prettier",
+    "plugin:cypress/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended"
   ],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier",
+    "react-hooks"
+  ],
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jest": true
+  },
+  "globals": {
+    "cy": true,
+    "Cypress": true
+  },
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "project": "./tsconfig.eslint.json",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
     "sourceType": "module"
   },
   "rules": {
-    "semi": [
+    "react/prop-types": "off",
+    "react/no-array-index-key": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/destructuring-assignment": "off",
+    "react/require-default-props": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "import/no-import-module-exports": "off",
+    "import/no-extraneous-dependencies": [
       "error",
-      "always"
+      {
+        "devDependencies": true
+      }
     ],
-    "quotes": [
+    "import/prefer-default-export": "off",
+    "prettier/prettier": "error",
+    "import/extensions": [
       "error",
-      "single"
+      "ignorePackages",
+      {
+        "ts": "never",
+        "js": "never",
+        "tsx": "never"
+      }
     ],
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-explicit-any": 1,
-    "@typescript-eslint/no-inferrable-types": [
+    "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        "allowExpressions": true,
+        "allowHigherOrderFunctions": true,
+        "allowTypedFunctionExpressions": true
+      }
+    ],
+    "@typescript-eslint/no-var-requires": "off",
+    "global-require": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "comma-dangle": "off",
+    "@typescript-eslint/comma-dangle": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-filename-extension": [
       "warn",
       {
-        "ignoreParameters": true
+        "extensions": [
+          ".tsx"
+        ]
+      }
+    ],
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function"
       }
     ],
-    "@typescript-eslint/no-unused-vars": "warn"
+    // eslint rule reports false error
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": [
+      "error"
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ]
+  },
+  "settings": {
+    "import/extensions": [
+      ".js",
+      ".jsx",
+      ".ts",
+      ".tsx"
+    ],
+    "import/parsers": {
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      },
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
+      }
+    }
   }
 }

.prettierrc

@@ -2,5 +2,9 @@
   "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "importOrder": ["^react", "^@?mui", "^@?graasp", "<THIRD_PARTY_MODULES>", "^@/", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.3.cjs

README.md

@@ -43,12 +43,7 @@ import {
 
 const values = configureQueryClient({
   GRAASP_APP_KEY: process.env.REACT_APP_GRAASP_APP_KEY,
-  // build mock parent window given cypress (app) context or mock data
-  targetWindow: process.env.REACT_APP_ENABLE_MOCK_API === 'true'
-    ? buildMockParentWindow(
-        buildMockLocalContext(window.appContext),
-      )
-    : window.parent,
+  isStandalone: MOCK_API,
 });
 export values;
 ```

example/package.json

@@ -11,20 +11,20 @@
   },
   "dependencies": {
     "@graasp/apps-query-client": "link:..",
-    "@mui/icons-material": "5.14.0",
-    "@mui/material": "5.14.0",
-    "@tanstack/react-query": "4.32.5",
-    "@testing-library/jest-dom": "5.16.5",
+    "@mui/icons-material": "5.14.15",
+    "@mui/material": "5.14.15",
+    "@tanstack/react-query": "4.36.1",
+    "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/jest": "29.5.3",
-    "@types/node": "20.4.1",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
+    "@testing-library/user-event": "14.5.1",
+    "@types/jest": "29.5.6",
+    "@types/node": "20.8.9",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-scripts": "5.0.1",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "7.8.3"

example/src/configureQueryClient.ts

@@ -1,7 +1,7 @@
 import configureQueryClient from '@graasp/apps-query-client';
 const queryConfig = {
   API_HOST: 'http://localhost:3000',
-  notifier: (payload: { type: string; payload: any }) => {
+  notifier: (payload) => {
     console.log(payload);
   },
 };

jest.config.ts

@@ -122,7 +122,7 @@ export default {
   // runner: "jest-runner",
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  // setupFiles: ['<rootDir>/test/setupTests.ts'],
+  setupFiles: ['<rootDir>/test/setupTests.ts'],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   setupFilesAfterEnv: ['<rootDir>/test/setupTestsAfterEnv.ts'],
@@ -134,7 +134,7 @@ export default {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  // testEnvironment: "jest-environment-node",
+  testEnvironment: 'jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},

package.json

@@ -11,7 +11,8 @@
   "contributors": [
     "Kim Lan Phan Hoang",
     "Basile Spaenlehauer",
-    "Jérémy La Scala"
+    "Jérémy La Scala",
+    "Thibault Reidy"
   ],
   "workspaces": [
     "example"
@@ -40,45 +41,54 @@
     "test:ci": "yarn && cd example && yarn && cd .. && yarn test"
   },
   "dependencies": {
-    "@graasp/sdk": "1.9.0",
-    "axios": "1.4.0",
-    "http-status-codes": "2.2.0",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "@graasp/sdk": "1.10.1",
+    "@mui/icons-material": "5.14.15",
+    "@mui/material": "5.14.15",
+    "axios": "0.27.2",
+    "dexie": "3.2.4",
+    "http-status-codes": "2.3.0",
     "immutable": "4.3.4",
     "miragejs": "0.1.47",
+    "msw": "1.3.2",
     "qs": "6.11.2",
-    "uuid": "9.0.0"
+    "uuid": "9.0.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.7.1",
-    "@commitlint/config-conventional": "17.7.0",
-    "@tanstack/react-query": "4.32.5",
-    "@tanstack/react-query-devtools": "4.32.5",
-    "@testing-library/react-hooks": "8.0.1",
-    "@types/jest": "29.5.3",
-    "@types/node": "20.4.5",
-    "@types/qs": "6.9.7",
-    "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7",
-    "@types/uuid": "9.0.2",
-    "@typescript-eslint/eslint-plugin": "6.4.1",
-    "@typescript-eslint/parser": "6.4.1",
-    "@vitejs/plugin-react": "4.0.4",
-    "eslint": "8.48.0",
+    "@commitlint/cli": "17.8.1",
+    "@commitlint/config-conventional": "17.8.1",
+    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query-devtools": "4.36.1",
+    "@testing-library/react": "14.0.0",
+    "@trivago/prettier-plugin-sort-imports": "4.2.1",
+    "@types/jest": "29.5.6",
+    "@types/node": "20.8.9",
+    "@types/qs": "6.9.9",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
+    "@types/uuid": "9.0.6",
+    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/parser": "6.9.0",
+    "@vitejs/plugin-react": "4.1.0",
+    "eslint": "8.52.0",
     "eslint-config-prettier": "9.0.0",
     "husky": "8.0.3",
-    "jest": "29.6.2",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "jest-immutable-matchers": "3.0.0",
-    "nock": "13.3.2",
-    "prettier": "3.0.0",
+    "nock": "13.3.6",
+    "prettier": "3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
     "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
-    "typescript": "5.1.6",
-    "vite": "4.4.7",
-    "vite-plugin-checker": "0.6.1",
-    "vite-plugin-dts": "3.5.0"
+    "typescript": "5.2.2",
+    "vite": "4.5.0",
+    "vite-plugin-checker": "0.6.2",
+    "vite-plugin-dts": "3.6.2",
+    "vitest": "0.34.6"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^4.28.0",
@@ -89,5 +99,5 @@
   "files": [
     "dist"
   ],
-  "packageManager": "[email protected].1"
+  "packageManager": "[email protected].3"
 }

src/api/appAction.ts

@@ -1,7 +1,8 @@
-import { buildGetAppActionsRoute, buildPostAppActionRoute } from './routes';
-import { ApiData } from '../types';
 import { AppAction } from '@graasp/sdk';
+
+import { ApiData } from '../types';
 import configureAxios from './axios';
+import { buildGetAppActionsRoute, buildPostAppActionRoute } from './routes';
 
 const axios = configureAxios();
 

src/api/appData.ts

@@ -1,13 +1,14 @@
+import { AppData, UUID } from '@graasp/sdk';
+
+import { ApiData } from '../types';
+import configureAxios from './axios';
 import {
   buildDeleteAppDataRoute,
   buildDownloadAppDataFileRoute,
   buildGetAppDataRoute,
   buildPatchAppDataRoute,
   buildPostAppDataRoute,
 } from './routes';
-import { ApiData } from '../types';
-import { AppData, UUID } from '@graasp/sdk';
-import configureAxios from './axios';
 
 const axios = configureAxios();
 
@@ -49,7 +50,7 @@ export const patchAppData = (args: ApiData & Partial<AppData> & { id: UUID }): P
         },
       },
     )
-    .then(({ data }) => data);
+    .then(({ data: newData }) => newData);
 };
 
 export const deleteAppData = (
@@ -80,7 +81,7 @@ export const getAppDataFile = async ({
   id: string;
   apiHost: string;
   token: string;
-}) => {
+}): Promise<Blob> => {
   const url = await axios
     .get(`${apiHost}/${buildDownloadAppDataFileRoute(id)}`, {
       headers: {