test(popup-menu): make complex an actual integration test

bpmn-io · Jan 16, 2023 · 44cdd04 · 44cdd04
1 parent a8e456b
commit 44cdd04
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 58 deletions.
diff --git a/test/spec/features/popup-menu/PopupMenuComponentSpec.js b/test/spec/features/popup-menu/PopupMenuComponentSpec.js
@@ -182,64 +182,6 @@ describe('features/popup-menu - <PopupMenu>', function() {
   });
 
 
-  it('should render complex', function() {
-
-    const imageUrl = TEST_IMAGE_URL;
-
-    // given
-    const headerEntries = [
-      { id: '1', label: '|A|' },
-      { id: '1.1', label: '|A|', imageUrl },
-      { id: '2', imageUrl, title: 'Toggle foo' },
-      { id: '3', className: 'bpmn-icon-sun' }
-    ];
-
-    const iconGroup = {
-      id: 'icons',
-      name: 'Icon Group'
-    };
-
-    const entries = [
-      { id: '4', label: 'Just label' },
-      { id: '5', imageUrl, title: 'Toggle foo' },
-      { id: '6', imageUrl, label: 'Toggle foo' },
-      { id: '7', label: 'with description', description: 'I DESCRIBE IT' },
-      { id: '7.1', label: 'with long title and description, you cannot believe what happened next', description: 'A very long description, you cannot believe what happened next' },
-      { id: '7.2', label: 'with long title and description, you cannot believe what happened next', description: 'A very long description, you cannot believe what happened next', documentationRef: 'http://localhost' },
-      { id: '8', imageUrl, label: 'with image + description', description: 'I DESCRIBE more stuff' },
-      { id: '9', imageUrl, label: 'WITH DOC REF', documentationRef: 'http://localhost' },
-      { id: '10', imageUrl, label: 'FOO', description: 'WITH DOC REF', documentationRef: 'http://localhost' },
-      { id: '11', className: 'bpmn-icon-sun', label: 'FONT ICON + description', description: 'WITH DOC REF', group: iconGroup },
-      { id: '11.1', className: 'bpmn-icon-sun', label: 'FONT ICON', group: iconGroup },
-      { id: '11.2', className: 'bpmn-icon-sun', title: 'icon only', group: iconGroup },
-      { id: '12', className: 'bpmn-icon-sun', title: 'icon only', group: {
-        id: 'super long',
-        name: 'Extremely super long group incredible!'
-      } },
-      { id: '13', group: { id: 'other', name: 'Other' }, label: '13' },
-      { id: '14', group: { id: 'other', name: 'Other' }, label: '14' },
-      { id: '15', group: { id: 'other', name: 'Other' }, label: '15' },
-      { id: '16', group: { id: 'other', name: 'Other' }, label: '16' },
-      { id: '17', group: { id: 'other', name: 'Other' }, label: '17' },
-      { id: '18', group: { id: 'other', name: 'Other' }, label: '18' },
-      { id: '19', group: { id: 'other', name: 'Other' }, label: '19' },
-      { id: '20', label: 'Draggable', action: { dragstart: () => {} } },
-    ];
-
-    createPopupMenu({
-      container,
-      title: 'Popup menu with super long title',
-      headerEntries,
-      entries,
-      position: () => {
-        return { x: 100, y: 200 };
-      },
-      width: 250
-    });
-
-  });
-
-
   describe('close', function() {
 
     it('should close on background click', function() {

diff --git a/test/spec/features/popup-menu/PopupMenuSpec.js b/test/spec/features/popup-menu/PopupMenuSpec.js
@@ -1848,6 +1848,112 @@ describe('features/popup-menu', function() {
 });
 
 
+describe('features/popup-menu - integration', function() {
+
+  const imageUrl = `data:image/svg+xml;utf8,${
+    encodeURIComponent(`
+      <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
+        <rect width="300" height="300" style="fill: green" />
+      </svg>
+    `)
+  }`;
+
+  const entrySet = (entries) => {
+
+    return entries.reduce((keyedEntries, entry) => {
+
+      expect(entry).to.have.property('id');
+      expect(keyedEntries).not.to.have.property(entry.id);
+
+      keyedEntries[entry.id] = entry;
+
+      return keyedEntries;
+    }, {});
+
+  };
+
+  beforeEach(bootstrapDiagram({
+    modules: [
+      popupMenuModule
+    ]
+  }));
+
+
+  it('should render complex', inject(function(popupMenu) {
+
+    // given
+    const headerEntries = entrySet([
+      { id: '1', label: '|A|' },
+      { id: '1.1', label: '|A|', imageUrl },
+      { id: '2', imageUrl, title: 'Toggle foo' },
+      { id: '3', className: 'bpmn-icon-sun' }
+    ]);
+
+    const iconGroup = {
+      id: 'icons',
+      name: 'Icon Group'
+    };
+
+    const entries = entrySet([
+      { id: '4', label: 'Just click label', action: {
+        click(...args) {
+          console.log('CLICK', ...args);
+        }
+      } },
+      { id: '4.1', label: 'Draggable', action: {
+        dragstart(...args) {
+          console.log('DRAG START', args);
+        }
+      } },
+      { id: '4.2', label: 'Dragable + clickable', action: {
+        dragstart(...args) {
+          console.log('DRAG START', args);
+        },
+        click(...args) {
+          console.log('CLICK', args);
+        }
+      } },
+      { id: '5', imageUrl, title: 'Toggle foo' },
+      { id: '6', imageUrl, label: 'Toggle foo' },
+      { id: '7', label: 'with description', description: 'I DESCRIBE IT' },
+      { id: '7.1', label: 'with long title and description, you cannot believe what happened next', description: 'A very long description, you cannot believe what happened next' },
+      { id: '7.2', label: 'with long title and description, you cannot believe what happened next', description: 'A very long description, you cannot believe what happened next', documentationRef: 'http://localhost' },
+      { id: '8', imageUrl, label: 'with image + description', description: 'I DESCRIBE more stuff' },
+      { id: '9', imageUrl, label: 'WITH DOC REF', documentationRef: 'http://localhost' },
+      { id: '10', imageUrl, label: 'FOO', description: 'WITH DOC REF', documentationRef: 'http://localhost' },
+      { id: '11', className: 'bpmn-icon-sun', label: 'FONT ICON + description', description: 'WITH DOC REF', group: iconGroup },
+      { id: '11.1', className: 'bpmn-icon-sun', label: 'FONT ICON', group: iconGroup },
+      { id: '11.2', className: 'bpmn-icon-sun', title: 'icon only', group: iconGroup },
+      { id: '12', className: 'bpmn-icon-sun', title: 'icon only', group: {
+        id: 'super long',
+        name: 'Extremely super long group incredible!'
+      } },
+      { id: '13', group: { id: 'other', name: 'Other' }, label: '13' },
+      { id: '14', group: { id: 'other', name: 'Other' }, label: '14' },
+      { id: '15', group: { id: 'other', name: 'Other' }, label: '15' },
+      { id: '16', group: { id: 'other', name: 'Other' }, label: '16' },
+      { id: '17', group: { id: 'other', name: 'Other' }, label: '17' },
+      { id: '18', group: { id: 'other', name: 'Other' }, label: '18' },
+      { id: '19', group: { id: 'other', name: 'Other' }, label: '19' }
+    ]);
+
+    const provider = new Provider(entries, headerEntries);
+
+    // when
+    popupMenu.registerProvider('complex', provider);
+
+    // then
+    popupMenu.open({}, 'complex', {
+      x: 100, y: 200
+    }, {
+      width: 250,
+      title: 'Popup menu with super long title'
+    });
+
+  }));
+
+});
+
 
 // helpers /////////////