factory_bot_instrumentation 0.1.0

data/Rakefile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
+
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/app/assets/config/factory_bot_instrumentation_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/factory_bot_instrumentation .js
+//= link_directory ../stylesheets/factory_bot_instrumentation .css

data/app/assets/javascripts/factory_bot_instrumentation/application.js

@@ -0,0 +1,16 @@
+// This is a manifest file that'll be compiled into application.js, which will
+// include all the files listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts,
+// vendor/assets/javascripts, or any plugin's vendor/assets/javascripts
+// directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at
+// the bottom of the compiled file. JavaScript code in this file should be
+// added after the last require_* statement.
+//
+// Read Sprockets README
+// (https://github.com/rails/sprockets#sprockets-directives) for details about
+// supported directives.
+//
+//= require_tree .

data/app/assets/javascripts/factory_bot_instrumentation/create.js

@@ -0,0 +1,134 @@
+window.CreateForm = CreateForm = function()
+{
+  this.scope = '#generate';
+  this.form = new Form(this.scope);
+  this.scenarios = window.scenarios;
+  this.select = $(`${this.scope} .scenario`);
+  this.desc = $(`${this.scope} .description`);
+
+  let self = this;
+
+  this.form.errorContent = function(payload, output, cb)
+  {
+    window.utils.waterfallWithHooks({
+      data: {
+        alert: `An unexpected error occured. Looks like something went wrong
+                while generating your new entity. This migth be a bug, or an
+                unexpected feature. It could be a temporary issue. When is is
+                persistent contact your friendly API Instrumentation
+                administrator.`,
+        output: output,
+        payload: payload,
+        pre: '',
+        post: ''
+      },
+      pre: window.hooks.preCreateError,
+      post: window.hooks.postCreateError,
+      action: (payload, innerCb) => {
+        cb(null, `
+          ${payload.pre}
+          <div class="alert alert-danger" role="alert">${payload.alert}</div>
+          <pre id="data">${payload.output}</pre>
+          ${window.utils.clipboardButton()}
+          ${payload.post}
+        `);
+        innerCb(null, payload);
+      }
+    });
+  };
+
+  this.form.resultContent = function(payload, output, cb)
+  {
+    let card = window.utils.card({
+      body: `
+        <pre id="data">${output}</pre>
+        ${window.utils.clipboardButton()}
+      `
+    });
+
+    window.utils.waterfallWithHooks({
+      data: {
+        alert: `A new ${self.scenario().name.toLowerCase()} was created.`,
+        output: output,
+        payload: payload,
+        cards: [card],
+        pre: '',
+        post: '',
+        openCard: '#details'
+      },
+      pre: window.hooks.preCreateResult,
+      post: window.hooks.postCreateResult,
+      action: (payload, innerCb) => {
+        cb(null, `
+          ${payload.pre}
+          <div class="alert alert-success" role="alert">${payload.alert}</div>
+          <div class="accordion" id="response">
+            ${payload.cards.join(' ')}
+          </div>
+          ${payload.post}
+        `);
+        innerCb(null, payload);
+        if (payload.openCard) {
+          $(
+            `.accordion#response button[data-target="${payload.openCard}"]`
+          ).click();
+        }
+      }
+    });
+  };
+};
+
+CreateForm.prototype.updateDesc = function()
+{
+  this.desc.html(this.scenario().desc);
+};
+
+CreateForm.prototype.activeScenario = function()
+{
+  raw = this.select.find(':selected').val().split('/');
+  return { group: raw[0], index: raw[1] };
+};
+
+CreateForm.prototype.scenario = function()
+{
+  scenario = this.activeScenario();
+  return this.scenarios[scenario.group][scenario.index];
+};
+
+CreateForm.prototype.bind = function()
+{
+  this.form.bind((event) => {
+    this.submit();
+  });
+
+  this.select.on('change', this.updateDesc);
+  this.updateDesc();
+};
+
+CreateForm.prototype.submit = function()
+{
+  let form = this.form;
+  let conf = this.scenario();
+
+  window.utils.waterfallWithHooks({
+    data: {
+      factory: conf.factory,
+      traits: conf.traits,
+      overwrite: conf.overwrite
+    },
+    pre: window.hooks.preCreate,
+    post: window.hooks.postCreate,
+    action: (payload, cb) => {
+      window.utils.request({
+        url: window.createUrl,
+        data: JSON.stringify(payload)
+      }, (err, result) => {
+        if (err) { return cb && cb(err); }
+        cb(null, { request: payload, response: result });
+      });
+    }
+  }, function(err, result) {
+    if (err) { return form.showError(err, err.responseText); }
+    form.showResult(result, result.response);
+  });
+};

data/app/assets/javascripts/factory_bot_instrumentation/hooks.js

