q2-tecton-elements 1.54.4 → 1.55.0

package/dist/collection/components/q2-checkbox/test/q2-checkbox-test.e2e.js

@@ -1,4 +1,4 @@
-import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getActiveElementTestId, getNestedElementStyle, getListOfStyleCompilationIssues, evaluateA11y, } from "../../../utils/helpers";
+import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getActiveElementTestId, getListOfStyleCompilationIssues, evaluateA11y, } from "../../../utils/helpers";
 describe('q2-checkbox', () => {
     let page;
     let normalStyle;
@@ -216,232 +216,205 @@ describe('q2-checkbox', () => {
             describe('when not set (default)', () => {
                 it('renders the unchecked state', async () => {
                     page = await setupPage();
-                    const labelFontWeight = await getNestedElementStyle(page, ['q2-checkbox', '.label-text label'], 'font-weight');
+                    const label = await (await page.find('q2-checkbox >>> .label-text')).getComputedStyle();
                     const checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
-                    expect(labelFontWeight).toBe('400');
+                    expect(label.fontWeight).toBe('400');
                     expect(checkboxFill).toBeNull();
                 });
-                it('applies necessary styles when hovered', async () => {
-                    page = await setupPage('type="toggle"');
-                    await page.hover('q2-checkbox >>> .toggle-svg');
-                    await page.waitForChanges();
-                    const labelFontWeight = await getNestedElementStyle(page, ['q2-checkbox', '.label-text label'], 'font-weight');
-                    expect(labelFontWeight).toBe('400');
-                });
-                describe('when checked attribute is present', () => {
+                describe('when "checked" attribute is present', () => {
                     it('renders the checked state', async () => {
                         page = await setupPage('checked');
-                        const labelFontWeight = await getNestedElementStyle(page, ['q2-checkbox', '.label-text label'], 'font-weight');
+                        const label = await (await page.find('q2-checkbox >>> .label-text')).getComputedStyle();
                         const checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
-                        expect(labelFontWeight).toBe('600');
+                        expect(label.fontWeight).toBe('600');
                         expect(checkboxFill).toBeTruthy();
                     });
                     it('applies necessary styles when hovered', async () => {
                         page = await setupPage('checked');
                         await page.hover('q2-checkbox >>> .checkbox-fill');
                         await page.waitForChanges();
-                        const labelFontWeight = await getNestedElementStyle(page, ['q2-checkbox', '.label-text label'], 'font-weight');
+                        const label = await (await page.find('q2-checkbox >>> .label-text')).getComputedStyle();
                         const checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
-                        expect(labelFontWeight).toBe('600');
+                        expect(label.fontWeight).toBe('600');
                         expect(checkboxFill).toBeTruthy();
                     });
                     it('renders the unchecked state when checked="false"', async () => {
                         page = await setupPage('checked="false"');
-                        const labelFontWeight = await getNestedElementStyle(page, ['q2-checkbox', '.label-text label'], 'font-weight');
+                        const label = await (await page.find('q2-checkbox >>> .label-text')).getComputedStyle();
                         const checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
-                        expect(labelFontWeight).toBe('400');
+                        expect(label.fontWeight).toBe('400');
                         expect(checkboxFill).toBeNull();
                     });
                 });
             });
-            describe("when set to 'toggle'", () => {
-                const getToggleStyles = async (page) => {
-                    const labelFontWeight = await getNestedElementStyle(page, ['q2-checkbox', '.label-text label'], 'font-weight');
-                    const toggleHoverCircleStrokeWidth = await getNestedElementStyle(page, ['q2-checkbox', '.toggle-hover-circle'], 'stroke-width');
-                    const toggleIndicatorLeft = await getNestedElementStyle(page, ['q2-checkbox', '.toggle-indicator'], 'left');
-                    const toggleSvgOffOpacity = await getNestedElementStyle(page, ['q2-checkbox', '.toggle-svg .off'], 'opacity');
-                    const toggleSvgOnOpacity = await getNestedElementStyle(page, ['q2-checkbox', '.toggle-svg .on'], 'opacity');
-                    return {
-                        labelFontWeight,
-                        toggleIndicatorLeft,
-                        toggleHoverCircleStrokeWidth,
-                        toggleSvgOffOpacity,
-                        toggleSvgOnOpacity,
-                    };
-                };
-                it('renders the unchecked state', async () => {
-                    page = await setupPage('type="toggle"');
-                    const computedStyles = await getToggleStyles(page);
-                    expect(computedStyles.labelFontWeight).toBe('400');
-                    expect(computedStyles.toggleHoverCircleStrokeWidth).toBe('0px');
-                    expect(computedStyles.toggleIndicatorLeft).toBe('0px');
-                    expect(computedStyles.toggleSvgOffOpacity).toBe('1');
-                    expect(computedStyles.toggleSvgOnOpacity).toBe('0');
-                });
-                it('applies necessary styles when hovered', async () => {
-                    page = await setupPage('type="toggle"');
-                    await page.hover('q2-checkbox >>> .toggle-svg');
+            describe('when type is "favorite"', () => {
+                it('renders the star icon for type="favorite"', async () => {
+                    page = await setupPage();
+                    let svg = await page.find('q2-checkbox >>> .checkbox-icon');
+                    expect(svg.tagName).toEqual('svg');
+                    const checkbox = await page.find('q2-checkbox');
+                    checkbox.setProperty('type', 'favorite');
                     await page.waitForChanges();
-                    const computedStyles = await getToggleStyles(page);
-                    expect(computedStyles.labelFontWeight).toBe('400');
-                    expect(computedStyles.toggleHoverCircleStrokeWidth).toBe('10px');
-                    expect(computedStyles.toggleIndicatorLeft).toBe('0px');
-                    expect(computedStyles.toggleSvgOffOpacity).toBe('1');
-                    expect(computedStyles.toggleSvgOnOpacity).toBe('0');
-                });
-                describe('when checked attribute is present', () => {
-                    it('renders the checked state', async () => {
+                    svg = await page.find('q2-checkbox >>> .checkbox-icon');
+                    expect(svg.tagName).toEqual('Q2-ICON');
+                    expect(svg.getAttribute('type')).toEqual('star');
+                });
+            });
+            describe("when type is 'toggle'", () => {
+                it('renders the toggle for type="toggle"', async () => {
+                    page = await setupPage();
+                    let toggleSVG = await page.find('q2-checkbox >>> .toggle-svg-container');
+                    expect(toggleSVG).toBeNull();
+                    const checkbox = await page.find('q2-checkbox');
+                    checkbox.setProperty('type', 'toggle');
+                    await page.waitForChanges();
+                    toggleSVG = await page.find('q2-checkbox >>> .toggle-svg-container');
+                    expect(toggleSVG).not.toBeNull();
+                });
+                describe('"unchecked" toggle styles', () => {
+                    it('sets proper label styles', async () => {
+                        page = await setupPage('type="toggle"');
+                        const labelStyles = await (await page.find('q2-checkbox >>> .label-text')).getComputedStyle();
+                        expect(labelStyles.fontWeight).toBe('400');
+                    });
+                    it('sets proper toggle-svg-container styles', async () => {
+                        page = await setupPage('type="toggle"');
+                        const toggleStyles = await (await page.find('q2-checkbox >>> .toggle-svg-container')).getComputedStyle();
+                        expect(toggleStyles.height).toBe('30px');
+                        expect(toggleStyles.width).toBe('38px');
+                    });
+                    it('sets proper toggle-indicator styles', async () => {
+                        page = await setupPage('type="toggle"');
+                        const toggleIndicator = await (await page.find('q2-checkbox >>> .toggle-indicator')).getComputedStyle();
+                        expect(toggleIndicator.height).toBe('16px');
+                        expect(toggleIndicator.width).toBe('16px');
+                        expect(toggleIndicator.left).toBe('4px');
+                    });
+                    it('sets proper toggle-track styles', async () => {
+                        page = await setupPage('type="toggle"');
+                        const toggleTrack = await (await page.find('q2-checkbox >>> .toggle-track')).getComputedStyle();
+                        expect(toggleTrack.height).toBe('24px');
+                        expect(toggleTrack.width).toBe('38px');
+                        expect(toggleTrack.borderRadius).toBe('12px');
+                        expect(toggleTrack.boxShadow).toBe('rgb(128, 128, 128) 0px 0px 0px 1px inset');
+                    });
+                    it('sets proper toggle-circle styles', async () => {
+                        page = await setupPage('type="toggle"');
+                        const toggleCircle = await (await page.find('q2-checkbox >>> .toggle-circle')).getComputedStyle();
+                        expect(toggleCircle.mask).toBe('url("#xMask")');
+                    });
+                    it('sets proper toggle-icon styles', async () => {
+                        page = await setupPage('type="toggle"');
+                        const toggleIcon = await (await page.find('q2-checkbox >>> .toggle-icon')).getComputedStyle();
+                        expect(toggleIcon.strokeLinecap).toBe('round');
+                        expect(toggleIcon.strokeLinejoin).toBe('round');
+                        expect(toggleIcon.strokeWidth).toBe('2px');
+                        expect(toggleIcon.stroke).toBe('rgb(0, 0, 0)');
+                    });
+                });
+                describe('"checked" toggle styles', () => {
+                    it('sets proper label styles', async () => {
                         page = await setupPage('type="toggle" checked');
-                        const computedStyles = await getToggleStyles(page);
-                        expect(computedStyles.labelFontWeight).toBe('600');
-                        expect(computedStyles.toggleHoverCircleStrokeWidth).toBe('0px');
-                        expect(computedStyles.toggleIndicatorLeft).toBe('21px');
-                        expect(computedStyles.toggleSvgOffOpacity).toBe('0');
-                        expect(computedStyles.toggleSvgOnOpacity).toBe('1');
+                        const label = await (await page.find('q2-checkbox >>> .label-text')).getComputedStyle();
+                        expect(label.fontWeight).toBe('600');
                     });
-                    it('applies necessary styles when hovered', async () => {
+                    it('sets proper toggle-track styles', async () => {
                         page = await setupPage('type="toggle" checked');
-                        await page.hover('q2-checkbox >>> .toggle-svg');
-                        await page.waitForChanges();
-                        const computedStyles = await getToggleStyles(page);
-                        expect(computedStyles.labelFontWeight).toBe('600');
-                        expect(computedStyles.toggleHoverCircleStrokeWidth).toBe('10px');
-                        expect(computedStyles.toggleIndicatorLeft).toBe('21px');
-                        expect(computedStyles.toggleSvgOffOpacity).toBe('0');
-                        expect(computedStyles.toggleSvgOnOpacity).toBe('1');
+                        const toggleTrack = await (await page.find('q2-checkbox >>> .toggle-track')).getComputedStyle();
+                        expect(toggleTrack.border).toBe('0px none rgb(0, 0, 0)');
+                        expect(toggleTrack.fill).toBe('rgb(106, 74, 158)');
                     });
-                    it('renders the unchecked state when checked="false"', async () => {
-                        page = await setupPage('type="toggle" checked="false"');
-                        const computedStyles = await getToggleStyles(page);
-                        expect(computedStyles.labelFontWeight).toBe('400');
-                        expect(computedStyles.toggleHoverCircleStrokeWidth).toBe('0px');
-                        expect(computedStyles.toggleIndicatorLeft).toBe('0px');
-                        expect(computedStyles.toggleSvgOffOpacity).toBe('1');
-                        expect(computedStyles.toggleSvgOnOpacity).toBe('0');
+                    it('sets proper toggle-indicator styles', async () => {
+                        page = await setupPage('type="toggle" checked');
+                        const toggleIndicator = await (await page.find('q2-checkbox >>> .toggle-indicator')).getComputedStyle();
+                        expect(toggleIndicator.left).toBe('18px');
+                    });
+                    it('sets proper toggle-circle styles', async () => {
+                        page = await setupPage('type="toggle" checked');
+                        const toggleCircle = await (await page.find('q2-checkbox >>> .toggle-circle')).getComputedStyle();
+                        expect(toggleCircle.mask).toBe('url("#checkMask")');
+                        expect(toggleCircle.fill).toBe('rgb(255, 255, 255)');
                     });
                 });
             });
         });
-    });
-    it('toggles the checked attribute when clicked', async () => {
-        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');
-        await innerInput.press('Space');
-        await page.waitForChanges();
-        expect(checkbox).toHaveAttribute('checked');
-    });
-    it('allows slotted content', async () => {
-        page = await setup({
-            html: `
-                <q2-checkbox value="1" label="Label">
-                    <p>A yielded label</p>
-                </q2-checkbox>
-            `,
+        describe('checked', () => {
+            it('toggles the checked attribute when clicked', async () => {
+                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');
+                await innerInput.press('Space');
+                await page.waitForChanges();
+                expect(checkbox).toHaveAttribute('checked');
+            });
+            it('handles checked state', async () => {
+                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');
+                expect(checkboxFill).not.toBeNull();
+                expect(checkboxFill).toHaveClass('checked-fill');
+                const checkbox = await page.find('q2-checkbox');
+                checkbox.setProperty('checked', false);
+                await page.waitForChanges();
+                checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
+                expect(checkboxFill).toBeNull();
+            });
         });
-        const { slottedText, slottedTag } = await page.$eval('q2-checkbox', element => {
-            const slottedNode = element.shadowRoot.querySelector('slot').assignedElements()[0];
-            return {
-                slottedText: slottedNode.textContent,
-                slottedTag: slottedNode.localName,
-            };
+        describe('name', () => {
+            it('binds the name property', async () => {
+                page = await setupPage();
+                const innerCheckbox = await page.find('q2-checkbox >>> input');
+                const innerCheckboxId = innerCheckbox.getAttribute('id');
+                expect(innerCheckbox.getAttribute('name')).toEqual(innerCheckboxId);
+                const checkbox = await page.find('q2-checkbox');
+                checkbox.setProperty('name', 'checkboxname');
+                await page.waitForChanges();
+                expect(innerCheckbox.getAttribute('name')).toEqual('checkboxname');
+            });
+        });
+        describe('indeterminate', () => {
+            it('handles indeterminate state', async () => {
+                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');
+                expect(checkboxFill).not.toBeNull();
+                expect(checkboxFill).toHaveClass('indeterminate-fill');
+                const checkbox = await page.find('q2-checkbox');
+                checkbox.setProperty('checked', true);
+                await page.waitForChanges();
+                checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
+                // indeterminance takes precedence over checked
+                expect(checkboxFill).not.toBeNull();
+                expect(checkboxFill).toHaveClass('indeterminate-fill');
+                expect(checkboxFill).not.toHaveClass('checked-fill');
+                checkbox.setProperty('indeterminate', false);
+                checkbox.setProperty('checked', false);
+                await page.waitForChanges();
+                checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
+                expect(checkboxFill).toBeNull();
+            });
         });
-        expect(slottedText).toEqual('A yielded label');
-        expect(slottedTag).toEqual('p');
-    });
-    it('binds aria-label when provided and no label present', async () => {
-        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');
-        expect(labelContent).toEqualText('Aria-Label Text');
-        checkbox.setProperty('label', 'Label Text');
-        checkbox.setProperty('hideLabel', false);
-        await page.waitForChanges();
-        expect(labelContent).not.toHaveClass('sr');
-        expect(labelContent).toEqualText('Label Text');
-    });
-    it('binds the name property', async () => {
-        page = await setupPage();
-        const innerCheckbox = await page.find('q2-checkbox >>> input');
-        const innerCheckboxId = innerCheckbox.getAttribute('id');
-        expect(innerCheckbox.getAttribute('name')).toEqual(innerCheckboxId);
-        const checkbox = await page.find('q2-checkbox');
-        checkbox.setProperty('name', 'checkboxname');
-        await page.waitForChanges();
-        expect(innerCheckbox.getAttribute('name')).toEqual('checkboxname');
-    });
-    it('renders the star icon for type="favorite"', async () => {
-        page = await setupPage();
-        let svg = await page.find('q2-checkbox >>> .checkbox-icon');
-        expect(svg.tagName).toEqual('svg');
-        const checkbox = await page.find('q2-checkbox');
-        checkbox.setProperty('type', 'favorite');
-        await page.waitForChanges();
-        svg = await page.find('q2-checkbox >>> .checkbox-icon');
-        expect(svg.tagName).toEqual('Q2-ICON');
-        expect(svg.getAttribute('type')).toEqual('star');
-    });
-    it('renders the toggle for type="toggle"', async () => {
-        page = await setupPage();
-        let toggleSVG = await page.find('q2-checkbox >>> .toggle-svg');
-        expect(toggleSVG).toBeNull();
-        const checkbox = await page.find('q2-checkbox');
-        checkbox.setProperty('type', 'toggle');
-        await page.waitForChanges();
-        toggleSVG = await page.find('q2-checkbox >>> .toggle-svg');
-        expect(toggleSVG).not.toBeNull();
-    });
-    it('handles checked state', async () => {
-        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');
-        expect(checkboxFill).not.toBeNull();
-        expect(checkboxFill).toHaveClass('checked-fill');
-        const checkbox = await page.find('q2-checkbox');
-        checkbox.setProperty('checked', false);
-        await page.waitForChanges();
-        checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
-        expect(checkboxFill).toBeNull();
-    });
-    it('handles indeterminate state', async () => {
-        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');
-        expect(checkboxFill).not.toBeNull();
-        expect(checkboxFill).toHaveClass('indeterminate-fill');
-        const checkbox = await page.find('q2-checkbox');
-        checkbox.setProperty('checked', true);
-        await page.waitForChanges();
-        checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
-        // indeterminance takes precedence over checked
-        expect(checkboxFill).not.toBeNull();
-        expect(checkboxFill).toHaveClass('indeterminate-fill');
-        expect(checkboxFill).not.toHaveClass('checked-fill');
-        checkbox.setProperty('indeterminate', false);
-        checkbox.setProperty('checked', false);
-        await page.waitForChanges();
-        checkboxFill = await page.find('q2-checkbox >>> .checkbox-fill');
-        expect(checkboxFill).toBeNull();
     });
-    it('localizes appropriate attribute strings', async () => {
-        page = await setupPage();
-        await setTestStrings(page, {
-            'q2-checkbox.label': 'Label Text',
-            'q2-checkbox.ariaLabel': 'Aria-Label Text',
+    describe('Localization', () => {
+        it('localizes appropriate attribute strings', async () => {
+            page = await setupPage();
+            await setTestStrings(page, {
+                'q2-checkbox.label': 'Label Text',
+                'q2-checkbox.ariaLabel': 'Aria-Label Text',
+            });
+            const checkbox = await page.find('q2-checkbox');
+            checkbox.setProperty('ariaLabel', 'q2-checkbox.ariaLabel');
+            await page.waitForChanges();
+            const innerLabel = await page.find('q2-checkbox >>> .label-text');
+            expect(innerLabel).toEqualText('Aria-Label Text');
+            checkbox.setProperty('label', 'q2-checkbox.label');
+            checkbox.setProperty('hideLabel', false);
+            await page.waitForChanges();
+            expect(innerLabel.innerText).toEqual('Label Text');
         });
-        const checkbox = await page.find('q2-checkbox');
-        checkbox.setProperty('ariaLabel', 'q2-checkbox.ariaLabel');
-        await page.waitForChanges();
-        const innerLabel = await page.find('q2-checkbox >>> .label-text');
-        expect(innerLabel).toEqualText('Aria-Label Text');
-        checkbox.setProperty('label', 'q2-checkbox.label');
-        checkbox.setProperty('hideLabel', false);
-        await page.waitForChanges();
-        expect(innerLabel.innerText).toEqual('Label Text');
     });
     describe('focus transferring', () => {
         it('focuses when focus event dispatched ', async () => {
@@ -472,21 +445,34 @@ describe('q2-checkbox', () => {
     });
     describe('Hover behavior', () => {
         describe('checkbox type="toggle" hover state', () => {
-            describe('default behavior', () => {
-                it('hides default outer circle when not hovered', async () => {
-                    page = await setupPage('label="My Checkbox" type="toggle"');
-                    const toggleCircle = await page.find('q2-checkbox >>> .toggle-hover-circle');
-                    normalStyle = await toggleCircle.getComputedStyle();
-                    expect(normalStyle.strokeWidth).toBe('0px');
-                });
-                it('shows default outer circle on hover', async () => {
-                    page = await setupPage('label="My Checkbox" type="toggle"');
-                    const toggleCircle = await page.find('q2-checkbox >>> .toggle-hover-circle');
-                    await page.hover('q2-checkbox');
-                    await page.waitForChanges();
-                    hoverStyle = await toggleCircle.getComputedStyle();
-                    expect(hoverStyle.strokeWidth).toBe('10px');
-                });
+            it('sets proper hover styles when "unchecked"', async () => {
+                page = await setupPage('type="toggle"');
+                await page.hover('q2-checkbox >>> .toggle-svg-container');
+                await page.waitForChanges();
+                const label = await (await page.find('q2-checkbox >>> .label-text')).getComputedStyle();
+                const toggleTrack = await (await page.find('q2-checkbox >>> .toggle-track')).getComputedStyle();
+                const toggleCircle = await (await page.find('q2-checkbox >>> .toggle-circle')).getComputedStyle();
+                const toggleIndicator = await (await page.find('q2-checkbox >>> .toggle-indicator')).getComputedStyle();
+                const boxShadowWidth = toggleTrack.boxShadow.split(' ').find(value => {
+                    return value.endsWith('px') && Number(value.replace('px', ''));
+                });
+                expect(label.fontWeight).toBe('400');
+                expect(toggleCircle.fill).not.toBe('rgb(128, 128, 128)');
+                expect(Number(boxShadowWidth.replace('px', ''))).toBeGreaterThan(1);
+                expect(Math.round(Number(toggleIndicator.height.replace('px', '')))).toBe(18);
+                expect(Math.round(Number(toggleIndicator.width.replace('px', '')))).toBe(18);
+            });
+            it('sets proper hover styles when "checked"', async () => {
+                page = await setupPage('type="toggle" checked');
+                await page.hover('q2-checkbox >>> .toggle-svg-container');
+                await page.waitForChanges();
+                const label = await (await page.find('q2-checkbox >>> .label-text')).getComputedStyle();
+                const toggleTrack = await (await page.find('q2-checkbox >>> .toggle-track')).getComputedStyle();
+                const toggleIndicator = await (await page.find('q2-checkbox >>> .toggle-indicator')).getComputedStyle();
+                expect(label.fontWeight).toBe('600');
+                expect(toggleTrack.fill).not.toBe('rgb(106, 74, 158)');
+                expect(Math.round(Number(toggleIndicator.height.replace('px', '')))).toBe(18);
+                expect(Math.round(Number(toggleIndicator.width.replace('px', '')))).toBe(18);
             });
         });
         describe('default checkbox hover state', () => {
@@ -733,6 +719,26 @@ describe('q2-checkbox', () => {
             });
         });
     });
+    describe('Slots', () => {
+        it('allows slotted content', async () => {
+            page = await setup({
+                html: `
+                <q2-checkbox value="1" label="Label">
+                    <p>A yielded label</p>
+                </q2-checkbox>
+            `,
+            });
+            const { slottedText, slottedTag } = await page.$eval('q2-checkbox', element => {
+                const slottedNode = element.shadowRoot.querySelector('slot').assignedElements()[0];
+                return {
+                    slottedText: slottedNode.textContent,
+                    slottedTag: slottedNode.localName,
+                };
+            });
+            expect(slottedText).toEqual('A yielded label');
+            expect(slottedTag).toEqual('p');
+        });
+    });
     describe('Regressions', () => {
         it('applies font-weight to label when CSS property is updated (TCT-2246)', async () => {
             page = await setupPage('label="My Checkbox"');
@@ -766,7 +772,20 @@ describe('q2-checkbox', () => {
         });
         describe('Accessibility Tree', () => { });
         describe('Keyboard Controls', () => { });
-        describe('Other', () => { });
+        describe('Other', () => {
+            it('binds aria-label when provided and no label present', async () => {
+                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');
+                expect(labelContent).toEqualText('Aria-Label Text');
+                checkbox.setProperty('label', 'Label Text');
+                checkbox.setProperty('hideLabel', false);
+                await page.waitForChanges();
+                expect(labelContent).not.toHaveClass('sr');
+                expect(labelContent).toEqualText('Label Text');
+            });
+        });
     });
 });
 //# sourceMappingURL=q2-checkbox-test.e2e.js.map