feat(test): implements builder tests

- feat(test): setup uploaded image before the test

Co-Authored-By: ReidyT <[email protected]>

cypress/e2e/builder/main.cy.ts

@@ -1,20 +1,131 @@
-import { Context, PermissionLevel } from '@graasp/sdk';
+import { AppSetting, Context, PermissionLevel } from '@graasp/sdk';
 
-import { CONFIGURATION_TAB_ID } from '../../../src/config/selectors';
+import {
+  ADD_LABELS_IMAGE_CONTAINER_ID,
+  ADD_LABEL_FORM_ID,
+  ADD_LABEL_SUBMIT_BTN_ID,
+  ALL_LABELS_CONTAINER_ID,
+  CONFIG_STEPPERS_ADD_LABELS_ID,
+  DELETE_LABEL_BTN_ID,
+  LABELS_WITHIN_FRAME_CONTAINER_ID,
+  NEW_LABEL_CONTENT_INPUT_ID,
+  buildDraggableLabelId,
+} from '../../../src/config/selectors';
+import {
+  MOCK_FILE_APP_SETTING,
+  MOCK_SETTING_DATA,
+  MOCK_SETTING_DATA_WITH_LABELS,
+} from '../../fixtures/appSettings';
+import { MOCK_IMG_FROM_FIXTURES } from '../../fixtures/images/links';
+import { loadFile } from '../../fixtures/images/utils';
 
