Improve `toHTML` and `getAttributes` in Component

src/dom_components/model/Component.js

@@ -1,4 +1,4 @@
-import { isUndefined, isArray } from 'underscore';
+import { isUndefined, isArray, isEmpty, has } from 'underscore';
 import Styleable from 'domain_abstract/model/Styleable';
 
 const Backbone = require('backbone');
@@ -219,7 +219,19 @@ module.exports = Backbone.Model.extend(Styleable).extend({
    * @return {Object}
    */
   getAttributes() {
-    return this.get('attributes');
+    const classes = [];
+    const attributes = this.get('attributes') || {};
+
+    // Add classes
+    this.get('classes').each(cls => classes.push(cls.get('name')));
+    classes.length && (attributes.class = classes.join(' '));
+
+    // If style is not empty I need an ID attached to the component
+    if (!isEmpty(this.get('style')) && !has(attributes, 'id')) {
+      attributes.id = this.getId();
+    }
+
+    return attributes;
   },
 
 
@@ -518,43 +530,25 @@ module.exports = Backbone.Model.extend(Styleable).extend({
    * @private
    */
   toHTML(opts) {
-    var code = '';
+    const model = this;
-    var m = this;
+    const attrs = [];
-    var tag = m.get('tagName');
+    const classes = [];
-    var idFound = 0;
+    const tag = model.get('tagName');
-    var sTag = m.get('void');
+    const sTag = model.get('void');
-    var attrId = '';
+    const attributes = this.getAttrToHTML();
-    var strAttr = '';
+
-    var attr = this.getAttrToHTML();
+    for (let attr in attributes) {
-
+      const value = attributes[attr];
-    for (var prop in attr) {
+
-      if (prop == 'id') {
+      if (!isUndefined(value) && value !== '') {
-        idFound = 1;
+          attrs.push(`${attr}="${value}"`);
       }
-      var val = attr[prop];
-      strAttr += typeof val !== undefined && val !== '' ?
-        ' ' + prop + '="' + val + '"' : '';
     }
 
-    // Build the string of classes
+    let attrString = attrs.length ? ` ${attrs.join(' ')}` : '';
-    var strCls = '';
+    let code = `<${tag}${attrString}${sTag ? '/' : ''}>${model.get('content')}`;
-    m.get('classes').each(m => {
+    model.get('components').each(comp => code += comp.toHTML());
-      strCls += ' ' + m.get('name');
+    !sTag && (code += `</${tag}>`);
-    });
-    strCls = strCls !== '' ? ' class="' + strCls.trim() + '"' : '';
-
-    // If style is not empty I need an ID attached to the component
-    if(!_.isEmpty(m.get('style')) && !idFound)
-      attrId = ' id="' + m.getId() + '" ';
-
-    code += '<' + tag + strCls + attrId + strAttr + (sTag ? '/' : '') + '>' + m.get('content');
-
-    m.get('components').each(m => {
-      code += m.toHTML();
-    });
-
-    if(!sTag)
-      code += '</'+tag+'>';
 
     return code;
   },
@@ -566,7 +560,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
    * @private
    */
   getAttrToHTML() {
-    var attr = this.get('attributes') || {};
+    var attr = this.getAttributes();
     delete attr.style;
     return attr;
   },

test/specs/code_manager/model/CodeModels.js

@@ -54,7 +54,7 @@ module.exports = {
           ['class1', 'class2'].forEach(item => {
             m1.get('classes').add({name: item});
           });
-          expect(obj.build(comp)).toEqual('<article class="class1 class2" data-test1="value1" data-test2="value2"></article>');
+          expect(obj.build(comp)).toEqual('<article data-test1="value1" data-test2="value2" class="class1 class2"></article>');
         });
     });
 

test/specs/dom_components/model/Component.js

@@ -169,6 +169,7 @@ module.exports = {
           });
           expect(obj.getAttributes()).toEqual({
             id: 'test',
+            class: 'class1 class2',
             'data-test': 'value',
           });
           expect(obj.get('classes').length).toEqual(2);