Set new elements and hotfixes

rantes · Mar 31, 2023 · 99817e9 · 99817e9
1 parent c1597c0
commit 99817e9
Show file tree

Hide file tree

Showing 18 changed files with 583 additions and 131 deletions.
diff --git a/builder.php b/builder.php
@@ -259,14 +259,11 @@ public function setTestPage() {
     </style>
 </head>
 <body>
-        <div class="html-reporter">
-            <div class="banner">
-            </div>
-            <ul class="symbol-summary"></ul>
-            <div class="alert">
-            </div>
-            <div class="results">
-            </div>
+        <div class="jasmine_html-reporter jasmine_failure-list">
+            <div class="jasmine-banner"></div>
+            <ul class="jasmine-symbol-summary"></ul>
+            <div class="jasmine-alert"></div>
+            <div class="jasmine-results"></div>
         </div>
         <div id="components">
         </div>
@@ -336,11 +333,11 @@ public function testUI() {
             fclose($pipes[1]);
             proc_close($process);
             preg_match('@\{(?:.)+\}@', $output, $matches);
-            $result = json_decode($matches[0])->result->value;
-            preg_match('@((?:\d)+)\sfailures@', $result, $matches);
-            $this->render['text'] = $result;
+            $result = json_decode($matches[0])->result->result;
+            preg_match('@((?:\d)+)\sfailures@', $result->value, $matches);
+            $this->render['text'] = $result->value;
             $errors = !empty($errors);
-            $this->_logger('dumbo_ui_unit_testing', $result);
+            $this->_logger('dumbo_ui_unit_testing', $result->value);
             (bool)$errors and fwrite(STDERR, "{$matches[0]}\n");
         endif;
     }
@@ -349,8 +346,7 @@ public function watchUI() {
         $this->_logger('dumbo_ui_watcher', 'Setting up files for watch...');
         $files = new ArrayObject();
         $list = [
-            ...$this->_readFiles("{$this->_configs->source}", '/^(?=.*\.directive)(?!.*?\.spec).+\.js$/'),
-            ...$this->_readFiles("{$this->_configs->source}", '/^(?=.*\.factory)(?!.*?\.spec).+\.js$/'),
+            ...$this->_readFiles("{$this->_configs->source}", '/(.+)\.js/'),
             ...$this->_readFiles("{$this->_configs->source}", '/(.+)\.scss/'),
             ...$this->_readFiles($this->_configs->source, '/(.+)\.scss/', false)
         ];

diff --git a/dist/dmb-components.min.js b/dist/dmb-components.min.js
@@ -278,6 +278,7 @@ class DmbForm extends DumboDirective {
     validate(formElements, parentSelector) {
         let item = null;
         let hasInvalids = false;
+        let parentItem = null;
 
         formElements.forEach(element => {
             element.closest(parentSelector).resetValidation();
@@ -286,7 +287,8 @@ class DmbForm extends DumboDirective {
         this.dispatchEvent(window.DmbEvents.formBeforeValidate.event);
         while ((item = formElements.shift())) {
             if (item.closest('.novalidate') === null) {
-                item.closest(parentSelector).setValidation();
+                parentItem = item.closest(parentSelector);
+                parentItem.setValidation();
 
                 if (!item.hasAttribute('valid') && !item.hasAttribute('hidden')) {
                     item.reportValidity();
@@ -436,7 +438,7 @@ class DmbInfoPop extends DumboDirective {
 
 customElements.define('dmb-info-pop', DmbInfoPop);
 class DmbInput extends DumboDirective {
-    static get observedAttributes() { return ['valid','name', 'validate', 'dmb-name', 'label']; }
+    static get observedAttributes() { return ['valid','name', 'validate', 'dmb-name', 'label', 'dmb-value']; }
 
     constructor() {
         super();
@@ -515,8 +517,12 @@ class DmbInput extends DumboDirective {
     }
 
     set value(val) {
-        const input = this.querySelector('input');
-        input.value = val;
+        if (this.type === 'checkbox') {
+            this.checked = !!val;
+        } else {
+            this.querySelector('input').setAttribute('value', val);
+            this.querySelector('input').value = val;
+        }
     }
 
     attributeChangedCallback(attr, oldValue, newValue) {
@@ -597,7 +603,7 @@ class DmbInput extends DumboDirective {
         }
 
         this.isValid = valid;
-        valid? element.setAttribute('valid','') : element.removeAttribute('valid');
+        valid? element.setAttribute('valid','true') : element.removeAttribute('valid');
     }
 
     resetValidation() {
@@ -859,6 +865,7 @@ class DmbPanel extends DumboDirective {
         this.dispatchEvent(window.DmbEvents.panelClose.event);
         (this.localName === 'dmb-dialog') && this.remove();
         this.dispatchEvent(window.DmbEvents.dialogClose.event);
+        this.dispatchEvent(window.DmbEvents.panelClosed.event);
     }
 
     open() {
@@ -937,7 +944,7 @@ class DmbPanel extends DumboDirective {
 
     onClose(fn) {
         if (typeof fn === 'function') {
-            this.addEventListener('close-panel', fn);
+            this.addEventListener(window.DmbEvents.panelClose.listener, fn);
         }
     }
 
@@ -994,6 +1001,16 @@ class DmbSelect extends DumboDirective {
         this.buildOptions();
     }
 
+    get values() {
+        return this.valueList;
+    }
+
+    set value(val) {
+        this.querySelector('select').setAttribute('value', val);
+        this.querySelector('select').value = val;
+        this.dispatchEvent(new Event('change'));
+    }
+
     init() {
         const select = this.querySelector('select');
         let value = null;
@@ -1018,8 +1035,9 @@ class DmbSelect extends DumboDirective {
             this.validators = this.buildValidators(select, this.getAttribute('validate'));
         }
 
-        select.addEventListener('blur', (e) => {
-            this._runValidators(e.target, this.validators);
+        select.addEventListener('blur', () => {
+            // this._runValidators(e.target, this.validators);
+            this.setValidation();
         }, {capture: true, passive: true});
 
         options = [...select.querySelectorAll('option')];
@@ -1236,6 +1254,11 @@ class DmbTextArea extends DumboDirective {
         };
     }
 
+    set value(val) {
+        this.querySelector('textarea').innerText(val);
+        this.querySelector('textarea').value = val;
+    }
+
     attributeChangedCallback(attr, oldValue, newValue) {
         const input = this.querySelector('textarea');
 

diff --git a/dist/dumbo.min.js b/dist/dumbo.min.js
@@ -1,3 +1,18 @@
+Window.prototype.DmbEvents = {
+    panelClose: {event: new Event('dmb-panel.close'), listener: 'dmb-panel.close'},
+    panelOpen: {event: new Event('dmb-panel.open'), listener: 'dmb-panel.open'},
+    panelClosed: {event: new Event('dmb-panel.closed'), listener: 'dmb-panel.closed'},
+    panelOpened: {event: new Event('dmb-panel.opened'), listener: 'dmb-panel.opened'},
+    resetValidation: {event: new Event('dmb-validation.reset'), listener: 'dmb-validation.reset'},
+    validate: {event: new Event('dmb-validation.validate'), listener: 'dmb-validation.validate'},
+    dialogClose: {event: new Event('dmb-dialog.close'), listener: 'dmb-dialog.close'},
+    dialogOpen: {event: new Event('dmb-dialog.open'), listener: 'dmb-dialog.open'},
+    pageLoaderClose: {event: new Event('dmb-page-loader.close'), listener: 'dmb-page-loader.close'},
+    formSubmit: {event: new Event('dmb-form.submit'), listener: 'dmb-form.submit'},
+    formBeforeValidate: {event: new Event('dmb-form.before-validate'), listener: 'dmb-form.before-validate'},
+    formAfterValidate: {event: new Event('dmb-form.after-validate'), listener: 'dmb-form.after-validate'}
+};
+
 const vDom = document.cloneNode(true);
 
 // eslint-disable-next-line no-unused-vars
@@ -62,20 +77,6 @@ class DumboDirective extends HTMLElement {
 
     init() {}
 
-    generateId(limit = 6) { return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, limit - 1); }
+    generateId(limit = 6) { return Math.random().toString(36).replace(/[^a-z]+/g, '').substring(0, limit - 1); }
 }
 
-Window.prototype.DmbEvents = {
-    panelClose: {event: new Event('dmb-panel.close'), listener: 'dmb-panel.close'},
-    panelOpen: {event: new Event('dmb-panel.open'), listener: 'dmb-panel.open'},
-    panelClosed: {event: new Event('dmb-panel.closed'), listener: 'dmb-panel.closed'},
-    panelOpened: {event: new Event('dmb-panel.opened'), listener: 'dmb-panel.opened'},
-    resetValidation: {event: new Event('dmb-validation.reset'), listener: 'dmb-validation.reset'},
-    validate: {event: new Event('dmb-validation.validate'), listener: 'dmb-validation.validate'},
-    dialogClose: {event: new Event('dmb-dialog.close'), listener: 'dmb-dialog.close'},
-    dialogOpen: {event: new Event('dmb-dialog.open'), listener: 'dmb-dialog.open'},
-    pageLoaderClose: {event: new Event('dmb-page-loader.close'), listener: 'dmb-page-loader.close'},
-    formSubmit: {event: new Event('dmb-form.submit'), listener: 'dmb-form.submit'},
-    formBeforeValidate: {event: new Event('dmb-form.before-validate'), listener: 'dmb-form.before-validate'},
-    formAfterValidate: {event: new Event('dmb-form.after-validate'), listener: 'dmb-form.after-validate'}
-};
diff --git a/src/dmb-button/dmbButton-directive.spec.js b/src/dmb-button/dmbButton-directive.spec.js
@@ -1,11 +1,18 @@
 
 describe('dmbButton Directive', () => {
     let element = null;
+    let container = null;
 
+    container = document.querySelector('#components');
     element = document.createElement('dmb-button');
     element.classList.add('button');
     element.classList.add('button-primary');
-    document.body.append(element);
+    container.append(element);
+
+    afterEach( done => {
+        element && element.remove();
+        done();
+    });
 
     it('Should render element', (done) => {
         expect(element).toBeDefined();

diff --git a/src/dmb-form/dmbForm-directive.spec.js b/src/dmb-form/dmbForm-directive.spec.js
@@ -4,29 +4,37 @@ describe('DmbForm Directive', () => {
     let button = null;
     let inputs = null;
     let textarea = null;
+    let container = null;
+
+    let input = null;
 
     element = document.createElement('dmb-form');
     select = document.createElement('dmb-select');
     button = document.createElement('dmb-button');
     inputs = document.createElement('dmb-input');
     textarea = document.createElement('dmb-text-area');
+    container = document.querySelector('#components');
 
+    container.append(element);
+
     select.setAttribute('validate', 'required');
     inputs.setAttribute('validate', 'required');
     textarea.setAttribute('validate', 'required');
     button.classList.add('button');
     button.classList.add('button-primary');
     button.innerHTML = 'TestForm';
 
+
+    inputs.setAttribute('label', 'label');
     element.append(inputs);
     element.append(select);
     element.append(textarea);
-    element.append(button);
 
-    document.body.append(element);
-
     button.setAttribute('type','submit');
-
+    element.append(button);
+
+
+    select.setAttribute('values', true);
     select.value = null;
 
     select.values = [
@@ -35,13 +43,34 @@ describe('DmbForm Directive', () => {
         {value: '2', text: 'Pension'},
         {value: '3', text: 'Accidente'}
     ];
-    select.setAttribute('values', true);
 
-    it('Should render element', () => {
+    afterEach( done => {
+        element && element.remove();
+        done();
+    });
+
+    beforeEach((done) => {
+        inputs.value = '';
+        select.value = null;
+        input = inputs.querySelector('input');
+        done();
+    });
+
+    it('Should render element', (done) => {
         expect(element).toBeDefined();
+        done();
     });
 
-    it('Should validate', () => {
+    it('Should validate', (done) => {
+        element.submit();
         expect(element.valids).toBe(0);
+        done();
+    });
+
+    it('Should have valid inputs', (done) => {
+        inputs.value = 'value';
+        element.submit();
+        expect(element.valids).toBe(1);
+        done();
     });
 });
diff --git a/src/dmb-form/dmbForm.directive.js b/src/dmb-form/dmbForm.directive.js
@@ -45,6 +45,7 @@ class DmbForm extends DumboDirective {
     validate(formElements, parentSelector) {
         let item = null;
         let hasInvalids = false;
+        let parentItem = null;
 
         formElements.forEach(element => {
             element.closest(parentSelector).resetValidation();
@@ -53,7 +54,8 @@ class DmbForm extends DumboDirective {
         this.dispatchEvent(window.DmbEvents.formBeforeValidate.event);
         while ((item = formElements.shift())) {
             if (item.closest('.novalidate') === null) {
-                item.closest(parentSelector).setValidation();
+                parentItem = item.closest(parentSelector);
+                parentItem.setValidation();
 
                 if (!item.hasAttribute('valid') && !item.hasAttribute('hidden')) {
                     item.reportValidity();

diff --git a/src/dmb-image-uploader/dmbImageUploader-directive.spec.js b/src/dmb-image-uploader/dmbImageUploader-directive.spec.js
@@ -2,12 +2,14 @@ describe('DmbImageUploader Directive', () => {
     let element = null;
     // eslint-disable-next-line no-unused-vars
     let loadFile = null; // this var is actually used for spy purposes
+    let container = null;
 
     const contentType = 'image/png';
     const img1px = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
 
     element = document.createElement('dmb-image-uploader');
-    document.body.append(element);
+    container = document.querySelector('#components');
+    container.append(element);
 
     const dataURLtoFile = (b64Data, contentType='', sliceSize=512) => {
         const byteCharacters = atob(b64Data);
@@ -30,6 +32,11 @@ describe('DmbImageUploader Directive', () => {
 
     const imgFile = dataURLtoFile(img1px, contentType);
 
+    afterEach( done => {
+        element && element.remove();
+        done();
+    });
+
     it('Should render element', (done) => {
         expect(element).toBeDefined();
         done();

diff --git a/src/dmb-input/dmbInput-directive.spec.js b/src/dmb-input/dmbInput-directive.spec.js
@@ -2,11 +2,18 @@
 describe('DmbInput Directive', () => {
     let element = null;
     let input = null;
+    let container = null;
 
     element = document.createElement('dmb-input');
+    container = document.querySelector('#components');
     element.setAttribute('label', 'label');
-    document.body.append(element);
-
+    container.append(element);
+
+    afterEach( done => {
+        element && element.remove();
+        done();
+    });
+
     beforeAll((done) => {
         input = element.querySelector('input');
         done();
@@ -34,6 +41,10 @@ describe('DmbInput Directive', () => {
         input.dispatchEvent(new Event('focusin'));
         input.dispatchEvent(new Event('blur'));
         expect(input.hasAttribute('valid')).toBe(false);
+        input.value = 'a value';
+        input.dispatchEvent(new Event('focusin'));
+        input.dispatchEvent(new Event('blur'));
+        expect(input.hasAttribute('valid')).toBe(true);
         done();
     });