q2-tecton-elements 1.35.2 → 1.37.0

package/dist/test/elements/q2-checkbox-group-test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-checkbox-group-test.e2e.js","sourceRoot":"","sources":["../../../test/elements/q2-checkbox-group-test.e2e.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EAC/B,IAAI,IAAa,CAAC;EAClB,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACnB,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;MACtB,EAAE,CAAC,wEAAwE,EAAE,KAAK,IAAI,EAAE;QACpF,IAAI,GAAG,MAAM,KAAK,CAAC;UACf,IAAI,EAAE;;;;;;;;qBAQL;SACJ,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACrD,MAAM,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACnC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;UAC1B,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;MACP,CAAC,CAAC,CAAC;MAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAC9E,IAAI,GAAG,MAAM,KAAK,CAAC;UACf,IAAI,EAAE;;;;;;;;qBAQL;SACJ,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACrD,MAAM,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACnC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;UAC1B,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;MACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;EACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { E2EPage } from '@stencil/core/testing';\nimport { setup } from '../helpers';\n\ndescribe('q2-checkbox-group', () => {\n    let page: E2EPage;\n    describe('Props', () => {\n        describe('disabled', () => {\n            it('does not add the group-disabled attribute to the checkboxes by default', async () => {\n                page = await setup({\n                    html: `\n                        <q2-checkbox-group label=\"My Checkbox group\">\n                            <q2-checkbox value=\"value-1\" label=\"Checkbox 1\"></q2-checkbox>\n                            <q2-checkbox value=\"value-2\" label=\"Checkbox 2\"></q2-checkbox>\n                            <q2-checkbox value=\"value-3\" label=\"Checkbox 3\"></q2-checkbox>\n                            <q2-checkbox value=\"value-4\" label=\"Checkbox 4\"></q2-checkbox>\n                            <q2-checkbox value=\"value-5\" label=\"Checkbox 5\"></q2-checkbox>\n                        </q2-checkbox-group>\n                    `,\n                });\n                await page.waitForChanges();\n\n                const checkboxes = await page.findAll('q2-checkbox');\n                expect(checkboxes).toHaveLength(5);\n                checkboxes.forEach(checkbox => {\n                    expect(checkbox).not.toHaveAttribute('group-disabled');\n                });\n            });\n\n            it('adds the group-disabled attribute to the checkboxes when present', async () => {\n                page = await setup({\n                    html: `\n                        <q2-checkbox-group label=\"My Checkbox group\" disabled>\n                            <q2-checkbox value=\"value-1\" label=\"Checkbox 1\"></q2-checkbox>\n                            <q2-checkbox value=\"value-2\" label=\"Checkbox 2\"></q2-checkbox>\n                            <q2-checkbox value=\"value-3\" label=\"Checkbox 3\"></q2-checkbox>\n                            <q2-checkbox value=\"value-4\" label=\"Checkbox 4\"></q2-checkbox>\n                            <q2-checkbox value=\"value-5\" label=\"Checkbox 5\"></q2-checkbox>\n                        </q2-checkbox-group>\n                    `,\n                });\n                await page.waitForChanges();\n\n                const checkboxes = await page.findAll('q2-checkbox');\n                expect(checkboxes).toHaveLength(5);\n                checkboxes.forEach(checkbox => {\n                    expect(checkbox).toHaveAttribute('group-disabled');\n                });\n            });\n        });\n    });\n});\n"]}
+{"version":3,"file":"q2-checkbox-group-test.e2e.js","sourceRoot":"","sources":["../../../test/elements/q2-checkbox-group-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EPage } from '@stencil/core/testing';\nimport { getFocusedAttribute, setup } from '../helpers';\n\ndescribe('q2-checkbox-group', () => {\n    let page: E2EPage;\n    describe('Props', () => {\n        async function setupPage(props: string = '') {\n            props = props ? ` ${props}` : '';\n            const page = await setup({\n                html: `\n            <q2-checkbox-group label=\"My Checkbox group\"${props}>\n                <q2-checkbox value=\"value-1\" label=\"Checkbox 1\"></q2-checkbox>\n                <q2-checkbox value=\"value-2\" label=\"Checkbox 2\"></q2-checkbox>\n                <q2-checkbox value=\"value-3\" label=\"Checkbox 3\"></q2-checkbox>\n                <q2-checkbox value=\"value-4\" label=\"Checkbox 4\"></q2-checkbox>\n                <q2-checkbox value=\"value-5\" label=\"Checkbox 5\"></q2-checkbox>\n            </q2-checkbox-group>\n        `,\n            });\n            await page.waitForChanges();\n\n            return page;\n        }\n\n        describe('disabled', () => {\n            it('does not add the group-disabled attribute to the checkboxes by default', async () => {\n                page = await setupPage();\n                const checkboxes = await page.findAll('q2-checkbox');\n\n                expect(checkboxes).toHaveLength(5);\n                checkboxes.forEach(checkbox => {\n                    expect(checkbox).not.toHaveAttribute('group-disabled');\n                });\n            });\n\n            it('adds the group-disabled attribute to the checkboxes when present', async () => {\n                page = await setupPage('disabled');\n                const checkboxes = await page.findAll('q2-checkbox');\n\n                expect(checkboxes).toHaveLength(5);\n                checkboxes.forEach(checkbox => {\n                    expect(checkbox).toHaveAttribute('group-disabled');\n                });\n            });\n        });\n        describe('readonly', () => {\n            describe('set to true', () => {\n                it('on load child q2-checkbox components are readonly', async () => {\n                    page = await setupPage('readonly');\n                    const checkboxes = await page.findAll('q2-checkbox');\n\n                    checkboxes.forEach(checkbox => {\n                        expect(checkbox).toHaveAttribute('readonly');\n                    });\n                });\n                it('after load child q2-checkbox components are readonly', async () => {\n                    page = await setupPage();\n                    const checkboxGroup = await page.find('q2-checkbox-group');\n                    const checkboxes = await page.findAll('q2-checkbox');\n\n                    checkboxes.forEach(checkbox => {\n                        expect(checkbox).not.toHaveAttribute('readonly');\n                    });\n\n                    checkboxGroup.setAttribute('readonly', 'true');\n                    await page.waitForChanges();\n\n                    checkboxes.forEach(checkbox => {\n                        expect(checkbox).toHaveAttribute('readonly');\n                    });\n                });\n            });\n            describe('set to false', () => {\n                it('on load child q2-checkbox components are NOT readonly', async () => {\n                    page = await setupPage();\n                    const checkboxes = await page.findAll('q2-checkbox');\n\n                    checkboxes.forEach(checkbox => {\n                        expect(checkbox).not.toHaveAttribute('readonly');\n                    });\n                });\n                it('after load child q2-checkbox components are NOT readonly', async () => {\n                    page = await setupPage('readonly');\n                    const checkboxGroup = await page.find('q2-checkbox-group');\n                    const checkboxes = await page.findAll('q2-checkbox');\n\n                    checkboxes.forEach(checkbox => {\n                        expect(checkbox).toHaveAttribute('readonly');\n                    });\n\n                    checkboxGroup.setAttribute('readonly', 'false');\n                    await page.waitForChanges();\n\n                    checkboxes.forEach(checkbox => {\n                        expect(checkbox).not.toHaveAttribute('readonly');\n                    });\n                });\n            });\n        });\n    });\n\n    describe('Methods', () => {\n        describe('setValue', () => {\n            beforeEach(async () => {\n                page = await setup({\n                    html: `\n                        <q2-checkbox-group label=\"My Checkbox group\">\n                            <q2-checkbox value=\"value-1\" label=\"Checkbox 1\"></q2-checkbox>\n                            <q2-checkbox value=\"value-2\" label=\"Checkbox 2\"></q2-checkbox>\n                            <q2-checkbox value=\"value-3\" label=\"Checkbox 3\"></q2-checkbox>\n                            <q2-checkbox value=\"value-4\" label=\"Checkbox 4\"></q2-checkbox>\n                            <q2-checkbox value=\"value-5\" label=\"Checkbox 5\"></q2-checkbox>\n                        </q2-checkbox-group>\n                    `,\n                });\n                await page.waitForChanges();\n            });\n\n            it('selects every checkbox provided in an array of strings', async () => {\n                const checkboxGroup = await page.find('q2-checkbox-group');\n                const checkboxGroupChangeSpy = await checkboxGroup.spyOnEvent('change');\n\n                expect(checkboxGroupChangeSpy).toHaveReceivedEventTimes(0);\n                expect(await getFocusedAttribute(page, 'value')).toBeNull();\n\n                await checkboxGroup.callMethod('setValue', ['value-1', 'value-3', 'value-5']);\n                await page.waitForChanges();\n\n                expect(checkboxGroupChangeSpy).toHaveReceivedEventTimes(3);\n                expect(checkboxGroupChangeSpy).toHaveReceivedEventDetail({\n                    'value-1': true,\n                    'value-2': false,\n                    'value-3': true,\n                    'value-4': false,\n                    'value-5': true,\n                });\n\n                const allCheckboxes = await page.findAll('q2-checkbox');\n                expect(allCheckboxes[0]).toHaveAttribute('checked');\n                expect(allCheckboxes[1]).not.toHaveAttribute('checked');\n                expect(allCheckboxes[2]).toHaveAttribute('checked');\n                expect(allCheckboxes[3]).not.toHaveAttribute('checked');\n                expect(allCheckboxes[4]).toHaveAttribute('checked');\n                expect(await getFocusedAttribute(page, 'value')).toEqual('value-5');\n            });\n\n            it('selects the checkbox for the provided value', async () => {\n                const checkboxGroup = await page.find('q2-checkbox-group');\n                const checkboxGroupChangeSpy = await checkboxGroup.spyOnEvent('change');\n\n                expect(checkboxGroupChangeSpy).toHaveReceivedEventTimes(0);\n                expect(await getFocusedAttribute(page, 'value')).toBeNull();\n\n                await checkboxGroup.callMethod('setValue', 'value-3');\n                await page.waitForChanges();\n\n                expect(checkboxGroupChangeSpy).toHaveReceivedEventTimes(1);\n                expect(checkboxGroupChangeSpy).toHaveReceivedEventDetail({\n                    'value-1': false,\n                    'value-2': false,\n                    'value-3': true,\n                    'value-4': false,\n                    'value-5': false,\n                });\n\n                const allCheckboxes = await page.findAll('q2-checkbox');\n                expect(allCheckboxes[0]).not.toHaveAttribute('checked');\n                expect(allCheckboxes[1]).not.toHaveAttribute('checked');\n                expect(allCheckboxes[2]).toHaveAttribute('checked');\n                expect(allCheckboxes[3]).not.toHaveAttribute('checked');\n                expect(allCheckboxes[4]).not.toHaveAttribute('checked');\n                expect(await getFocusedAttribute(page, 'value')).toEqual('value-3');\n            });\n\n            it('does not select any checkbox when the provided value is not found', async () => {\n                const checkboxGroup = await page.find('q2-checkbox-group');\n                const checkboxGroupChangeSpy = await checkboxGroup.spyOnEvent('change');\n\n                expect(checkboxGroupChangeSpy).toHaveReceivedEventTimes(0);\n                expect(await getFocusedAttribute(page, 'value')).toBeNull();\n\n                await checkboxGroup.callMethod('setValue', 'value-10');\n                await page.waitForChanges();\n\n                expect(checkboxGroupChangeSpy).toHaveReceivedEventTimes(0);\n                const allCheckboxes = await page.findAll('q2-checkbox');\n                expect(allCheckboxes[0]).not.toHaveAttribute('checked');\n                expect(allCheckboxes[1]).not.toHaveAttribute('checked');\n                expect(allCheckboxes[2]).not.toHaveAttribute('checked');\n                expect(allCheckboxes[3]).not.toHaveAttribute('checked');\n                expect(allCheckboxes[4]).not.toHaveAttribute('checked');\n                expect(await getFocusedAttribute(page, 'value')).toBeNull();\n            });\n        });\n    });\n});\n"]}

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

