[WIP] Adding tests for the code

santigarcor · santigarcor · commit a8b394604a97 · 2017-10-09T22:51:44.000-05:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -1,59 +1,4 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
 node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
 .npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
+yarn.lock
+dist/
diff --git a/package.json b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "form-js",
+  "version": "0.1.0",
+  "description": "A javascript representation of a form",
+  "main": "dist/Form.js",
+  "scripts": {
+    "test": "node ./node_modules/jest/bin/jest",
+    "build": "node ./node_modules/babel-cli/bin/babel src --out-dir dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/santigarcor/form-js.git"
+  },
+  "keywords": [
+    "form"
+  ],
+  "author": "Santiago Garcia (http://santigarcor.me)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/santigarcor/form-js/issues"
+  },
+  "homepage": "https://github.com/santigarcor/form-js#readme",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-jest": "^21.2.0",
+    "babel-preset-es2015": "^6.24.1",
+    "jest": "^21.2.1",
+    "moxios": "^0.4.0"
+  },
+  "dependencies": {
+    "axios": "^0.16.2"
+  }
+}
diff --git a/src/Form.js b/src/Form.js
@@ -0,0 +1,130 @@
+let FormErrors = require('./FormErrors');
+let RequestDataContainer = require('./RequestDataContainer');
+
+if (window.axios == 'undefined') {
+  let axios = require('axios');
+}
+
+/**
+* this class handles everything that concerns
+* about forms. Submit and errors and considered too
+*/
+class Form {
+
+  /**
+   * Set up the form class setting the data properties
+   * directly to the form properties
+   *
+   * @param  {Object}  data
+   * @param  {Boolean} clearAfterResponse
+   * @return {void}
+   */
+  constructor(data, method = 'post', clearAfterResponse = false) {
+    this.originalData = data;
+    Object.assign(this, data);
+    this.method = method;
+    this.clearAfterResponse = clearAfterResponse;
+    this.errors = new FormErrors();
+  }
+
+  static makeFrom(data, method = 'post', clearAfterResponse = false) {
+    return new this(data, method, clearAfterResponse);
+  }
+
+  /**
+   * Reset the form data
+   *
+   * @return {void}
+   */
+  reset() {
+    Object.assign(this, this.originalData);
+    this.errors.clear();
+  }
+
+  /**
+   * Return the form data
+   *
+   * @todo Add the option to choose between form data and plain object
+   * @return {Object}
+   */
+  data(type) {
+    let container = new RequestDataContainer(type);
+
+    for (let field in this.originalData) {
+      container.set(field, this[field]);
+    }
+
+    if (this.method != 'post') {
+      container.set('_method', this.method);
+    }
+
+    return container.data;
+  }
+
+  /**
+   * Set the form method.
+   *
+   * @param {String} method
+   */
+  setMethod(method) {
+    this.method = method;
+
+    return this;
+  }
+
+  /**
+   * Get the errors for a field.
+   *
+   * @param  {String} field
+   * @return {String}
+   */
+  errorsFor(field) {
+    return this.errors.get(field);
+  }
+
+  /**
+   * Submit the form and return a promise
+   *
+   * @param  {string} url
+   * @return {Promise}
+   */
+  submit(url, dataType = 'form_data') {
+    return new Promise((resolve, reject) => {
+      axios.post(url, this.data(dataType))
+        .then(response => {
+          this.formSubmitSucceded(response);
+          resolve(response);
+        })
+        .catch(error => {
+          this.formSubmitFailed(error);
+          reject(error);
+        });
+    });
+  }
+
+  /**
+   * Perform actions after submition succeded
+   *
+   * @param  {Object} response
+   * @return {void}
+   */
+  formSubmitSucceded(response) {
+    if (this.clearAfterResponse) {
+      this.reset();
+    }
+  }
+
+  /**
+   * Perform actions after submition failed
+   *
+   * @param  {Object} errors
+   * @return {void}
+   */
+  formSubmitFailed(errors) {
+    if (errors.response.status == 422) {
+      this.errors.record(errors.response.data.errors);
+    }
+  }
+}
+
+module.exports = Form;
diff --git a/src/FormErrors.js b/src/FormErrors.js
@@ -0,0 +1,74 @@
+/**
+* this class handles the possible errors
+* in a form
+*/
+export default class FormErrors {
+
+  /**
+   * Create an instance of formerrors
+   * @return {void}
+   */
+  constructor() {
+    this.errors = {};
+  }
+
+  /**
+   * Check if the field exists in the errors
+   *
+   * @param  {String}  field
+   * @return {Boolean}
+   */
+  has(field) {
+    return this.errors.hasOwnProperty(field);
+  }
+
+  /**
+   * Return the error for the field
+   *
+   * @param  {String} field
+   * @return {String}
+   */
+  get(field) {
+    if (!this.has(field)) {
+      return null;
+    }
+
+    return this.errors[field][0];
+  }
+
+  /**
+   * Record new errors
+   *
+   * @param  {Object} errors
+   * @return {void}
+   */
+  record(errors) {
+    this.errors = errors;
+  }
+
+  /**
+   * Clear error for specific field or for all errors
+   *
+   * @param  {String} field
+   * @return {void}
+   */
+  clear(field) {
+    if (!field) {
+      this.errors = {};
+      return;
+    }
+
+    delete this.errors[field];
+  }
+
+  /**
+   * Check if there are any errors
+   *
+   * @return {Boolean}
+   */
+  any() {
+    return Object.keys(this.errors).length > 0;
+  }
+}
+
+module.exports = FormErrors;
diff --git a/src/RequestDataContainer.js b/src/RequestDataContainer.js
@@ -0,0 +1,49 @@
+class RequestDataContainer {
+
+  /**
+   * Set up the class.
+   *
+   * @param  {String} type
+   * @return {this}
+   */
+  constructor(type) {
+    this.type = type;
+    this.data = type == 'json' ? {} : (new FormData());
+  }
+
+  /**
+   * Set a value in the respective key inside the data object.
+   *
+   * @param {String} key
+   * @param {mixed} value
+   */
+  set(key, value) {
+    if (this.type == 'json') {
+      this.data[key] = value;
+    } else if (this.type == 'form-data') {
+      if (Array.isArray(value)) {
+        value.forEach(element => {
+          this.data.append(`${key}[]`, this.parseToFormData(element));
+        });
+      } else {
+        this.data.append(key, this.parseToFormData(value));
+      }
+    }
+  }
+
+  /**
+   * Parse the value to the FormData value type.
+   *
+   * @param  {mixed} value
+   * @return {string}
+   */
+  parseToFormData(value) {
+    if (typeof(value) === "boolean") {
+      return value ? 1 : 0;
+    }
+
+    return  value == null ? '' : value;
+  }
+}
+
+module.exports = RequestDataContainer;
diff --git a/tests/form.test.js b/tests/form.test.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "presets": [
 +    "es2015"
 +  ]
 +}