devs.Shapes: add tests and fix minor issues on devs (clientIO#372)

docs/src/joint/api/dia/Link/prototype/reparent.html

@@ -1,3 +1,3 @@
 <pre class="docs-method-signature"><code>link.reparent()</code></pre><p>Automatically find and set the best parent element for the link so that when the parent element is moved, the link and all
                 its vertices are moved too. The best parent is determined as the <a href="#dia.Graph.prototype.getCommonAncestor">common ancestor</a> of the source and target
-                elements of the link. Useful for hierarchical diagrams. See the <a href="#shapes.devs">DEVS demo</a> on how this can be used.</p>
+                elements of the link. Useful for hierarchical diagrams. See the <a href="#hierarchical_diagrams">DEVS demo</a> on how this can be used.</p>

docs/src/joint/api/dia/Paper/prototype/options/embeddingMode.html

@@ -5,5 +5,5 @@
                               also makes sure all the connected links and child elements have proper <code>z</code> index set so that they stay visible.
                               To control what elements can be embedded into what other elements, use the <code>validateEmbedding()</code> function
                               on the paper (see below).
-                              This is useful for hierarchical diagrams. See the <a href="#shapes.devs">DEVS demo</a> on how this can be used.
+                              This is useful for hierarchical diagrams. See the <a href="#hierarchical_diagrams">DEVS demo</a> on how this can be used.
 

docs/src/joint/api/shapes/devs.html

@@ -80,17 +80,17 @@ <h4>Example usage</h4>
 shape.changeOutGroup({ position: 'bottom' });
 </code></pre>
 
-<h4>Hierarchical diagrams</h4>
+<h4 id="hierarchical_diagrams">Hierarchical diagrams</h4>
 
 <p>There are two more shapes designed for hierarchical diagrams as part of the plugin - <code>devs.Atomic</code> and <code>devs.Coupled</code>. They inherit from the <code>devs.Model</code> and differ only in the color and size. The purpose of these shapes is to enable you to implement a custom logic in your application based on their type.
 For instance a <code>devs.Coupled</code> can embed <code>devs.Atomic</code>'s but not the other way round as shown in the demo below.</p>
 
-<p>When working with hierchical diagrams there is a few methods, that might come in handy.</p>
+<p>When working with hierarchical diagrams there is a few methods, that might come in handy.</p>
 
 <p><a href="#dia.Element.prototype.embed"><code>coupled.embed(atomic)</code></a> that can put the `atomic` shape into the `coupled`.</p>
 
-<p><a href="#dia.Element.prototype.fitEmbeds"><code>coupled.fitEmbeds()</code></a> that resizes the `coupled` shape, so it visually contains all shapes emedded in.</p>
+<p><a href="#dia.Element.prototype.fitEmbeds"><code>coupled.fitEmbeds()</code></a> that resizes the `coupled` shape, so it visually contains all shapes embedded in.</p>
 
-</p><a href="#dia.Link.prototype.reparent"><code>link.reparent()</code></a> that finds the best parent for the `link` based on the source and target element.</p>
+<p><a href="#dia.Link.prototype.reparent"><code>link.reparent()</code></a> that finds the best parent for the `link` based on the source and target element.</p>
 
 <iframe src="about:blank" data-src="./demo/devs/shapes.devs.html"></iframe>

plugins/shapes/joint.shapes.devs.js

@@ -5,11 +5,11 @@ joint.shapes.devs.Model = joint.shapes.basic.Generic.extend({
     markup: '<g class="rotatable"><rect class="body"/><text class="label"/></g>',
     portMarkup: '<circle class="port-body"/>',
     portLabelMarkup: '<text class="port-label"/>',
-    inPorts: [],
-    outPorts: [],
     defaults: joint.util.deepSupplement({
 
         type: 'devs.Model',
+        inPorts: [],
+        outPorts: [],
         size: {
             width: 80,
             height: 80

test/jointjs/devs.shapes.js

@@ -0,0 +1,130 @@
+'use strict';
+
+QUnit.module('devs.shapes plugin', function(hooks) {
+
+    var atomic;
+    var coupled;
+
+    hooks.beforeEach(function() {
+
+        atomic = new joint.shapes.devs.Atomic({
+
+            inPorts: ['xy'],
+            outPorts: ['x', 'y']
+        });
+
+        coupled = new joint.shapes.devs.Coupled();
+    });
+
+    QUnit.module('devs.Model operations', function() {
+
+        QUnit.test('addOutPort', function(assert) {
+
+            coupled.addOutPort('out 1').addOutPort('out 2');
+
+            assert.equal(coupled.getPorts().length, 2);
+            assert.equal(coupled.getPorts()[0].id, 'out 1');
+            assert.deepEqual(coupled.get('inPorts'), []);
+            assert.deepEqual(coupled.get('outPorts'), ['out 1', 'out 2']);
+        });
+
+        QUnit.test('addInPort', function(assert) {
+
+            atomic.addInPort('in 1').addInPort('in 2');
+
+            assert.equal(atomic.getPorts().length, 5);
+            assert.equal(atomic.getPorts()[1].id, 'in 1');
+            assert.deepEqual(atomic.get('inPorts'), ['xy', 'in 1', 'in 2']);
+            assert.deepEqual(atomic.get('outPorts'), ['x', 'y']);
+        });
+
+        QUnit.test('removeOutPort', function(assert) {
+
+            var outPorts = _.clone(atomic.get('outPorts'));
+            var inPorts =  _.clone(atomic.get('inPorts'));
+
+            atomic.removeOutPort(outPorts.shift());
+            assert.equal(atomic.getPorts().length, outPorts.length + inPorts.length);
+            assert.deepEqual(atomic.get('inPorts'), inPorts);
+            assert.deepEqual(atomic.get('outPorts'), outPorts);
+
+            atomic.removeOutPort('non-existent port');
+            assert.deepEqual(atomic.get('inPorts'), inPorts);
+            assert.deepEqual(atomic.get('outPorts'), outPorts);
+
+            atomic.removeOutPort(undefined).removeOutPort(null);
+            assert.deepEqual(atomic.get('inPorts'), inPorts);
+            assert.deepEqual(atomic.get('outPorts'), outPorts);
+        });
+
+        QUnit.test('removeInPort', function(assert) {
+
+            var outPorts = _.clone(atomic.get('outPorts'));
+            var inPorts = _.clone(atomic.get('inPorts'));
+
+            atomic.removeInPort(inPorts.shift()).removeInPort(inPorts.shift());
+            assert.equal(atomic.getPorts().length, outPorts.length + inPorts.length);
+            assert.deepEqual(atomic.get('inPorts'), inPorts);
+            assert.deepEqual(atomic.get('outPorts'), outPorts);
+
+            atomic.removeInPort('non-existent port');
+            assert.deepEqual(atomic.get('inPorts'), inPorts);
+            assert.deepEqual(atomic.get('outPorts'), outPorts);
+
+            atomic.removeInPort(undefined).removeInPort(null);
+            assert.deepEqual(atomic.get('inPorts'), inPorts);
+            assert.deepEqual(atomic.get('outPorts'), outPorts);
+        });
+
+        QUnit.test('changeInGroup', function(assert) {
+
+            var propIn = _.cloneDeep(atomic.prop('ports/groups/in'));
+            var propOut = _.cloneDeep(atomic.prop('ports/groups/out'));
+
+            atomic.changeInGroup({ position: 'top' });
+            propIn.position.name = 'top';
+
+            assert.deepEqual(atomic.prop('ports/groups/in'), propIn);
+            assert.deepEqual(atomic.prop('ports/groups/out'), propOut);
+
+            atomic.changeInGroup(null).changeInGroup(undefined);
+            assert.deepEqual(atomic.prop('ports/groups/in'), propIn);
+            assert.deepEqual(atomic.prop('ports/groups/out'), propOut);
+        });
+
+        QUnit.test('changeOutGroup', function(assert) {
+
+            var propIn = _.cloneDeep(atomic.prop('ports/groups/in'));
+            var propOut = _.cloneDeep(atomic.prop('ports/groups/out'));
+
+            propOut.position.name = 'bottom';            
+            atomic.changeOutGroup({ position: 'bottom' });
+
+            assert.deepEqual(atomic.prop('ports/groups/in'), propIn);
+            assert.deepEqual(atomic.prop('ports/groups/out'), propOut);
+
+            atomic.changeOutGroup(null).changeOutGroup(undefined);
+            assert.deepEqual(atomic.prop('ports/groups/in'), propIn);
+            assert.deepEqual(atomic.prop('ports/groups/out'), propOut);
+        });
+
+        QUnit.test('add ports with duplicate names', function(assert) {
+
+            coupled.addOutPort('out')
+                   .addOutPort('out')
+                   .addInPort('in')
+                   .addInPort('out')
+                   .addInPort('in');
+
+            assert.equal(coupled.getPorts().length, 2);
+            assert.deepEqual(coupled.get('inPorts'), ['in', 'out', 'in']);
+            assert.deepEqual(coupled.get('outPorts'), ['out', 'out']);
+
+            coupled.removeOutPort('out');
+
+            assert.equal(coupled.getPorts().length, 2);
+            assert.deepEqual(coupled.get('inPorts'), ['in', 'out', 'in']);
+            assert.deepEqual(coupled.get('outPorts'), []);
+        });
+    });
+});

test/jointjs/index.html

@@ -42,6 +42,7 @@
         <script src="./routers.js"></script>
         <script src="./connectors.js"></script>
         <script src="./embedding.js"></script>
+        <script src="./devs.shapes.js"></script>
 
     </body>
 </html>