diff --git a/core/src/components/checkbox/test/checkbox.spec.ts b/core/src/components/checkbox/test/checkbox.spec.ts index e27f0e2a50..31317922fe 100644 --- a/core/src/components/checkbox/test/checkbox.spec.ts +++ b/core/src/components/checkbox/test/checkbox.spec.ts @@ -54,3 +54,4 @@ describe('ion-checkbox: indeterminate', () => { expect(checkbox.getAttribute('aria-checked')).toBe('mixed'); }); }); + diff --git a/core/src/components/toggle/test/toggle.spec.ts b/core/src/components/toggle/test/toggle.spec.ts index ec5c4f2965..b521c83a12 100644 --- a/core/src/components/toggle/test/toggle.spec.ts +++ b/core/src/components/toggle/test/toggle.spec.ts @@ -2,6 +2,7 @@ import { newSpecPage } from '@stencil/core/testing'; import { config } from '../../../global/config'; import { Toggle } from '../toggle'; +import { toggle } from 'ionicons/icons'; describe('toggle', () => { beforeEach(() => { @@ -75,3 +76,33 @@ describe('ion-toggle: disabled', () => { expect(toggle.checked).toBe(false); }); }); + +describe('ion-toggle: required', () => { + it('should have a required attribute in inner input when true', async () => { + const page = await newSpecPage({ + components: [Toggle], + html: ` + Toggle + `, + }); + + const toggle = page.body.querySelector('ion-toggle')!; + const nativeInput = toggle.shadowRoot?.querySelector("input[role=switch]")!; + + expect(nativeInput.hasAttribute('required')).toBeTruthy(); + }); + + it('should not have a required attribute in inner input when false', async () => { + const page = await newSpecPage({ + components: [Toggle], + html: ` + Toggle + `, + }); + + const toggle = page.body.querySelector('ion-toggle')!; + const nativeInput = toggle.shadowRoot?.querySelector("input[role=switch]")!; + + expect(nativeInput.hasAttribute('required')).toBeFalsy(); + }); +});