q2-tecton-elements 1.36.0 → 1.37.0

package/dist/test/elements/q2-radio-group-test.e2e.js

@@ -1,22 +1,28 @@
-import { setup, dispatchEvent } from '../helpers';
+import { setup, dispatchEvent, getActiveElementTestId } from '../helpers';
 describe('q2-radio-group', () => {
   let page;
   let radioGroup;
-  it('renders with label', async function () {
-    page = await setup({
-      html: '<q2-radio-group label="test label"></q2-radio-group>',
+  const setupPage = async (props = '', numberOfRadios = 3, checkedRadios = []) => {
+    props = props ? ` ${props}` : '';
+    const radios = Array.from({ length: numberOfRadios }, (_, i) => `<q2-radio value="${i + 1}" label="${i + 1}label"${checkedRadios.includes(i + 1) ? ' checked="true"' : ''}></q2-radio>`).join('');
+    const page = await setup({
+      html: `
+                    <q2-radio-group "${props}>
+                        ${radios}
+                    </q2-radio-group>
+                `,
     });
+    await page.waitForChanges();
+    return page;
+  };
+  it('renders with label', async function () {
+    page = await setupPage('label="My Radio Group"', 0);
     const label = await page.find('q2-radio-group >>> legend');
     expect(label).not.toBeNull();
-    expect(label.innerText).toEqual('test label');
+    expect(label.innerText).toEqual('My Radio Group');
   });
   it('assigns name to all radios and updates if name changes', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="test label" name="testname">
-                          <q2-radio value="1" label="1label"></q2-radio>
-                          <q2-radio value="2" label="2label"></q2-radio>
-                     </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname"', 2);
     let firstRadio = await page.find('q2-radio:nth-child(1)');
     let secondRadio = await page.find('q2-radio:nth-child(2)');
     expect(firstRadio.getAttribute('name')).toEqual('testname');
@@ -30,12 +36,7 @@ describe('q2-radio-group', () => {
     expect(secondRadio.getAttribute('name')).toEqual('newname');
   });
   it('assigns checked value on init and whenever value changes', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="test label" name="testname" value="2">
-                          <q2-radio value="1" label="1label"></q2-radio>
-                          <q2-radio value="2" label="2label"></q2-radio>
-                     </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname" value="2"', 2);
     let firstRadio = await page.find('q2-radio:nth-child(1)');
     let secondRadio = await page.find('q2-radio:nth-child(2)');
     expect(firstRadio.getAttribute('checked')).toEqual(null);
@@ -49,13 +50,7 @@ describe('q2-radio-group', () => {
     expect(secondRadio.getAttribute('checked')).toEqual(null);
   });
   it('assigns checked value on init for individual radio(s) that have checked atttribute === true, and no value is set for radio-group', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="test label" name="testname">
-                          <q2-radio value="1" label="1label"></q2-radio>
-                          <q2-radio value="2" label="2label" checked="true"></q2-radio>
-                          <q2-radio value="3" label="3label" ></q2-radio>
-                     </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname"', 3, [2]);
     let firstRadio = await page.find('q2-radio:nth-child(1)');
     let secondRadio = await page.find('q2-radio:nth-child(2)');
     let thirdRadio = await page.find('q2-radio:nth-child(3)');
@@ -73,13 +68,7 @@ describe('q2-radio-group', () => {
     expect(thirdRadio.getAttribute('checked')).toEqual('');
   });
   it('assigns checked value on init for when radio-group value is set, and ignores / removes checked value individual radio preset checked={true}', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="test label" name="testname" value="2">
-                          <q2-radio value="1" label="1label" checked="true" ></q2-radio>
-                          <q2-radio value="2" label="2label" ></q2-radio>
-                          <q2-radio value="3" label="3label" checked="true" ></q2-radio>
-                     </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname" value="2"', 3, [1, 3]);
     let firstRadio = await page.find('q2-radio:nth-child(1)');
     let secondRadio = await page.find('q2-radio:nth-child(2)');
     let thirdRadio = await page.find('q2-radio:nth-child(3)');
@@ -97,13 +86,7 @@ describe('q2-radio-group', () => {
     expect(thirdRadio.getAttribute('checked')).toEqual('');
   });
   it('does not assign "checked" value on init for when radio-group value is not set, or any q2-radio preset checked={true}', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="test label" name="testname">
-                          <q2-radio value="1" label="1label" ></q2-radio>
-                          <q2-radio value="2" label="2label" ></q2-radio>
-                          <q2-radio value="3" label="3label" ></q2-radio>
-                     </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname"');
     let firstRadio = await page.find('q2-radio:nth-child(1)');
     let secondRadio = await page.find('q2-radio:nth-child(2)');
     let thirdRadio = await page.find('q2-radio:nth-child(3)');
@@ -121,12 +104,7 @@ describe('q2-radio-group', () => {
     expect(thirdRadio.getAttribute('checked')).toEqual('');
   });
   it('will update name, checked and disabled on new radio if added dynamically (mutation observer)', async function () {
-    page = await setup({
-      html: `<q2-radio-group disabled label="test label" name="testname" value="3">
-                          <q2-radio value="1" label="1label"></q2-radio>
-                          <q2-radio value="2" label="2label"></q2-radio>
-                     </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" disabled name="testname" value="3"');
     await page.$eval('q2-radio-group', radioGroup => {
       const newRadio = document.createElement('q2-radio');
       newRadio.label = '3label';
@@ -140,13 +118,7 @@ describe('q2-radio-group', () => {
     expect(await thirdRadio.getProperty('groupDisabled')).toEqual(true);
   });
   it('assigns tabIndex value of 0 to first radio in group, and then -1 for all following radios on init, and assigns -1 to all that are not selected there after', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="test label" name="testname">
-                          <q2-radio value="1" label="1label" ></q2-radio>
-                          <q2-radio value="2" label="2label" ></q2-radio>
-                          <q2-radio value="3" label="3label" ></q2-radio>
-                     </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname"');
     const firstRadio = await page.find('q2-radio:nth-child(1)');
     const secondRadio = await page.find('q2-radio:nth-child(2)');
     const thirdRadio = await page.find('q2-radio:nth-child(3)');
@@ -166,12 +138,7 @@ describe('q2-radio-group', () => {
     expect(await thirdRadio.getProperty('tabIndex')).toEqual(0);
   });
   it('disables all radios via groupDisable when radio group is disabled', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="test label" name="testname" value="2">
-                          <q2-radio value="1" label="1label"></q2-radio>
-                          <q2-radio value="2" label="2label"></q2-radio>
-                     </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname" value="2"', 2);
     let firstRadioInnerInput = await page.find('q2-radio:nth-child(1) >>> input ');
     let secondRadioInnerInput = await page.find('q2-radio:nth-child(2) >>> input');
     expect(firstRadioInnerInput.getAttribute('disabled')).toEqual(null);
@@ -184,117 +151,96 @@ describe('q2-radio-group', () => {
     expect(firstRadioInnerInput.getAttribute('disabled')).toEqual('');
     expect(secondRadioInnerInput.getAttribute('disabled')).toEqual('');
   });
-  describe('@Props', () => {
+  describe('Props', () => {
     const getActiveElementValue = async (page) => {
       return page.$eval('body', () => document.activeElement.getAttribute('value'));
     };
     describe('tilelayout', () => {
       it('converts to tileLayout=true when provided', async () => {
-        page = await setup({
-          html: `
-                        <q2-radio-group label="My Group" tilelayout>
-                            <q2-radio value="1" label="Option 1"></q2-radio>
-                            <q2-radio value="2" label="Option 2"></q2-radio>
-                            <q2-radio value="3" label="Option 3"></q2-radio>
-                        </q2-radio-group>
-                    `,
-        });
-        await page.waitForChanges();
+        page = await setupPage('label="My Radio Group" tilelayout');
         radioGroup = await page.find('q2-radio-group');
         expect(radioGroup).toHaveAttribute('tile-layout');
         expect(await radioGroup.getProperty('tilelayout')).toBeUndefined();
       });
       it('converts to tileLayout=false when provided as "false"', async () => {
-        page = await setup({
-          html: `
-                        <q2-radio-group label="My Group" tilelayout="false">
-                            <q2-radio value="1" label="Option 1"></q2-radio>
-                            <q2-radio value="2" label="Option 2"></q2-radio>
-                            <q2-radio value="3" label="Option 3"></q2-radio>
-                        </q2-radio-group>
-                    `,
-        });
-        await page.waitForChanges();
+        page = await setupPage('label="My Radio Group" tilelayout="false"');
         radioGroup = await page.find('q2-radio-group');
         expect(radioGroup).not.toHaveAttribute('tile-layout');
         expect(await radioGroup.getProperty('tilelayout')).toBeUndefined();
       });
     });
     describe('readonly', () => {
-      it('marks all q2-radio elements with groupReadonly', async function () {
-        page = await setup({
-          html: `
-                        <q2-radio-group label="Label" value="2">
-                            <q2-radio value="1" label="Label"></q2-radio>
-                            <q2-radio value="2" label="Label"></q2-radio>
-                            <q2-radio value="3" label="Label"></q2-radio>
-                        </q2-radio-group>`,
-        });
-        const radioGroup = await page.find('q2-radio-group');
-        const radios = await page.findAll('q2-radio');
-        expect(radios.every(async (radio) => (await radio.getProperty('groupReadonly')) === false)).toBe(true);
-        radioGroup.setProperty('readonly', true);
-        await page.waitForChanges();
-        expect(radios.every(async (radio) => (await radio.getProperty('groupReadonly')) === true)).toBe(true);
-      });
-      it('allows movement between radio buttons without selecting them', async function () {
-        page = await setup({
-          html: `
-                        <q2-radio-group label="Label" value="2" readonly>
-                            <q2-radio value="1" label="Label"></q2-radio>
-                            <q2-radio value="2" label="Label"></q2-radio>
-                            <q2-radio value="3" label="Label"></q2-radio>
-                        </q2-radio-group>`,
+      describe('set to true', () => {
+        it('on load child q2-radio components are groupReadonly', async function () {
+          page = await setupPage('label="My Radio Group" readonly');
+          const radios = await page.findAll('q2-radio');
+          expect(radios.every(async (radio) => (await radio.getProperty('groupReadonly')) === true)).toBe(true);
         });
-        const radioGroup = await page.find('q2-radio-group');
-        await radioGroup.focus();
-        expect(await getActiveElementValue(page)).toEqual('2');
-        await dispatchEvent(page, 'q2-radio[value="2"]', 'keydown', {
-          key: 'ArrowDown',
-          bubbles: true,
+        it('after load child q2-radio components are groupReadonly', async function () {
+          page = await setupPage('label="My Radio Group"');
+          const radioGroup = await page.find('q2-radio-group');
+          const radios = await page.findAll('q2-radio');
+          expect(radios.every(async (radio) => (await radio.getProperty('groupReadonly')) === false)).toBe(true);
+          radioGroup.setAttribute('readonly', 'true');
+          await page.waitForChanges();
+          expect(radios.every(async (radio) => (await radio.getProperty('groupReadonly')) === true)).toBe(true);
         });
-        await page.waitForChanges();
-        expect(await getActiveElementValue(page)).toEqual('3');
-        expect(await radioGroup.getProperty('value')).toEqual('2');
-        await dispatchEvent(page, 'q2-radio[value="3"]', 'keydown', {
-          key: 'ArrowUp',
-          bubbles: true,
+        it('allows movement between radio buttons without selecting them', async function () {
+          page = await setupPage('label="My Radio Group" value="2" readonly');
+          const radioGroup = await page.find('q2-radio-group');
+          await radioGroup.focus();
+          expect(await getActiveElementValue(page)).toEqual('2');
+          await dispatchEvent(page, 'q2-radio[value="2"]', 'keydown', {
+            key: 'ArrowDown',
+            bubbles: true,
+          });
+          await page.waitForChanges();
+          expect(await getActiveElementValue(page)).toEqual('3');
+          expect(await radioGroup.getProperty('value')).toEqual('2');
+          await dispatchEvent(page, 'q2-radio[value="3"]', 'keydown', {
+            key: 'ArrowUp',
+            bubbles: true,
+          });
+          await page.waitForChanges();
+          expect(await getActiveElementValue(page)).toEqual('2');
+          expect(await radioGroup.getProperty('value')).toEqual('2');
+          await dispatchEvent(page, 'q2-radio[value="2"]', 'keydown', {
+            key: 'ArrowUp',
+            bubbles: true,
+          });
+          await page.waitForChanges();
+          expect(await getActiveElementValue(page)).toEqual('1');
+          expect(await radioGroup.getProperty('value')).toEqual('2');
         });
-        await page.waitForChanges();
-        expect(await getActiveElementValue(page)).toEqual('2');
-        expect(await radioGroup.getProperty('value')).toEqual('2');
-        await dispatchEvent(page, 'q2-radio[value="2"]', 'keydown', {
-          key: 'ArrowUp',
-          bubbles: true,
+        it('allows clicking radio buttons without selecting them', async function () {
+          page = await setupPage('label="My Radio Group" value="2" readonly');
+          const radioGroup = await page.find('q2-radio-group');
+          const radios = await page.findAll('q2-radio');
+          await radios[0].click();
+          expect(await getActiveElementValue(page)).toEqual('1');
+          expect(await radioGroup.getProperty('value')).toEqual('2');
         });
-        await page.waitForChanges();
-        expect(await getActiveElementValue(page)).toEqual('1');
-        expect(await radioGroup.getProperty('value')).toEqual('2');
       });
-      it('allows clicking radio buttons without selecting them', async function () {
-        page = await setup({
-          html: `
-                        <q2-radio-group label="Label" value="2" readonly>
-                            <q2-radio value="1" label="Label"></q2-radio>
-                            <q2-radio value="2" label="Label"></q2-radio>
-                            <q2-radio value="3" label="Label"></q2-radio>
-                        </q2-radio-group>`,
+      describe('set to false', () => {
+        it('on load child q2-radio components are NOT groupReadonly', async function () {
+          page = await setupPage('label="My Radio Group"');
+          const radios = await page.findAll('q2-radio');
+          expect(radios.every(async (radio) => (await radio.getProperty('groupReadonly')) === false)).toBe(true);
+        });
+        it('after load child q2-radio components are NOT groupReadonly', async function () {
+          page = await setupPage('label="My Radio Group" readonly');
+          const radioGroup = await page.find('q2-radio-group');
+          const radios = await page.findAll('q2-radio');
+          expect(radios.every(async (radio) => (await radio.getProperty('groupReadonly')) === true)).toBe(true);
+          radioGroup.setAttribute('groupReadonly', 'false');
+          await page.waitForChanges();
+          expect(radios.every(async (radio) => (await radio.getProperty('groupReadonly')) === false)).toBe(true);
         });
-        const radioGroup = await page.find('q2-radio-group');
-        const radios = await page.findAll('q2-radio');
-        await radios[0].click();
-        expect(await getActiveElementValue(page)).toEqual('1');
-        expect(await radioGroup.getProperty('value')).toEqual('2');
       });
     });
   });
   it('when a radio is selected radio group emits change event', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="test label" name="testname" value="2">
-                           <q2-radio value="1" label="1label"></q2-radio>
-                           <q2-radio value="2" label="2label"></q2-radio>
-                      </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname" value="2"', 2);
     const radioGroup = await page.find('q2-radio-group');
     const changeSpy = await radioGroup.spyOnEvent('change');
     let value;
@@ -306,12 +252,7 @@ describe('q2-radio-group', () => {
     expect(value).toEqual('1');
   });
   it('can override default on change', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="test label" name="testname" value="2">
-                           <q2-radio value="1" label="1label"></q2-radio>
-                           <q2-radio value="2" label="2label"></q2-radio>
-                      </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname" value="2"', 2);
     const radioGroup = await page.find('q2-radio-group');
     const changeSpy = await radioGroup.spyOnEvent('change');
     await page.$eval('q2-radio-group', radioGroup => {
@@ -327,12 +268,7 @@ describe('q2-radio-group', () => {
     expect(value).toEqual('2');
   });
   it('allows spacebar to select first option when focused and no options are selected', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="test label" name="testname">
-                           <q2-radio value="1" label="1label"></q2-radio>
-                           <q2-radio value="2" label="2label"></q2-radio>
-                      </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname"', 2);
     const firstRadio = await page.find('q2-radio');
     const firstRadioInput = await page.find('q2-radio >>> input');
     expect(firstRadio.getAttribute('checked')).toEqual(null);
@@ -341,23 +277,13 @@ describe('q2-radio-group', () => {
     expect(await firstRadio.getProperty('checked')).toEqual(true);
   });
   it('should render a localized optional string when the optional attribute is passed', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="foo" name="testname" optional>
-                           <q2-radio value="1" label="1label"></q2-radio>
-                           <q2-radio value="2" label="2label"></q2-radio>
-                      </q2-radio-group>`,
-    });
+    page = await setupPage('label="foo" name="testname" optional', 2);
     const label = await page.find('q2-radio-group >>> legend');
     // a localized optional is shown in the label
     expect(label.innerText.trim()).toEqual('footecton.element.input.optional');
   });
   it('should show a tile format when tile option is passed', async () => {
-    page = await setup({
-      html: `<q2-radio-group label="foo" name="testname">
-                           <q2-radio value="1" label="1label"></q2-radio>
-                           <q2-radio value="2" label="2label"></q2-radio>
-                      </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname"', 2);
     let svgCheckbox = await page.findAll('q2-radio >>> svg');
     let firstRadio = await page.find('q2-radio >>> div');
     expect(svgCheckbox.length).toEqual(2);
@@ -371,12 +297,7 @@ describe('q2-radio-group', () => {
     expect(firstRadio.classList.contains('radio-tile')).toBeTruthy();
   });
   it('handles keyboard navigation', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="foo" name="testname" value="1">
-                    <q2-radio value="1" label="1label" checked></q2-radio>
-                    <q2-radio value="2" label="2label"></q2-radio>
-                </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname" value="1"', 2);
     let firstRadio = await page.find('q2-radio:nth-child(1)');
     let secondRadio = await page.find('q2-radio:nth-child(2)');
     await page.waitForChanges();
@@ -391,12 +312,7 @@ describe('q2-radio-group', () => {
     expect(secondRadio.getAttribute('checked')).toEqual('');
   });
   it('should work with changing checked attribute programmatically', async function () {
-    page = await setup({
-      html: `<q2-radio-group label="foo" name="testname" value="1">
-                    <q2-radio value="1" label="1label" checked></q2-radio>
-                    <q2-radio value="2" label="2label"></q2-radio>
-                </q2-radio-group>`,
-    });
+    page = await setupPage('label="My Radio Group" name="testname" value="1"', 2);
     const group = await page.find('q2-radio-group');
     const firstRadio = await page.find('q2-radio:nth-child(1)');
     const secondRadio = await page.find('q2-radio:nth-child(2)');
@@ -421,14 +337,7 @@ describe('q2-radio-group', () => {
     let page;
     let radioGroup;
     beforeEach(async () => {
-      page = await setup({
-        html: `
-                    <q2-radio-group>
-                        <q2-radio value="1" label="1"></q2-radio>
-                        <q2-radio value="2" label="2"></q2-radio>
-                    </q2-radio-group>
-                `,
-      });
+      page = await setupPage('label="My Radio Group"', 2);
       radioGroup = await page.find('q2-radio-group');
       expect(await activeValue(page)).toBeUndefined();
     });
@@ -475,5 +384,58 @@ describe('q2-radio-group', () => {
       });
     });
   });
+  describe('Methods', () => {
+    describe('setValue', () => {
+      beforeEach(async () => {
+        page = await setup({
+          html: `
+                        <q2-radio-group label="My Radio Group">
+                            <q2-radio value="value-1" label="Radio 1"></q2-radio>
+                            <q2-radio value="value-2" label="Radio 2"></q2-radio>
+                            <q2-radio value="value-3" label="Radio 3"></q2-radio>
+                            <q2-radio value="value-4" label="Radio 3"></q2-radio>
+                            <q2-radio value="value-5" label="Radio 3"></q2-radio>
+                        </q2-radio-group>
+                    `,
+        });
+        await page.waitForChanges();
+      });
+      it('selects the radio for the provided value', async () => {
+        const radioGroup = await page.find('q2-radio-group');
+        const radioGroupChangeSpy = await radioGroup.spyOnEvent('change');
+        expect(radioGroupChangeSpy).toHaveReceivedEventTimes(0);
+        expect(await getActiveElementTestId(page)).toBeNull();
+        await radioGroup.callMethod('setValue', 'value-3');
+        await page.waitForChanges();
+        expect(radioGroupChangeSpy).toHaveReceivedEventTimes(1);
+        expect(radioGroupChangeSpy).toHaveReceivedEventDetail({
+          value: 'value-3',
+        });
+        const allRadios = await page.findAll('q2-radio');
+        expect(allRadios[0]).not.toHaveAttribute('checked');
+        expect(allRadios[1]).not.toHaveAttribute('checked');
+        expect(allRadios[2]).toHaveAttribute('checked');
+        expect(allRadios[3]).not.toHaveAttribute('checked');
+        expect(allRadios[4]).not.toHaveAttribute('checked');
+        expect(await getActiveElementTestId(page)).toEqual('q2RadioInnerRadioBox');
+      });
+      it('does not select any radio when the provided value is not found', async () => {
+        const radioGroup = await page.find('q2-radio-group');
+        const radioGroupChangeSpy = await radioGroup.spyOnEvent('change');
+        expect(radioGroupChangeSpy).toHaveReceivedEventTimes(0);
+        expect(await getActiveElementTestId(page)).toBeNull();
+        await radioGroup.callMethod('setValue', 'value-10');
+        await page.waitForChanges();
+        expect(radioGroupChangeSpy).toHaveReceivedEventTimes(0);
+        const allRadios = await page.findAll('q2-radio');
+        expect(allRadios[0]).not.toHaveAttribute('checked');
+        expect(allRadios[1]).not.toHaveAttribute('checked');
+        expect(allRadios[2]).not.toHaveAttribute('checked');
+        expect(allRadios[3]).not.toHaveAttribute('checked');
+        expect(allRadios[4]).not.toHaveAttribute('checked');
+        expect(await getActiveElementTestId(page)).toBeNull();
+      });
+    });
+  });
 });
 //# sourceMappingURL=q2-radio-group-test.e2e.js.map