@@ -0,0 +1,123 @@
+// You can define some custom hooks to enhance the functionality. With the help
+// of the following hooks you are able to customize the outputs, perform
+// additional HTTP requests or anything you like.
+//
+// All the hooks are designed to passthrough a payload. They receive this
+// payload as the first argument, and a callback function to signal the end of
+// the hook. You MUST pass the payload as second parameter to the callback, or
+// pass an error object as first argument. You can modify the payload as you
+// wish, eg. adding some data from subsequent requests.
+//
+// Example hooks:
+//
+//   // Error case
+//   window.hooks.postCreate.push((payload, cb) => {
+//     cb({ error: true});
+//   });
+//
+//   // Happy case
+//   window.hooks.postCreate.push((payload, cb) => {
+//     cb(null, Object.assign(payload, { additional: { data: true } }));
+//   });
+//
+// Mind the fact that you can define multiple custom functions per hook type.
+// They are executed after each other in a waterfall like flow. The order of
+// the hooks array is therefore essential.
+window.hooks = {
+  // With the help of the +perCreate+ hooks you can manipulate the create
+  // request parameters. Think of an additional handling which reads an
+  // overwrite form or a kind of trait checkboxes to customize the factory
+  // call. The +payload+ looks like this:
+  //
+  //   {
+  //     factory: 'user',
+  //     traits: ['confirmed'],
+  //     overwrite: { password: 'secret' }
+  //   }
+  preCreate: [],
+
+  // The +postCreate+ hook allows you to perform subsequent requests to fetch
+  // additional data. Think of a user instrumentation where you want to request
+  // a one time token for this user. This token can be added to the payload and
+  // can be shown with the help of the +preCreateResult+ hook. The payload
+  // contains the request parameters and the response body from the
+  // instrumentation request. Here comes an example +payload+:
+  //
+  //   {
+  //     request: { factory: 'user', /* [..] */ },
+  //     response: { /* [..] */ }
+  //   }
+  postCreate: [],
+
+  // With the help of the +preCreateResult+ hook you can customize the output
+  // of the result. You could also perform some subsequent requests or some UI
+  // preparations. You can access the output options and the runtime payload
+  // with all its data and make modifications to them. This hook is triggered
+  // before the result is rendered. A sample payload comes here:
+  //
+  //   {
+  //     alert: 'Your alert text.',
+  //     output: 'Formatted response',
+  //     payload: { request: { /* [..] */ }, response: { /* [..] */ } },
+  //     cards: [
+  //       `The details accordion card,
+  //        you can add more, remove the details card
+  //        or reorder them`
+  //     ],
+  //     openCard: '#details', // Open a custom card, or none
+  //     pre: 'Additinal HTML content before the alert.',
+  //     post: 'Additinal HTML content after the formatted response output.'
+  //   }
+  preCreateResult: [],
+
+  // In case you want to perform some logic after the result is rendered, you
+  // can use the +postCreateResult+ hook. You can access the output options and
+  // the runtime payload with all its data, but changes to them won't take
+  // effect. The +payload+ looks like this:
+  //
+  //   {
+  //     alert: 'Your alert text.',
+  //     output: 'Formatted response',
+  //     payload: { request: { /* [..] */ }, response: { /* [..] */ } },
+  //     cards: [
+  //       `The details accordion card,
+  //        you can add more, remove the details card
+  //        or reorder them`
+  //     ],
+  //     openCard: '#details', // Open a custom card, or none
+  //     pre: 'Additinal HTML content before the alert.',
+  //     post: 'Additinal HTML content after the formatted response output.'
+  //   }
+  postCreateResult: [],
+
+  // With the help of the +preCreateError+ hook you can customize the output of
+  // the error. Furthermore you can perform some subsequent requests or
+  // whatever comes to your mind. You can access the output options and the
+  // runtime payload with all its data and make modifications to them. This
+  // hook is triggered before the error is rendered. A sample payload comes
+  // here:
+  //
+  //   {
+  //     alert: 'Your alert text.',
+  //     output: 'Formatted response',
+  //     payload: { request: { /* [..] */ }, response: { /* [..] */ } },
+  //     pre: 'Additinal HTML content before the alert.',
+  //     post: 'Additinal HTML content after the formatted response output.'
+  //   }
+  preCreateError: [],
+
+  // In case you want to perform some magic after an error occured, you can use
+  // the +postCreateError+ hook. You can access the output options and the
+  // runtime payload with all its data, but changes to them won't take effect
+  // because this hook is triggered after the error is rendered. The +payload+
+  // looks like this:
+  //
+  //   {
+  //     alert: 'Your alert text.',
+  //     output: 'Formatted response',
+  //     payload: { request: { /* [..] */ }, response: { /* [..] */ } },
+  //     pre: 'Additinal HTML content before the alert.',
+  //     post: 'Additinal HTML content after the formatted response output.'
+  //   }
+  postCreateError: []
+};

data/app/assets/javascripts/factory_bot_instrumentation/lib/form.js