@@ -1,33 +1,71 @@
-import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel } from '../helpers';
+import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getActiveElementTestId } from '../helpers';
 describe('q2-checkbox', () => {
+  let page;
+  const setupPage = async (props = '') => {
+    props = props ? ` ${props}` : '';
+    page = await setup({
+      html: `
+                        <q2-checkbox ${props}></q2-checkbox>
+                    `,
+    });
+    await page.waitForChanges();
+    return page;
+  };
   const isChecked = async (page) => {
     return page.$eval('q2-checkbox', el => { var _a, _b; return (_b = (_a = el.shadowRoot.querySelector('input')) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false; });
   };
   it('renders checkbox with label and unchecked checkbox', async () => {
-    const page = await setup({
-      html: `<q2-checkbox value="1" label="Label"></q2-checkbox>`,
-    });
-    const label = await page.find('q2-checkbox >>> .label-text');
+    const label = 'My Checkbox';
+    page = await setupPage(`label="${label}" value="1"`);
+    const foundLabel = await page.find('q2-checkbox >>> .label-text');
     const innerCheckbox = await page.find('q2-checkbox >>> input');
-    expect(label).not.toBeNull();
-    expect(label.innerText).toEqual('Label');
+    expect(foundLabel).not.toBeNull();
+    expect(foundLabel.innerText).toEqual('My Checkbox');
     expect(await innerCheckbox.getProperty('value')).toEqual('1');
   });
   describe('Methods', () => {
     describe('click', () => {
       it('selects the checkbox when called', async () => {
-        const page = await setup({
-          html: `<q2-checkbox label="Label"></q2-checkbox>`,
-        });
+        page = await setupPage('label="My Checkbox"');
         const checkbox = await page.find('q2-checkbox');
         const changeSpy = await checkbox.spyOnEvent('change');
+        expect(await getActiveElementTestId(page)).toBeNull();
         expect(await isChecked(page)).toBe(false);
         expect(checkbox).not.toHaveAttribute('checked');
-        await page.$eval('q2-checkbox', (el) => el.click());
+        await page.$eval('q2-checkbox', el => el.click());
         await page.waitForChanges();
         expect(await isChecked(page)).toBe(true);
         expect(checkbox).toHaveAttribute('checked');
         expect(changeSpy).toHaveReceivedEventDetail({ checked: true, value: 'on' });
+        expect(await getActiveElementTestId(page)).toEqual('q2CheckboxInnerCheckBox');
+      });
+      it('does not select the checkbox when readonly', async () => {
+        const page = await setup({
+          html: `<q2-checkbox label="Label" readonly></q2-checkbox>`,
+        });
+        const checkbox = await page.find('q2-checkbox');
+        const innerCheckbox = await page.find('q2-checkbox >>> input');
+        expect(await getActiveElementTestId(page)).toBeNull();
+        expect(checkbox).not.toHaveAttribute('checked');
+        expect(innerCheckbox).not.toHaveAttribute('checked');
+        await page.$eval('q2-checkbox', el => el.click());
+        await page.waitForChanges();
+        expect(checkbox).not.toHaveAttribute('checked');
+        expect(innerCheckbox).not.toHaveAttribute('checked');
+      });
+      it('does not select the checkbox when disabled', async () => {
+        const page = await setup({
+          html: `<q2-checkbox label="Label" disabled></q2-checkbox>`,
+        });
+        const checkbox = await page.find('q2-checkbox');
+        const innerCheckbox = await page.find('q2-checkbox >>> input');
+        expect(checkbox).not.toHaveAttribute('checked');
+        expect(innerCheckbox).not.toHaveAttribute('checked');
+        await page.$eval('q2-checkbox', (el) => el.click());
+        await page.waitForChanges();
+        expect(checkbox).not.toHaveAttribute('checked');
+        expect(innerCheckbox).not.toHaveAttribute('checked');
+        expect(await getActiveElementTestId(page)).toBeNull();
       });
     });
   });
@@ -35,9 +73,7 @@ describe('q2-checkbox', () => {
     describe('description', () => {
       describe('when not provided', () => {
         it('adds the description markup', async () => {
-          const page = await setup({
-            html: `<q2-checkbox label="Label"></q2-checkbox>`,
-          });
+          page = await setupPage('label="My Checkbox"');
           const description = await page.find('q2-checkbox >>> .description-text');
           const input = await page.find('q2-checkbox >>> input');
           expect(description).toBeNull();
@@ -46,9 +82,7 @@ describe('q2-checkbox', () => {
       });
       describe('when provided', () => {
         it('adds the description markup', async () => {
-          const page = await setup({
-            html: `<q2-checkbox label="Label" description="Hello world"></q2-checkbox>`,
-          });
+          page = await setupPage('label="My Checkbox" description="Hello world"');
           const description = await page.find('q2-checkbox >>> .description-text');
           const input = await page.find('q2-checkbox >>> input');
           expect(description).toEqualText('Hello world');
@@ -58,9 +92,7 @@ describe('q2-checkbox', () => {
     });
     describe('groupDisabled', () => {
       it('adds the disabled attribute to the checkbox when present', async () => {
-        const page = await setup({
-          html: `<q2-checkbox label="Label" group-disabled></q2-checkbox>`,
-        });
+        page = await setupPage('label="My Checkbox" group-disabled');
         const innerInput = await page.find('q2-checkbox >>> input');
         expect(innerInput).toHaveAttribute('disabled');
       });
@@ -68,28 +100,92 @@ describe('q2-checkbox', () => {
     describe('hasError', () => {
       describe('when provided', () => {
         it('sets aria-invalid to true', async () => {
-          const page = await setup({
-            html: `<q2-checkbox has-error></q2-checkbox>`,
-          });
+          page = await setupPage('has-error');
           const innerCheckbox = await page.find('q2-checkbox >>> input');
           expect(innerCheckbox.getAttribute('aria-invalid')).toBe('true');
         });
       });
       describe('when not provided', () => {
         it('sets aria-invalid to false', async () => {
-          const page = await setup({
-            html: `<q2-checkbox></q2-checkbox>`,
-          });
+          page = await setupPage();
           const innerCheckbox = await page.find('q2-checkbox >>> input');
           expect(innerCheckbox.getAttribute('aria-invalid')).toBe('false');
         });
       });
     });
+    describe('readonly', () => {
+      const clickCheckbox = async (page) => {
+        await page.$eval('q2-checkbox', (el) => el.click());
+        await page.waitForChanges();
+      };
+      describe('set to true', () => {
+        it('click check icon should not work', async () => {
+          page = await setupPage('label="My Checkbox" value="1"');
+          const element = await page.find('q2-checkbox');
+          await element.setProperty('readonly', true);
+          await page.waitForChanges();
+          const checkbox = await page.find('q2-checkbox >>> .checkbox-icon');
+          await checkbox.click();
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBeFalsy();
+        });
+        it('click label text should not work', async () => {
+          page = await setupPage('label="My Checkbox" value="1"');
+          const element = await page.find('q2-checkbox');
+          await element.setProperty('readonly', true);
+          await page.waitForChanges();
+          const checkLabelText = await page.find('q2-checkbox >>> .label-text');
+          await checkLabelText.click();
+          await page.waitForChanges();
+          expect(await element.getProperty('checked')).toBeFalsy();
+        });
+        it('on load does not check the checkbox when clicked', async () => {
+          page = await setupPage('label="My Checkbox" readonly');
+          const checkbox = await page.find('q2-checkbox');
+          expect(await isChecked(page)).toBe(false);
+          expect(checkbox).not.toHaveAttribute('checked');
+          await clickCheckbox(page);
+          expect(await isChecked(page)).toBe(false);
+          expect(checkbox).not.toHaveAttribute('checked');
+        });
+        it('after load does not check the checkbox when clicked', async () => {
+          page = await setupPage('label="My Checkbox"');
+          const checkbox = await page.find('q2-checkbox');
+          expect(await isChecked(page)).toBe(false);
+          expect(checkbox).not.toHaveAttribute('checked');
+          checkbox.setProperty('readonly', true);
+          await page.waitForChanges();
+          await clickCheckbox(page);
+          expect(await isChecked(page)).toBe(false);
+          expect(checkbox).not.toHaveAttribute('checked');
+        });
+      });
+      describe('set to false', () => {
+        it('on load checks the checkbox when clicked', async () => {
+          page = await setupPage('label="My Checkbox"');
+          const checkbox = await page.find('q2-checkbox');
+          expect(await isChecked(page)).toBe(false);
+          expect(checkbox).not.toHaveAttribute('checked');
+          await clickCheckbox(page);
+          expect(await isChecked(page)).toBe(true);
+          expect(checkbox).toHaveAttribute('checked');
+        });
+        it('after load checks the checkbox when clicked', async () => {
+          page = await setupPage('label="My Checkbox" readonly');
+          const checkbox = await page.find('q2-checkbox');
+          expect(await isChecked(page)).toBe(false);
+          expect(checkbox).not.toHaveAttribute('checked');
+          checkbox.setProperty('readonly', false);
+          await page.waitForChanges();
+          await clickCheckbox(page);
+          expect(await isChecked(page)).toBe(true);
+          expect(checkbox).toHaveAttribute('checked');
+        });
+      });
+    });
   });
   it('toggles the checked attribute when clicked', async () => {
-    const page = await setup({
-      html: `<q2-checkbox label="Label"></q2-checkbox>`,
-    });
+    page = await setupPage('label="My Checkbox"');
     const checkbox = await page.find('q2-checkbox');
     expect(checkbox).not.toHaveAttribute('checked');
     const innerInput = await page.find('q2-checkbox >>> input');
@@ -98,7 +194,7 @@ describe('q2-checkbox', () => {
     expect(checkbox).toHaveAttribute('checked');
   });
   it('allows slotted content', async () => {
-    const page = await setup({
+    page = await setup({
       html: `
                 <q2-checkbox value="1" label="Label">
                     <p>A yielded label</p>
@@ -116,11 +212,7 @@ describe('q2-checkbox', () => {
     expect(slottedTag).toEqual('p');
   });
   it('binds aria-label when provided and no label present', async () => {
-    const page = await setup({
-      html: `
-                <q2-checkbox aria-label="Aria-Label Text"></q2-checkbox>
-            `,
-    });
+    page = await setupPage('aria-label="Aria-Label Text"');
     const checkbox = await page.find('q2-checkbox');
     const labelContent = await page.find('q2-checkbox >>> .label-text');
     expect(labelContent).toHaveClass('sr');
@@ -132,11 +224,7 @@ describe('q2-checkbox', () => {
     expect(labelContent).toEqualText('Label Text');
   });
   it('binds the name property', async () => {
-    const page = await setup({
-      html: `
-                <q2-checkbox></q2-checkbox>
-            `,
-    });
+    page = await setupPage();
     const innerCheckbox = await page.find('q2-checkbox >>> input');
     const innerCheckboxId = innerCheckbox.getAttribute('id');
     expect(innerCheckbox.getAttribute('name')).toEqual(innerCheckboxId);
@@ -146,11 +234,7 @@ describe('q2-checkbox', () => {
     expect(innerCheckbox.getAttribute('name')).toEqual('checkboxname');
   });
   it('renders the star icon for type="favorite"', async () => {
-    const page = await setup({
-      html: `
-                <q2-checkbox></q2-checkbox>
-            `,
-    });
+    page = await setupPage();
     let svg = await page.find('q2-checkbox >>> .checkbox-icon');
     expect(svg.tagName).toEqual('svg');
     const checkbox = await page.find('q2-checkbox');
@@ -161,11 +245,7 @@ describe('q2-checkbox', () => {
     expect(svg.getAttribute('type')).toEqual('star');
   });
   it('renders the toggle for type="toggle"', async () => {
-    const page = await setup({
-      html: `
-                <q2-checkbox></q2-checkbox>
-            `,
-    });
+    page = await setupPage();
     let toggleSVG = await page.find('q2-checkbox >>> .toggle-svg');
     expect(toggleSVG).toBeNull();
     const checkbox = await page.find('q2-checkbox');
@@ -175,11 +255,7 @@ describe('q2-checkbox', () => {
     expect(toggleSVG).not.toBeNull();
   });
   it('handles checked state', async () => {
-    const page = await setup({
-      html: `
-                <q2-checkbox checked></q2-checkbox>
-            `,
-    });
+    page = await setupPage('checked');
     const innerCheckbox = await page.find('q2-checkbox >>> input');
     expect(await innerCheckbox.getProperty('checked')).toEqual(true);
     let checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
@@ -192,11 +268,7 @@ describe('q2-checkbox', () => {
     expect(checkboxFill).toBeNull();
   });
   it('handles indeterminate state', async () => {
-    const page = await setup({
-      html: `
-                <q2-checkbox indeterminate></q2-checkbox>
-            `,
-    });
+    page = await setupPage('indeterminate');
     const innerCheckbox = await page.find('q2-checkbox >>> input');
     expect(await innerCheckbox.getProperty('checked')).toEqual(true);
     let checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
@@ -217,11 +289,7 @@ describe('q2-checkbox', () => {
     expect(checkboxFill).toBeNull();
   });
   it('localizes appropriate attribute strings', async () => {
-    const page = await setup({
-      html: `
-                <q2-checkbox></q2-checkbox>
-            `,
-    });
+    page = await setupPage();
     await setTestStrings(page, {
       'q2-checkbox.label': 'Label Text',
       'q2-checkbox.ariaLabel': 'Aria-Label Text',
@@ -238,9 +306,7 @@ describe('q2-checkbox', () => {
   });
   describe('focus transferring', () => {
     it('focuses when focus event dispatched ', async () => {
-      const page = await setup({
-        html: ` <q2-checkbox></q2-checkbox> `,
-      });
+      page = await setupPage();
       await dispatchEvent(page, ['q2-checkbox'], 'focus');
       const innerActiveTestId = async (page) => {
         return page.$eval('q2-checkbox', el => {
@@ -251,9 +317,7 @@ describe('q2-checkbox', () => {
       expect(await innerActiveTestId(page)).toEqual('q2CheckboxInnerCheckBox');
     });
     it('focuses when focus method called ', async () => {
-      const page = await setup({
-        html: ` <q2-checkbox></q2-checkbox> `,
-      });
+      page = await setupPage();
       await dispatchEvent(page, ['q2-checkbox'], 'focus');
       const checkbox = await page.find('q2-checkbox');
       await checkbox.triggerEvent('focus');
@@ -267,37 +331,11 @@ describe('q2-checkbox', () => {
       expect(await innerActiveTestId(page)).toEqual('q2CheckboxInnerCheckBox');
     });
   });
-  describe('when readonly', () => {
-    let page;
-    beforeEach(async () => {
-      page = await setup({
-        html: `<q2-checkbox label="label text" value="1"></q2-checkbox>`,
-      });
-    });
-    it('when readonly, click check icon should not work', async () => {
-      const element = await page.find('q2-checkbox');
-      await element.setProperty('readonly', true);
-      await page.waitForChanges();
-      const checkbox = await page.find('q2-checkbox >>> .checkbox-icon');
-      await checkbox.click();
-      await page.waitForChanges();
-      expect(await element.getProperty('checked')).toBeFalsy();
-    });
-    it('when readonly, click label text should not work', async () => {
-      const element = await page.find('q2-checkbox');
-      await element.setProperty('readonly', true);
-      await page.waitForChanges();
-      const checkLabelText = await page.find('q2-checkbox >>> .label-text');
-      await checkLabelText.click();
-      await page.waitForChanges();
-      expect(await element.getProperty('checked')).toBeFalsy();
-    });
-  });
   describe('Events', () => {
     describe('change', () => {
       describe('when event is added as a property', () => {
         it('does not update checked attribute if preventDefault is called', async () => {
-          const page = await setup({
+          page = await setup({
             html: `
                             <script>
                                 function onClick(event) {
@@ -318,7 +356,7 @@ describe('q2-checkbox', () => {
           expect(changeSpy).not.toHaveReceivedEvent();
         });
         it('does not update checked property if not done in the handler', async () => {
-          const page = await setup({
+          page = await setup({
             html: `
                             <script>
                                 function onChange() {}
@@ -338,7 +376,7 @@ describe('q2-checkbox', () => {
           expect(changeSpy).toHaveReceivedEventDetail({ checked: true, value: 'foo-onchange-dummy' });
         });
         it('updates the checked attribute when done in the handler', async () => {
-          const page = await setup({
+          page = await setup({
             html: `
                         <script>
                             function onChange(event) {
@@ -359,7 +397,7 @@ describe('q2-checkbox', () => {
           expect(changeSpy).toHaveReceivedEventDetail({ checked: true, value: 'foo-onchange-dummy' });
         });
         it('forces the checked attribute to false when done in the handler', async () => {
-          const page = await setup({
+          page = await setup({
             html: `
                         <script>
                             function onChange(event) {
@@ -382,7 +420,7 @@ describe('q2-checkbox', () => {
       });
       describe('when event is added via addEventListener', () => {
         it('mutates the value when event is added via addEventListener but does not call preventDefault', async () => {
-          const page = await setup({
+          page = await setup({
             html: `
                         <q2-checkbox value="foo-onchange-dummy"></q2-checkbox>
                         <script>
@@ -403,7 +441,7 @@ describe('q2-checkbox', () => {
           expect(changeSpy).toHaveReceivedEventDetail({ checked: true, value: 'foo-onchange-dummy' });
         });
         it('does not update checked attribute if preventDefault is called', async () => {
-          const page = await setup({
+          page = await setup({
             html: `
                         <q2-checkbox value="foo-onchange-dummy"></q2-checkbox>
                         <script>
@@ -429,12 +467,7 @@ describe('q2-checkbox', () => {
   });
   describe('Regressions', () => {
     it('applies font-weight to label when CSS property is updated (TCT-2246)', async () => {
-      const page = await setup({
-        html: `
-                    <q2-checkbox label="My Label"></q2-checkbox>
-                `,
-      });
-      await page.waitForChanges();
+      page = await setupPage('label="My Checkbox"');
       const label = await page.find('q2-checkbox >>> .label-text');
       let styledLabel = await label.getComputedStyle();
       expect(styledLabel.fontWeight).toEqual('400');
@@ -449,12 +482,7 @@ describe('q2-checkbox', () => {
   describe('Deprecations', () => {
     it('handles deprecated `ariaLabel` prop', async () => {
       const label = 'My Label';
-      const page = await setup({
-        html: `
-                    <q2-checkbox aria-label="${label}"></q2-checkbox>
-                `,
-      });
-      await page.waitForChanges();
+      page = await setupPage(`aria-label="${label}"`);
       await testDeprecatedAriaLabel(await page.find('q2-checkbox'), label);
       const innerLabel = await page.find('q2-checkbox >>> .label-text');
       expect(innerLabel).toHaveClass('sr');