@lion/validate - npm Package Compare versions

Comparing version 0.2.40 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.3.0](https://github.com/ing-bank/lion/compare/@lion/validate@0.2.40...@lion/validate@0.3.0) (2019-11-13)
+
+
+### Features
+
+* remove all deprecations from lion ([66d3d39](https://github.com/ing-bank/lion/commit/66d3d390aebeaa61b6effdea7d5f7eea0e89c894))
+
+
+
+
+
 ## [0.2.40](https://github.com/ing-bank/lion/compare/@lion/validate@0.2.39...@lion/validate@0.2.40) (2019-11-06)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@lion/validate",
-  "version": "0.2.40",
+  "version": "0.3.0",
   "description": "Validate your form elements",
@@ -36,4 +36,4 @@ "author": "ing-bank",
   "dependencies": {
-    "@lion/core": "^0.2.1",
-    "@lion/localize": "^0.4.21"
+    "@lion/core": "^0.3.0",
+    "@lion/localize": "^0.5.0"
   },
@@ -45,3 +45,3 @@ "devDependencies": {
   },
-  "gitHead": "564a90dad1243cf124bada9d22cafea078328cd2"
+  "gitHead": "90e6b4ef36bb5c49cfe7e4b2b8a00128334c84ab"
 }

src/ValidateMixin.js

@@ -297,8 +297,8 @@ /* eslint-disable class-methods-use-this, camelcase, no-param-reassign */
       get _feedbackElement() {
-        return (this.$$slot && this.$$slot('feedback')) || this.querySelector('[slot="feedback"]');
+        return this.querySelector('[slot="feedback"]');
       }
 
       getFieldName(validatorParams) {
-        const label =
-          this.label || (this.$$slot && this.$$slot('label') && this.$$slot('label').textContent);
+        const labelEl = this.querySelector('[slot=label]');
+        const label = this.label || (labelEl && labelEl.textContent);
 
@@ -417,2 +417,4 @@ if (validatorParams && validatorParams.fieldName) {
        * Can be overridden by sub classers
+       * Note that it's important to always render your feedback to the _feedbackElement textContent!
+       * This is necessary because it is allocated as the feedback slot, which is what the mixin renders feedback to.
        */
@@ -427,6 +429,6 @@ renderFeedback() {
         // Screen reader output should be in sync with visibility of error messages
-        if (this.inputElement) {
-          this.inputElement.setAttribute('aria-invalid', this.errorShow);
+        if (this._inputNode) {
+          this._inputNode.setAttribute('aria-invalid', this.errorShow);
           // TODO: test and see if needed for a11y
-          // this.inputElement.setCustomValidity(this._validationMessage || '');
+          // this._inputNode.setCustomValidity(this._validationMessage || '');
         }
@@ -433,0 +435,0 @@ }

test/ValidateMixin.test.js

 /* eslint-disable no-unused-vars, no-param-reassign */
 import { expect, fixture, html, unsafeStatic, defineCE, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
-import { LionLitElement } from '@lion/core/src/LionLitElement.js';
+import { LitElement } from '@lion/core';
 import { localizeTearDown } from '@lion/localize/test-helpers.js';
@@ -19,3 +19,3 @@ import { localize } from '@lion/localize';
 const tagString = defineCE(
-  class extends ValidateMixin(LionLitElement) {
+  class extends ValidateMixin(LitElement) {
     static get properties() {
@@ -51,3 +51,3 @@ return {
    * - *input-element*
-   *   The 'this.inputElement' property (usually a getter) that returns/contains a reference to an
+   *   The 'this._inputNode' property (usually a getter) that returns/contains a reference to an
    *   interaction element that receives focus, displays the input value, interaction states are
@@ -659,3 +659,3 @@ *   derived from, aria properties are put on and setCustomValidity (if applicable) is called on.
     const defaultElement = defineCE(
-      class extends ValidateMixin(LionLitElement) {
+      class extends ValidateMixin(LitElement) {
         static get properties() {
@@ -713,3 +713,3 @@ return {
 
-      expect(el.$$slot('feedback').innerText).to.equal('');
+      expect(el.querySelector('[slot=feedback]').innerText).to.equal('');
 
@@ -720,3 +720,5 @@ showErrors = true;
 
-      expect(el.$$slot('feedback').innerText).to.equal('This is error message for alwaysFalse');
+      expect(el.querySelector('[slot=feedback]').innerText).to.equal(
+        'This is error message for alwaysFalse',
+      );
     });
@@ -731,3 +733,3 @@
       `);
-      expect(feedbackResult.$$slot('feedback').innerText).to.equal(
+      expect(feedbackResult.querySelector('[slot=feedback]').innerText).to.equal(
         'This is error message for alwaysFalse',
@@ -746,3 +748,3 @@ );
 
-      expect(feedbackResult.$$slot('feedback').innerText).to.equal('');
+      expect(feedbackResult.querySelector('[slot=feedback]').innerText).to.equal('');
       // locale changed or smth
@@ -755,3 +757,5 @@ localize.reset();
       feedbackResult.onLocaleUpdated();
-      expect(feedbackResult.$$slot('feedback').innerText).to.equal('error:alwaysFalseAsyncTransl');
+      expect(feedbackResult.querySelector('[slot=feedback]').innerText).to.equal(
+        'error:alwaysFalseAsyncTransl',
+      );
     });
@@ -777,3 +781,3 @@
 
-      expect(customTranslations.$$slot('feedback').innerText).to.equal(
+      expect(customTranslations.querySelector('[slot=feedback]').innerText).to.equal(
         'You should have a lowercase a',
@@ -784,3 +788,5 @@ );
       await customTranslations.updateComplete;
-      expect(customTranslations.$$slot('feedback').innerText).to.equal('You can not pass');
+      expect(customTranslations.querySelector('[slot=feedback]').innerText).to.equal(
+        'You can not pass',
+      );
     });
@@ -790,3 +796,3 @@
       const element = defineCE(
-        class extends ValidateMixin(LionLitElement) {
+        class extends ValidateMixin(LitElement) {
           static get properties() {
@@ -803,3 +809,5 @@ return {
             const showError = validationStates.error;
-            this.innerHTML = showError ? `ERROR on ${validator}` : '';
+            this.innerHTML = showError
+              ? `<div slot="feedback">ERROR on ${validator}</div>`
+              : '<div slot="feedback"></div>';
           }
@@ -816,7 +824,9 @@ },
       await ownTranslations.updateComplete;
-      expect(ownTranslations.innerHTML).to.equal('ERROR on containsLowercaseA');
+      expect(ownTranslations.innerHTML).to.equal(
+        '<div slot="feedback">ERROR on containsLowercaseA</div>',
+      );
 
       ownTranslations.modelValue = 'cat';
       await ownTranslations.updateComplete;
-      expect(ownTranslations.innerHTML).to.equal('ERROR on alwaysFalse');
+      expect(ownTranslations.innerHTML).to.equal('<div slot="feedback">ERROR on alwaysFalse</div>');
     });
@@ -848,7 +858,9 @@
       await element.updateComplete;
-      expect(element.$$slot('feedback').innerText).to.equal('ERROR on containsLowercaseA');
+      expect(element.querySelector('[slot=feedback]').innerText).to.equal(
+        'ERROR on containsLowercaseA',
+      );
 
       element.modelValue = 'cat';
       await element.updateComplete;
-      expect(element.$$slot('feedback').innerText).to.equal('ERROR on alwaysFalse');
+      expect(element.querySelector('[slot=feedback]').innerText).to.equal('ERROR on alwaysFalse');
     });
@@ -873,3 +885,3 @@
       await validityFeedback.updateComplete;
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
         'This is error message for minLength',
@@ -880,3 +892,3 @@ );
       await validityFeedback.updateComplete;
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
         'This is warning message for minLength',
@@ -887,3 +899,3 @@ );
       await validityFeedback.updateComplete;
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
         'This is info message for minLength',
@@ -904,3 +916,3 @@ );
       await validityFeedback.updateComplete;
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
         'This is error message for minLength',
@@ -911,3 +923,3 @@ );
       await validityFeedback.updateComplete;
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
         'This is success message for alwaysFalse',
@@ -927,3 +939,3 @@ );
       await validityFeedback.updateComplete;
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
         'This is error message for containsCat',
@@ -934,3 +946,3 @@ );
       await validityFeedback.updateComplete;
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
         'This is error message for containsCat',
@@ -941,3 +953,3 @@ );
       await validityFeedback.updateComplete;
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
         'This is error message for minLength',
@@ -948,3 +960,3 @@ );
       await validityFeedback.updateComplete;
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal('');
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal('');
     });
@@ -954,3 +966,3 @@
       const randomTranslationsElement = defineCE(
-        class extends ValidateMixin(LionLitElement) {
+        class extends ValidateMixin(LitElement) {
           static get properties() {
@@ -1014,3 +1026,3 @@ return {
 
-      expect(randomTranslations.$$slot('feedback').innerText).to.equal(
+      expect(randomTranslations.querySelector('[slot=feedback]').innerText).to.equal(
         'You should have a lowercase a',
@@ -1021,3 +1033,3 @@ );
       await randomTranslations.updateComplete;
-      expect(randomTranslations.$$slot('feedback').innerText).to.equal('Good job!');
+      expect(randomTranslations.querySelector('[slot=feedback]').innerText).to.equal('Good job!');
 
@@ -1030,3 +1042,5 @@ Math.random = () => 0.25;
 
-      expect(randomTranslations.$$slot('feedback').innerText).to.equal('You did great!');
+      expect(randomTranslations.querySelector('[slot=feedback]').innerText).to.equal(
+        'You did great!',
+      );
 
@@ -1059,3 +1073,3 @@ Math.random = mathRandom; // manually restore
       );
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
         'You need to enter at least 4 characters.',
@@ -1066,3 +1080,3 @@ );
       await validityFeedback.updateComplete;
-      expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+      expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
         'Es müssen mindestens 4 Zeichen eingegeben werden.',
@@ -1088,3 +1102,5 @@ );
         `);
-        expect(el.$$slot('feedback').innerText).to.equal('myField needs more characters');
+        expect(el.querySelector('[slot=feedback]').innerText).to.equal(
+          'myField needs more characters',
+        );
       });
@@ -1101,3 +1117,3 @@
           </${elNameStatic}>`);
-        expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+        expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
           'overrideName needs more characters',
@@ -1116,3 +1132,3 @@ );
           </${elNameStatic}>`);
-        expect(validityFeedback.$$slot('feedback').innerText).to.equal(
+        expect(validityFeedback.querySelector('[slot=feedback]').innerText).to.equal(
           'myField needs more characters',
@@ -1126,3 +1142,3 @@ );
         </${elNameStatic}>`);
-        expect(validityFeedback2.$$slot('feedback').innerText).to.equal(
+        expect(validityFeedback2.querySelector('[slot=feedback]').innerText).to.equal(
           'myName needs more characters',
@@ -1170,7 +1186,9 @@ );
         await element.updateComplete;
-        expect(element.$$slot('feedback').innerText).to.equal('ERROR on containsLowercaseA');
+        expect(element.querySelector('[slot=feedback]').innerText).to.equal(
+          'ERROR on containsLowercaseA',
+        );
 
         element.modelValue = 'cat';
         await element.updateComplete;
-        expect(element.$$slot('feedback').innerText).to.equal('');
+        expect(element.querySelector('[slot=feedback]').innerText).to.equal('');
       });
@@ -1228,3 +1246,5 @@ });
         el._createMessageAndRenderFeedback();
-        expect(el.$$slot('feedback').innerText).to.equal('lion-validate : orderValidator');
+        expect(el.querySelector('[slot=feedback]').innerText).to.equal(
+          'lion-validate : orderValidator',
+        );
 
@@ -1238,3 +1258,3 @@ // 1. lion-validate+orderValidator
         el._createMessageAndRenderFeedback();
-        expect(el.$$slot('feedback').innerText).to.equal(
+        expect(el.querySelector('[slot=feedback]').innerText).to.equal(
           'lion-validate+orderValidator : orderValidator',
@@ -1253,3 +1273,3 @@ );
         const orderName = defineCE(
-          class extends ValidateMixin(LionLitElement) {
+          class extends ValidateMixin(LitElement) {
             static get properties() {
@@ -1289,3 +1309,5 @@ return { modelValue: { type: String } };
         el._createMessageAndRenderFeedback();
-        expect(el.$$slot('feedback').innerText).to.equal('lion-validate : is12Validator');
+        expect(el.querySelector('[slot=feedback]').innerText).to.equal(
+          'lion-validate : is12Validator',
+        );
 
@@ -1299,3 +1321,3 @@ // 3. lion-validate+is12Validator
         el._createMessageAndRenderFeedback();
-        expect(el.$$slot('feedback').innerText).to.equal(
+        expect(el.querySelector('[slot=feedback]').innerText).to.equal(
           'lion-validate+is12Validator : is12Validator',
@@ -1311,3 +1333,5 @@ );
         el._createMessageAndRenderFeedback();
-        expect(el.$$slot('feedback').innerText).to.equal('my-custom-namespace : is12Validator');
+        expect(el.querySelector('[slot=feedback]').innerText).to.equal(
+          'my-custom-namespace : is12Validator',
+        );
 
@@ -1321,3 +1345,3 @@ // 1. my-custom-namespace+is12Validator
         el._createMessageAndRenderFeedback();
-        expect(el.$$slot('feedback').innerText).to.equal(
+        expect(el.querySelector('[slot=feedback]').innerText).to.equal(
           'my-custom-namespace+is12Validator : is12Validator',
@@ -1324,0 +1348,0 @@ );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

167963

increased by0.73%

Lines of code

3035

increased by0.86%

Dependency changes

• + Added@lion/core@0.3.0(transitive)

• + Added@lion/localize@0.5.0(transitive)

• - Removed@lion/core@0.2.1(transitive)

• - Removed@lion/localize@0.4.21(transitive)

• Updated@lion/core@^0.3.0

• Updated@lion/localize@^0.5.0