[1439] Add frontend tests for ToolbarActions

Bug: #1439
Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActionWidget.tsx

@@ -204,7 +204,7 @@ export const ToolbarActionWidget = ({
       draggable="true"
       onDragStart={handleDragStart}>
       <div
-        data-testid="ToolbarAction-DropArea"
+        data-testid={`ToolbarAction-DropArea-${toolbarAction.id}`}
         className={classes.placeholder}
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActions.tsx

@@ -178,7 +178,7 @@ export const ToolbarActions = ({
         onDrop={handleDrop}
       />
       <div className={classes.newToolbarAction}>
-        <Tooltip title={'Add new Toolbar Action'} arrow key={'FormDescriptionEditor-ToolbarActions-NewAction'}>
+        <Tooltip title={'Add new Toolbar Action'} arrow data-testid={'FormDescriptionEditor-ToolbarActions-NewAction'}>
           <IconButton size="small" aria-label="add" color="primary" onClick={handleAddToolbarAction}>
             <AddIcon />
           </IconButton>

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/__tests__/ToolbarActions.test.tsx

@@ -0,0 +1,356 @@
+/*******************************************************************************
+ * Copyright (c) 2022 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { MockedProvider, MockedResponse } from '@apollo/client/testing';
+import { Selection } from '@eclipse-sirius/sirius-components-core';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, expect, test, vi } from 'vitest';
+import {
+  addToolbarActionMutation,
+  deleteToolbarActionMutation,
+  moveToolbarActionMutation,
+} from '../FormDescriptionEditorEventFragment';
+import {
+  GQLAddToolbarActionMutationData,
+  GQLAddToolbarActionMutationVariables,
+  GQLAddToolbarActionSuccessPayload,
+  GQLDeleteToolbarActionMutationData,
+  GQLDeleteToolbarActionMutationVariables,
+  GQLDeleteToolbarActionSuccessPayload,
+  GQLFormDescriptionEditor,
+  GQLFormDescriptionEditorToolbarAction,
+  GQLMoveToolbarActionMutationData,
+  GQLMoveToolbarActionMutationVariables,
+  GQLMoveToolbarActionSuccessPayload,
+} from '../FormDescriptionEditorEventFragment.types';
+import { ToolbarActions } from '../ToolbarActions';
+import { DataTransfer } from './DataTransfer';
+
+vi.mock('uuid', () => ({ v4: () => '48be95fc-3422-45d3-b1f9-d590e847e9e1' }));
+
+afterEach(() => cleanup());
+
+const emptySelection: Selection = {
+  entries: [],
+};
+
+const emptySetSelection = (_: Selection) => {};
+
+const addToolbarActionVariables: GQLAddToolbarActionMutationVariables = {
+  input: {
+    id: '48be95fc-3422-45d3-b1f9-d590e847e9e1',
+    editingContextId: 'editingContextId',
+    representationId: 'formDescriptionEditorId',
+    containerId: null,
+  },
+};
+const addToolbarActionSuccessPayload: GQLAddToolbarActionSuccessPayload = {
+  __typename: 'AddToolbarActionSuccessPayload',
+  id: '48be95fc-3422-45d3-b1f9-d590e847e9e1',
+};
+const addToolbarActionSuccessData: GQLAddToolbarActionMutationData = {
+  addToolbarAction: addToolbarActionSuccessPayload,
+};
+
+const deleteToolbarActionVariables: GQLDeleteToolbarActionMutationVariables = {
+  input: {
+    id: '48be95fc-3422-45d3-b1f9-d590e847e9e1',
+    editingContextId: 'editingContextId',
+    representationId: 'formDescriptionEditorId',
+    toolbarActionId: 'ToolbarAction1',
+  },
+};
+const deleteToolbarActionSuccessPayload: GQLDeleteToolbarActionSuccessPayload = {
+  __typename: 'DeleteToolbarActionSuccessPayload',
+  id: '48be95fc-3422-45d3-b1f9-d590e847e9e1',
+};
+const deleteToolbarActionSuccessData: GQLDeleteToolbarActionMutationData = {
+  deleteToolbarAction: deleteToolbarActionSuccessPayload,
+};
+
+const moveToolbarActionVariables: GQLMoveToolbarActionMutationVariables = {
+  input: {
+    id: '48be95fc-3422-45d3-b1f9-d590e847e9e1',
+    editingContextId: 'editingContextId',
+    representationId: 'formDescriptionEditorId',
+    toolbarActionId: 'ToolbarAction2',
+    containerId: null,
+    index: 0,
+  },
+};
+const moveToolbarActionSuccessPayload: GQLMoveToolbarActionSuccessPayload = {
+  __typename: 'MoveToolbarActionSuccessPayload',
+  id: '48be95fc-3422-45d3-b1f9-d590e847e9e1',
+};
+const moveToolbarActionSuccessData: GQLMoveToolbarActionMutationData = {
+  moveToolbarAction: moveToolbarActionSuccessPayload,
+};
+
+const moveToolbarActionAtTheEndVariables: GQLMoveToolbarActionMutationVariables = {
+  input: {
+    id: '48be95fc-3422-45d3-b1f9-d590e847e9e1',
+    editingContextId: 'editingContextId',
+    representationId: 'formDescriptionEditorId',
+    toolbarActionId: 'ToolbarAction2',
+    containerId: null,
+    index: 1,
+  },
+};
+const moveToolbarActionAtTheEndSuccessPayload: GQLMoveToolbarActionSuccessPayload = {
+  __typename: 'MoveToolbarActionSuccessPayload',
+  id: '48be95fc-3422-45d3-b1f9-d590e847e9e1',
+};
+const moveToolbarActionAtTheEndSuccessData: GQLMoveToolbarActionMutationData = {
+  moveToolbarAction: moveToolbarActionAtTheEndSuccessPayload,
+};
+
+test('add ToolbarAction by clicking on the Add Toolbar Action button', async () => {
+  const toolbarAction: GQLFormDescriptionEditorToolbarAction = {
+    id: 'ToolbarAction1',
+    label: 'ToolbarAction1',
+    kind: 'ToolbarAction',
+  };
+  const formDescriptionEditor: GQLFormDescriptionEditor = {
+    id: 'FormDescriptionEditor1',
+    metadata: {
+      id: 'FormDescriptionEditor1',
+      description: { id: 'FormDescriptionEditorRepresentation' },
+      kind: 'FormDescriptionEditor',
+      label: 'FormDescriptionEditor1',
+    },
+    toolbarActions: [toolbarAction],
+    widgets: [],
+  };
+  let addToolbarActionCalled: boolean = false;
+  const addToolbarActionSuccessMock: MockedResponse<Record<string, any>> = {
+    request: {
+      query: addToolbarActionMutation,
+      variables: addToolbarActionVariables,
+    },
+    result: () => {
+      addToolbarActionCalled = true;
+      return { data: addToolbarActionSuccessData };
+    },
+  };
+
+  const mocks: MockedResponse<Record<string, any>>[] = [addToolbarActionSuccessMock];
+
+  render(
+    <MockedProvider mocks={mocks}>
+      <ToolbarActions
+        editingContextId="editingContextId"
+        representationId="formDescriptionEditorId"
+        formDescriptionEditor={formDescriptionEditor}
+        selection={emptySelection}
+        setSelection={emptySetSelection}
+      />
+    </MockedProvider>
+  );
+
+  const element: HTMLElement = screen.getByTestId('FormDescriptionEditor-ToolbarActions-NewAction');
+  element.click();
+
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await waitFor(() => {
+      expect(addToolbarActionCalled).toBeTruthy();
+    });
+  });
+});
+
+test('delete the ToolbarAction from the ToolbarActions', async () => {
+  const toolbarAction1: GQLFormDescriptionEditorToolbarAction = {
+    id: 'ToolbarAction1',
+    label: 'ToolbarAction1',
+    kind: 'ToolbarAction',
+  };
+  const toolbarAction2: GQLFormDescriptionEditorToolbarAction = {
+    id: 'ToolbarAction2',
+    label: 'ToolbarAction2',
+    kind: 'ToolbarAction',
+  };
+  const formDescriptionEditor: GQLFormDescriptionEditor = {
+    id: 'FormDescriptionEditor1',
+    metadata: {
+      id: 'FormDescriptionEditor1',
+      description: { id: 'FormDescriptionEditorRepresentation' },
+      kind: 'FormDescriptionEditor',
+      label: 'FormDescriptionEditor1',
+    },
+    toolbarActions: [toolbarAction1, toolbarAction2],
+    widgets: [],
+  };
+
+  let deleteToolbarActionCalled: boolean = false;
+  const deleteToolbarActionSuccessMock: MockedResponse<Record<string, any>> = {
+    request: {
+      query: deleteToolbarActionMutation,
+      variables: deleteToolbarActionVariables,
+    },
+    result: () => {
+      deleteToolbarActionCalled = true;
+      return { data: deleteToolbarActionSuccessData };
+    },
+  };
+
+  const mocks: MockedResponse<Record<string, any>>[] = [deleteToolbarActionSuccessMock];
+
+  render(
+    <MockedProvider mocks={mocks}>
+      <ToolbarActions
+        editingContextId="editingContextId"
+        representationId="formDescriptionEditorId"
+        formDescriptionEditor={formDescriptionEditor}
+        selection={emptySelection}
+        setSelection={emptySetSelection}
+      />
+    </MockedProvider>
+  );
+
+  const toolbarActionElt: HTMLElement = screen.getByTestId('ToolbarAction1');
+  expect(toolbarActionElt).not.toBeUndefined();
+
+  await act(async () => {
+    toolbarActionElt.focus();
+    fireEvent.keyDown(toolbarActionElt, { key: 'Delete', code: 'NumpadDecimal' });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await waitFor(() => {
+      expect(deleteToolbarActionCalled).toBeTruthy();
+    });
+  });
+});
+
+test('move the existing ToolbarAction from/into the drop area', async () => {
+  const toolbarAction1: GQLFormDescriptionEditorToolbarAction = {
+    id: 'ToolbarAction1',
+    label: 'ToolbarAction1',
+    kind: 'ToolbarAction',
+  };
+  const toolbarAction2: GQLFormDescriptionEditorToolbarAction = {
+    id: 'ToolbarAction2',
+    label: 'ToolbarAction2',
+    kind: 'ToolbarAction',
+  };
+  const formDescriptionEditor: GQLFormDescriptionEditor = {
+    id: 'FormDescriptionEditor1',
+    metadata: {
+      id: 'FormDescriptionEditor1',
+      description: { id: 'FormDescriptionEditorRepresentation' },
+      kind: 'FormDescriptionEditor',
+      label: 'FormDescriptionEditor1',
+    },
+    toolbarActions: [toolbarAction1, toolbarAction2],
+    widgets: [],
+  };
+
+  let moveToolbarActionCalled: boolean = false;
+  const moveToolbarActionSuccessMock: MockedResponse<Record<string, any>> = {
+    request: {
+      query: moveToolbarActionMutation,
+      variables: moveToolbarActionVariables,
+    },
+    result: () => {
+      moveToolbarActionCalled = true;
+      return { data: moveToolbarActionSuccessData };
+    },
+  };
+
+  const mocks: MockedResponse<Record<string, any>>[] = [moveToolbarActionSuccessMock];
+
+  render(
+    <MockedProvider mocks={mocks}>
+      <ToolbarActions
+        editingContextId="editingContextId"
+        representationId="formDescriptionEditorId"
+        formDescriptionEditor={formDescriptionEditor}
+        selection={emptySelection}
+        setSelection={emptySetSelection}
+      />
+    </MockedProvider>
+  );
+
+  const element: HTMLElement = screen.getByTestId('ToolbarAction-DropArea-ToolbarAction1');
+
+  const dataTransfer: DataTransfer = new DataTransfer();
+  dataTransfer.setData('text/plain', 'ToolbarAction2');
+  fireEvent.drop(element, { dataTransfer });
+
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await waitFor(() => {
+      expect(moveToolbarActionCalled).toBeTruthy();
+    });
+  });
+});
+
+test('move the existing ToolbarAction from/into the drop area located at the end of the ToolbarActions', async () => {
+  const toolbarAction1: GQLFormDescriptionEditorToolbarAction = {
+    id: 'ToolbarAction1',
+    label: 'ToolbarAction1',
+    kind: 'ToolbarAction',
+  };
+  const toolbarAction2: GQLFormDescriptionEditorToolbarAction = {
+    id: 'ToolbarAction2',
+    label: 'ToolbarAction2',
+    kind: 'ToolbarAction',
+  };
+  const formDescriptionEditor: GQLFormDescriptionEditor = {
+    id: 'FormDescriptionEditor1',
+    metadata: {
+      id: 'FormDescriptionEditor1',
+      description: { id: 'FormDescriptionEditorRepresentation' },
+      kind: 'FormDescriptionEditor',
+      label: 'FormDescriptionEditor1',
+    },
+    toolbarActions: [toolbarAction1, toolbarAction2],
+    widgets: [],
+  };
+
+  let moveToolbarActionAtTheEndCalled: boolean = false;
+  const moveToolbarActionAtTheEndSuccessMock: MockedResponse<Record<string, any>> = {
+    request: {
+      query: moveToolbarActionMutation,
+      variables: moveToolbarActionAtTheEndVariables,
+    },
+    result: () => {
+      moveToolbarActionAtTheEndCalled = true;
+      return { data: moveToolbarActionAtTheEndSuccessData };
+    },
+  };
+
+  const mocks: MockedResponse<Record<string, any>>[] = [moveToolbarActionAtTheEndSuccessMock];
+
+  render(
+    <MockedProvider mocks={mocks}>
+      <ToolbarActions
+        editingContextId="editingContextId"
+        representationId="formDescriptionEditorId"
+        formDescriptionEditor={formDescriptionEditor}
+        selection={emptySelection}
+        setSelection={emptySetSelection}
+      />
+    </MockedProvider>
+  );
+
+  const element: HTMLElement = screen.getByTestId('FormDescriptionEditor-ToolbarActions-DropArea');
+
+  const dataTransfer: DataTransfer = new DataTransfer();
+  dataTransfer.setData('text/plain', 'ToolbarAction2');
+  fireEvent.drop(element, { dataTransfer });
+
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await waitFor(() => {
+      expect(moveToolbarActionAtTheEndCalled).toBeTruthy();
+    });
+  });
+});

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/__tests__/WidgetEntry.test.tsx

@@ -73,7 +73,7 @@ const deletePieChartWidgetVariables: GQLDeleteWidgetMutationVariables = {
   },
 };
 const deleteWidgetSuccessPayload: GQLDeleteWidgetSuccessPayload = {
-  __typename: 'AddWidgetSuccessPayload',
+  __typename: 'DeleteWidgetSuccessPayload',
   id: '48be95fc-3422-45d3-b1f9-d590e847e9e1',
 };
 const deleteWidgetSuccessData: GQLDeleteWidgetMutationData = { deleteWidget: deleteWidgetSuccessPayload };