@@ -0,0 +1,66 @@
+window.Form = Form = function(scope)
+{
+  this.button = $(scope).find('button');
+  this.result = $('#result');
+  this.spinner = $('#spinner');
+};
+
+Form.prototype.bind = function(action)
+{
+  this.button.on('click', (event) => {
+    event.preventDefault();
+    this.hideResult();
+    action(event);
+    return false;
+  });
+};
+
+Form.prototype.hideResult = function()
+{
+  this.result.hide();
+  this.button.prop('disabled', true);
+  this.spinner.show();
+};
+
+Form.prototype.showResultContainer = function(html)
+{
+  this.result.html(html);
+  $('pre').each((i, block) => hljs.highlightBlock(block));
+  new ClipboardJS('.cb-copy');
+  this.result.show();
+  this.button.prop('disabled', false);
+};
+
+Form.prototype.showError = function(payload, output)
+{
+  this.spinner.hide();
+  output = window.utils.prepareOutput(output);
+  this.errorContent(payload, output, (err, html) => {
+    this.showResultContainer(html);
+  });
+};
+
+Form.prototype.errorContent = function(payload, output, cb)
+{
+  cb(null, `
+    <pre id="data">${output}</pre>
+    ${window.utils.clipboardButton()}
+  `);
+};
+
+Form.prototype.showResult = function(payload, output)
+{
+  this.spinner.hide();
+  output = window.utils.prepareOutput(output);
+  this.resultContent(payload, output, (err, html) => {
+    this.showResultContainer(html);
+  });
+};
+
+Form.prototype.resultContent = function(payload, output, cb)
+{
+  cb(null, `
+    <pre id="data">${output}</pre>
+    ${window.utils.clipboardButton()}
+  `);
+};

data/app/assets/javascripts/factory_bot_instrumentation/lib/utils.js

@@ -0,0 +1,116 @@
+window.utils = Utils = {};
+
+Utils.pushWaterfallPayload = function(data)
+{
+  return (cb) => cb(null, data);
+};
+
+Utils.waterfallWithHooks = function(opts, cb)
+{
+  cb = cb || function(){};
+  opts = Object.assign({
+    pre: [],
+    post: [],
+    data: {},
+    action: (payload, cb) => cb(null, payload)
+  }, opts);
+
+  async.waterfall([
+    // Yield the data to pre hooks
+    Utils.pushWaterfallPayload(opts.data),
+    // Perform pre hooks
+    ...opts.pre,
+    // Perform the create request
+    opts.action,
+    // Perform post hooks
+    ...opts.post
+  ], cb);
+};
+
+Utils.request = function(opts, cb)
+{
+  opts = Object.assign({
+    url: '/',
+    type: 'POST',
+    data: '{}',
+    dataType: 'json',
+    contentType: 'application/json; charset=utf-8',
+    ignoreErrors: false
+  }, opts || {}, {
+    success: (result) => cb(null, result)
+  });
+
+  errCb = (err) => cb(err);
+  if (opts.ignoreErrors) {
+    errCb = (err) => cb(null, err);
+  }
+
+  $.ajax(opts).fail(errCb);
+};
+
+Utils.escape = function(str)
+{
+  return str.replace(/&/g, "&")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
+};
+
+Utils.prepareOutput = function(output)
+{
+  try {
+    if (typeof output !== 'object') { output = JSON.parse(output); }
+    output = JSON.stringify(output, null, 2);
+  } catch { }
+
+  return window.utils.escape(output);
+};
+
+Utils.clipboardButton = function(id)
+{
+  id = id || 'data';
+  return `
+    <span class="btn btn-primary cb-copy"
+      data-clipboard-target="#${id}">
+      <i class="fas fa-paste"></i> Copy result to clipboard
+    </span>
+  `;
+};
+
+Utils.clipboardBadge = function(id)
+{
+  id = id || 'data';
+  return `
+    <span class="badge badge-dark cb-copy" title="Copy result to clipboard"
+          data-clipboard-target="#${id}"><i class="fas fa-paste"></i>
+    </span>
+  `;
+};
+
+Utils.card = function(opts)
+{
+  opts = Object.assign({
+    id: 'details',
+    icon: 'fa-asterisk',
+    title: 'Details',
+    body: ''
+  }, opts || {});
+
+  return `
+    <div class="card">
+      <div class="card-header">
+        <h5 class="mb-0">
+          <button class="btn btn-link collapsed" type="button"
+            data-toggle="collapse" data-target="#${opts.id}"
+            aria-expanded="false">
+            <i class="fas ${opts.icon}"></i> ${opts.title}</h5>
+          </button>
+        </h5>
+      </div>
+      <div id="${opts.id}" class="collapse" data-parent="#response">
+        <div class="card-body">
+          ${opts.body}
+        </div>
+      </div>
+    </div>
+  `;
+};