🔀 Merge pull request #68 from codermarcos/fix/#63/readonly-inputs

🐛 Fix readonly inputs

Author: codermarcos

CONTRIBUTING.md

@@ -34,10 +34,10 @@ Here are some guides to names and patterns which helps everybody understand cont
 
 Take a look at some examples:
 
-* `refactor/CF-321/remove-bad-code`
-* `feat/CF-666/add-path-to-hell`
-* `fix/CF-999/rollback-path-hell`
-* `doc/CF-123/add-lessons-learned`
+* `refactor/#666/remove-bad-code`
+* `feat/#999/add-path-to-hell`
+* `fix/#666/rollback-path-hell`
+* `doc/#123/add-lessons-learned`
 
 ### 💬 Git Commit Messages
 

README.md

@@ -175,3 +175,79 @@ Read the [docs](docs/) or chose your implementation to check an example:
 * Allow lock the carret bar on end
 * Allow choose how many fractionalDigits
 * Allow choose decimal and thousands separators
+
+## 🦾 Contribute to this project
+
+This project needs your help, all contributions are welcome!
+
+For it please take a look for some patterns in [this documentation](https://github.com/codermarcos/simple-mask-money/blob/main/CONTRIBUTING.md).
+
+
+### Requirements to run this project
+
+This repository uses:
+
+| Dependencies                                 | Description        | Docs             |
+| -------------------------------------------- | ------------------ | ---------------- |
+| [![node-version]][node-download]             | Javascript Runtime | [📚][node-doc]   |
+
+> You can use [NVM][nvm-download] to select correct node version based on file `.nvmrc`.
+
+### Developing in this project
+
+1. Clone it:
+
+```bash
+git clone [email protected]:codermarcos/simple-mask-money.git
+```
+
+Or just [make a fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+
+2. Install the dependecies whitout change the lock file:
+
+```bash
+npm ci
+```
+
+> Just change the lock file if necessary.
+
+3. Run build to generate a build:
+
+```bash
+npm run build
+```
+
+### Before open a PR
+
+Remember of write unit and e2e tests, and make it works!
+
+1. Run unit tests
+
+```bash
+npm run test
+```
+
+2. Run e2e tests
+
+```bash
+npx cypress open
+```
+
+## 📖 Learn More
+
+To learn more about this project, take a look at the following resources:
+
+* [Typescript][ts-doc] - understand about typescript.
+* [Rollup][rollup-doc] - understand about the bundler used by this project.
+* [Jest][jest-doc] - understand about the tool that we use for write unit tests.
+* [Cypress][cypress-doc] - understand about the tool that we use for write e2e tests.
+
+[node-download]: https://nodejs.org/dist/v16.9.1/
+[node-doc]: https://nodejs.org/dist/latest-v16.x/docs/api/
+
+[nvm-download]: https://github.com/nvm-sh/nvm
+
+[ts-doc]: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
+[rollup-doc]: https://rollupjs.org/configuration-options/
+[jest-doc]: https://jestjs.io/pt-BR/docs/using-matchers
+[cypress-doc]: https://docs.cypress.io/guides/overview/why-cypress#Writing-tests

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>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mask-money",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "private": false,
   "description": "Simple money mask developed with pure JavaScript. To run on Client Side and Server Side",
   "types": "./lib/simple-mask-money.d.ts",

package.json

@@ -312,14 +312,16 @@ function setMask(
     setCaretPosition(position);
   };
 
-  element.addEventListener('keydown', onKeyDown);
-  document.addEventListener('selectionchange', onSelectionChange);
-
   if (allowEmpty && initialValue === `${prefix}0`) {
     triggerInputChanges('');
   } else {
     triggerInputChanges(initialValue);
   }
+  
+  if (element.hasAttribute('readonly') || element.hasAttribute('disabled')) return () => void 0;
+
+  element.addEventListener('keydown', onKeyDown);
+  document.addEventListener('selectionchange', onSelectionChange);
 
   const removeMask = (): void => {
     element.removeEventListener('keydown', onKeyDown);

src/set-mask.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(