test: add testing file

webmodules · Sep 3, 2013 · ea52868 · ea52868
1 parent 95defa3
commit ea52868
Show file tree

Hide file tree

Showing 4 changed files with 275 additions and 0 deletions.
diff --git a/test/Makefile b/test/Makefile
@@ -0,0 +1,16 @@
+
+build: index.js components
+	@component build
+
+components:
+	@component install
+
+clean:
+	rm -fr build components
+
+all:
+	clear
+	make clean
+	make build
+
+.PHONY: clean
diff --git a/test/component.json b/test/component.json
@@ -0,0 +1,11 @@
+{
+  "name": "gravatar-test",
+  "repo": "learnboost/gravatar-test",
+  "description": "Component Gravatar Testing",
+  "version": "0.1.0",
+  "dependencies": {
+    "component/jquery": "*",
+    "learnboost/gravatar-component": "1.0.6"
+  },
+  "scripts": ["index.js"]
+}
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,148 @@
+<!DOCTYPE 5>
+<html>
+  <head>
+    <title>Gravatar component</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <style>
+      body {
+        font-family: tahoma;
+        color: #333;
+        text-align: center;
+      }
+
+      form {
+        text-align: left;
+        width: 600px;
+        margin: 0 auto;
+        padding: 10px;
+        margin-bottom: 50px;
+        background-color: #fafafa;
+        border: 1px solid #f2f2f2;
+      }
+
+      p {
+        margin: 0 3px;
+      }
+
+      input {
+        height: 30px;
+        line-height: 20px;
+        min-width: 300px;
+        border: 1px solid #aaa;
+        padding: 5px;
+      }
+
+      label {
+        width: 80px;
+        text-align: right;
+        margin-right: 20px;
+        height: 30px;
+        line-height: 20px;
+        display: inline-block;
+        color: #444;
+        font-size: 11px;
+      }
+
+      button {
+        float: right;
+        margin-top: -20px;
+      }
+
+      body.loading input {
+        opacity: 0.3;
+      }
+
+      .profile-placeholder,
+      .image-placeholder {
+        display: inline-block;
+        vertical-align: top;
+        background-color: #f2f2f2;
+        width: 400px;
+        height: 400px;
+        border: 1px solid #eee;
+        padding: 10px;
+        margin: 10px;
+        font-size: 12px;
+      }
+
+      .profile-placeholder {
+        text-align: left;
+      }
+
+      .profile-placeholder p {
+        margin: 10px 0;
+      }
+
+      .profile-placeholder strong {
+        width: 300px;
+        display: inline-block;
+        vertical-align: top;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      body.loading .image-placeholder img {
+        display: none;
+      }
+
+    </style>
+  </head>
+  <body>
+    <h2>Gravatar component</h2>
+    <script src="build/build.js"></script>
+
+    <form class="gravatar-form" method="GET" action="#">
+      <p>
+        <label>Email: </label>
+        <input name="email" type="email" value="a@gmail.com" />
+      </p>
+
+      <br />
+      <p>
+        <label>Size: </label>
+        <input name="size" type="number" value="400" />
+      </p>
+      <p>
+        <label>Default: </label>
+        <input name="link" type="string" value="https://i.cloudup.com/SJXd4aIE8n-300x300.jpeg" />
+        <select name="default-option">
+          <option value="OR">OR</option>
+          <option value="404">404</option>
+          <option value="mm">Mystery man</option>
+          <option value="identicon">identicon</option>
+          <option value="monsterid">monsterid</option>
+          <option value="wavatar">wavatar</option>
+          <option value="retro">retro</option>
+          <option value="blank">blank</option>
+        </select>
+      </p>
+
+      <p>
+        <label>Force default: </label>
+        <input name="force-default" type="checkbox" />
+      </p>
+
+      <p>
+        <label>Rating: </label>
+        <select name="rating">
+          <option value="g" selected="selected">g</option>
+          <option value="pg">pg</option>
+          <option value="r">r</option>
+          <option value="x">x</option>
+        </select>
+      </p>
+
+      <p><button>send</button></p>
+    </form>
+
+    <div class="blocks">
+      <div class="image-placeholder"><img scr="#" /></div>
+      <div class="profile-placeholder"></div>
+    </div>
+
+    <script>
+      require('gravatar-test');
+    </script>
+  </body>
+</html> 
diff --git a/test/index.js b/test/index.js
@@ -0,0 +1,100 @@
+
+/**
+ * Load Components
+ */
+
+var o = require('jquery');
+var Grt = require('gravatar');
+
+/**
+ * DOM elements
+ */
+
+var body = o('body');
+var form = o('form.gravatar-form');
+var img_ph = o('.image-placeholder');
+var profile_ph = o('.profile-placeholder');
+var img;
+
+// fields
+var fields = {
+  email: o('input[name=email]').focus(),
+  def_link: o('input[name=link]'),
+  def: o('select[name=default-option]'),
+  force: o('input[name=force-default]'),
+  rating: o('select[name=rating]'),
+  size: o('input[name=size]')
+};
+
+/**
+ * Print the gratar image appending
+ * an img element
+ *
+ * @param {String} email
+ * @param {Object} opts
+ * @api private
+ */
+
+function printAvatar(email, opts){
+  opts = opts || {};
+
+  if (img) img.remove();
+  body.addClass('loading');
+
+  img = o(Grt.img(email, opts))
+  .appendTo(img_ph)
+  .on('load', function(){
+    body.removeClass('loading');
+  });
+
+  profile_ph.empty();
+  var profile = Grt.profile(email, function(err, data){
+    var prts = [
+      'displayName',
+      'profileUrl',
+      'id',
+      'hash',
+      'requestHash',
+      'thumbnailUrl'
+    ];
+
+    for (var i = 0; i < prts.length; i++) {
+      if (data[prts[i]]) {
+        profile_ph.append(o('<p>').append(
+          o('<span>', { text: prts[i] + ': ' }),
+          o('<strong>', { text: data[prts[i]] })
+        ));
+      }
+    }
+  });
+}
+
+// input keypress event
+
+form.on('submit', function(e){
+  if (body.hasClass('loading')) return;
+  e.preventDefault();
+
+  // size
+  var size = fields.size.val() || 400;
+  var options = { s: size };
+
+  // default value
+  var def = fields.def.val();
+  var def_link = fields.def_link.val();
+  def = def != 'OR' ? def : (def_link || false);
+  if (def) options.d = def;
+
+  // force default
+  var force = fields.force.is(':checked');
+  if (force) options.f = force;
+
+  // rating
+  var rating = fields.rating.val() || 'g';
+  options.r = rating;
+
+  printAvatar(fields.email.val(), options);
+});
+
+// get initial avatar
+printAvatar('a@gmail.com', { s: 400 });