fix(textarea): fix box-sizing inside tests to make it work cross browser (#2210)

.changeset/fifty-ants-end.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[textarea] set box-sizing in tests to make it work cross browser

package-lock.json

@@ -27,6 +27,7 @@
         "@rocket/cli": "^0.10.2",
         "@rocket/launch": "^0.6.0",
         "@rocket/search": "^0.5.1",
+        "@types/autosize": "^4.0.3",
         "@types/chai-as-promised": "^7.1.5",
         "@types/chai-dom": "^0.0.8",
         "@types/convert-source-map": "^1.5.2",
@@ -4220,6 +4221,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/autosize": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/autosize/-/autosize-4.0.3.tgz",
+      "integrity": "sha512-o0ZyU3ePp3+KRbhHsY4ogjc+ZQWgVN5h6j8BHW5RII4cFKi6PEKK9QPAcphJVkD0dGpyFnD3VRR0WMvHVjCv9w==",
+      "dev": true
+    },
     "node_modules/@types/babel__code-frame": {
       "version": "7.0.3",
       "dev": true,
@@ -24201,6 +24208,12 @@
       "version": "5.0.1",
       "dev": true
     },
+    "@types/autosize": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/autosize/-/autosize-4.0.3.tgz",
+      "integrity": "sha512-o0ZyU3ePp3+KRbhHsY4ogjc+ZQWgVN5h6j8BHW5RII4cFKi6PEKK9QPAcphJVkD0dGpyFnD3VRR0WMvHVjCv9w==",
+      "dev": true
+    },
     "@types/babel__code-frame": {
       "version": "7.0.3",
       "dev": true

package.json

@@ -55,6 +55,7 @@
     "@rocket/cli": "^0.10.2",
     "@rocket/launch": "^0.6.0",
     "@rocket/search": "^0.5.1",
+    "@types/autosize": "^4.0.3",
     "@types/chai-as-promised": "^7.1.5",
     "@types/chai-dom": "^0.0.8",
     "@types/convert-source-map": "^1.5.2",

packages/ui/components/textarea/src/LionTextarea.js

@@ -1,6 +1,5 @@
 /* eslint-disable max-classes-per-file */
-// @ts-expect-error [external]: https://github.com/jackmoore/autosize/pull/384 wait for this, then we can switch to just 'autosize'; and then types will work!
-import autosize from 'autosize/src/autosize.js';
+import autosize from 'autosize';
 import { LionField, NativeTextFieldMixin } from '@lion/ui/form-core.js';
 import { css } from 'lit';
 
@@ -155,6 +154,7 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
       ...super.styles,
       css`
         .input-group__container > .input-group__input ::slotted(.form-control) {
+          box-sizing: content-box;
           overflow-x: hidden; /* for FF adds height to the TextArea to reserve place for scroll-bars */
         }
 

packages/ui/components/textarea/test/lion-textarea.test.js

@@ -12,11 +12,6 @@ import '@lion/ui/define/lion-textarea.js';
 
 const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionTextarea>} */ (_fixture);
 
-const isFirefox = (() => {
-  const ua = navigator.userAgent.toLowerCase();
-  return ua.indexOf('firefox') !== -1 && ua.indexOf('safari') === -1 && ua.indexOf('chrome') === -1;
-})();
-
 function hasBrowserResizeSupport() {
   const textarea = document.createElement('textarea');
   return textarea.style.resize !== undefined;
@@ -98,10 +93,9 @@ describe('<lion-textarea>', () => {
     expect(hightWith1Line < hightWith5TextLines).to.equal(true);
   });
 
-  // TODO: To be fixed in 4096171
-  it.skip(`starts growing when content is bigger than "rows"
+  it(`starts growing when content is bigger than "rows"
     'and stops growing after property "maxRows" is reached`, async () => {
-    const el = await fixture(`<lion-textarea></lion-textarea>`);
+    const el = await fixture(html`<lion-textarea></lion-textarea>`);
     return [1, 2, 3, 4, 5, 6, 7, 8].reduce(async (heightPromise, i) => {
       const oldHeight = await heightPromise;
       el.modelValue += '\n';
@@ -120,11 +114,9 @@ describe('<lion-textarea>', () => {
     }, Promise.resolve(0));
   });
 
-  // TODO: make test simpler => no reduce please (also update autosize npm dependency to latest version)
-  // TODO: To be fixed in 4096171
-  it.skip('stops growing after property "maxRows" is reached when there was an initial value', async () => {
-    const el = await fixture(html`<lion-textarea .modelValue="${'1\n2\n3'}"></lion-textarea>`);
-
+  // TODO: make test simpler => no reduce please
+  it('stops growing after property "maxRows" is reached when there was an initial value', async () => {
+    const el = await fixture(html` <lion-textarea .modelValue="${'1\n2\n3'}"></lion-textarea> `);
     return [4, 5, 6, 7, 8].reduce(async (heightPromise, i) => {
       const oldHeight = await heightPromise;
       el.modelValue += `\n`;
@@ -133,10 +125,7 @@ describe('<lion-textarea>', () => {
 
       if (i > el.maxRows) {
         // stop growing
-        // TODO: fails on Firefox => fix it
-        if (!isFirefox) {
-          expect(newHeight).to.equal(oldHeight);
-        }
+        expect(newHeight).to.equal(oldHeight);
       } else if (i > el.rows) {
         // growing normally
         expect(newHeight >= oldHeight).to.equal(true);

packages/ui/package.json

@@ -65,7 +65,7 @@
     "@open-wc/dedupe-mixin": "^1.4.0",
     "@open-wc/scoped-elements": "^3.0.5",
     "@popperjs/core": "^2.11.8",
-    "autosize": "^6.0.1",
+    "autosize": "^6.0.0",
     "awesome-phonenumber": "^6.4.0",
     "ibantools": "^4.3.9",
     "lit": "^3.1.2",