deps(msw): migrates to v.2 (#389)

* feat: mocks upload app settings files

Co-authored-by: LinaYahya <[email protected]>

Author: ReidyT

README.md

@@ -101,19 +101,16 @@ if (process.env.REACT_APP_ENABLE_MOCK_API === 'true') {
 ```js
 import { buildDatabase } from '@graasp/apps-query-client';
 
-Cypress.Commands.add(
-  'setUpApi',
-  ({ currentMember = CURRENT_MEMBER, database = {}, appContext } = {}) => {
-    // mock api and database
-    Cypress.on('window:before:load', (win) => {
-      win.database = buildDatabase({
-        members: Object.values(MEMBERS),
-        ...database,
-      });
-      win.appContext = appContext;
+Cypress.Commands.add('setUpApi', ({ currentMember = CURRENT_MEMBER, database = {}, appContext } = {}) => {
+  // mock api and database
+  Cypress.on('window:before:load', (win) => {
+    win.database = buildDatabase({
+      members: Object.values(MEMBERS),
+      ...database,
     });
-  },
-);
+    win.appContext = appContext;
+  });
+});
 ```
 
 3. Then in all your tests you will need to set up the database and context. The default values are configured so you can easily mount an empty and operational database.
@@ -131,3 +128,41 @@ cy.setUpApi({
   },
 });
 ```
+
+### Mock Uploaded files
+
+If you need to have files in the mocked server, you can use the `uploadedFiles` array of the `setupApi`. The following are steps to follow if you want to upload and retrieve a file for an app.
+
+1. Create a new `AppSetting` and add it in the `appSettings` array of the `setupApi` (in the Cypress test of the frontend).
+
+```ts
+// MOCK_FILE_APP_SETTING
+{
+  id: mockFileSettingId,
+  name: 'file', // should be named `file`! Do not change it!
+  data: {
+    path: `apps/app-setting/${item.id}/${mockFileSettingId}`, // This path should be mocked in the MSW! If you want to use another path, you just have to mock it.
+  },
+  item,
+  creator,
+  createdAt,
+  updatedAt,
+};
+```
+
+2. Load a file and transform it into a `File` type. With Cypress, have a look to `cy.fixtures` (put the `setupApi` in the `then` callback).
+3. Add the loaded file in the array.
+
+```ts
+uploadedFiles: [
+  {
+    id: MOCK_FILE_APP_SETTING.id,
+    file,
+  },
+],
+```
+
+4. Use the mocked route `GET /app-items/app-settings/:appSettingId/download` (or your mocked route) to retrieve the path of the file.
+5. Use the result of the previous request to download the file. In this example, it's the route `GET /download-app-setting-url/:appSettingId`.
+
+Another solution could be to upload your file from the Cypress test, by using the route `/app-items/app-settings-/upload?id=:itemId` for example.

package.json

@@ -46,7 +46,7 @@
     "dexie": "4.0.8",
     "http-status-codes": "2.3.0",
     "miragejs": "0.1.48",
-    "msw": "1.3.3",
+    "msw": "2.3.5",
     "uuid": "10.0.0"
   },
   "devDependencies": {

src/mockServer/fixtures.ts

@@ -58,10 +58,12 @@ export const buildDatabase = ({
   appSettings = [],
   members = [MOCK_SERVER_MEMBER],
   items = [MOCK_SERVER_ITEM],
+  uploadedFiles = [],
 }: Partial<Database> = {}): Database => ({
   appData,
   appActions,
   appSettings,
   members,
   items,
+  uploadedFiles,
 });

src/mockServer/msw/dexie-db.ts

@@ -2,7 +2,7 @@ import { AppAction, AppData, AppSetting, DiscriminatedItem, Member } from '@graa
 
 import Dexie from 'dexie';
 
-import { Database, LocalContext } from '../../types';
+import { Database, LocalContext, MockUploadedFile } from '../../types';
 
 type OptionalIndexed<T extends { id: string }, P extends keyof T = 'id'> = {
   [Key in keyof T as Key extends P ? Key : never]?: T[Key];
@@ -27,6 +27,8 @@ export class AppMocks extends Dexie {
 
   appAction!: Dexie.Table<AppAction, string>;
 
+  uploadedFiles!: Dexie.Table<MockUploadedFile, string>;
+
   constructor(name?: string) {
     super(name ?? 'graasp-app-mocks');
 
@@ -42,6 +44,10 @@ export class AppMocks extends Dexie {
       appSetting: 'id, item.id, name',
       appAction: 'id, memberId',
     });
+
+    this.version(2).stores({
+      uploadedFiles: 'id',
+    });
   }
 
   seed(data: Partial<Database> & { appContext?: LocalContext }): void {
@@ -64,6 +70,9 @@ export class AppMocks extends Dexie {
     if (data.appActions?.length) {
       this.appAction.bulkAdd(data.appActions);
     }
+    if (data.uploadedFiles?.length) {
+      this.uploadedFiles.bulkAdd(data.uploadedFiles);
+    }
   }
 
   resetDB(data?: Partial<Database> & { appContext?: LocalContext }): void {