UI component appears to be working.

bridgedb · May 18, 2016 · 8f77c94 · 8f77c94
1 parent b64a774
commit 8f77c94
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 28 deletions.
diff --git a/demo/ui-combo.html b/demo/ui-combo.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+
+  <body>
+  </body>
+
+  <script src="./ui-combo.bundle.js"></script>
+
+</html>
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "JS client for BridgeDb.org ID mapping framework webservices",
   "main": "index.js",
   "scripts": {
+    "build:demo": "browserify ./test/e2e/ui-components.test.js -o ./demo/ui-combo.bundle.js -d -t brfs -t deglobalify",
     "manual": "budo test/e2e/ui-components.test.js --live --open -- -t brfs",
     "manual:datasource": "budo test/e2e/datasource-control.test.js --live --open -- -t brfs",
     "manual:identifier": "budo test/e2e/identifier-control.test.js --live --open -- -t brfs",
@@ -58,6 +59,7 @@
     "chai-as-promised": "~4.1.1",
     "colors": "~1.0.3",
     "deep-diff": "^0.3.3",
+    "deglobalify": "^0.2.0",
     "freeport": "~1.0.4",
     "global": "^4.3.0",
     "gulp": "~3.8.10",
@@ -83,6 +85,8 @@
     "jquery": "^2.2.3",
     "jscs": "~1.7.3",
     "jsdom": "^8.4.0",
+    "jsonld-markup": "^0.1.1",
+    "jsonld-vis": "^0.2.0",
     "karma": "0.13.22",
     "karma-browserify": "^5.0.3",
     "karma-chai": "0.1.0",

diff --git a/test/e2e/ui-components.test.js b/test/e2e/ui-components.test.js
@@ -1,10 +1,15 @@
 var Rx = global.Rx = require('rx-extra');
 var yolk = require('yolk');
 var h = yolk.h;
-var noop = function() {};
-var render = yolk.render;
 var renderInDocument = require('../render-in-document');
 
+var fs = require('fs');
+var insertCss = require('insert-css');
+
+var jsonldMarkup = require('jsonld-markup');
+//var jsonldVis = require('jsonld-vis');
+var noop = function() {};
+
 var BridgeDbUIElement = require('../../lib/ui-components');
 
 var latestBridgeDbCommitHash = 'c641ab0279dbf6bf3aee8d6d238d77865361e211';
@@ -14,6 +19,11 @@ var context = [
   '/org.bridgedb.rdf/resources/jsonld-context.jsonld'
 ].join('');
 
+[
+  fs.readFileSync(require.resolve('jsonld-markup/jsonld-markup.css'))
+]
+.map(insertCss);
+
 var entity = {
   '@context': context,
   entityReference: {
@@ -31,31 +41,24 @@ var entity = {
   displayName: 'formaldehyde'
 };
 
-var vnode = h(BridgeDbUIElement, {
-  entity: entity,
-  onChange: function(updatedEntity) {
-    console.log('updatedEntity');
-    console.log(updatedEntity);
-  },
-});
-//var vnode = h(BridgeDbUIElement, {
-//  organism: 'Homo sapiens'
-//});
+var vnode = h('div', {},
+  h(BridgeDbUIElement, {
+    entity: entity,
+    onChange: function(updatedEntity) {
+      console.log('updatedEntity');
+      console.log(updatedEntity);
+      var code = document.querySelector('code');
+      var data = JSON.parse(JSON.stringify(updatedEntity));
+      var context = data['@context'];
+      delete data['@context'];
+      delete data.entityReference['@context'];
+      code.innerHTML = jsonldMarkup(data, context);
+    },
+  }),
+  h('pre', {},
+    h('code', {
+    }, 'Change a value above and then view JSON result here')
+  )
+);
 
 var result = renderInDocument(vnode);
-
-//var YolkSimpleModal = require('../../index.ts').default;
-//
-//var vnode = h(YolkSimpleModal, {
-//  className: 'placeholder-class-name',
-//  content: new BridgeDb().dataset.query({id: 'http://identifiers.org/ncbigene/'})
-//          .toArray()
-//          .map(function(data) {
-//            //return h('p', {}, data);
-//            return '<p>' + JSON.stringify(data) + '</p>';
-//          }),
-//  title: 'Datasources',
-//});
-//var result = renderInDocument(vnode);
-//var node = result.node;
-//var cleanup = result.cleanup;