q2-tecton-elements 1.38.1 → 1.39.0

package/dist/test/elements/q2-input-test.e2e.js

@@ -1,4 +1,4 @@
-import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getActiveElementTestId, getNestedAssignedElementLength, getNestedElementStyle, } from '../helpers';
+import { evaluateA11y, setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getActiveElementTestId, getNestedAssignedElementLength, getNestedElementStyle, } from '../helpers';
 describe('q2-input', () => {
   async function getInnerInputDimensions(page) {
     return page.$eval('body', () => document.querySelector('q2-input').shadowRoot.querySelector('input').getClientRects()[0].toJSON());
@@ -1176,7 +1176,7 @@ describe('q2-input', () => {
     expect(await innerInput.getProperty('value')).toEqual(expectedValue);
   });
   describe('cursor', () => {
-    it('should not move the cursor in reverse when maxlength is set', async () => {
+    it('does not move the cursor in reverse when maxlength is set', async () => {
       const maxlength = 4;
       const page = await setup({
         html: '<q2-input maxlength="' + maxlength.toString() + '" ></q2input>',
@@ -1195,23 +1195,7 @@ describe('q2-input', () => {
       await innerInput.press('o');
       expect(await innerInput.getProperty('value')).toEqual('aafo');
     });
-    it('should not move the cursor to the end if type is currency when first character is deleted', async () => {
-      const page = await setup({
-        html: '<q2-input type="currency" value="123"></q2input>',
-      });
-      const innerInput = await page.find('q2-input >>> .input-field');
-      await page.waitForChanges();
-      const currentPosition = await innerInput.getProperty('selectionStart');
-      // For loop pushes cursor to left end position of input.value
-      for (let i = 0; i < currentPosition - 1; i++) {
-        await innerInput.press('ArrowLeft');
-      }
-      await innerInput.press('Backspace');
-      await page.waitForChanges();
-      const newPosition = await innerInput.getProperty('selectionStart');
-      expect(newPosition).toEqual(0); // 0 represents that cursor stays at far left (begining position of input.value)
-    });
-    it('should not move the cursor position if type is not currency when first character is deleted', async () => {
+    it('does not move the cursor position when first character is deleted', async () => {
       const page = await setup({
         html: '<q2-input type="text" value="abcde 12345"></q2input>',
       });
@@ -1226,40 +1210,99 @@ describe('q2-input', () => {
       const newPosition = await innerInput.getProperty('selectionStart');
       expect(newPosition).toEqual(0);
     });
-    it('moves the cursor to the left and right when pressing the arrow keys', async () => {
+    it('sets the cursor to where the user clicks to focus', async () => {
       const page = await setup({
-        html: '<q2-input type="currency" value="185940958"></q2input>',
+        html: '<q2-input type="text" value="Tony Stark"></q2input>',
       });
       const innerInput = await page.find('q2-input >>> .input-field');
+      const valueLength = (await innerInput.getProperty('value')).length;
+      const dimensions = await getInnerInputDimensions(page);
+      // Simulate clicking a character in the middle of the input
+      await page.mouse.click(dimensions.left + 50, dimensions.top + dimensions.height / 2);
       await page.waitForChanges();
-      let value = await innerInput.getProperty('value');
-      // move the cursor to the middle of the string
-      const pressTimes = 4;
-      for (let i = 0; i < pressTimes; i++)
-        await innerInput.press('ArrowLeft');
-      expect(await innerInput.getProperty('selectionStart')).toEqual(value.length - pressTimes);
-      // add characters to the middle of the string
-      await innerInput.press('3');
-      await innerInput.press('3');
-      expect(await innerInput.getProperty('value')).toEqual('18,594,095,338.00');
-      // move the cursor back to the end of the string
-      for (let i = 0; i < pressTimes; i++)
-        await innerInput.press('ArrowRight');
-      value = await innerInput.getProperty('value');
-      expect(await innerInput.getProperty('selectionStart')).toEqual(value.length);
+      expect(await innerInput.getProperty('selectionStart')).toBeLessThan(valueLength);
     });
-    it('sets the cursor at where the user clicks', async () => {
+    it('sets the cursor to where the user clicks if the input is already focused', async () => {
       const page = await setup({
-        html: '<q2-input type="currency" value="185940958"></q2input>',
+        html: '<q2-input type="text" value="Tony Stark"></q2input>',
       });
       const innerInput = await page.find('q2-input >>> .input-field');
       const valueLength = (await innerInput.getProperty('value')).length;
       const dimensions = await getInnerInputDimensions(page);
+      await innerInput.focus();
+      await page.waitForChanges();
       // Simulate clicking a character in the middle of the input
-      await page.mouse.click(dimensions.right - 50, dimensions.top + dimensions.height / 2);
+      await page.mouse.click(dimensions.left + 50, dimensions.top + dimensions.height / 2);
       await page.waitForChanges();
       expect(await innerInput.getProperty('selectionStart')).toBeLessThan(valueLength);
     });
+    describe("when type is 'currency'", () => {
+      it('does not move the cursor to the end when first character is deleted', async () => {
+        const page = await setup({
+          html: '<q2-input type="currency" value="123"></q2input>',
+        });
+        const innerInput = await page.find('q2-input >>> .input-field');
+        await page.waitForChanges();
+        const currentPosition = await innerInput.getProperty('selectionStart');
+        // For loop pushes cursor to left end position of input.value
+        for (let i = 0; i < currentPosition - 1; i++) {
+          await innerInput.press('ArrowLeft');
+        }
+        await innerInput.press('Backspace');
+        await page.waitForChanges();
+        const newPosition = await innerInput.getProperty('selectionStart');
+        // 0 represents that cursor stays at far left (beginning position of input.value)
+        expect(newPosition).toEqual(0);
+      });
+      it('moves the cursor to the left and right when pressing the arrow keys', async () => {
+        const page = await setup({
+          html: '<q2-input type="currency" value="185940958"></q2input>',
+        });
+        const innerInput = await page.find('q2-input >>> .input-field');
+        await page.waitForChanges();
+        let value = await innerInput.getProperty('value');
+        // move the cursor to the middle of the string
+        const pressTimes = 4;
+        for (let i = 0; i < pressTimes; i++)
+          await innerInput.press('ArrowLeft');
+        expect(await innerInput.getProperty('selectionStart')).toEqual(value.length - pressTimes);
+        // add characters to the middle of the string
+        await innerInput.press('3');
+        await innerInput.press('3');
+        expect(await innerInput.getProperty('value')).toEqual('18,594,095,338.00');
+        // move the cursor back to the end of the string
+        for (let i = 0; i < pressTimes; i++)
+          await innerInput.press('ArrowRight');
+        value = await innerInput.getProperty('value');
+        expect(await innerInput.getProperty('selectionStart')).toEqual(value.length);
+      });
+      it('sets the cursor to the end regardless of where the user clicks to focus', async () => {
+        const page = await setup({
+          html: '<q2-input type="currency" value="185940958"></q2input>',
+        });
+        const innerInput = await page.find('q2-input >>> .input-field');
+        const valueLength = (await innerInput.getProperty('value')).length;
+        const dimensions = await getInnerInputDimensions(page);
+        // Simulate clicking a character in the middle of the input
+        await page.mouse.click(dimensions.right - 50, dimensions.top + dimensions.height / 2);
+        await page.waitForChanges();
+        expect(await innerInput.getProperty('selectionStart')).toEqual(valueLength);
+      });
+      it('sets the cursor to where the user clicks if the input is already focused', async () => {
+        const page = await setup({
+          html: '<q2-input type="currency" value="185940958"></q2input>',
+        });
+        const innerInput = await page.find('q2-input >>> .input-field');
+        const valueLength = (await innerInput.getProperty('value')).length;
+        const dimensions = await getInnerInputDimensions(page);
+        await innerInput.focus();
+        await page.waitForChanges();
+        // Simulate clicking a character in the middle of the input
+        await page.mouse.click(dimensions.right - 50, dimensions.top + dimensions.height / 2);
+        await page.waitForChanges();
+        expect(await innerInput.getProperty('selectionStart')).toBeLessThan(valueLength);
+      });
+    });
     describe('when on mobile', () => {
       let page;
       let innerInput;
@@ -1267,54 +1310,88 @@ describe('q2-input', () => {
       beforeEach(async () => {
         page = await setup({ html: '' });
         page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1');
-        await page.setContent('<q2-input type="currency" value="1234567890"></q2input>');
+        await page.setContent('<q2-input type="text" value="Tony Stark"></q2input>');
         await page.waitForChanges();
         innerInput = await page.find('q2-input >>> .input-field');
         inputValueLength = (await innerInput.getProperty('value')).length;
-        await innerInput.focus();
+        const dimensions = await getInnerInputDimensions(page);
+        await page.touchscreen.tap(dimensions.left + 50, dimensions.top + dimensions.height / 2);
         await page.waitForChanges();
-        expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        expect(await innerInput.getProperty('selectionStart')).toEqual(7);
       });
-      it('does not move the cursor when ArrowLeft is pressed', async () => {
+      it('moves the cursor when ArrowLeft is pressed', async () => {
         const pressTimes = 4;
         for (let i = 0; i < pressTimes; i++)
           await innerInput.press('ArrowLeft');
-        expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        expect(await innerInput.getProperty('selectionStart')).toEqual(3);
       });
-      it('does not move the cursor when ArrowRight is pressed', async () => {
+      it('moves the cursor when ArrowRight is pressed', async () => {
         await innerInput.press('ArrowRight');
-        expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
-      });
-      it('does not move the cursor when ArrowRight is pressed', async () => {
-        await innerInput.press('ArrowRight');
-        expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        expect(await innerInput.getProperty('selectionStart')).toEqual(8);
       });
-      it('does not move the cursor when ArrowUp is pressed', async () => {
+      it('moves the cursor to the beginning when ArrowUp is pressed', async () => {
         await innerInput.press('ArrowUp');
-        expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        expect(await innerInput.getProperty('selectionStart')).toEqual(0);
       });
-      it('does not move the cursor when ArrowDown is pressed', async () => {
+      it('moves the cursor to the end when ArrowDown is pressed', async () => {
         await innerInput.press('ArrowDown');
         expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
       });
-      it('does not move the cursor when End is pressed', async () => {
+      it('moves the cursor to the end when End is pressed', async () => {
         await innerInput.press('End');
         expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
       });
-      it('keeps the cursor on the end when clicked', async () => {
-        await innerInput.click();
-        expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+      it('moves the cursor to the beginning when Home is pressed', async () => {
+        await innerInput.press('Home');
+        expect(await innerInput.getProperty('selectionStart')).toEqual(0);
       });
-      it('sets the cursor on the end when focused', async () => {
-        await innerInput.focus();
-        expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
-      });
-      it('sets the cursor at the end regardless of where the user clicks', async () => {
-        const dimensions = await getInnerInputDimensions(page);
-        // Simulate clicking a character in the middle of the input
-        await page.mouse.click(dimensions.right - 50, dimensions.top + dimensions.height / 2);
-        await page.waitForChanges();
-        expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+      describe("when type is 'currency'", () => {
+        beforeEach(async () => {
+          const input = await page.find('q2-input');
+          await input.setProperty('type', 'currency');
+          await input.setProperty('value', '1234567890');
+          await page.waitForChanges();
+          innerInput = await page.find('q2-input >>> .input-field');
+          inputValueLength = (await innerInput.getProperty('value')).length;
+          await innerInput.focus();
+          const dimensions = await getInnerInputDimensions(page);
+          await page.touchscreen.tap(dimensions.left - 50, dimensions.top + dimensions.height / 2);
+          await page.waitForChanges();
+          expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        });
+        it('does not move the cursor when ArrowLeft is pressed', async () => {
+          const pressTimes = 4;
+          for (let i = 0; i < pressTimes; i++)
+            await innerInput.press('ArrowLeft');
+          expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        });
+        it('does not move the cursor when ArrowRight is pressed', async () => {
+          await innerInput.press('ArrowRight');
+          expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        });
+        it('does not move the cursor when ArrowUp is pressed', async () => {
+          await innerInput.press('ArrowUp');
+          expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        });
+        it('does not move the cursor when ArrowDown is pressed', async () => {
+          await innerInput.press('ArrowDown');
+          expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        });
+        it('does not move the cursor when End is pressed', async () => {
+          await innerInput.press('End');
+          expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        });
+        it('does not move the cursor when Home is pressed', async () => {
+          await innerInput.press('Home');
+          expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        });
+        it('sets the cursor at the end regardless of where the user clicks', async () => {
+          const dimensions = await getInnerInputDimensions(page);
+          // Simulate clicking a character in the middle of the input
+          await page.touchscreen.tap(dimensions.left - 100, dimensions.top + dimensions.height / 2);
+          await page.waitForChanges();
+          expect(await innerInput.getProperty('selectionStart')).toEqual(inputValueLength);
+        });
       });
     });
   });
@@ -1632,32 +1709,46 @@ describe('q2-input', () => {
           input.setAttribute('label', 'Your Label');
           await page.waitForChanges();
           expect(input).toHaveAttribute('hide-label');
+          const inputStyle = await input.getComputedStyle();
+          expect(parseInt(inputStyle.height)).toBe(46);
         });
       });
       describe('when hideLabel is NOT provided', () => {
         it('when optional is provided, it hides the label element', async () => {
           const page = await setup({ html: '<q2-input optional/>' });
+          const input = await page.find('q2-input');
           const label = await page.find('q2-input >>> label');
           const hasSRClass = label.classList.contains('sr');
           expect(hasSRClass).toBeTruthy();
+          const inputStyle = await input.getComputedStyle();
+          expect(parseInt(inputStyle.height)).toBe(46);
         });
         it('when readonly is provided, it hides the label element', async () => {
           const page = await setup({ html: '<q2-input readonly/>' });
+          const input = await page.find('q2-input');
           const label = await page.find('q2-input >>> label');
           const hasSRClass = label.classList.contains('sr');
           expect(hasSRClass).toBeTruthy();
+          const inputStyle = await input.getComputedStyle();
+          expect(parseInt(inputStyle.height)).toBe(46);
         });
         it('when label is provided, it shows the label element', async () => {
           const page = await setup({ html: '<q2-input label="My Label"/>' });
+          const input = await page.find('q2-input');
           const label = await page.find('q2-input >>> label');
           const hasSRClass = label.classList.contains('sr');
           expect(hasSRClass).toBeFalsy();
+          const inputStyle = await input.getComputedStyle();
+          expect(parseInt(inputStyle.height)).toBe(69);
         });
         it('when label is not provided, it hides the label element', async () => {
           const page = await setup({ html: '<q2-input />' });
+          const input = await page.find('q2-input');
           const label = await page.find('q2-input >>> label');
           const hasSRClass = label.classList.contains('sr');
           expect(hasSRClass).toBeTruthy();
+          const inputStyle = await input.getComputedStyle();
+          expect(parseInt(inputStyle.height)).toBe(46);
         });
       });
     });
@@ -1921,5 +2012,12 @@ describe('q2-input', () => {
       });
     });
   });
+  describe('[A11y] guideline compliance', () => {
+    it('Does not have accessibility violations', async () => {
+      const page = await setup({ html: `<q2-input label="A11y Testing Enabled" />` });
+      const hasViolations = await evaluateA11y(page, 'descriptive', true);
+      expect(hasViolations).toBe(false);
+    });
+  });
 });
 //# sourceMappingURL=q2-input-test.e2e.js.map