+const addNewLabel = (content: string, isOpenForm?: boolean): void => {
+  if (isOpenForm) {
+    cy.get(`#${ADD_LABELS_IMAGE_CONTAINER_ID}`).click(200, 200);
+  }
+  cy.get(`#${NEW_LABEL_CONTENT_INPUT_ID}`).type(content);
+  cy.get(`#${ADD_LABEL_SUBMIT_BTN_ID}`).click();
+};
+
+const appSettings: AppSetting[] = [MOCK_SETTING_DATA, MOCK_FILE_APP_SETTING];
 describe('Builder View', () => {
-  beforeEach(() => {
-    cy.setUpApi(
-      {},
-      {
-        context: Context.Builder,
-        permission: PermissionLevel.Admin,
-      },
-    );
-    cy.visit('/');
+  describe('add labels step', () => {
+    beforeEach(() => {
+      loadFile(MOCK_IMG_FROM_FIXTURES, (file) => {
+        cy.setUpApi(
+          {
+            appSettings,
+            uploadedFiles: [
+              {
+                id: MOCK_FILE_APP_SETTING.id,
+                file,
+              },
+            ],
+          },
+          {
+            context: Context.Builder,
+            permission: PermissionLevel.Admin,
+          },
+        );
+        cy.visit('/');
+
+        // move to add labels step
+        // TODO: due to an issue, we have to click twice. Remove the second click when the issue is resolved.
+        // for more, see https://github.com/graasp/graasp-app-name-the-frame/issues/167.
+        cy.get(`#${CONFIG_STEPPERS_ADD_LABELS_ID}`).click();
+        cy.get(`#${CONFIG_STEPPERS_ADD_LABELS_ID}`).click();
+      });
+    });
+
+    it('click on app image should open add label form', () => {
+      cy.get(`#${ADD_LABELS_IMAGE_CONTAINER_ID}`).click(200, 200);
+      cy.get(`#${ADD_LABEL_FORM_ID}`).should('be.visible');
+    });
+
+    it('add new label', () => {
+      const labelContent = 'label1';
+      addNewLabel(labelContent, true);
+      cy.get(`#${buildDraggableLabelId(labelContent)}`).should('be.visible');
+    });
+
+    it('edit existing label', () => {
+      const content = 'label22';
+      const contentToEditTo = 'new-content';
+      addNewLabel(content, true);
+
+      cy.get(`#${buildDraggableLabelId(content)}`).click();
+      cy.get(`#${ADD_LABEL_FORM_ID}`).should('be.visible');
+      cy.get(`#${NEW_LABEL_CONTENT_INPUT_ID}`).clear();
+
+      addNewLabel(contentToEditTo);
+
+      cy.get(`#${buildDraggableLabelId(contentToEditTo)}`).should('be.visible');
+    });
+
+    it('delete existing label', () => {
+      const content = 'label22';
+      addNewLabel(content, true);
+
+      cy.get(`#${buildDraggableLabelId(content)}`).click();
+      cy.get(`#${ADD_LABEL_FORM_ID}`).should('be.visible');
+      cy.get(`#${DELETE_LABEL_BTN_ID}`).should('be.visible');
+      cy.get(`#${DELETE_LABEL_BTN_ID}`).click();
+      cy.get(`#${buildDraggableLabelId(content)}`).should('not.exist');
+    });
   });
 
-  it('App', () => {
-    cy.get(`#${CONFIGURATION_TAB_ID}`).should('be.visible');
+  describe('add preview step', () => {
+    beforeEach(() => {
+      loadFile(MOCK_IMG_FROM_FIXTURES, (file) => {
+        cy.setUpApi(
+          {
+            appSettings: [MOCK_SETTING_DATA_WITH_LABELS, MOCK_FILE_APP_SETTING],
+            uploadedFiles: [
+              {
+                id: MOCK_FILE_APP_SETTING.id,
+                file,
+              },
+            ],
+          },
+          {
+            context: Context.Builder,
+            permission: PermissionLevel.Admin,
+          },
+        );
+        cy.visit('/');
+      });
+    });
+
+    MOCK_SETTING_DATA_WITH_LABELS.data.labels?.forEach((label) => {
+      it(`expect to find ${label.content} label within all labels container and to have a draggable container for it`, () => {
+        cy.get(
+          `#${ALL_LABELS_CONTAINER_ID} #${buildDraggableLabelId(label.id)}`,
+        ).should('be.visible');
+
+        cy.get(
+          `#${LABELS_WITHIN_FRAME_CONTAINER_ID} #${buildDraggableLabelId(label.id)}`,
+        ).should('be.visible');
+      });
+    });
   });
 });

cypress/fixtures/appSettings.ts

@@ -0,0 +1,54 @@
+import { AppSetting } from '@graasp/sdk';
+
+import { v4 } from 'uuid';
+
+import { FileSettings, Settings, SettingsKeys } from '@/@types';
+
+import { MEMBERS } from './members';
+import { MOCK_SERVER_ITEM } from './mockItem';
+
+const EMPTY_SETTING: Pick<
+  AppSetting,
+  'item' | 'creator' | 'createdAt' | 'updatedAt'
+> = {
+  item: MOCK_SERVER_ITEM,
+  creator: MEMBERS.ANNA,
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+};
+
+export const MOCK_SETTING_DATA: AppSetting & { data: Settings } = {
+  ...EMPTY_SETTING,
+  id: v4(),
+  name: SettingsKeys.SettingsData,
+  data: {
+    description: 'item description',
+    labels: [],
+  },
+};
+
+const mockFileSettingId = v4();
+export const MOCK_FILE_APP_SETTING: AppSetting & { data: FileSettings } = {
+  ...EMPTY_SETTING,
+  id: mockFileSettingId,
+  name: SettingsKeys.File,
+  data: {
+    path: `apps/app-setting/${EMPTY_SETTING.item.id}/${mockFileSettingId}`,
+  },
+};
+
+export const MOCK_SETTING_DATA_WITH_LABELS: AppSetting & { data: Settings } = {
+  ...EMPTY_SETTING,
+  id: v4(),
+  name: SettingsKeys.SettingsData,
+  data: {
+    description: 'Drag and drop colors within the right place',
+    labels: [
+      { id: v4(), content: 'red', x: '20%', y: '80%' },
+      { id: v4(), content: 'green', x: '10%', y: '20%' },
+      { id: v4(), content: 'yellow', x: '80%', y: '30%' },
+      { id: v4(), content: 'blue', x: '50%', y: '50%' },
+      { id: v4(), content: 'white', x: '60%', y: '40%' },
+    ],
+  },
+};

cypress/fixtures/images/links.ts

@@ -0,0 +1 @@
+export const MOCK_IMG_FROM_FIXTURES = 'images/mock-img.png';

cypress/fixtures/images/utils.ts

@@ -0,0 +1,22 @@
+import { DASHBOARD_UPLOADER_INPUT_CLASS } from '@/config/selectors';
+
+const blobToFile = (blob: Blob): File => new File([blob], '');
+
+export const loadFile = (
+  pathWithinFixtures: string,
+  onLoad: (file: File) => void,
+): void => {
+  cy.fixture(pathWithinFixtures).then((file) => {
+    const blob = Cypress.Blob.base64StringToBlob(file);
+
+    onLoad?.(blobToFile(blob));
+  });
+};
+
+export const uploadImage = (imagePath: string): void => {
+  cy.get(`.${DASHBOARD_UPLOADER_INPUT_CLASS}`).first().selectFile(
+    imagePath,
+    // use force because the input is visually hidden
+    { force: true },
+  );
+};

cypress/fixtures/members.ts

@@ -1,23 +1,15 @@
-import { Member, MemberType } from '@graasp/sdk';
+import { Member } from '@graasp/sdk';
 
 export const MEMBERS: { [key: string]: Member } = {
   ANNA: {
     id: '0f0a2774-a965-4b97-afb4-bccc3796e060',
     name: 'anna',
-    type: MemberType.Individual,
     email: '[email protected]',
-    extra: {},
-    createdAt: new Date(),
-    updatedAt: new Date(),
   },
   BOB: {
     id: '1f0a2774-a965-4b97-afb4-bccc3796e060',
     name: 'bob',
-    type: MemberType.Individual,
     email: '[email protected]',
-    extra: {},
-    createdAt: new Date(),
-    updatedAt: new Date(),
   },
 };
 

cypress/fixtures/mockItem.ts

@@ -1,12 +1,18 @@
+import { AppItemExtra, ItemType } from '@graasp/sdk';
+
 import { MEMBERS } from './members';
 
 export const MOCK_SERVER_ITEM = {
   id: '123456789',
   name: 'app-starter-ts-vite',
+  displayName: 'app-starter-ts-vite',
   description: null,
   path: '',
   settings: {},
   creator: MEMBERS[0],
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: '2024-12-07',
+  updatedAt: '2024-12-07',
+  type: ItemType.APP,
+  extra: {} as AppItemExtra,
+  lang: 'en',
 };

cypress/tsconfig.json

@@ -1,10 +1,10 @@
 {
-  "extends": "../tsconfig.eslint.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "target": "es5",
     "lib": ["es5", "dom"],
     "types": ["cypress", "node"],
     "esModuleInterop": true
   },
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "../src/**/*.ts", "../src/@types/**/*.ts"]
 }

package.json

@@ -12,8 +12,8 @@
   "dependencies": {
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
-    "@graasp/apps-query-client": "3.4.15",
-    "@graasp/sdk": "4.12.2",
+    "@graasp/apps-query-client": "https://github.com/graasp/graasp-apps-query-client.git#migrate-to-msw-2",
+    "@graasp/sdk": "4.25.0",
     "@graasp/translations": "^1.28.0",
     "@graasp/ui": "4.17.1",
     "@mui/icons-material": "5.16.7",