fix(dashboard): fix styling for component palette and add tests for d…

…rag and drop

packages/dashboard/src/components/palette/component.css

@@ -17,7 +17,7 @@
 }
 
 .palette-component-draggable {
-  cursor: pointer;
+  cursor: grab;
   display: flex;
 }
 

packages/dashboard/src/components/palette/icons/index.css

@@ -4,7 +4,7 @@
   width: var(--size-component-palette-icon);
   height: var(--size-component-palette-icon);
   padding: 0.5rem;
-  cursor: pointer;
+  cursor: grab;
   border: var(--border-width-component-palette-icon) solid;
   border-color: var(--colors-grey);
   color: inherit;

packages/dashboard/src/components/palette/index.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+
+import { act } from 'react-dom/test-utils';
+
+import { fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { RecursivePartial } from '@iot-app-kit/table';
+
+import { DASHBOARD_CONTAINER_ID } from '../grid/getDashboardPosition';
+import InternalDashboard from '../internalDashboard';
+import { DefaultDashboardMessages } from '../../messages';
+
+import { configureDashboardStore } from '../../store';
+
+import { DashboardState } from '../../store/state';
+import { setupDashboardPlugins } from '../../customization/api';
+import pluginsConfiguration from '../../customization/pluginsConfiguration';
+
+const renderDashboard = (state?: RecursivePartial<DashboardState>) => {
+  setupDashboardPlugins(pluginsConfiguration);
+
+  const store = configureDashboardStore(state);
+
+  const { container } = render(
+    <Provider store={store}>
+      <DndProvider
+        backend={HTML5Backend}
+        options={{
+          enableMouseEvents: true,
+          enableKeyboardEvents: true,
+        }}
+      >
+        <InternalDashboard hasEditPermission={false} query={undefined} messageOverrides={DefaultDashboardMessages} />
+      </DndProvider>
+    </Provider>
+  );
+
+  return { container, store };
+};
+
+describe('Component Palette', () => {
+  it('can drag widgets onto the grid', function () {
+    const { container, store } = renderDashboard();
+
+    const draggableLine = screen.getByText('Line').previousElementSibling;
+    const draggableText = screen.getByText('Text').previousElementSibling;
+
+    const grid = container.querySelector(`#${DASHBOARD_CONTAINER_ID}`);
+
+    if (!draggableLine || !draggableText || !grid) throw new Error('could not get draggable elements for test');
+
+    expect(store.getState().dashboardConfiguration.widgets).toHaveLength(0);
+
+    act(() => {
+      fireEvent.dragStart(draggableLine);
+      fireEvent.dragEnter(grid);
+      fireEvent.dragOver(grid);
+      fireEvent.drop(grid);
+    });
+
+    expect(store.getState().dashboardConfiguration.widgets).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          type: 'iot-line',
+        }),
+      ])
+    );
+
+    act(() => {
+      fireEvent.dragStart(draggableText);
+      fireEvent.dragEnter(grid);
+      fireEvent.dragOver(grid);
+      fireEvent.drop(grid);
+    });
+
+    expect(store.getState().dashboardConfiguration.widgets).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          type: 'iot-line',
+        }),
+        expect.objectContaining({
+          type: 'text',
+        }),
+      ])
+    );
+  });
+
+  it('does not add a widget if dropped outside of grid', function () {
+    const { container, store } = renderDashboard();
+
+    const draggable = screen.getByText('Line').previousElementSibling;
+
+    const componentPalette = container.querySelector('.component-palette');
+
+    if (!draggable || !componentPalette) throw new Error('could not get draggable elements for test');
+
+    expect(store.getState().dashboardConfiguration.widgets).toHaveLength(0);
+
+    act(() => {
+      fireEvent.dragStart(draggable);
+      fireEvent.dragEnter(componentPalette);
+      fireEvent.dragOver(componentPalette);
+      fireEvent.drop(componentPalette);
+    });
+
+    expect(store.getState().dashboardConfiguration.widgets).toHaveLength(0);
+  });
+});