🐛 fix readonly inputs

On branch fix/#63/readonly-inputs
Changes to be committed:
	modified:   cypress/e2e/v4.x.x/set-mask.cy.ts
	modified:   cypress/file/index.html
	modified:   src/set-mask.ts
	modified:   tests/set-mask.test.ts

cypress/e2e/v4.x.x/set-mask.cy.ts

@@ -2,16 +2,95 @@
 
 import type { SimpleMaskMoneyConfiguration } from '../../../src/types';
 
-const getUrl = (configuration: Partial<SimpleMaskMoneyConfiguration>, initalValue?: string) => {
+const getUrl = (configuration: Partial<SimpleMaskMoneyConfiguration>, initalValue?: string, attr?: Array<string>) => {
   const options = new Array<string>();
 
   Object.keys(configuration).forEach((key) => options.push(`${key}=${encodeURIComponent(configuration[key])}`));
 
   if (initalValue) options.push(`initialValue=${initalValue}`);
+  if (attr) options.push(`attributes=${attr.join(',')}`);
 
   return `./cypress/file/?${options.join('&')}`;
 };
 
+
+describe(
+  'input behaviour',
+  () => {
+    describe(
+      'readonly',
+      () => {
+
+        beforeEach(
+          () => {
+            cy.visit(getUrl({ prefix: '$', suffix: 'CAD' }, '6.66', ['readonly']));
+            cy.reload();
+          }
+        );
+
+        it(
+          'should format when input was created',
+          () => {
+            cy.get('input').should('have.value', '$6,66CAD');
+          }
+        );
+
+        it(
+          'shouldn\'t allow type when is readonly',
+          (done) => {
+            const prevent = async (error) => {
+              const passed = error.message.includes('readonly');
+              cy.off('fail', prevent);
+              if (passed) done();
+              return !passed;
+            };
+
+            cy.on('fail', prevent);
+            cy.get('input').type('123', { timeout: 100 });
+          }
+        );
+      }
+    );
+
+    describe(
+      'readonly',
+      () => {
+
+        beforeEach(
+          () => {
+            cy.visit(getUrl({ prefix: '$', suffix: 'CAD' }, '6.66', ['disabled']));
+            cy.reload();
+          }
+        );
+
+        it(
+          'should format when input was created',
+          () => {
+            cy.get('input').should('have.value', '$6,66CAD');
+          }
+        );
+
+        it(
+          'shouldn\'t allow type when is disabled',
+          (done) => {
+            const prevent = async (error) => {
+              const passed = error.message.includes('disabled');
+              cy.off('fail', prevent);
+              if (passed) done();
+              return !passed;
+            };
+
+            cy.on('fail', prevent);
+
+            cy.get('input').type('123', { timeout: 100 });
+          }
+        );
+      }
+    );
+
+  }
+);
+
 describe(
   'cursor',
   () => {

cypress/file/index.html

@@ -14,7 +14,9 @@
 
   <script src="/lib/simple-mask-money.umd.js"></script>
 
-  <input type="text" />
+  <form>
+    <input type="text" />
+  </form>
 
   <script>
     const options = {};
@@ -50,6 +52,9 @@
 
     if (q.has('initialValue'))
       document.querySelector('input').value = q.get('initialValue');
+
+    if (q.has('attributes'))
+      q.get('attributes').split(',').forEach(prop => document.querySelector('input').setAttribute(prop, ''));
 
     const removeMask = SimpleMaskMoney.setMask('input', options);
   </script>

src/set-mask.ts

@@ -306,11 +306,13 @@ function setMask(
     setCaretPosition(position);
   };
 
+  triggerInputChanges(initialValue);
+
+  if (element.hasAttribute('readonly') || element.hasAttribute('disabled')) return () => void 0;
+
   element.addEventListener('keydown', onKeyDown);
   document.addEventListener('selectionchange', onSelectionChange);
 
-  triggerInputChanges(initialValue);
-
   const removeMask = (): void => {
     element.removeEventListener('keydown', onKeyDown);
     document.removeEventListener('selectionchange', onSelectionChange);

tests/set-mask.test.ts

@@ -235,6 +235,40 @@ describe(
       }
     );
 
+    describe(
+      'shouldn\'t write when is readonly or disabled',
+      () => {
+        it(
+          'should format when apply mask and not allow write when is readonly', 
+          () => {
+            input.value = '0,50';
+            input.setAttribute('readonly', '');
+
+            clear = setMask(input, { prefix: 'R$', suffix: 'BRL' });
+
+            write('69');
+
+            expect(input.value).toBe('R$0,50BRL');
+          },
+        );
+
+        it(
+          'should format when apply mask and not allow write when is disabled', 
+          () => {
+            input.value = '0,50';
+            input.setAttribute('disabled', '');
+
+            clear = setMask(input, { prefix: 'R$', suffix: 'BRL' });
+
+            write('69');
+
+            expect(input.value).toBe('R$0,50BRL');
+          },
+        );
+      }
+    );
+
+
     // Only basic tests because jsdom doesn't work to simulate user actions
     // Real tests at cypress
     describe(